Improve writing

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;
   }

src/core/components/open-to-work/circle-text.tsx

@@ -12,23 +12,12 @@ export const CircleText: React.FC<Props> = ({ text }) => {
     <div className="flex justify-center items-center">
       <div className="relative w-28 h-28 flex justify-center items-center">
         <motion.div
-          className="absolute inset-0 flex items-center justify-center"
+          className="absolute inset-0 flex items-center justify-center backdrop-blur rounded-full"
           animate={{ rotate: 360 }}
           transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
           style={{ transformOrigin: 'center' }}
         >
-          <svg
-            width="244"
-            height="243"
-            viewBox="0 0 244 243"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="text-current"
-          >
-            <path
-              d="M21.2528 99.8237C23.5404 100.072 25.4725 100.701 27.0489 101.708C28.6254 102.715 29.7872 103.988 30.5343 105.527C31.2814 107.065 31.5544 108.76 31.3532 110.61C31.152 112.46 30.5212 114.056 29.4608 115.398C28.4004 116.74 26.9921 117.733 25.236 118.378C..."
-              fill="currentColor"
-            />
+          <svg width="244" height="243" viewBox="0 0 244 243" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M21.2528 99.8237C23.5404 100.072 25.4725 100.701 27.0489 101.708C28.6254 102.715 29.7872 103.988 30.5343 105.527C31.2814 107.065 31.5544 108.76 31.3532 110.61C31.152 112.46 30.5212 114.056 29.4608 115.398C28.4004 116.74 26.9921 117.733 25.236 118.378C23.4798 119.023 21.4579 119.221 19.1703 118.972C16.8826 118.723 14.9506 118.095 13.3741 117.088C11.7976 116.081 10.6358 114.808 9.88871 113.269C9.1416 111.73 8.86864 110.036 9.06983 108.186C9.27101 106.336 9.90181 104.74 10.9622 103.398C12.0226 102.056 13.4309 101.063 15.1871 100.418C16.9432 99.7729 18.9651 99.5749 21.2528 99.8237ZM20.9763 102.366C19.0982 102.161 17.4789 102.303 16.1185 102.791C14.7588 103.272 13.6891 104.009 12.9095 105.003C12.1306 105.99 11.6698 107.14 11.5269 108.453C11.3841 109.767 11.5866 110.993 12.1343 112.131C12.6828 113.262 13.569 114.212 14.7927 114.981C16.0172 115.743 17.5686 116.226 19.4467 116.43C21.3248 116.635 22.9437 116.496 24.3034 116.015C25.6638 115.528 26.7335 114.79 27.5124 113.803C28.292 112.809 28.7533 111.656 28.8961 110.342C29.0389 109.029 28.8361 107.807 28.2876 106.676C27.7398 105.537 26.8537 104.587 25.6292 103.825C24.4054 103.056 22.8545 102.57 20.9763 102.366Z"
               fill="currentColor"

src/core/components/social-media/social-media.tsx

@@ -4,11 +4,11 @@ import Link from 'next/link'
 
 export const SocialMedia: FC = () => {
   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 },
   ]
 

src/core/i18n/translations/en.json

@@ -30,7 +30,7 @@
       "podcastHost": "Podcast Host"
     },
     "heroCaption": "Passionate about <strong>learning</strong> and <strong>sharing</strong>.",
-    "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",

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 (
     <div>
+      <p
+        className="
+      mb-m"
+      >
+        {t('home.contact.appointmentDescription')}{' '}
+        <Link to="https://calendar.app.google/KvZAYd9okNjiY7iBA">{t('home.contact.appointmentLink')}</Link>
+      </p>
       {form.formState.isSubmitSuccessful ? (
         <h2>{t('home.contact.sent')}</h2>
       ) : (