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

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="my-0 text-center">Alexander Navarro</h1>
        <p>
          {t('home.brief')}
        </p>
      </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}`}>See more...</a>
              </div>
            </Card>
          </div>
        ))
      }
    </div>

    <div class="mt-4 text-center">
      <Button className="px-4 py-2 fs-5" href="/projects">View Work</Button>
    </div>
  </section>

  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
    <h2 class="mb-4">What I've been up to...</h2>

    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
      <div class="vstack justify-content-center">
        <h4 class="text-center">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">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">Who am I?</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>View full curriculum</Button>
      </a>
    </div>
  </section>

  <section>
    <h2>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: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Github',
              },
              {
                link: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Linkedin',
              },
              {
                link: '#',
                img: 'https://placehold.co/60',
                alt: '',
                text: 'Email',
              },
            ].map((item) => (
              <li class="mb-3">
                <a
                  href={item.link}
                  class="hstack flex-column flex-lg-row gap-2"
                >
                  <>
                    <img src={item.img} alt={item.alt} />
                    <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>