personal-page/src/pages/index.astro

---
import { getCollection, getEntry } from 'astro:content';
import { t, changeLanguage } from 'i18next';
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
import Button from '../components/Button/Button.astro';
import { Image } from 'astro:assets';
import portrait from '../assets/images/portrait.jpg';
import iconEmail from '../assets/icons/email.svg';
import iconLinkedin from '../assets/icons/linkedin.svg';
import iconGithub from '../assets/icons/github.svg';

changeLanguage('en');

const blog = await getCollection('blog', ({ data }) =>
  import.meta.env.PROD ? data.draft !== true : true,
);
const portafolio = [
  await getEntry('portafolio', 'piloto-go'),
  await getEntry('portafolio', 'destino-temuco'),
  await getEntry('portafolio', 'sercotec'),
];
---

<Layout title="aleidk">
  <section
    id="hero"
    class="bg-image flex-center"
    style="--bg-image: url(https://placehold.co/600x400)"
  >
    <div class="vstack gap-0 align-items-center">
      <Image
        id="portrait"
        src={portrait}
        alt="portrait of Alexander Navarro"
        loading="eager"
        width={200}
      />
      <div>
        <h1 class="text-center my-0">Alexander Navarro</h1>
        <div class="text-center" class="">
          <LocalizedMarkdown path="brief.md" />
        </div>
      </div>
    </div>
  </section>

  <section>
    <h2 class="text-center">{t('titles.featuredWork')}</h2>

    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
      {
        portafolio.map(({ data, slug }) => (
          <div>
            <Card className="anim-hover-zoom h-100">
              <a class="clean" href={`/projects/${slug}`}>
                <Image
                  src={data.thumbnail}
                  alt="project img"
                  class="border-radius respect-width"
                />
                <h3 class="fs-4 text-center my-1">{data.title}</h3>
                <p class="text-justify">{data.brief}</p>
              </a>
              <div class="text-end" slot="footer">
                <a href={`/projects/${slug}`}>{t('misc.seeMore')}</a>
              </div>
            </Card>
          </div>
        ))
      }
    </div>

    <div class="mt-4 text-center">
      <Button className="px-4 py-2 fs-5" href="/projects">
        {t('home.moreProjects')}
      </Button>
    </div>
  </section>

  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
    <h2 class="mb-4">{t('titles.whatIveBeenUpTo')}</h2>

    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
      <div class="vstack justify-content-center">
        <h4 class="text-center text-capitalize">{t('blog')}</h4>
        <ol class="list-unstyle mt-0 fs-5">
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
        </ol>
      </div>

      <div>
        <div class="text-center mb-2">
          <img class="" src="https://placehold.co/400x200" alt="project img" />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
          consequatur iste molestiae blanditiis eligendi consectetur ullam.
          Excepturi quasi sed est animi laudantium necessitatibus, tempore
          delectus nulla aspernatur quod nesciunt fugiat.
        </p>
      </div>
    </div>

    <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
      <div class="vstack justify-content-center">
        <h4 class="text-center text-capitalize">{t('games')}</h4>
        <ol class="list-unstyle mt-0 fs-5">
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
          <li class="mb-3">
            <a href="#"
              >Qui minim labore adipisicing minim sint cillum sint consectetur
              cupidatat.</a
            >
          </li>
        </ol>
      </div>

      <div>
        <div class="text-center mb-2">
          <img class="" src="https://placehold.co/400x200" alt="project img" />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
          consequatur iste molestiae blanditiis eligendi consectetur ullam.
          Excepturi quasi sed est animi laudantium necessitatibus, tempore
          delectus nulla aspernatur quod nesciunt fugiat.
        </p>
      </div>
    </div>
  </section>

  <section
    class="bg-image"
    style="--bg-image: url(https://placehold.co/600x400)"
  >
    <h2 class="text-center">{t('titles.whoAmI')}</h2>
    <p class="w-95 w-lg-70 mx-auto text-justify">
      <LocalizedMarkdown path="about-me.md" />
    </p>

    <div class="text-center fs-4 mb-0">
      <a href="">
        <Button>{t('home.viewCurriculum')}</Button>
      </a>
    </div>
  </section>

  <section>
    <h2>{t('titles.contact')}</h2>

    <div class="grid grid-cols-1 grid-lg-cols-2">
      <div>
        <div class="text-center">
          <img
            class="respect-width border-radius"
            src="https://placehold.co/500x300"
            alt="project img"
          />
        </div>
        <p class="text-justify">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
          exercitationem harum itaque perferendis praesentium asperiores vitae
          pariatur ad culpa mollitia necessitatibus hic!
        </p>
      </div>

      <div class="vstack justify-content-center">
        <ul
          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
        >
          {
            [
              {
                link: 'https://github.com/aleee-idk',
                img: iconGithub,
                alt: '',
                text: 'Github',
              },
              {
                link: 'https://www.linkedin.com/in/alexander-navarro-parra-0516062a3',
                img: iconLinkedin,
                alt: '',
                text: 'Linkedin',
              },
              {
                link: 'mailto:ale.navarro.parra@gmail.com',
                img: iconEmail,
                alt: '',
                text: 'Email',
              },
            ].map((item) => (
              <li class="mb-3">
                <a
                  href={item.link}
                  target="_blank"
                  class="hstack flex-column flex-lg-row gap-2"
                >
                  <>
                    <Image
                      src={item.img}
                      alt={item.alt}
                      width="64"
                      height="64"
                    />
                    <span>{item.text}</span>
                  </>
                </a>
              </li>
            ))
          }
        </ul>
      </div>
    </div>
  </section>

  <style>
    #portrait {
      border-radius: 50%;
      /* border: 5px solid var(--prj-accent); */
    }
    #hero {
      min-height: 50vh;
    }

    a.clean {
      color: var(--prj-text);

      &:hover {
        text-decoration: none;
      }
    }
  </style>
</Layout>out> out>