🚧 finish homepage

src/components/Layout/FlexGridContainer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex flex-col gap-0 rounded overflow-clip
+      md:grid md:grid-flow-row-dense md:grid-cols-2
+    ">
+    <slot></slot>
+  </div>
+</template>

src/components/PrimaryButton.vue

@@ -11,14 +11,15 @@ const buttonProp = defineProps({
 
 <template>
   <a :href="buttonProp.target" target="_blank" rel="nofollow" class="
-  flex flex-row py-5 px-6 group gap-3
+  flex flex-row py-5 px-6 group gap-3 items-center transition duration-300 group
   bg-purple-100 hover:bg-purple-800 
         ">
 
     <Icon class="text-3xl group-hover:animate-pulse text-purple-900 group-hover:text-purple-100"
       :icon="buttonProp.icon" />
 
-    <span class="w-fit text-center text-md text-purple-900 group-hover:text-purple-200">
+    <span
+      class="w-fit text-center text-md text-purple-900 group-hover:text-purple-200 group-hover:scale-105 transition transform-gpu md:group-hover:translate-x-8">
       <slot />
     </span>
   </a>

src/data/homepageLinks.js

@@ -1,4 +1,4 @@
-const HomepageLinks = [
+export const HomepageLinks = [
   {
     label: 'Threads',
     icon: 'hugeicons:threads',
@@ -33,7 +33,18 @@ const HomepageLinks = [
     label: 'Fale comigo',
     icon: 'hugeicons:mail-01',
     target: 'mailto:[email protected]'
+  }
+]
+
+export const HomepageProjects = [
+  {
+    label: 'SuperCow',
+    target: 'https://andrepg.github.io/supercow'
   },
+  {
+    label: 'HTTP Codes',
+    target: 'https://andrepg.github.io/http-codes/'
+  }
 ]
 
 export default HomepageLinks

src/views/HomeView.vue

@@ -1,41 +1,47 @@
 <script setup>
 import PrimaryButton from '@/components/PrimaryButton.vue'
 import BubblesAnimation from '@/components/Layout/BubblesAnimation.vue'
-import HomepageLinks from '@/data/homepageLinks.js'
+import { HomepageLinks, HomepageProjects } from '@/data/homepageLinks.js'
+import FlexGridContainer from '@/components/Layout/FlexGridContainer.vue';
+
+const lastGridItemClass = 'odd:last-of-type:text-center odd:last-of-type:col-span-full';
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 md:justify-center gap-5 lg:w-9/12 self-center z-10">
-    <div
-      class="text-purple-900 lg:text-purple-100 w-fit mx-auto py-10 text-center 
-      md:w-3/4 md:text-left md:px-5 md:py-3 md:my-4 md:rounded-lg 
-      lg:bg-purple-800 lg:flex lg:flex-row lg:p-0 lg:my-0 lg:overflow-clip"
-    >
-      <img
-        class="rounded-full align-center mx-auto mb-4 shadow-md h-36 lg:rounded-none
-        lg:mb-0 lg:flex-0 lg:h-auto lg:w-52 lg:shadow-lg"
-        src="https://github.com/andrepg.png"
-        alt="My personal profile photo"
-      />
-
-      <div class="flex flex-col lg:py-4 lg:px-10 lg:gap-2 lg:justify-center">
-        <h1 class="text-2xl lg:text-3xl font-bold">👋 Olá, eu sou André Paul</h1>
-        <small class="text-lg leading-none lg:text-lg lg:leading-tight"
-          >Posso te ajudar com aplicativos, websites, consultorias e processos.</small
-        >
-      </div>
+  <div class="flex flex-col py-12 px-4 gap-2 justify-center z-10 max-w-screen-md w-full self-center">
+    <img src="https://github.com/andrepg.png"
+      alt="A NFT of a programmer with a cup of coffee in hands and sitting, looking at the camera"
+      class="rounded-full self-center outline shadow-md h-36 w-36">
+
+    <h1 class="flex flex-col md:text-center">
+      <span class="font-serif">André Paul Grandsire</span>
+      <small class="text-lg">Programador & Consultor</small>
+    </h1>
+
+    <div class="flex flex-col gap-1 py-4">
+      <h2 class="font-serif flex flex-row gap-4 md:justify-center">
+        <span>📥️</span> Redes & Contatos
+      </h2>
+
+      <FlexGridContainer>
+        <PrimaryButton :class="lastGridItemClass" v-for="button in HomepageLinks" :key="button.target"
+          :icon="button.icon" :target="button.target">
+          {{ button.label }}
+        </PrimaryButton>
+      </FlexGridContainer>
     </div>
 
-    <div
-      class="flex flex-col md:grid md:grid-cols-2 md:w-3/4 gap-0 mx-auto w-72 md:rounded-lg overflow-clip"
-    >
-      <PrimaryButton
-        v-for="button in HomepageLinks"
-        :key="button.target"
-        :icon="button.icon"
-        :target="button.target"
-        >{{ button.label }}</PrimaryButton
-      >
+    <div class="flex flex-col gap-1 py-4">
+      <h2 class="font-serif flex flex-row gap-4 md:justify-center">
+        <span>💼</span> Projetos & Trabalhos
+      </h2>
+
+      <FlexGridContainer>
+        <PrimaryButton :class="lastGridItemClass" v-for="button in HomepageProjects" :key="button.target"
+          icon="hugeicons:briefcase-06" :target="button.target">
+          {{ button.label }}
+        </PrimaryButton>
+      </FlexGridContainer>
     </div>
   </div>