chore: update cv style to be pure tailwind

RodolfoSilva · Sep 22, 2024 · ec6bdcf · ec6bdcf
1 parent bbdcaee
commit ec6bdcf
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 141 deletions.
diff --git a/app/components/Timeline.tsx b/app/components/Timeline.tsx
@@ -1,11 +1,10 @@
-import React, { ReactNode } from 'react';
-import styles from './styles.module.css';
+import { ReactNode } from "react";
 
 interface Props {
   children?: ReactNode;
 }
 
 export default function Timeline(props: Props) {
   const { children } = props;
-  return <ul className={styles.timeline}>{children}</ul>;
+  return <ul>{children}</ul>;
 }
diff --git a/app/components/TimelineItem.tsx b/app/components/TimelineItem.tsx
@@ -1,6 +1,5 @@
-import React, { ReactNode } from 'react';
-import styles from './styles.module.css';
-import PeriodFormat from './PeriodFormat';
+import React, { ReactNode } from "react";
+import PeriodFormat from "./PeriodFormat";
 
 interface TimeLineItemProps {
   children?: ReactNode;
@@ -14,17 +13,25 @@ export default function Item(props: TimeLineItemProps) {
   const { title, subTitle, startAt, endAt, children } = props;
 
   return (
-    <li className={styles.timelineItem}>
-      <h2 className={styles.timelineItemTitle}>{title}</h2>
-      {(startAt || endAt) && (
-        <div className={styles.timelineItemPeriod}>
-          <PeriodFormat start={startAt} end={endAt} />
+    <li className="flex group">
+      <div className="before:border-grey-300 grid w-8 pt-5 before:col-span-full before:row-span-full before:-mt-5 before:ml-[7px] before:h-auto isolate before:border-l-2 after:col-span-full after:row-span-full after:mt-[7px] after:block after:border-t-2 before:group-first:mt-0 before:group-last:max-h-6 before:group-only:hidden after:w-full after:border-purple-600">
+        <div className="col-span-full relative z-20 row-span-full w-4 h-4 rounded-full border-2 border-purple-600 bg-white"></div>
+      </div>
+      <div className="mb-6 group-last:mb-0 flex-grow flex flex-col gap-1 border-l-2 border-purple-600 p-4 shadow">
+        <div>
+          <h2 className="text-base font-medium">{title}</h2>
+          <div className="text-xs divide-x flex space-x-2">
+            {(startAt || endAt) && (
+              <div className="inline-block text-xs text-purple-600">
+                <PeriodFormat start={startAt} end={endAt} />
+              </div>
+            )}
+            {subTitle && <div className="first:pl-0 pl-2">{subTitle}</div>}
+          </div>
         </div>
-      )}
-      {subTitle && <div className={styles.timelineItemSmall}>{subTitle}</div>}
-      {children && (
-        <div className={styles.timelineItemDescription}>{children}</div>
-      )}
+
+        {children && <div className="text-sm text-gray-800">{children}</div>}
+      </div>
     </li>
   );
 }
diff --git a/app/components/styles.module.css b/app/components/styles.module.css
diff --git a/app/routes/curriculo.tsx b/app/routes/curriculo.tsx
@@ -1,54 +1,49 @@
-import React from 'react';
+import React from "react";
 // import Layout from '../components/layout';
 // import SEO from '../components/SEO';
-import MyAge from '../components/MyAge';
-import Timeline from '../components/Timeline';
-import Item from '../components/TimelineItem';
+import MyAge from "../components/MyAge";
+import Timeline from "../components/Timeline";
+import Item from "../components/TimelineItem";
 
 export default function CurriculoPage() {
   return (
     <>
-      {/* <SEO
-        title="Currículo"
-        keywords={[
-          'react',
-          'javascript',
-          'python',
-          'resume',
-          'software enginier',
-          'engenheiro de software',
-        ]}
-        description="Graduado em Sistemas da Informação. Atuando como desenvolvedor de Software desde os 14 anos. Atualmente trabalhando como Engenheiro de Software na Agilize Contabilidade Online."
-      /> */}
-      <h1>Rodolfo da Silva Santos</h1>
+      <h1 className="text-xl mt-4">Rodolfo da Silva Santos</h1>
 
-      <div>
+      <div className="text-sm text-gray-700">
         Brasileiro, Casado, <MyAge /> anos Salvador - BA
       </div>
 
       <br />
 
-      <div>
-        <div>
-          <strong>Celular:</strong> <span>+55 71 98366-1106</span>
+      <div className="text-sm grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4">
+        <div className="text-gray-800 font-medium">
+          <strong className="sm:block text-gray-700 font-normal text-xs">
+            Celular:
+          </strong>{" "}
+          +55 71 98366-1106
         </div>
-        <div>
-          <strong>Email:</strong> <span>[email protected]</span>
+        <div className="text-gray-800 font-medium">
+          <strong className="sm:block text-gray-700 font-normal text-xs">
+            Email:
+          </strong>{" "}
+          [email protected]
         </div>
-        <div>
-          <strong>Web:</strong>{' '}
+        <div className="text-gray-800 font-medium">
+          <strong className="sm:block text-gray-700 font-normal text-xs">
+            Web:
+          </strong>{" "}
           <a href="http://rodolfosilva.com">rodolfosilva.com</a>
         </div>
-        <div>
-          <strong>GitHub:</strong>{' '}
+        <div className="text-gray-800 font-medium">
+          <strong className="sm:block text-gray-700 font-normal text-xs">
+            GitHub:
+          </strong>{" "}
           <a href="https://github.com/RodolfoSilva">github.com/RodolfoSilva</a>
         </div>
       </div>
 
-      <h2
-        className="text-xl py-6 border-b border-gray-50"
-        id="formação-acadêmica"
-      >
+      <h2 className="text-lg text-gray-800 mt-8 mb-4" id="formação-acadêmica">
         Formação acadêmica
       </h2>
 
@@ -68,7 +63,7 @@ export default function CurriculoPage() {
       </Timeline>
 
       <h2
-        className="text-xl py-6 border-b border-gray-50"
+        className="text-lg text-gray-800 mt-8 mb-4"
         id="conhecimentos-extracurriculares"
       >
         Conhecimentos extracurriculares
@@ -88,7 +83,7 @@ export default function CurriculoPage() {
       </Timeline>
 
       <h2
-        className="text-xl py-6 border-b border-gray-50"
+        className="text-lg text-gray-800 mt-8 mb-4"
         id="experiência-profissional"
       >
         Experiência profissional

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "esbuild": "^0.24.0",
     "eslint": "^8.38.0",
     "rehype-pretty-code": "^0.14.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.12",
     "typescript": "^5.0.4"
   },
   "engines": {