Case Study // 001

Portfólio
Pessoal & Blog

Production Ready

V1.0.0

terminal View Repository

Core Technologies

Astro Framework rocket_launch

Tailwind CSS v4 format_paint

TypeScript data_object

Cloudflare Pages cloud

Project Stats

Performance

100/100

SEO Score

100

01. Technical Overview

Este projeto foi concebido para ser mais do que um simples currículo online; é uma demonstração prática de engenharia web moderna. O objetivo principal foi eliminar o JavaScript desnecessário do lado do cliente (Client-Side), comum em SPAs tradicionais, optando por uma abordagem 'Multi-Page App' (MPA) moderna com hidratação parcial.

warning

The Challenge

Portfólios tradicionais construídos em React ou Next.js muitas vezes sofrem com 'Hydration Mismatch' e payloads de JS excessivos para páginas que são majoritariamente estáticas. O desafio era:

/ Garantir pontuação máxima no Lighthouse (Performance e SEO).
/ Criar um CMS 'Headless' local fácil de manter sem depender de banco de dados externo.
/ Manter a tipagem forte (TypeScript) nos dados de conteúdo.

02. The Solution

A solução foi utilizar o Astro Content Collections. Isso permite definir Schemas Zod rigorosos para validar os arquivos JSON de dados (experiências, projetos) em tempo de build, prevenindo erros de runtime e garantindo integridade estrutural.

src/content/config.ts

const experience = defineCollection({
  loader: glob({ pattern: "**/*.json", base: "./src/content/experience" }),
  schema: z.object({
    company: z.string(),
    role: z.string(),
    rotation: z.array(z.object({
      project: z.string(),
      stack: z.string()
    })).optional()
  })
});

Infrastructure

architecture

Deploy & CI/CD

Hospedado na Cloudflare Pages com Edge Caching. O pipeline de CI/CD é acionado automaticamente a cada push na branch main, otimizando assets em tempo de build.

Previous Project

Next Project Em Breve: Projeto RAG