refactor resume page

src/components/Menu.astro

@@ -1,6 +1,6 @@
 ---
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHouse, faUser, faBlog, faEnvelope, faCode, faFileLines } from '@fortawesome/free-solid-svg-icons'
+import { faBlog, faCode, faFileLines } from '@fortawesome/free-solid-svg-icons'
 ---
 <ul class="flex flex-col gap-4">
     <li>

src/components/resume/Certifications.md

@@ -0,0 +1,8 @@
+---
+---
+
+## Certifications
+
+- AWS Certified Cloud Practitioner — J3W7057DJERE1WSZ
+- AWS Certified Solutions Architect: Associate — MMWL2GE2WEBEQH58
+- AWS Certified Developer: Associate — MEGK0X01XNREQCWW

src/components/resume/Header.md

@@ -0,0 +1,6 @@
+---
+---
+
+# Yelsin Tomas Sepulveda
+
+### **Software Engineer | Cloud DevOps**  

src/components/resume/Personal_Projects.md

@@ -0,0 +1,12 @@
+---
+---
+
+## Personal Projects
+
+### Open Source Contributor — KDE (2025)
+- Contributions to **Angelfish**, **KWin**, and **Plasma Desktop**
+  *Technologies:* C++, Qt, CMake
+
+### Retrodex Miyoo — Pokédex App (2024)
+- Pokédex application for **Onion-OS** on gaming handhelds using the `miyoomini-toolchain`
+  *Technologies:* C++, SDL, CMake

src/markdown/resume.md → src/components/resume/Professional_Experience.md

@@ -1,23 +1,6 @@
 ---
-title: Resume
 ---
 
-
-<div class="text-center">
-
-# Yelsin Tomas Sepulveda
-
-### **Software Engineer | Cloud DevOps**  
-
-</div>
-
-<i class="fa-solid fa-envelope"></i>
-<a href="mailto:YelsinSepulveda@gmail.com">YelsinSepulveda@gmail.com</a> ·
-<i class="fa-brands fa-github"></i> GitHub ·
-<i class="fa-brands fa-gitlab"></i> GitLab ·
-<i class="fa-brands fa-linkedin"></i>
-<a href="https://linkedin.com/in/yelsin-sepulveda-lara">LinkedIn</a>
-
 ## Experience
 
 ### KDE — GSoC’25 Contributor
@@ -53,35 +36,3 @@ title: Resume
 - Developed new infrastructure for **Okta authentication resources**, converting imperative JavaScript scripts into a declarative **Terraform**-based system.
 - Created a CI/CD pipeline using **Jenkins** and **Docker**, automating code fetch, Puppeteer smoke tests, and deployment to AWS EC2.
 - Worked within a Scrum team following Agile workflows, including daily standups, Jira ticketing, bi-weekly sprints, and retrospectives.
-
----
-
-## Personal Projects
-
-### Open Source Contributor — KDE (2025)
-- Contributions to **Angelfish**, **KWin**, and **Plasma Desktop**
-  *Technologies:* C++, Qt, CMake
-
-### Retrodex Miyoo — Pokédex App (2024)
-- Pokédex application for **Onion-OS** on gaming handhelds using the `miyoomini-toolchain`
-  *Technologies:* C++, SDL, CMake
-
----
-
-## Skills
-
-- **Languages:** C, C++, Go, Java, Python, TypeScript, JavaScript
-- **Cloud & Infrastructure:** AWS (ECS, EKS, Lambda, CDK, CloudFormation), Docker, Kubernetes, Terraform, Grafana, Prometheus
-- **Tools:** React, Node.js, Qt, CMake, Jenkins, Git, Linux
-
----
-
-## Certifications
-
-- AWS Certified Cloud Practitioner — J3W7057DJERE1WSZ
-- AWS Certified Solutions Architect – Associate — MMWL2GE2WEBEQH58
-- AWS Certified Developer – Associate — MEGK0X01XNREQCWW
-
----
-
-**Languages:** Native bilingual — English & Spanish

src/components/resume/Skills.md

@@ -0,0 +1,10 @@
+---
+---
+
+## Skills
+
+### Languages <img src="https://go-skill-icons.vercel.app/api/icons?i=c,cpp,go,java,python,ts,js" height="18" />
+
+### Tools <img src="https://go-skill-icons.vercel.app/api/icons?i=react,nodejs,qt,cmake,jenkins,git,linux" height="18" />
+
+### Cloud & Infrastructure <img src="https://go-skill-icons.vercel.app/api/icons?i=aws,docker,k8s,terraform,grafana,prometheus" height="18" />

