🚀 Juan Gomez - Senior Software Engineer Portfolio

Modern, high-performance portfolio website built with Next.js 16, React 19, and TypeScript. Features a creative design with Forest Code color palette, multilingual support (English/Spanish), and full integration with Dev.to blog.

---

✨ Features

🎨 Modern Design

• Forest Code Color Palette: Emerald green, violet, and amber gradients
• Responsive Design: Mobile-first approach (320px → 4K)
• Dark/Light Mode: System preference detection with smooth transitions
• Smooth Animations: Framer Motion with performance optimization
• Gradient Text Effects: Custom gradients without clipping issues

🌍 Internationalization (i18n)

• Languages: English (en) & Spanish (es)
• Library: next-intl 4.12.0 for Server Components
• Auto-detection: Browser language, cookies, URL path
• SEO-friendly: hreflang tags and locale-specific sitemaps

📝 Content Management

• Dev.to Integration: Automatic blog post fetching via API
• ISR Caching: 1-hour revalidation for optimal performance
• Local MDX Support: Ready for custom content
• Dynamic Metadata: SEO optimized for each page

🛡️ Security & Performance

• Rate Limiting: In-memory limiter (production-ready)
• Security Headers: CSP, XSS protection, CSRF prevention
• Edge Middleware: Bot protection and DDoS mitigation
• Core Web Vitals: Optimized for 90+ Lighthouse scores

🎯 Key Sections

• Hero: Profile photo, typewriter animation (5 roles), social links
• About: Professional stats (15+ years, 500K+ users, Architect, Scalable)
• Experience: Timeline of professional journey
• Projects: Featured work with case studies
• Blog: Dev.to articles integration
• Contact: Secure contact form
• 404 Page: Creative tech-themed animated error page

---

🛠️ Tech Stack

Core

• Framework: Next.js 16.2.6 (App Router, Turbopack)
• React: React 19.2.4 (Server Components, Suspense)
• Language: TypeScript 5+ (strict mode)
• Runtime: Node.js 20+

Styling

• CSS Framework: Tailwind CSS 4 (JIT mode, modern syntax)
• Animations: Framer Motion 12.40.0
• Icons: Lucide React (Terminal, Code, Server, Database, Cpu, etc.)
• Fonts: Geist Sans & Geist Mono (Google Fonts)

Internationalization

• i18n: next-intl 4.12.0
• Timezone: America/Managua
• Locales: en (default), es

Content & Data

• Blog: Dev.to Public API (username: jgomezdev)
• MDX: next-mdx-remote (ready for local content)
• Analytics: Vercel Analytics (privacy-focused)

Development Tools

• Package Manager: pnpm (fast, efficient)
• Linting: ESLint with Next.js config
• Testing: Playwright (E2E, ready for CI/CD)
• Git Remote: origin-ssh (SSH authentication)

---

📂 Project Structure

juangomezb/
├── src/
│   ├── app/
│   │   ├── [locale]/           # Localized routes (en, es)
│   │   │   ├── layout.tsx      # Root layout with i18n
│   │   │   ├── page.tsx        # Home page (all sections)
│   │   │   └── not-found.tsx   # Localized 404 page
│   │   ├── layout.tsx          # Root layout (non-locale routes)
│   │   ├── not-found.tsx       # Root 404 page
│   │   ├── globals.css         # Global styles + Forest Code palette
│   │   ├── sitemap.ts          # Dynamic sitemap generation
│   │   └── robots.ts           # Dynamic robots.txt
│   ├── components/
│   │   ├── layouts/
│   │   │   ├── Header.tsx      # Navigation with locale switcher
│   │   │   └── Footer.tsx      # Footer with social links
│   │   ├── sections/
│   │   │   ├── HeroSection.tsx         # Landing with typewriter
│   │   │   ├── AboutSection.tsx        # Stats, skills, expertise
│   │   │   ├── ExperienceSection.tsx   # Career timeline
│   │   │   ├── ProjectsSection.tsx     # Featured projects
│   │   │   ├── BlogSection.tsx         # Dev.to integration
│   │   │   ├── BlogCard.tsx            # Blog post card
│   │   │   └── ContactSection.tsx      # Contact form
│   │   ├── providers/
│   │   │   └── Providers.tsx   # Theme, i18n providers
│   │   └── ui/                 # Reusable UI components
│   ├── lib/
│   │   ├── api/
│   │   │   └── devto.ts        # Dev.to API client
│   │   ├── utils/
│   │   │   ├── cn.ts           # className utility (clsx + twMerge)
│   │   │   └── seo.ts          # SEO metadata generation
│   │   └── security/
│   │       └── rate-limiter.ts # In-memory rate limiting
│   └── types/                  # TypeScript definitions
├── messages/
│   ├── en.json                 # English translations
│   └── es.json                 # Spanish translations
├── public/
│   ├── images/
│   │   └── profile_photo.png   # Hero profile photo
│   ├── resume/
│   │   ├── juan-gomez-cv-en.pdf
│   │   └── juan-gomez-cv-es.pdf
│   └── favicon.svg             # Forest Code gradient favicon
├── middleware.ts               # Edge middleware (security, rate limiting)
├── i18n.ts                     # next-intl configuration
├── routing.ts                  # Locale routing config
├── next.config.ts              # Next.js configuration
├── tailwind.config.ts          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
└── package.json                # Dependencies

