feat: create projects (/projects) page and use PostLayout in the abou…

…t page

src/components/TagList.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  tags: string[];
+}
+
+const { tags } = Astro.props;
+---
+
+<ul class="flex flex-wrap gap-1 text-sm lg:text-base">
+  {
+    tags.map((tag) => {
+      return <li class="rounded-full bg-violet-300 px-3 py-1">{tag}</li>;
+    })
+  }
+</ul>

src/layouts/PostLayout.astro

@@ -0,0 +1,18 @@
+---
+import PostTitle from '../components/post/PostTitle.astro';
+import Layout from '../layouts/Layout.astro';
+
+interface Props {
+  title?: string;
+  postTitle: string;
+}
+
+const { title, postTitle } = Astro.props;
+---
+
+<Layout title={title ?? postTitle}>
+  <main class="mx-auto w-full max-w-3xl flex-grow space-y-5 p-6 lg:text-lg">
+    <h1 class="max-w-lg text-pretty text-2xl md:text-5xl">{postTitle}</h1>
+    <slot />
+  </main>
+</Layout>

src/pages/about.astro

@@ -1,87 +1,83 @@
 ---
 import Image from 'astro/components/Image.astro';
-import Layout from '../layouts/Layout.astro';
+import PostLayout from '../layouts/PostLayout.astro';
 ---
 
-<Layout title="About | Kauê Fraga Rodrigues">
-  <main class="mx-auto w-full max-w-3xl flex-grow space-y-5 p-6 lg:text-lg">
-    <h1 class="max-w-lg text-pretty text-2xl md:text-5xl">
-      Um pouco mais sobre mim
-    </h1>
+<PostLayout
+  title="About | Kauê Fraga Rodrigues"
+  postTitle="Um pouco mais sobre mim"
+>
+  <p>
+    Me chamo Kauê, sou desenvolvedor de software e freelancer com experiência na
+    criação de soluções front end e back end, em outras palavras, sou capaz de
+    desenvolver uma aplicação de ponta a ponta.
+  </p>
 
-    <p>
-      Me chamo Kauê, sou desenvolvedor de software e freelancer com experiência
-      na criação de soluções front end e back end, em outras palavras, sou capaz
-      de desenvolver uma aplicação de ponta a ponta.
-    </p>
+  <p>
+    Estou sempre buscando aprender coisas novas e me manter atualizado sobre o
+    mundo da tecnologia. Minha área de atuação favorita é o back end e nela eu
+    tenho proficiência nas seguintes tecnologias.
+  </p>
 
-    <p>
-      Estou sempre buscando aprender coisas novas e me manter atualizado sobre o
-      mundo da tecnologia. Minha área de atuação favorita é o back end e nela eu
-      tenho proficiência nas seguintes tecnologias.
-    </p>
+  <Image
+    class="mx-auto"
+    width="350"
+    height="350"
+    src="https://skillicons.dev/icons?i=go,ts,python,postgresql,mongodb,docker"
+    alt="go,ts,python,postgresql,mongodb,docker"
+    loading="eager"
+  />
 
-    <Image
-      class="mx-auto"
-      width="350"
-      height="350"
-      src="https://skillicons.dev/icons?i=go,ts,python,postgresql,mongodb,docker"
-      alt="go,ts,python,postgresql,mongodb,docker"
-      loading="eager"
-    />
+  <p>
+    Aproveitando para dizer que no front end eu atuo com as tecnologias abaixo,
+    que me permitem criar interfaces interativas, responsivas e acessíveis.
+  </p>
 
-    <p>
-      Aproveitando para dizer que no front end eu atuo com as tecnologias
-      abaixo, que me permitem criar interfaces interativas, responsivas e
-      acessíveis.
-    </p>
+  <Image
+    class="mx-auto"
+    width="350"
+    height="350"
+    src="https://skillicons.dev/icons?i=html,css,react,next,tailwindcss,astro"
+    alt="html,css,react,next,tailwindcss,astro"
+    loading="eager"
+  />
 