src/components/resume/Socials.astro

@@ -0,0 +1,38 @@
+---
+// import '@fortawesome/fontawesome-svg-core/styles.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { 
+    faSquareLinkedin, 
+    faSquareGithub, 
+    faSquareGitlab 
+} from '@fortawesome/free-brands-svg-icons'
+import { Label } from '@/components/ui/label'
+---
+
+<ul class="p-0 no-bullets" >
+    <li class="flex flex-rows gap-4">
+        <FontAwesomeIcon className="text-[#34d399]" icon={faSquareLinkedin}  />
+        <a class="" href="https://linkedin.com/in/yelsin-sepulveda-lara" target="_blank">
+            <Label > LinkedIn </Label>
+        </a>
+    </li>
+    <li class="flex flex-rows gap-4">
+        <FontAwesomeIcon className="text-[#34d399]" icon={faSquareGithub}  />
+        <a class="" href="https://github.com/yorisoft" target="_blank">
+                <Label > GitHub </Label>
+        </a>
+    </li>
+    <li class="flex flex-rows gap-4">
+        <FontAwesomeIcon className="text-[#34d399]" icon={faSquareGitlab}  />
+        <a class="" href="https://invent.kde/yorisoft" target="_blank">
+                <Label > GitLab </Label>
+        </a>
+    </li>
+    <li class="flex flex-rows gap-4">
+        <FontAwesomeIcon className="text-[#34d399]" icon={faEnvelope}  />
+        <a class="" href="" target="_blank">
+                <Label > yelsinsepulveda@gmail.com </Label>
+        </a>
+    </li>
+</ul>

src/layouts/Resume.astro

@@ -35,8 +35,29 @@ const props = Astro.props;
                 <div class="flex justify-center w-full text-5xl font-semibold gap-2 bg-destructive-foreground">
                     <slot name="title" />
                 </div>
-            	<div class="flex flex-col w-3/5 pt-8 mb-50 max-w-350" >
-                    <slot name="resume" />
+				<div class="flex flex-rows w-11/12 pt-8 gap-16">
+                    <div class="" >
+                        <span class="" >
+                            <slot name="header" />
+                        </span>
+						<span class="" >
+                            <slot name="experience" />
+                        </span>
+                    </div>
+                    <div class="" >
+						<span class="" >
+                            <slot name="socials" />
+                        </span>
+                        <span class="" >
+                            <slot name="skills" />
+                        </span>
+                        <span class="" >
+                            <slot name="projects" />
+                        </span>
+                        <span class="" >
+                            <slot name="certs" />
+                        </span>
+                    </div>
                 </div>
                 <div class="flex justify-center w-full bg-destructive-foreground text-lg p-5">
                     <slot name="footer"/>

src/pages/Resume.astro

@@ -3,7 +3,12 @@ import '../styles/global.css';
 
 // Component Imports
 import ResumeLayout from "../layouts/Resume.astro"
-import * as resume from "../markdown/resume.md"
+import {Content as Header} from '../components/resume/Header.md';
+import {Content as Experience} from '../components/resume/Professional_Experience.md';
+import {Content as Projects} from '../components/resume/Personal_Projects.md';
+import {Content as Skills} from '../components/resume/Skills.md';
+import {Content as Certs} from '../components/resume/Certifications.md';
+import Socials from '../components/resume/Socials.astro';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAt } from '@fortawesome/free-solid-svg-icons'
@@ -15,7 +20,12 @@ import {faSquareGitlab, faSquareGithub, faSquareLinkedin} from '@fortawesome/fre
 
 <ResumeLayout slot="main" >
     <p slot="title">Resume</p>
-    <div set:html={await resume.compiledContent()} slot="resume"/>
+    <Header slot="header" />
+    <Socials slot="socials" />
+    <Experience slot="experience" />
+    <Projects slot="projects" />
+    <Skills slot="skills" />
+    <Certs slot="certs" />
     <p slot="footer" class="flex items-center gap-2">
         Made wih ❤️ and <img class="w-8" src={`https://go-skill-icons.vercel.app/api/icons?i=astro`} />
     </p>