---

🚀 Getting Started

Prerequisites

• Node.js 20+ (Download)
• pnpm 8+ (Installation)

Installation

# Clone the repository
git clone git@github.com:Juxn89/juangomezb.git
cd juangomezb

# Install dependencies
pnpm install

Development Server

# Start dev server (localhost:3000)
pnpm dev

# Start dev server with Turbopack (faster)
pnpm dev --turbo

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

Build for Production

# Create optimized production build
pnpm build

# Preview production build locally
pnpm start

Testing

# Run Playwright E2E tests
pnpm test

# Run tests in UI mode (visual debugging)
pnpm test:ui

# Run tests in headed mode (browser visible)
pnpm test:headed

---

⚙️ Configuration

Environment Variables

Create a .env.local file in the root directory:

# Public
NEXT_PUBLIC_SITE_URL=https://juangomezb.com

# Optional (for production scaling)
UPSTASH_REDIS_REST_URL=your_redis_url
UPSTASH_REDIS_REST_TOKEN=your_redis_token

Locales

Configure locales in i18n.ts:

export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`./messages/${locale}.json`)).default,
  timeZone: 'America/Managua',
}));

Dev.to Username

Update username in src/lib/api/devto.ts:

const DEVTO_USERNAME = 'jgomezdev'; // Change to your username

---

🎨 Customization

Color Palette (Forest Code)

Edit src/app/globals.css:

:root {
  --color-accent-primary: 4 120 87;     /* Emerald green */
  --color-accent-secondary: 124 58 237; /* Violet */
  --color-accent-tertiary: 251 191 36;  /* Amber */
}

.dark {
  --color-accent-primary: 16 185 129;   /* Bright green */
  --color-accent-secondary: 167 139 250;/* Soft violet */
  --color-accent-tertiary: 252 211 77;  /* Golden yellow */
}

Skills List

Edit src/components/sections/AboutSection.tsx:

const skills = [
  {name: '.NET', category: 'backend', icon: Code},
  {name: 'React', category: 'frontend', icon: Code},
  // Add your skills...
];

Stats Cards

Edit src/components/sections/AboutSection.tsx:

const stats = [
  {label: t('stats.experience'), value: '15+'},
  {label: t('stats.users'), value: '500K+'},
  // Customize your stats...
];

---

🌐 Deployment

Vercel (Recommended)

1. Push to GitHub:

   git push origin-ssh main

2. Import project in Vercel Dashboard

3. Configure:

   • Framework: Next.js
   • Root Directory: ./
   • Build Command: pnpm build
   • Output Directory: .next

4. Add environment variables in Vercel dashboard

5. Deploy! 🎉

Manual Deploy

# Build
pnpm build

# Deploy .next folder to your hosting provider

---

📝 Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Create production build
pnpm start	Start production server
pnpm lint	Run ESLint
pnpm test	Run Playwright tests
pnpm test:ui	Run tests in UI mode

---

📚 Documentation & Context Preservation

Complete Documentation Suite

This project includes comprehensive documentation to preserve all development context:

Document	Purpose
README.md (this file)	Project overview, features, getting started
SETUP.md	Step-by-step setup guide after cloning
DEVELOPMENT.md	Complete development context, decisions, problems & solutions
CONVERSATION_HISTORY.md	Full chronological history of AI-assisted development
CHANGELOG.md	Version history and changes
AGENTS.md	AI agent guidelines for code generation
docs/transcripts/	Raw conversation transcripts (JSONL format)

Why This Matters

After formatting your laptop or switching machines, you can:

• ✅ Quickly set up the project (SETUP.md)
• ✅ Understand all architectural decisions (DEVELOPMENT.md)
• ✅ See the complete development journey (CONVERSATION_HISTORY.md)
• ✅ Review specific problems and solutions
• ✅ Maintain consistent code quality with AI assistance

Quick Start After Formatting

1. Clone repository: git clone git@github.com:juxn89/juangomezb.git
2. Follow SETUP.md checklist
3. Run pnpm install && pnpm dev
4. Review DEVELOPMENT.md for context

---

🤝 Contributing

This is a personal portfolio project, but suggestions and bug reports are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👤 Author

Juan Gomez

• Portfolio: juangomezb.com
• GitHub: @Juxn89
• LinkedIn: jcgomez89
• Email: gb.jc@outlook.com
• Dev.to: @jgomezdev

---

🙏 Acknowledgments

• Next.js - The React Framework
• Vercel - Deployment platform
• Tailwind CSS - Utility-first CSS
• Framer Motion - Animation library
• next-intl - Internationalization
• Dev.to - Blogging platform API
• Lucide - Icon library

---

Built with ❤️ using Next.js 16 and React 19