feat: replaced lorem ipsum with real texts

src/components/ExpandableHoloJobCard.tsx

@@ -11,9 +11,11 @@ import holocardLogoPatternSvg from "../assets/svg/holocard-logo-pattern.svg?raw"
 
 export function ExpandableHoloJobCard({
 	animation,
+	bullet,
 	listClassName,
 }: {
 	animation?: React.ReactNode;
+	bullet?: React.ReactNode;
 	listClassName?: string;
 }) {
   const [active, setActive] = useState<(typeof cards)[number] | boolean | null>(
@@ -98,37 +100,40 @@ export function ExpandableHoloJobCard({
                     </motion.h3>
 										<motion.p
 											layoutId={`role-${active.id}-${id}`}
-											className="text-neutral-600 dark:text-neutral-400 text-base"
+											className="text-primary/50 text-base"
 										>
 											{active.role}
 										</motion.p>
                     <motion.p
                       layoutId={`timeperiod-${active.id}-${id}`}
-                      className="text-neutral-600 dark:text-neutral-400 text-base text-xs"
+                      className="text-primary/50 text-base text-xs"
                     >
                       {active.timePeriod}
                     </motion.p>
                   </div>
                 </div>
 								<div className="p-4 px-6">
-									<motion.div layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex gap-1">
+									<motion.div layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex gap-1 gap-y-2 flex-wrap">
 										{active.badges.map((badge, index) => (
 											<span key={index} className="text-xs bg-foreground text-background px-2 py-1 rounded-full mr-2">{badge}</span>
 										))}
 									</motion.div>
 								</div>
                 <div className="pt-4 relative px-6 flex-1">
-                  <motion.div
+                  <motion.ul
                     layout
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="flex-1 text-foreground/50 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-10 flex flex-col items-start gap-4"
+                    className="flex-1 text-foreground/60 text-xs md:text-sm h-40 md:h-fit pb-10 flex flex-col items-start gap-4"
                   >
                     {active.paragraphs.map((paragraph, index) => (
-											<p key={index}>{paragraph}</p>
+											<div className="flex items-start gap-2" key={index}>
+												{bullet}
+												<li className="flex-1">{paragraph}</li>
+											</div>
 										))}
-                  </motion.div>
+                  </motion.ul>
                 </div>
               </div>
             </motion.div>
@@ -206,57 +211,56 @@ const cards = [
 		title: "Gabinsoft",
 		timePeriod: "2022 - present",
 		svg: gabinsoftSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["TypeScript", "Go", "React", "React Native", "HTML/CSS", "Docker", "Kubernetes", "SQL", "RabbitMQ", "Redis", "NodeJS", "Google Cloud", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Drove the creation of the platform based on the foundations of Calmavity, which included the development of the backend and frontend technologies.",
+			"Reimplemented the psychologist's platform with the updated requirements of our new business model, which included the development of new features and the improvement of existing ones.",
+			"Developed a landing page for the platform, focusing on the design, SEO, and performance of the website.",
+			"Migrated critical and heavy processes to Go, which allowed us to improve the performance and scalability of the platform.",
 		],
   },
   {
 		id: 2,
 		title: "Me Asesoran",
 		timePeriod: "sep. 2020 - present",
 		svg: measesoranSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["PHP", "Laravel", "React", "TypeScript", "HTML/CSS", "Docker", "Kubernetes", "PostgreSQL", "RabbitMQ", "NodeJS", "AWS", "Git"],
+		role: "Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Developed a variety of features for the platform, which included the development of backend and frontend technologies for thousands of users.",
+			"Worked alongside the product team to develop new features and improve existing ones",
+			"Drove the migration of the main platform to a new architecture, which included developing new processes and rewriting our monolithic application into a microservices architecture, allowing us to create a more scalable and reliable platform. In this process, we implemented concepts such as event-driven architecture, CQRS, and DDD. This allowed us to scale the platform and develop new features faster.",
+			"Drove the development of Me Asesoran Rentas, a new product that allowed users to easily submit their tax returns to the government. This included the development of a backend and frontend, the integration with the Spain government's API and authentication system, and the development of a variety of features related to the validation and submission of tax returns by fiscal advisors.",
 		],
   },
   {
 		id: 3,
 		title: "Calmavity",
 		timePeriod: "2019 - 2022",
 		svg: calmavitySvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["TypeScript", "React", "React Native", "HTML/CSS", "Docker", "Kubernetes", "MongoDB", "NodeJS", "AWS", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Drove the development of the full stack of the platform, including the architecture, design, and implementation of the backend and frontend technologies.",
+			"Developed a mobile application for iOS and Android using React Native, which included features such as user authentication, push notifications, real-time chat, and video calls, among others.",
+			"Developed two web application using React, which included the features of the mobile application",
+			"Developed a backend using NodeJS and MongoDB, with support for the features needed by the mobile and web applications.",
+			"Deployed the platform on AWS using Docker and Kubernetes, which allowed for a scalable and reliable infrastructure. This was a little overkill for the size of the project, but I did it primarily to learn how to use these technologies.",
+
 		],
   },
 	{
 		id: 4,
 		title: "Nodelix",
 		timePeriod: "2019 - present",
 		svg: nodelixSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["Python", "Django", "ML", "TensorFlow", "OCR", "AWS", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Deliver scalable and reliable ML solutions to clients in the fiscal sector, including OCR and data extraction tools. Focused on the development of computer vision and machine learning models.",
+			"Developed a custom OCR solution for a client in the fiscal sector, which included a pipeline for data processing, extraction, and indexing. The solution was able to process and extract data in real time from multiple types of documents, including invoices, receipts, and contracts.",
+			"Worked side by side with clients to understand their needs and requirements, and to deliver a solution that met their expectations.",
 		],
   },
 ]

src/components/Header.astro

@@ -15,7 +15,7 @@ const links = [
     { href: "/#about", text: "About" },
     { href: "/#jobs", text: "Experience" },
     { href: "/#projects", text: "Work" },
-    { href: "/blog", text: "Blog" },
+    // { href: "/blog", text: "Blog" },
     { href: "/resume.pdf", text: "Resume", external: true },
 ];
 ---

src/sections/About.astro

@@ -7,6 +7,7 @@ import { Icon } from "astro-icon/components";
 import { Particles } from "../components/Particles";
 import { Image } from "astro:assets";
 import profileImage from "../assets/profile.webp";
+import nameToSpeech from "../assets/name-to-speech.mp3";
 ---
 
 <script>
@@ -72,37 +73,50 @@ import profileImage from "../assets/profile.webp";
                     class="inline flex-1 w-fit translate-y-1 border-primary"
                 />
             </div>
+            <audio id="name-to-speech-audio" src={nameToSpeech} class="hidden"
+            ></audio>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50 mt-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                id lorem a eros rutrum finibus. Donec rhoncus turpis quis
-                lacinia varius. Fusce sagittis at justo eu molestie. Fusce
-                bibendum, quam fringilla tincidunt luctus, enim orci iaculis
-                ipsum, id auctor dolor erat ac sem. Cras cursus leo vel mollis
-                rhoncus. Praesent ac ultricies eros, id vestibulum est.
-                Suspendisse eros eros, pretium ac leo nec, malesuada fermentum
-                diam. Donec quam velit, efficitur non enim non, elementum
-                euismod tortor.
+                Hey there! My name is <button
+                    onclick="document.getElementById('name-to-speech-audio').play()"
+                    class="cursor-pointer hover:text-primary/60 hover:underline"
+                    area-label="Check pronunciation"
+                    ><strong>Rubén Buzón</strong><Icon
+                        name="tabler:volume-2"
+                        class="inline transform -translate-y-1 translate-x-[1px]"
+                    /></button
+                >
+
+                and I'm a software engineer based in Madrid, Spain. I'm
+                passionate about technology and science in general. I started
+                programming when I was 14 because I've always loved video games
+                and I wanted to know how software was made. Since then, I've
+                been learning and improving my skills to become a better
+                developer.
             </p>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                id lorem a eros rutrum finibus. Donec rhoncus turpis quis
-                lacinia varius. Fusce sagittis at justo eu molestie. Fusce
-                bibendum, quam fringilla tincidunt luctus, enim orci iaculis
-                ipsum, id auctor dolor erat ac sem.
+                I truly believe that technology, specially software, can change
+                the world for the better. That's why I'm always looking for new
+                opportunities to work on projects that can make a difference,
+                and why I put so much effort, care and passion into my work
+                (like this website!).
             </p>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50">
-                Things I am interested in:
+                I would describe myself as a full-stack developer with
+                experience in a wide range of technologies, but I'm always
+                looking to learn new things and improve my skills. Some of the
+                things I'm good at are:
             </p>
             <ul
                 class="mt-4 md:max-w-lg leading-normal text-foreground/50 grid grid-cols-2"
             >
                 {
                     [
                         "Web development",
+                        "Backend development",
                         "UI/UX design",
+                        "Sofware architecture",
                         "Mobile development",
-                        "Backend development",
-                        "Machine learning",
+                        "ML/AI",
                     ].map((item) => (
                         <li class="relative group text-primary mt-2 ml-2 flex items-center">
                             <Icon

src/sections/Hero.astro

@@ -21,8 +21,8 @@ import Anchor from "../components/Anchor.astro";
         </p>
         <p class="mt-4 max-w-lg leading-normal text-foreground/50 md:text-lg">
             I'm a Full-Stack engineer with a passion for building high-quality
-            software. I have experience in both frontend and backend
-            technologies, and I'm always looking for new challenges.
+            and scalable software. I have experience in both frontend and
+            backend technologies, and I'm always looking for new challenges.
         </p>
         <div class="flex gap-4 mt-8">
             <Anchor size="default" href={mailUrl} target="_blank">

src/sections/Jobs.astro

@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components";
 import ConicHeader from "../components/ConicHeader.astro";
 import { ExpandableHoloJobCard } from "../components/ExpandableHoloJobCard";
 import { Globe } from "../components/Globe";
@@ -50,14 +51,15 @@ import Separator from "../components/Separator.astro";
             />
         </div>
         <p class="mt-8 self-center text-center text-foreground/50 max-w-lg">
-            Click on the cards to learn more about the places I have worked at
-            and the projects I have been involved in.
+            Click on the cards below to learn more about the places I've worked
+            at, and a little bit about what I did there.
         </p>
         <ExpandableHoloJobCard
             client:visible
             listClassName="grid justify-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-24 w-fit self-center"
         >
             <MeteorAnimation slot="animation" />
+            <Icon name="tabler:chevron-right" slot="bullet" class="mt-1" />
         </ExpandableHoloJobCard>
     </Section>
 </div>