Portfólio Pessoal
O objetivo deste portfólio vai muito além de apenas listar minhas experiências. Ele é, por si só, uma demonstração prática das minhas habilidades no ecossistema Front-end moderno. Desenvolvido inteiramente do zero, o sistema foi arquitetado focando em três pilares: performance extrema, código altamente componentizado e um design (UI/UX) imersivo.
Stack Tecnológico & Decisões Arquiteturais
- Next.js (App Router): Escolhido pela capacidade de renderização híbrida (SSR/SSG) e rotas dinâmicas, garantindo um SEO impecável e navegação instantânea.
- TypeScript: Tipagem estática rigorosa implementada em toda a base de código, prevenindo erros em tempo de compilação e garantindo contratos de dados seguros (Interfaces).
- Tailwind CSS: Utilizado para construir um Design System consistente, responsivo e sem a necessidade de arquivos CSS pesados e difíceis de manter.
- Framer Motion: Motor de física responsável pelas microinterações, efeitos 3D (Tilt Cards) e animações orquestradas de acordo com o scroll do usuário.
Data-Driven UI & Animações Orquestradas
Para facilitar a escalabilidade, toda a interface é separada da lógica de dados. Os componentes consomem fontes centralizadas para gerar a UI dinamicamente. Abaixo, demonstro como a grid de projetos é construída usando o Framer Motion para gerar uma entrada orgânica:
// Renderização Data-Driven com Efeito Cascata (Stagger){visibleProjects.map((project, index) => (<motion.divkey={project.id}initial={{ opacity: 0, y: 50 }}whileInView={{ opacity: 1, y: 0 }}transition={{ delay: index * 0.1, duration: 0.5 }}viewport={{ once: true, amount: 0.2 }}><ProjectCard {...project} index={index} /></motion.div>))}
Destaques de Interface (UI/UX)
- •Renderização DinâmicaA interface reage aos dados. Adicionar um novo projeto ao portfólio exige zero alterações no front-end, basta atualizar o arquivo de dados TypeScript.
- •Efeito Cascata (Staggering)O cálculo matemático `delay: index * 0.1` cria uma animação sequencial fluida, guiando a atenção do usuário card por card à medida que entram na tela.
- •Performance (Intersection Observer)A propriedade `whileInView` do Framer Motion aciona a animação apenas quando o componente entra no viewport (com 20% de margem no `amount`), poupando a GPU e a bateria do dispositivo.
Roteamento Dinâmico no Next.js 15
A arquitetura de rotas foi construída para absorver novos projetos instantaneamente. Cada página de detalhe é gerada baseada em um parâmetro (slug/id) presente na URL, lidando com a natureza assíncrona das novas APIs do Next.js de forma resiliente:
// src/app/projects/[id]/page.tsxexport default async function ProjectDetail({ params }: Props) {// Desempacotando a Promise de parâmetros (Padrão Next.js 15+)const resolvedParams = await params;const project = projectsData.find((p) => p.id === resolvedParams.id);if (!project) return notFound();// Renderização da página...}
Destaques de Arquitetura (Next.js)
- •Rotas Dinâmicas AssíncronasAdaptação nativa para as novas APIs do Next.js (App Router), tratando `params` como uma Promise para garantir compatibilidade arquitetural com versões futuras do React.
- •Tratamento de ExceçõesUso da função `notFound()` para redirecionamento amigável, sem erros exagerados na tela, (Página 404 automática) caso o usuário tente acessar a URL de um projeto inexistente.
- •Geração do Lado do Servidor (SSR)A lógica de busca do projeto ocorre no servidor antes da página ser entregue, garantindo SEO perfeito e eliminando o tempo de carregamento no cliente.