feat: improve profile data and dynamic project filters

Author: patrickluzdev

app/app.vue

@@ -23,7 +23,7 @@ useHead({
   ],
   link: [
     { rel: "canonical", href: "https://patrickluz.dev" },
-    { rel: "preload", as: "image", href: "/logo.jpeg" },
+    { rel: "preload", as: "image", href: "/logo.webp" },
   ],
 });
-</script>
+</script>

app/components/header/components/HeaderProfile.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex items-center gap-2 md:gap-3">
     <NuxtLink to="/">
-      <div class="w-8 h-8 md:w-10 md:h-10 rounded-full overflow-hidden ring-1 ring-stone-200">
+      <div
+        class="w-8 h-8 md:w-10 md:h-10 rounded-full overflow-hidden ring-1 ring-stone-200"
+      >
         <img
-          src="/logo.jpeg"
+          src="/logo.webp"
           alt="Patrick Luz"
           class="w-full h-full object-cover"
         />

app/components/sidebar/Sidebar.vue

@@ -4,9 +4,11 @@
       <!-- Avatar -->
       <div class="mb-8 pl-1">
         <NuxtLink to="/" class="block">
-          <div class="w-[72px] h-[72px] rounded-full overflow-hidden ring-2 ring-stone-200 ring-offset-2">
+          <div
+            class="w-[72px] h-[72px] rounded-full overflow-hidden ring-2 ring-stone-200 ring-offset-2"
+          >
             <img
-              src="/logo.jpeg"
+              src="/logo.webp"
               alt="Patrick Luz"
               class="w-full h-full object-cover"
             />
@@ -24,31 +26,30 @@
           :class="[
             isActiveRoute(item.to)
               ? 'text-stone-900 font-medium before:absolute before:left-[-12px] before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-5 before:bg-stone-400 before:rounded-full'
-              : 'text-stone-500 hover:text-stone-900'
+              : 'text-stone-500 hover:text-stone-900',
           ]"
         >
           {{ item.label }}
         </NuxtLink>
       </nav>
-
     </div>
   </aside>
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
+const route = useRoute();
 
 const menuItems = [
-  { label: 'Home', to: '/' },
-  { label: 'Sobre mim', to: '/sobre' },
-  { label: 'Meus projetos', to: '/projetos' },
-  { label: 'Contato', to: '/contato' }
-]
+  { label: "Home", to: "/" },
+  { label: "Sobre mim", to: "/sobre" },
+  { label: "Meus projetos", to: "/projetos" },
+  { label: "Contato", to: "/contato" },
+];
 
 const isActiveRoute = (path: string) => {
-  if (path === '/') {
-    return route.path === '/'
+  if (path === "/") {
+    return route.path === "/";
   }
-  return route.path.startsWith(path)
-}
+  return route.path.startsWith(path);
+};
 </script>

app/composables/useProfile.ts

@@ -5,6 +5,53 @@ import {
   testimonials,
 } from "~/data";
 
+const monthMap: Record<string, number> = {
+  jan: 0, fev: 1, mar: 2, abr: 3, mai: 4, jun: 5,
+  jul: 6, ago: 7, set: 8, out: 9, nov: 10, dez: 11,
+};
+
+function parsePeriod(period: string): { start: Date; end: Date } {
+  const parts = period.split(" - ");
+  const startStr = parts[0] ?? "";
+  const endStr = parts[1] ?? "";
+
+  const startParts = startStr.split("/");
+  const startMonth = startParts[0] ?? "";
+  const startYear = startParts[1] ?? "";
+  const start = new Date(parseInt(startYear), monthMap[startMonth] ?? 0);
+
+  let end: Date;
+  if (endStr === "atual") {
+    end = new Date();
+  } else {
+    const endParts = endStr.split("/");
+    const endMonth = endParts[0] ?? "";
+    const endYear = endParts[1] ?? "";
+    end = new Date(parseInt(endYear), monthMap[endMonth] ?? 0);
+  }
+
+  return { start, end };
+}
+
+function calculateDuration(period: string): string {
+  const { start, end } = parsePeriod(period);
+
+  let months = (end.getFullYear() - start.getFullYear()) * 12;
+  months += end.getMonth() - start.getMonth();
+  months += 1;
+
+  const years = Math.floor(months / 12);
+  const remainingMonths = months % 12;
+
+  if (years === 0) {
+    return `${remainingMonths} ${remainingMonths === 1 ? "mês" : "meses"}`;
+  } else if (remainingMonths === 0) {
+    return `${years} ${years === 1 ? "ano" : "anos"}`;
+  } else {
+    return `${years} ${years === 1 ? "ano" : "anos"} e ${remainingMonths} ${remainingMonths === 1 ? "mês" : "meses"}`;
+  }
+}
+
 interface ExperienceWithError {
   title: string;
   company: string;
@@ -43,5 +90,6 @@ export const useProfile = () => {
     education,
     skillCategories,
     testimonials,
+    calculateDuration,
   };
 };

