🎯 Caio Fochetto - Portfolio

Portfolio profissional de Caio Fochetto - Líder em Marketing de Influência e Performance Digital com 15+ anos de experiência conectando marca, cultura e performance através de estratégias de conteúdo e influência.

🌐 Live Site: caiofochetto.com

✨ Features

🎨 Design & UX

✅ Self-hosted fonts (Fraunces, Space Grotesk, Manrope) with preloading
✅ Dark/Light mode com persistência (localStorage)
✅ Dynamic favicon (muda com theme) 🎨
✅ Animações suaves e performáticas (Framer Motion)
✅ Modo responsivo mobile-first (100% otimizado)
✅ Acessibilidade WCAG 2.1 AA compliant

🌍 Internacionalização

✅ Suporte a 3 idiomas (PT, EN, ES)
✅ URLs localizadas (/pt, /en, /es)
✅ Auto-detecção de idioma (Accept-Language header) 🌐
✅ Conteúdo dinâmico por localidade

⚡ Performance

✅ 100/100 Lighthouse Performance Score
✅ FCP: 0.4-0.9s (Excellent)
✅ LCP: 0.7-0.9s (Excellent)
✅ CLS: 0 (Perfect)
✅ TBT: 0ms (Perfect)
✅ Bundle otimizado: ~436 KB total page weight

🔍 SEO

✅ Schema.org structured data (Person, CreativeWork, BreadcrumbList)
✅ Dynamic meta tags por página
✅ Open Graph e Twitter Cards
✅ Sitemap.xml automático
✅ robots.txt configurado
✅ Canonical URLs

📊 Analytics

✅ Umami Analytics integrado
✅ Eventos customizados (case views, CTA clicks)
✅ Privacy-first (GDPR compliant)

🛠️ Tech Stack

Framework & Core

Next.js 16 - App Router, Server Components
React 19 - Stable version
TypeScript 5.7 - Type-safe development

Styling & Animation

Tailwind CSS 3 - Utility-first CSS
Framer Motion 11 - Production-ready animations
CSS Variables - Design tokens system
Theme System - Dark/Light mode with dynamic favicon

Fonts

Fraunces - Display font (headings)
Space Grotesk - Sans-serif (subheadings)
Manrope - Body text
Self-hosted with Next.js Font Optimization

Internationalization

