Move experience to its own page

cesalberca · Jan 8, 2025 · 9561ea5 · 9561ea5
1 parent a2c991e
commit 9561ea5
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@mdx-js/loader": "3.1.0",
     "@mdx-js/react": "3.1.0",
     "@next/mdx": "15.0.3",
+    "@radix-ui/react-avatar": "1.1.2",
     "@radix-ui/react-dropdown-menu": "2.1.2",
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-popover": "1.1.2",
@@ -29,6 +30,7 @@
     "@vercel/speed-insights": "1.1.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "embla-carousel-react": "8.5.2",
     "framer-motion": "11.11.11",
     "lucide-react": "0.456.0",
     "next": "15.0.3",

diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
@@ -0,0 +1,5 @@
+import { ExperiencePage } from '@/features/experience/delivery/experience.page'
+
+export default function Index() {
+  return <ExperiencePage />
+}
diff --git a/src/core/components/navbar/navbar.tsx b/src/core/components/navbar/navbar.tsx
@@ -11,13 +11,13 @@ const Links = () => {
   const t = useTranslations()
   return (
     <>
-      <NavLink to={'#projects'}>{t('home.projects.title')}</NavLink>
-      <NavLink to={'#services'}>{t('home.services.title')}</NavLink>
-      <NavLink to={'#experience'}>{t('home.experience.title')}</NavLink>
+      <NavLink to={'/#projects'}>{t('home.projects.title')}</NavLink>
+      <NavLink to={'/#services'}>{t('home.services.title')}</NavLink>
+      <NavLink to={'/experience'}>{t('experience.title')}</NavLink>
       <NavLink to={'/blog'}>{t('blog.title')}</NavLink>
       <NavLink to={'/talks'}>{t('talks.title')}</NavLink>
-      <NavLink to={'#testimonials'}>{t('home.testimonials.title')}</NavLink>
-      <NavLink to={'#contact'}>{t('home.contact.title')}</NavLink>
+      <NavLink to={'/#testimonials'}>{t('home.testimonials.title')}</NavLink>
+      <NavLink to={'/#contact'}>{t('home.contact.title')}</NavLink>
     </>
   )
 }

diff --git a/src/core/i18n/translations/en.json b/src/core/i18n/translations/en.json
@@ -58,55 +58,6 @@
       "archimedesJsDescription": "A **TypeScript** library I created that helps you create robust applications by leveraging use cases. It helps you create **modular architectures** following **hexagonal** and **domain-driven design** principles.",
       "moreProjects": "You can also [check out my Github](https://github.com/cesalberca/), where I have more than 70 open source projects."
     },
