Diego Gutiérrez - Personal Portfolio

A minimalist, editorial-style personal portfolio website built with modern web technologies.

🎨 Design Philosophy

Concept: "The Minimalist Bio" / "Personal README.md"
Vibe: A virtual coffee chat. Transparent, direct, calm. No "salesy" sections.

Color Palette

• Background: Off-white/Cream (#FAF9F6)
• Text: Soft Charcoal (#2A2A2A)
• Accent: Terracotta (#B87860)
• Muted: Gray (#6B6B6B)

Typography

• Serif (Editorial): Playfair Display - Used for hero name and narrative body text
• Monospace (Code-like): JetBrains Mono - Used for navbar logo, stack info, and technical details
• Sans-Serif: Inter - Used for UI elements

🚀 Tech Stack

• Next.js 16 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS v4 - Utility-first CSS
• Framer Motion - Smooth scroll animations
• GSAP - Available for advanced animations
• tailwind-merge - Merge Tailwind classes
• Class Variance Authority (CVA) - Type-safe component variants

📂 Project Structure

├── app/
│   ├── globals.css       # Tailwind CSS + theme configuration
│   ├── layout.tsx        # Root layout with font configuration
│   └── page.tsx          # Main portfolio page
├── components/
│   ├── Header.tsx        # Sticky header with logo
│   ├── ThemeToggle.tsx   # Light/dark mode toggle
│   ├── FadeIn.tsx        # Framer Motion fade-in wrapper
│   └── ...               # Other reusable components
├── hooks/
│   └── useGSAP.ts        # Custom GSAP hook (available)
├── lib/
│   ├── utils.ts          # cn() utility function
│   └── variants.ts       # CVA variants
└── public/
    └── [add profile-sketch.png here]

🎯 Page Sections

1. Header (Sticky)

   • Logo: diegogutierrez.dev (monospace, left)
   • Theme toggle (sun/moon icon, right)

2. Hero Section

   • Large serif name display
   • Subtitle with title/role

3. The Narrative ("This is me")

   • Core story in Spanish
   • Comfortable reading width (max-w-2xl)
   • Large serif body text

4. The Context

   • Location, languages, current mood
   • Monospace font, muted colors

5. The Stack

   • Technical background
   • Single line, bullet-separated

6. The Invitation

   • Call to action for conversations
   • Contact links (LinkedIn, GitHub, Email, Calendar)
   • Profile sketch image (with gradient fade)

7. Footer

   • Copyright and tech credit

🏃 Getting Started

Development

npm install
npm run dev

Open http://localhost:3000 to see the site.

Build for Production

npm run build
npm start

🖼️ Adding Your Profile Image

1. Add your profile sketch image to /public/profile-sketch.png
2. The image should be a colored pencil sketch with white edges
3. The CSS mask is already configured to blend the edges seamlessly

To enable the image, uncomment the <Image> component in app/page.tsx:

<Image
  src="/profile-sketch.png"
  alt="Diego Gutiérrez"
  fill
  className="object-cover"
/>

And add the import at the top:

import Image from "next/image";

🎨 Customization

Theme Colors

Edit the CSS variables in app/globals.css:

:root {
  --background: #FAF9F6;
  --foreground: #2A2A2A;
  --accent: #B87860;
  --muted: #6B6B6B;
}

Content

All content is in app/page.tsx. Update the sections to match your information:

• Hero name and title
• Narrative text
• Context details (location, languages, etc.)
• Stack information
• Contact links

Fonts

To change fonts, update app/layout.tsx:

import { YourFont } from "next/font/google";

const yourFont = YourFont({
  variable: "--font-your-font",
  subsets: ["latin"],
});

✨ Features

• Responsive Design: Mobile-first, fully responsive layout
• Dark Mode: Theme toggle with localStorage persistence
• Smooth Animations: Framer Motion scroll-triggered fade-ins
• SEO Optimized: Proper meta tags and semantic HTML
• Performance: Next.js optimizations with static generation
• Type Safe: Full TypeScript coverage

📝 Animations

The site uses Framer Motion for subtle entrance animations:

<FadeIn delay={0.2}>
  <p>This content will fade in on scroll</p>
</FadeIn>

GSAP is also available via the useGSAP hook for more complex animations if needed.

🚀 Deploy

Deploy easily to Vercel:

vercel

Or use any other hosting platform that supports Next.js.

📄 License

MIT

---

Built with ❤️ using Next.js, Tailwind CSS, and Framer Motion.