Custom i18n implementation via middleware
Dictionary-based translations (/messages/*.json)
Locale-specific routing (/pt, /en, /es)
Auto-detection via Accept-Language header in middleware.ts

Analytics & Monitoring

Umami Analytics - Privacy-focused analytics
Custom event tracking
Real-time monitoring

Deployment

Vercel - Zero-config deployment
Automatic CI/CD from GitHub
Edge Network CDN

🚀 Quick Start

Prerequisites

Node.js 18+ (recommended: 20+)
npm, yarn, or pnpm

Installation

# Clone repository
git clone https://github.com/renanfochetto/caiofochetto-new-portifolio.git
cd caiofochetto-new-portifolio

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

📜 Available Scripts

# Development
npm run dev          # Start dev server (localhost:3000)
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # TypeScript type checking

# Analysis
npm run analyze      # Bundle size analysis (webpack-bundle-analyzer)

📊 Performance Benchmarks

Lighthouse Scores (Desktop)

Metric	Score	Status
Performance	100/100	✅ Excellent
Accessibility	100/100	✅ Perfect
Best Practices	100/100	✅ Perfect
SEO	100/100	✅ Perfect

Core Web Vitals

Metric	Value	Threshold	Status
First Contentful Paint (FCP)	0.4-0.9s	< 1.8s	✅ Good
Largest Contentful Paint (LCP)	0.7-0.9s	< 2.5s	✅ Good
Cumulative Layout Shift (CLS)	0	< 0.1	✅ Perfect
Total Blocking Time (TBT)	0ms	< 300ms	✅ Perfect
Speed Index	0.8-1.0s	< 3.4s	✅ Good

Bundle Size Analysis

Total Page Weight: ~436 KB
├─ JavaScript: ~180 KB (gzipped)
├─ CSS: ~12 KB (gzipped)
├─ Fonts: ~42 KB (3 families, optimized weights)
├─ Images: ~200 KB (WebP with lazy loading)
└─ Other: ~2 KB

Optimizations Applied:

✅ Code splitting by route
✅ Dynamic imports for heavy components
✅ Tree-shaking (removed unused Lucide icons: -337 KB)
✅ Image optimization (Next.js Image component)
✅ Font subsetting and preloading

🏗️ Project Structure

caiofochetto-new-portifolio/
├── app/                          # Next.js App Router
│   ├── [locale]/                 # Localized routes (pt, en, es)
│   │   ├── page.tsx              # Homepage
│   │   ├── layout.tsx            # Layout with i18n
│   │   ├── performance-case/     # Performance case pages
│   │   ├── production-case/      # Production case pages
│   │   └── not-found.tsx         # Custom 404 page
│   ├── fonts.css                 # Self-hosted fonts
│   └── globals.css               # Global styles
│
├── components/                   # React components
│   ├── cards/                    # Case cards
│   ├── case/                     # Case page sections
│   ├── layout/                   # Header, Footer
│   ├── sections/                 # Homepage sections
│   ├── seo/                      # SEO components (Schema.org)
│   ├── templates/                # Page templates
│   └── ui/                       # Reusable UI components
│
├── lib/                          # Utilities & data
│   ├── data/                     # Static data (cases, experiences)
│   ├── helpers/                  # Helper functions
│   ├── i18n/                     # Internationalization configuration
│   │   └── dictionaries.ts       # Dictionary loader
│   └── utils.ts                  # Utility functions
│
├── messages/                     # Translation files (JSON)
│   ├── en.json                   # English
│   ├── es.json                   # Spanish
│   └── pt.json                   # Portuguese
│
├── types/                        # TypeScript types
│   ├── index.ts                  # Central exports
│   ├── common.ts                 # Shared types
│   ├── guards.ts                 # Type guards
│   ├── localization.ts           # i18n utilities
│   ├── performance-case.ts       # Performance cases
│   └── production-case.ts        # Production cases
│
├── public/                       # Static assets
│   ├── fonts/                    # Self-hosted fonts
│   ├── images/                   # Optimized images
│   ├── logos/                    # Brand logos (SVG)
│   ├── favicon-dark.svg          # Dark mode favicon
│   └── favicon-light.svg         # Light mode favicon
│
└── next.config.mjs               # Next.js configuration

🎨 Type Architecture

The project follows a hybrid type architecture for optimal maintainability:

Centralized Types (`/types`)

Domain types used across multiple components:

CaseData - Performance case structure
ProductionCase - Production case structure
Locale, LocalizedFields - i18n types
Type guards: isCaseData(), isProductionCase()
Utilities: getLocalizedField(), getLocalizedArray()

Component-Level Types

Props interfaces remain inline for component-specific logic.

Rule: If used in 2+ components or domain logic → /types. Otherwise → inline.

🌙 Theme System

Dark/Light Mode

The portfolio features a sophisticated theme system:

Automatic detection of system preference
Manual toggle via UI button
Persistent across sessions (localStorage)
Dynamic favicon that changes with theme
Smooth transitions between modes

Favicon Implementation

// Dark mode: CF logo in lime green
favicon-dark.svg

// Light mode: CF logo in dark purple
favicon-light.svg

// Auto-switches based on theme
useEffect(() => {
  const favicon = document.querySelector('link[rel="icon"]');
  favicon.href = theme === 'dark' 
    ? '/favicon-dark.svg' 
    : '/favicon-light.svg';
}, [theme]);

🔧 Configuration

Environment Variables

Create .env.local:

# Umami Analytics (optional)
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id
NEXT_PUBLIC_UMAMI_URL=https://cloud.umami.is

Next.js Config

Key configurations in next.config.mjs:

Image optimization (AVIF, WebP)
Remote patterns for external assets
Bundle analyzer (development)
PostCSS integration (Tailwind)

i18n Middleware

Routing and locale detection logic is centralized in middleware.ts:

Locale detection (Accept-Language)
Automatic redirection (/ → /pt)
Static file exclusion from localized routes

🌍 Internationalization

Supported Locales

🇧🇷 Portuguese (pt-BR) - Default
🇺🇸 English (en-US)
🇪🇸 Spanish (es-ES)

Auto-Detection

The site automatically detects user language from:

Accept-Language HTTP header
Browser settings
Falls back to Portuguese (default)

Adding Translations

// messages/pt.json
{
  "hero": {
    "headline": "Seu texto aqui"
  }
}

Using Translations

import { getDictionary } from '@/lib/i18n/dictionaries';

const dict = getDictionary(locale);
// {dict.hero.headline}

📈 SEO Strategy

Schema.org Implementation

Dynamic structured data:

PersonSchema - Auto-updates years of experience
CaseStudySchema - Individual case metadata
BreadcrumbSchema - Navigation hierarchy
PortfolioWebsiteSchema - Site-level metadata

Single source of truth: All dates extracted from lib/data/experiences.ts

Meta Tags

Each page includes:

Dynamic <title> and <meta description>
Open Graph tags (Facebook, LinkedIn)
Twitter Cards
Canonical URLs
hreflang tags (multilingual)

🎯 Optimization Checklist

✅ Performance Optimizations Applied

✅ SEO Optimizations

✅ Accessibility (WCAG 2.1 AA)

✅ Best Practices

🚢 Deployment

Automatic Deployment (Vercel)

Every push to main branch triggers:

Build verification
Type checking
Lint checks
Deployment to production
Automatic preview URLs for PRs

Manual Deployment

# Build locally
npm run build

# Test production build
npm run start

# Deploy to Vercel
vercel --prod

📝 Development Guidelines

Code Style

ESLint configuration enforced
TypeScript strict mode enabled
Prettier for formatting (recommended)
Commit messages: Conventional Commits

Component Patterns

// Prefer named exports
export function ComponentName() { }

// Use TypeScript interfaces for props
interface ComponentProps {
  title: string;
  optional?: boolean;
}

// Destructure props
export function Component({ title, optional = false }: ComponentProps) {
  // ...
}

Performance Best Practices

Use next/image for all images
Dynamic imports for heavy components
Avoid client-side data fetching when possible
Leverage Server Components (default in App Router)

🐛 Troubleshooting

Build Errors

# Clear Next.js cache
rm -rf .next

# Clear node_modules
rm -rf node_modules
npm install

# Rebuild
npm run build

Type Errors

# Run type check
npm run type-check

# Check specific file
npx tsc --noEmit path/to/file.tsx

Font Loading Issues

Fonts are self-hosted in /public/fonts. If fonts don't load:

Check /app/fonts.css paths
Verify font files in /public/fonts
Check browser DevTools Network tab

📊 Analytics & Monitoring

Umami Dashboard

Access real-time analytics:

Events: Case views, CTA clicks, video plays
Funnels: Homepage → Case → Contact
Goals: LinkedIn clicks, 2+ cases viewed
Segments: Returning visitors, traffic sources

Performance Monitoring

Tools used:

Lighthouse: Chrome DevTools
WebPageTest: webpagetest.org
Vercel Analytics: Real User Monitoring (RUM)

🤝 Contributing

This is a personal portfolio project. However, if you find bugs or have suggestions:

Open an issue describing the problem
Fork the repository
Create a feature branch
Submit a pull request

📄 License

Portfolio website - Unauthorized copying or distribution prohibited.

👨‍💻 Developer

Developed by: Renan Fochetto
📧 Email: self@renanfochetto.dev
Client: Caio Fochetto
Project Duration: February 2026
Status: ✅ Production Ready

📞 Contact

Caio Fochetto
📧 Email: [contact form on website]
💼 LinkedIn: linkedin.com/in/caiofochetto
📺 YouTube: @caiofochetto

⭐ If you found this project interesting, consider giving it a star!

Made with ❤️ using Next.js 15, TypeScript, and Tailwind CSS

Name		Name	Last commit message	Last commit date
Latest commit History 65 Commits
.github/workflows		.github/workflows
.idea		.idea
.vscode		.vscode
app		app
components		components
hooks		hooks
lib		lib
messages		messages
public		public
types		types
.gitignore		.gitignore
README.md		README.md
middleware.ts		middleware.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

🎯 Caio Fochetto - Portfolio

✨ Features

🎨 Design & UX

🌍 Internacionalização

⚡ Performance

🔍 SEO

📊 Analytics

🛠️ Tech Stack

Framework & Core

Styling & Animation

Fonts

Internationalization

Analytics & Monitoring

Deployment

🚀 Quick Start

Prerequisites

Installation

📜 Available Scripts

📊 Performance Benchmarks

Lighthouse Scores (Desktop)

Core Web Vitals

Bundle Size Analysis

🏗️ Project Structure

🎨 Type Architecture

Centralized Types (/types)

Component-Level Types

🌙 Theme System

Dark/Light Mode

Favicon Implementation

🔧 Configuration

Environment Variables

Next.js Config

i18n Middleware

🌍 Internationalization

Supported Locales

Auto-Detection

Adding Translations

Using Translations

📈 SEO Strategy

Schema.org Implementation

Meta Tags

🎯 Optimization Checklist

✅ Performance Optimizations Applied

✅ SEO Optimizations

✅ Accessibility (WCAG 2.1 AA)

✅ Best Practices

🚢 Deployment

Automatic Deployment (Vercel)

Manual Deployment

📝 Development Guidelines

Code Style

Component Patterns

Performance Best Practices

🐛 Troubleshooting

Build Errors

Type Errors

Font Loading Issues

📊 Analytics & Monitoring

Umami Dashboard

Performance Monitoring

🤝 Contributing

📄 License

👨‍💻 Developer

📞 Contact

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Centralized Types (`/types`)

Packages