-    "experience": {
-      "title": "Journey",
-      "cv": "Download full resume.",
-      "freelancer": {
-        "title": "Freelancer",
-        "dates": "2024 - Currently",
-        "description": "**Workshops**, **mentorship** and **consultancy** for best practices oriented projects, with a focus in **architecture**, **testing** and **design patterns** of frontend applications."
-      },
-      "writer": {
-        "title": "Book writer",
-        "dates": "2023 - Currently",
-        "description": "I'm writing a book about **Comedy** and **Front-end Software Development**. It will be published in Spanish by [Savvily Editorial](https://savvily.es/) later this year."
-      },
-      "autentia": {
-        "title": "Autentia",
-        "dates": "2017 - 2024",
-        "description": "* **Front-end Architect Lead**. I designed and implemented **Design Systems** in different frameworks, **modular architectures** following **Hexagonal** and **Domain Driven Design** principles and created robust **Testing Strategies**.\n* **Software developer** of different stacks, including JavaScript, TypeScript, Angular, Vue and React.\n* **Open Source Developer**: Created an [architectural framework](https://www.archimedesfw.io/docs/js/) in TypeScript that makes your application more robust by leveraging use cases.\n* **Teacher**: I've given more than a hundred talks and workshops of different technologies, such as: JavaScript, TypeScript, Vue, Angular, React, testing, CSS, architecture, good practices and more.\n* **Onboarding Link**: I was part of designing the Front-end onboarding process in the company. I interviewed potential coworkers.\n* **Mentor**: I’ve been a mentor for the most junior members of the company and had 1:1 where we would set goals and track them.\n* **Interviewer**: I interviewed prominent tech people for the [company’s YouTube channel](https://www.youtube.com/watch?v=iThFgLmD96E&list=PLKxa4AIfm4pVyeMpU0QkV4gzaFDaa_RFW&index=10)."
-      },
-      "codemotionAmbassador": {
-        "title": "Codemotion Ambassador",
-        "dates": "2022 - Currently",
-        "description": "Represent [Codemotion's](https://www.codemotion.com/) values and help the community grow as part of its [ambassadors program](https://community-en.codemotion.it/community/ambassador-program)."
-      },
-      "codemotion": {
-        "title": "Codemotion Madrid Committee Member",
-        "dates": "2019 - Currently",
-        "description": "**Contact speakers**, **review the C4P** and **design the event agenda** for one of the **biggest tech events** in Spain: [Codemotion Madrid](https://conferences.codemotion.com/madrid2024/en/home/)."
-      },
-      "cice": {
-        "title": "Full Stack Development Masters Teacher at CICE",
-        "dates": "2020 - 2021",
-        "description": "Designed the lessons from scratch, taught the students, and evaluated their progress. I taught **Web Development** with React. **Testing**, **Architecture** and **Good Practices** were a focal point of the lessons. Here you can check the [open curriculum](https://github.com/cice-classroom/cice-playground)."
-      },
-      "escuelaIt": {
-        "title": "Front-end Development Teacher at EscuelaIT",
-        "dates": "Sporadic",
-        "description": "**Trainer** for the following courses: [Deno](https://escuela.it/cursos/curso-de-deno), [TypeScript](https://escuela.it/cursos/curso-typescript), [React](https://escuela.it/cursos/curso-desarrollo-aplicaciones-spa-react) and [Advanced JavaScript](https://escuela.it/cursos/curso-avanzado-javascript)."
-      },
-      "pensemos": {
-        "title": "Pensemos",
-        "dates": "2016 - 2017",
-        "description": "**Web Developer** for multiple small businesses using **CMSs**. Self-taught in React, I created a SPA using React and Firebase without any prior experience."
-      },
-      "comercialTalk": {
-        "title": "Comercial Talk",
-        "dates": "2013 - 2015",
-        "description": "Self-taught **Graphic Designer** using **Photoshop** and **Illustrator**. I designed posters, flyers, business cards and the visual identity."
-      }
-    },
     "services": {
       "title": "Services",
       "description": "I have over **10 years** of experience in **Front-end Development**. I've deployed to production full-fledged enterprise web applications using **React**, **Angular** and **Vue**.",
@@ -134,6 +85,55 @@
       "sent": "Thanks for contacting me!"
     }
   },
