diff --git a/public/assets/icons/lit.svg b/public/assets/icons/lit.svg index 2f1baa3..671eee5 100644 --- a/public/assets/icons/lit.svg +++ b/public/assets/icons/lit.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/icons/typescript.svg b/public/assets/icons/typescript.svg index 11752b8..5bfd09e 100644 --- a/public/assets/icons/typescript.svg +++ b/public/assets/icons/typescript.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/images/open-to-work.svg b/public/assets/images/open-to-work.svg index af0189d..ece5c20 100644 --- a/public/assets/images/open-to-work.svg +++ b/public/assets/images/open-to-work.svg @@ -1,5 +1,5 @@ - + diff --git a/src/app/globals.css b/src/app/globals.css index fe5347d..9d11d74 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -106,6 +106,10 @@ html { @apply text-lg; } + p { + @apply text-base; + } + .wrapper { @apply mx-4 md:mx-auto md:max-w-screen-sm; } diff --git a/src/core/components/open-to-work/circle-text.tsx b/src/core/components/open-to-work/circle-text.tsx index 769cb71..941d28b 100644 --- a/src/core/components/open-to-work/circle-text.tsx +++ b/src/core/components/open-to-work/circle-text.tsx @@ -12,23 +12,12 @@ export const CircleText: React.FC = ({ text }) => {
- - + { const socialMedia = [ - { name: 'Instagram', url: 'https://instagram.com/cesalberca', icon: SiInstagram }, { name: 'LinkedIn', url: 'https://www.linkedin.com/in/cesalberca', icon: SiLinkedin }, + { name: 'GitHub', url: 'https://github.com/cesalberca', icon: SiGithub }, { name: 'StackOverflow', url: 'https://stackoverflow.com/users/6475656/césar-alberca', icon: SiStackoverflow }, { name: 'X', url: 'https://x.com/cesalberca', icon: SiX }, - { name: 'GitHub', url: 'https://github.com/cesalberca', icon: SiGithub }, + { name: 'Instagram', url: 'https://instagram.com/cesalberca', icon: SiInstagram }, { name: 'YouTube', url: 'https://www.youtube.com/@cesalberca', icon: SiYoutube }, ] diff --git a/src/core/i18n/translations/en.json b/src/core/i18n/translations/en.json index 22ebd56..cdce566 100644 --- a/src/core/i18n/translations/en.json +++ b/src/core/i18n/translations/en.json @@ -30,7 +30,7 @@ "podcastHost": "Podcast Host" }, "heroCaption": "Passionate about learning and sharing.", - "whoAmI": "**Senior Frontend Architect** & **Software Crafter** from Spain. Freelancer _obsessed_ with **best practices**, **architecture** and **testing**.\n\nAs an [international speaker](https://www.cesalberca.com/talks) and Digital Nomad, I share my tech adventures around the world.\n\n Active in the [Codemotion](https://www.codemotion.com/) community as a committee member and [ambassador](https://community-en.codemotion.it/community/ambassador-program).", + "whoAmI": "**Senior Frontend Architect** & **Software Crafter** from Spain with over **10 years of experience**. Freelancer _obsessed_ with **best practices**, **architecture** and **testing**.\n\nAs an [international speaker](https://www.cesalberca.com/talks) and Digital Nomad. I share my tech adventures around the world. Active in the [Codemotion](https://www.codemotion.com/) community as a committee member and [ambassador](https://community-en.codemotion.it/community/ambassador-program). Host of [Colivers Club Podcast](https://coliversclub.com/).", "projects": { "title": "Projects", "description": "I love to create projects to learn new technologies and to share knowledge. Here are some of the projects I've created.", @@ -49,37 +49,47 @@ "freelancer": { "title": "Freelancer", "dates": "2024 - Currently", - "description": "Branding, client outreach, project management, and development of frontend applications for multiple clients." + "description": "**Workshops**, **mentorship** and **consultancy** for best practises 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.\n* Trainer in different technologies, such as: JavaScript, TypeScript, Vue, Angular, React, testing, CSS, architecture, good practices and more.\n* Onboarding: I was part of designing the frontend onboarding process in the company\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)" + "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 it's [ambassadors program](https://community-en.codemotion.it/community/ambassador-program)." }, "codemotion": { - "title": "Codemotion Committee Member", + "title": "Codemotion Madrid Committee Member", "dates": "2019 - Currently", - "description": "Help contact speakers and design the event agenda. Participate in different webinars about different technologies." + "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 curriculum, teach the students, and evaluate their progress. I taught HTML, CSS, JavaScript, TypeScript, React, NextJS, testing, architecture, good practices, and more. Here you can check the [open curriculum](https://github.com/cice-classroom/cice-playground)." + "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": "Frontend 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)." + "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 with Wordpress and React." + "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": "Graphic designer and web developer. Poster, flyers, business cards and visual identity." + "description": "Self-taught **Graphic Designer** using **Photoshop** and **Illustrator**. I designed posters, flyers, business cards and the visual identity." } }, "services": { @@ -94,6 +104,8 @@ }, "contact": { "title": "Contact", + "appointmentDescription": "Would you rather jump on a quick call to discuss your business needs?", + "appointmentLink": "Book an appointment here", "name": "Name", "email": "Email", "emailPlaceholder": "you@example.com", diff --git a/src/features/home/ui/contact.tsx b/src/features/home/ui/contact.tsx index 830f89e..163c380 100644 --- a/src/features/home/ui/contact.tsx +++ b/src/features/home/ui/contact.tsx @@ -11,6 +11,7 @@ import { Textarea } from '@/components/ui/textarea' import { useSubmit } from '@formspree/react' import { useTranslations } from 'next-intl' import type { FC } from 'react' +import { Link } from '@/core/components/link/link' const formSchema = z.object({ email: z.string().email({ message: 'Invalid email address.' }), @@ -57,6 +58,13 @@ export const ContactForm: FC = () => { return (
+

+ {t('home.contact.appointmentDescription')}{' '} + {t('home.contact.appointmentLink')} +

{form.formState.isSubmitSuccessful ? (

{t('home.contact.sent')}

) : ( diff --git a/src/features/home/ui/experience.tsx b/src/features/home/ui/experience.tsx index 1ae2308..7a0a98c 100644 --- a/src/features/home/ui/experience.tsx +++ b/src/features/home/ui/experience.tsx @@ -16,6 +16,16 @@ export const Experience: FC = () => { dates: t('home.experience.autentia.dates'), description: t('home.experience.autentia.description'), }, + { + title: t('home.experience.writer.title'), + dates: t('home.experience.writer.dates'), + description: t('home.experience.writer.description'), + }, + { + title: t('home.experience.codemotionAmbassador.title'), + dates: t('home.experience.codemotionAmbassador.dates'), + description: t('home.experience.codemotionAmbassador.description'), + }, { title: t('home.experience.codemotion.title'), dates: t('home.experience.codemotion.dates'),