-    <Image
-      class="mx-auto"
-      width="350"
-      height="350"
-      src="https://skillicons.dev/icons?i=html,css,react,next,tailwindcss,astro"
-      alt="html,css,react,next,tailwindcss,astro"
-      loading="eager"
-    />
+  <p>
+    No ano de 2024 eu escolhi focar nos meus três objetivos principais como
+    desenvolvedor de software.
+  </p>
 
-    <p>
-      No ano de 2024 eu escolhi focar nos meus três objetivos principais como
-      desenvolvedor de software.
-    </p>
+  <ul class="list-inside list-disc">
+    <li>Ganhar visibilidade na comunidade de desenvolvedores</li>
+    <li>Aperfeiçoar meus conhecimentos na área do back end e do front end</li>
+    <li>Construir projetos que ajudem as pessoas</li>
+  </ul>
 
-    <ul class="list-inside list-disc">
-      <li>Ganhar visibilidade na comunidade de desenvolvedores</li>
-      <li>Aperfeiçoar meus conhecimentos na área do back end e do front end</li>
-      <li>Construir projetos que ajudem as pessoas</li>
-    </ul>
+  <p>
+    Para alcançar essas metas eu decidi começar a escrever artigos técnicos para
+    o <a href="/blog" class="underline" target="_blank">meu blog</a>,
+    <a href="https://dev.to/kauefraga" class="underline" target="_blank">
+      dev.to
+    </a> e <a
+      href="https://tabnews.com.br/kauefraga"
+      class="underline"
+      target="_blank"
+    >
+      TabNews
+    </a>, além de compartilhar alguns momentos e projetos meus no
+    <a href="https://x.com/rkauefraga" class="underline" target="_blank">
+      Twitter
+    </a> e no <a
+      href="https://www.linkedin.com/in/kauefraga/"
+      class="underline"
+      target="_blank"
+    >
+      LinkedIn
+    </a>.
+  </p>
 
-    <p>
-      Para alcançar essas metas eu decidi começar a escrever artigos técnicos
-      para o <a href="/blog" class="underline" target="_blank">meu blog</a>,
-      <a href="https://dev.to/kauefraga" class="underline" target="_blank">
-        dev.to
-      </a> e <a
-        href="https://tabnews.com.br/kauefraga"
-        class="underline"
-        target="_blank"
-      >
-        TabNews
-      </a>, além de compartilhar alguns momentos e projetos meus no
-      <a href="https://x.com/rkauefraga" class="underline" target="_blank">
-        Twitter
-      </a> e no <a
-        href="https://www.linkedin.com/in/kauefraga/"
-        class="underline"
-        target="_blank"
-      >
-        LinkedIn
-      </a>.
-    </p>
-
-    <p>
-      Em <a href="/projects" class="underline">projetos</a> você pode ver as aplicações
-      que construi melhorar a vida das pessoas - e me aprimorar.
-    </p>
-  </main>
-</Layout>
+  <p>
+    Em <a href="/projects" class="underline">projetos</a> você pode ver as aplicações
+    que construi melhorar a vida das pessoas - e me aprimorar.
+  </p>
+</PostLayout>

src/pages/projects.astro