+  "experience": {
+    "title": "Journey",
+    "cv": "Download full resume.",
+    "freelancer": {
+      "title": "Freelancer",
+      "dates": "2024 - Currently",
+      "description": "**Workshops**, **mentorship** and **consultancy** for best practices oriented projects, with a focus in **architecture**, **testing** and **design patterns** of frontend applications."
+    },
+    "writer": {
+      "title": "Book writer",
+      "dates": "2023 - Currently",
+      "description": "I'm writing a book about **Comedy** and **Front-end Software Development**. It will be published in Spanish by [Savvily Editorial](https://savvily.es/) later this year."
+    },
+    "autentia": {
+      "title": "Autentia",
+      "dates": "2017 - 2024",
+      "description": "* **Front-end Architect Lead**. I designed and implemented **Design Systems** in different frameworks, **modular architectures** following **Hexagonal** and **Domain Driven Design** principles and created robust **Testing Strategies**.\n* **Software developer** of different stacks, including JavaScript, TypeScript, Angular, Vue and React.\n* **Open Source Developer**: Created an [architectural framework](https://www.archimedesfw.io/docs/js/) in TypeScript that makes your application more robust by leveraging use cases.\n* **Teacher**: I've given more than a hundred talks and workshops of different technologies, such as: JavaScript, TypeScript, Vue, Angular, React, testing, CSS, architecture, good practices and more.\n* **Onboarding Link**: I was part of designing the Front-end onboarding process in the company. I interviewed potential coworkers.\n* **Mentor**: I’ve been a mentor for the most junior members of the company and had 1:1 where we would set goals and track them.\n* **Interviewer**: I interviewed prominent tech people for the [company’s YouTube channel](https://www.youtube.com/watch?v=iThFgLmD96E&list=PLKxa4AIfm4pVyeMpU0QkV4gzaFDaa_RFW&index=10)."
+    },
+    "codemotionAmbassador": {
+      "title": "Codemotion Ambassador",
+      "dates": "2022 - Currently",
+      "description": "Represent [Codemotion's](https://www.codemotion.com/) values and help the community grow as part of its [ambassadors program](https://community-en.codemotion.it/community/ambassador-program)."
+    },
+    "codemotion": {
+      "title": "Codemotion Madrid Committee Member",
+      "dates": "2019 - Currently",
+      "description": "**Contact speakers**, **review the C4P** and **design the event agenda** for one of the **biggest tech events** in Spain: [Codemotion Madrid](https://conferences.codemotion.com/madrid2024/en/home/)."
+    },
+    "cice": {
+      "title": "Full Stack Development Masters Teacher at CICE",
+      "dates": "2020 - 2021",
+      "description": "Designed the lessons from scratch, taught the students, and evaluated their progress. I taught **Web Development** with React. **Testing**, **Architecture** and **Good Practices** were a focal point of the lessons. Here you can check the [open curriculum](https://github.com/cice-classroom/cice-playground)."
+    },
+    "escuelaIt": {
+      "title": "Front-end Development Teacher at EscuelaIT",
+      "dates": "Sporadic",
+      "description": "**Trainer** for the following courses: [Deno](https://escuela.it/cursos/curso-de-deno), [TypeScript](https://escuela.it/cursos/curso-typescript), [React](https://escuela.it/cursos/curso-desarrollo-aplicaciones-spa-react) and [Advanced JavaScript](https://escuela.it/cursos/curso-avanzado-javascript)."
+    },
+    "pensemos": {
+      "title": "Pensemos",
+      "dates": "2016 - 2017",
+      "description": "**Web Developer** for multiple small businesses using **CMSs**. Self-taught in React, I created a SPA using React and Firebase without any prior experience."
+    },
+    "comercialTalk": {
+      "title": "Comercial Talk",
+      "dates": "2013 - 2015",
+      "description": "Self-taught **Graphic Designer** using **Photoshop** and **Illustrator**. I designed posters, flyers, business cards and the visual identity."
+    }
+  },
   "article": {
     "title": "Articles",
     "shareArticle": "Share article",

diff --git a/src/features/experience/delivery/experience.page.tsx b/src/features/experience/delivery/experience.page.tsx
@@ -0,0 +1,19 @@
+import { type FC } from 'react'
+import { Experience } from '@/features/home/delivery/experience'
+import { useTranslations } from 'next-intl'
+import { AccentText } from '@/core/components/accent-text/accent-text'
+import { Page } from '@/core/components/page/page'
+
+export const ExperiencePage: FC = () => {
+  const t = useTranslations()
+  return (
+    <Page>
+      <div className="wrapper">
+        <h1 className="my-m">
+          <AccentText>{t('experience.title')}</AccentText>
+        </h1>
+        <Experience />
+      </div>
+    </Page>
+  )
+}