app/composables/useProjects.ts

@@ -6,6 +6,11 @@ export const useProjects = () => {
   const selectedTypes = ref<ProjectType[]>([]);
   const selectedTechs = ref<string[]>([]);
 
+  const availableTypes = computed(() => {
+    const types = new Set(projects.map((p) => p.type));
+    return projectTypes.filter((t) => types.has(t.value));
+  });
+
   const availableTechs = computed(() => {
     const techs = new Set<string>();
     projects.forEach((p) => p.stack.forEach((t) => techs.add(t)));
@@ -90,7 +95,7 @@ export const useProjects = () => {
 
   return {
     projects,
-    projectTypes,
+    availableTypes,
     availableTechs,
     searchQuery,
     selectedTypes,

app/data/content.ts

@@ -35,14 +35,14 @@ export const servicesDetailed: Service[] = [
 ];
 
 export const metricsHome: Metric[] = [
-  { value: "+5", label: "Anos de exp." },
+  { value: "+6", label: "Anos de exp." },
   { value: "6", label: "Empresas" },
   { value: "24h", label: "Tempo de resposta" },
   { value: "+100M", label: "Usuários" },
 ];
 
 export const metricsAbout: Metric[] = [
-  { value: "+5", label: "Anos de exp." },
+  { value: "+6", label: "Anos de exp." },
   { value: "6", label: "Empresas" },
   { value: "24h", label: "Tempo de resposta" },
   { value: "+100M", label: "Usuários" },
@@ -52,7 +52,7 @@ export const faqs: FAQ[] = [
   {
     question: "Quanto custa um projeto?",
     answer:
-      "O valor depende da complexidade e escopo do projeto. Após entender suas necessidades, envio uma proposta detalhada com valores e prazos. Projetos simples começam a partir de R$ 3.000.",
+      "O valor depende da complexidade e escopo do projeto. Após entender suas necessidades, envio uma proposta detalhada com valores e prazos.",
   },
   {
     question: "Qual o prazo de entrega?",

app/data/profile.ts

@@ -1,4 +1,4 @@
-import type { Experience, Education, SkillCategory, Testimonial } from "./types";
+import type { Education, Experience, SkillCategory, Testimonial } from "./types";
 
 export const experiences: Experience[] = [
   {
@@ -75,24 +75,26 @@ export const skillCategories: SkillCategory[] = [
       { name: "Go", icon: "logos:go" },
       { name: "Java", icon: "logos:java" },
       { name: "Node.js", icon: "logos:nodejs-icon" },
+      { name: "Python", icon: "logos:python" },
       { name: "PHP", icon: "logos:php" },
     ],
   },
   {
     name: "Frontend",
     skills: [
       { name: "React", icon: "logos:react" },
+      { name: "Next.js", icon: "logos:nextjs-icon" },
       { name: "Vue.js", icon: "logos:vue" },
-      { name: "JavaScript", icon: "logos:javascript" },
-      { name: "HTML5", icon: "logos:html-5" },
-      { name: "CSS3", icon: "logos:css-3" },
-      { name: "Sass", icon: "logos:sass" },
+      { name: "Nuxt", icon: "logos:nuxt-icon" },
+      { name: "TypeScript", icon: "logos:typescript-icon" },
+      { name: "Tailwind", icon: "logos:tailwindcss-icon" },
     ],
   },
   {
     name: "Banco de Dados",
     skills: [
       { name: "PostgreSQL", icon: "logos:postgresql" },
+      { name: "MongoDB", icon: "logos:mongodb-icon" },
       { name: "DynamoDB", icon: "logos:aws-dynamodb" },
       { name: "Elasticsearch", icon: "logos:elasticsearch" },
     ],
@@ -105,26 +107,30 @@ export const skillCategories: SkillCategory[] = [
       { name: "Docker", icon: "logos:docker-icon" },
       { name: "Kubernetes", icon: "logos:kubernetes" },
       { name: "Terraform", icon: "logos:terraform-icon" },
-      { name: "Jenkins", icon: "logos:jenkins" },
+      { name: "Prometheus", icon: "logos:prometheus" },
       { name: "Grafana", icon: "logos:grafana" },
-      { name: "Datadog", icon: "logos:datadog" },
       { name: "Git", icon: "logos:git-icon" },
+    ],
+  },
+  {
+    name: "Ferramentas",
+    skills: [
+      { name: "Figma", icon: "logos:figma" },
+      { name: "n8n", icon: "simple-icons:n8n" },
       { name: "Linux", icon: "logos:linux-tux" },
+      { name: "Datadog", icon: "logos:datadog" },
+      { name: "Jenkins", icon: "logos:jenkins" },
     ],
   },
 ];
 
 export const testimonials: Testimonial[] = [
   {
-    name: "João Silva",
-    initials: "JS",
-    role: "Tech Lead @ Hurst Capital",
-    text: "Patrick é um desenvolvedor excepcional. Entrega código de alta qualidade e sempre busca as melhores soluções para os problemas.",
-  },
-  {
-    name: "Maria Santos",
-    initials: "MS",
-    role: "Product Manager @ Inter",
-    text: "Trabalhar com o Patrick foi ótimo. Muito proativo, entende o negócio e traduz requisitos em soluções técnicas eficientes.",
+    name: "Ângelo Kusmann Cavalet",
+    initials: "AK",
+    role: "Tech Lead @ IXCSoft",
+    text: "Patrick é uma pessoa carismática, a comunicação com ele acontece de forma descontraída mas também produtiva. Resolve de forma ágil e competente os problemas designados, buscando sempre as melhores soluções. Gosta de um código bem escrito e estruturado, e encara o desconhecido como oportunidade de aprender.",
+    image: "https://media.licdn.com/dms/image/v2/D4D03AQH1pjyWVjQm2A/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1673991544727?e=1765411200&v=beta&t=_mi28hBz5IEvFbgEk797m0n3Jt5QjUigoRRxdskU288",
+    link: "https://www.linkedin.com/in/angelocavallet",
   },
 ];

app/data/projects.ts

@@ -1,118 +1,21 @@
 import type { Project } from "./types";
 
 export const projects: Project[] = [
-  {
-    id: "1",
-    title: "Sistema de Gestão",
-    description:
-      "Sistema completo para gestão empresarial com dashboard, relatórios e controle de estoque.",
-    image: "/projects/gestao.png",
-    stack: ["Vue.js", "Node.js", "PostgreSQL"],
-    status: "completed",
-    year: 2024,
-    type: "web",
-    category: "featured",
-    links: {
-      demo: "https://exemplo.com",
-      github: "https://github.com/plfrancisco/gestao",
-    },
-  },
-  {
-    id: "2",
-    title: "E-commerce Platform",
-    description:
-      "Loja virtual completa com carrinho, pagamentos Stripe e painel administrativo.",
-    image: "/projects/ecommerce.png",
-    stack: ["React", "Go", "PostgreSQL", "Stripe"],
-    status: "completed",
-    year: 2024,
-    type: "web",
-    category: "featured",
-    links: {
-      demo: "https://exemplo.com",
-    },
-  },
-  {
-    id: "3",
-    title: "Boilerplate Nuxt",
-    description:
-      "Template Nuxt 3 com Tailwind, shadcn/ui, autenticação e estrutura pronta para produção.",
-    stack: ["Nuxt", "Tailwind", "TypeScript"],
-    status: "completed",
-    year: 2024,
-    type: "tool",
-    category: "personal",
-    links: {
-      github: "https://github.com/plfrancisco/nuxt-boilerplate",
-    },
-  },
   {
     id: "4",
     title: "Patrick.dev",
     description: "Meu site pessoal. O que você está vendo agora.",
-    stack: ["Nuxt", "Tailwind", "Supabase"],
+    stack: ["Nuxt", "Tailwind", "TypeScript"],
     status: "development",
-    year: 2024,
+    year: 2025,
     type: "web",
-    category: "personal",
-    links: {
-      github: "https://github.com/plfrancisco/my-site-vue",
-    },
-  },
-  {
-    id: "5",
-    title: "Vue Component Library",
-    description:
-      "Biblioteca de componentes Vue 3 com acessibilidade e customização via CSS variables.",
-    stack: ["Vue.js", "TypeScript", "Vite"],
-    status: "development",
-    year: 2024,
-    type: "tool",
-    category: "opensource",
-    links: {
-      github: "https://github.com/plfrancisco/vue-components",
-      demo: "https://components.patrick.dev",
-    },
-  },
-  {
-    id: "6",
-    title: "App de Delivery",
-    description:
-      "Aplicativo para delivery de comida com rastreamento em tempo real e notificações push.",
-    image: "/projects/delivery.png",
-    stack: ["React Native", "Node.js", "Firebase"],
-    status: "completed",
-    year: 2023,
-    type: "mobile",
-    category: "client",
-    links: {},
-  },
-  {
-    id: "7",
-    title: "API de Pagamentos",
-    description:
-      "Microserviço de processamento de pagamentos com integração multi-gateway.",
-    stack: ["Go", "gRPC", "Redis", "PostgreSQL"],
-    status: "completed",
-    year: 2023,
-    type: "api",
-    category: "client",
-    links: {},
-  },
-  {
-    id: "8",
-    title: "CLI Task Manager",
-    description:
-      "Gerenciador de tarefas via terminal com sync para múltiplos dispositivos.",
-    stack: ["Go", "SQLite", "Bubble Tea"],
-    status: "development",
-    year: 2024,
-    type: "tool",
-    category: "experiment",
+    category: "featured",
+    image: "/projects/my-site.webp",
     links: {
-      github: "https://github.com/plfrancisco/task-cli",
+      github: "https://github.com/patrickluzdev/my-site",
+      demo: "https://patrickluz.dev/"
     },
-  },
+  }
 ];
 
 export const projectTypes = [