@@ -0,0 +1,113 @@
+---
+import TagList from '../components/TagList.astro';
+import PostLayout from '../layouts/PostLayout.astro';
+---
+
+<PostLayout title="Projetos | Kauê Fraga Rodrigues" postTitle="Projetos">
+  <section class="space-y-2">
+    <h2 class="flex gap-1.5">
+      <a
+        href="https://github.com/kauefraga/ruke"
+        target="_blank"
+        class="underline">Ruke</a
+      >
+      <span class="text-gray-600"
+        >(uma ferramenta para automação de processos)</span
+      >
+    </h2>
+
+    <p>
+      O desenvolvimento do "Ruke" foi repleto de desafios e aprendizados. A
+      documentação exigiu dedicação para ser clara e útil, enquanto a
+      distribuição multiplataforma me forçou a criar scripts e pipelines de
+      CI/CD capazes de fazer a entrega do programa final e facilitar a
+      instalação dele. Melhorar a experiência do usuário, com flags intuitivas,
+      saídas claras e prompts interativos, foi fundamental. Além disso, lidar
+      com erros de forma eficiente foi crucial para garantir uma ferramenta
+      confiável e fácil de usar. Cada obstáculo superado me fez valorizar ainda
+      mais o processo e o produto final.
+    </p>
+
+    <TagList
+      tags={['rust', 'cli tool', 'documentation', 'user/developer experience']}
+    />
+  </section>
+
+  <section class="space-y-2">
+    <h2 class="flex gap-1.5">
+      <a
+        href="https://github.com/kauefraga/polvinho"
+        target="_blank"
+        class="underline">Polvinho</a
+      >
+      <span class="text-gray-600">(um site para gestão de trabalhos)</span>
+    </h2>
+
+    <p>Em construção...</p>
+
+    <TagList tags={['typescript', 'react', 'nextjs']} />
+  </section>
+
+  <section class="space-y-2">
+    <h2 class="flex gap-1.5">
+      <a
+        href="https://github.com/FelipeMCassiano/gorvus"
+        target="_blank"
+        class="underline">Gorvus</a
+      >
+      <span class="text-gray-600"
+        >(uma ferramenta para geração de configurações Docker)</span
+      >
+    </h2>
+
+    <p>
+      No projeto open source "Gorvus", enfrentar o código-fonte de outra pessoa
+      foi um dos principais desafios. Me adaptar ao estilo e compreender o
+      objetivo do projeto exigiu empenho e paciência. Parte desse processo
+      incluiu a comunicação e a sugestão de alterações por meio de issues e pull
+      requests no GitHub, o que foi fundamental para a colaboração eficaz.
+      Minhas contribuições foram diversas: modifiquei a estrutura do projeto em
+      Go, melhorei a experiência do usuário, refatorei o código-fonte e
+      introduzi boas práticas. Cada um desses passos não só aprimorou o Gorvus,
+      mas também engrandeceu minha própria experiência como desenvolvedor.
+    </p>
+
+    <TagList tags={['go', 'cli tool', 'open source']} />
+  </section>
+
+  <section class="space-y-2">
+    <h2 class="flex gap-1.5">
+      <a href="https://inuc.netlify.app/" target="_blank" class="underline">
+        Inu
+      </a>
+      <span class="text-gray-600">(um sistema fullstack de login/logout)</span>
+    </h2>
+
+    <p>
+      O desenvolvimento do "Inu", um sistema de login/logout fullstack com Vue e
+      Go, me trouxe muitos desafios e aprendizados valiosos. Lidar com
+      autenticação e autorização foi essencial para garantir a segurança do
+      sistema, sendo implementado com tokens JWT. A organização
+      multirepositório, dividindo o projeto em inus (servidor) e inuc (cliente),
+      exigiu uma gestão cuidadosa para manter a coesão e a eficiência do código.
+      Construir um serviço robusto com Go foi uma experiência enriquecedora,
+      ampliando minhas habilidades e conhecimentos na criação de aplicações
+      escaláveis e eficientes.
+    </p>
+
+    <p>
+      Links: <a
+        href="https://github.com/kauefraga/inus"
+        target="_blank"
+        class="underline">Inus (servidor)</a
+      >,
+      <a
+        href="https://github.com/kauefraga/inuc"
+        target="_blank"
+        class="underline">Inuc (cliente)</a
+      >
+    </p>
+
+    <TagList tags={['go', 'fiber', 'auth', 'jwt', 'vue']} />
+  </section>
+</PostLayout>