refactor(*): restructure info and change hero section

package.json

@@ -13,12 +13,12 @@
     "phoenix": "rm ./node_modules/ -rf && rm ./bun.lockb && ni"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.1.0",
+    "@astrojs/mdx": "3.1.9",
     "@astrojs/preact": "^3.5.3",
-    "@astrojs/rss": "^4.0.4",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/rss": "4.0.9",
+    "@astrojs/tailwind": "5.1.2",
     "@vercel/og": "^0.6.2",
-    "astro": "^4.16.5",
+    "astro": "4.16.13",
     "astro-expressive-code": "^0.32.2",
     "astro-robots-txt": "^1.0.0",
     "date-fns": "^3.2.0",
@@ -27,7 +27,7 @@
     "tailwindcss": "^3.4.0"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "1.2.1",
+    "@astrojs/sitemap": "3.2.1",
     "@inquirer/confirm": "2.0.17",
     "@inquirer/input": "1.2.16",
     "@tailwindcss/typography": "^0.5.10",

src/components/AboutMe.astro

@@ -1,17 +1,27 @@
 ---
-import { SOCIALS } from '@/constants/routes'
-import Section from './Section.astro'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 ---
 
-<Section title={t('nav.about')} container id='about-me'>
+<section class='max-w-6xl mb-6 pt-8 lg:pt-32 mx-auto' id='about-me'>
+  <picture>
+    <source media='(max-width: 767px)' srcset='/profile-mobile.webp' />
+    <source media='(min-width: 768px)' srcset='/profile-desktop.webp' />
+    <img
+      src='/profile-mobile.webp'
+      width='64'
+      height='64'
+      alt='puede ser una foto de Cristhian Melo'
+      class='aspect-square lg:size-[80px] mb-3 rounded-full border border-cPaper shadow-md'
+    />
+  </picture>
+  <h1 class='text-2xl font-semibold text-cWhite mb-3'>{t('hero.p1')}</h1>
+  <h2 class='text-cWhite leading-none mb-4'>
+    {t('hero.p2')}
+  </h2>
   <article class='text-cAccent max-w-3xl'>
-    <h3 class='text-xl font-medium text-cWhite leading-none mb-4'>
-      {t('about.p1')}
-    </h3>
     <p class='text-pretty'>
       {t('about.p2')}
       {' '}
@@ -21,15 +31,7 @@ const t = useTranslations(lang)
       {t('about.p3')}
     </p>
     <p class='text-pretty'>
-      {t('about.p4')}
-      <a
-        href={SOCIALS.x}
-        target='_blank'
-        aria-label='twitter profile'
-        class='text-cWhite hover:text-cBlue transition-colors duration-150 ease-in decoration-neutral-500 decoration-dotted underline-offset-[5px] underline'
-        >x.com</a
-      >
       {t('about.p5')}
     </p>
   </article>
-</Section>
+</section>

src/components/Header.astro

@@ -17,10 +17,6 @@ const ROUTES = {
     path: `${path}/#portfolio`,
     name: t('nav.portfolio')
   },
-  aboutMe: {
-    path: `${path}/#about-me`,
-    name: t('nav.about')
-  },
   blog: {
     path: `/${lang || ''}/blog`,
     name: 'Blog'

src/components/Projects.astro

@@ -1,15 +1,15 @@
 ---
 import Section from '@/components/Section.astro'
 import ProjectCard from '@/components/ProjectCard.astro'
-import { personalProjects } from '@/data'
+import { projects } from '@/data'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 ---
 
-<Section title={t('messages.featuredProjects')}>
+<Section title={t('single.projects')} id='portfolio'>
   <div class='grid grid-cols-1 gap-4 lg:grid-cols-2'>
-    {personalProjects.map((project) => <ProjectCard props={project} />)}
+    {projects.sort().map((work) => <ProjectCard props={work} />)}
   </div>
 </Section>

src/components/Section.astro

@@ -9,7 +9,7 @@ const { title, id, container } = Astro.props
 ---
 
 <section
-  class={`mb-6 pt-8 max-w-6xl mx-auto lg:pt-20 ${container ? 'px-2' : ''}`}
+  class={`mb-6 pt-8 lg:pt-12 lg:scroll-mt-16 max-w-6xl mx-auto ${container ? 'px-2' : ''}`}
   id={id ? id : null}
 >
   <header class='mb-3 flex items-center space-x-4'>

src/components/Tech.astro

@@ -58,19 +58,18 @@ const techs: iTechnology[] = [
     name: 'Linux',
     Icon: IconColor.linux,
     className: 'h-full'
-  },
-  ]
+  }
+]
 ---
 
 <Section title={t('single.techs')}>
   <div class='grid grid-cols-2 gap-4 md:grid-cols-6'>
     {
-      techs
-        .map(({ name, Icon, className }: iTechnology) => (
-          <TechCard name={name}>
-            <Icon {className} />
-          </TechCard>
-        ))
+      techs.map(({ name, Icon, className }: iTechnology) => (
+        <TechCard name={name}>
+          <Icon {className} />
+        </TechCard>
+      ))
     }
   </div>
 </Section>

src/data/index.ts

@@ -1,2 +1 @@
 export * from './projects'
-export * from './personal-projects'