A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS.

• Modern Tech Stack: Next.js 15, TypeScript, Tailwind CSS
• Responsive Design: Mobile-first approach with beautiful animations
• Data-Driven: Content managed through JSON files for easy updates
• PDF Export: Built-in PDF export functionality for resume
• Performance Optimized: Server-side rendering with Next.js
• SEO Ready: Proper meta tags and structured data

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• PDF Generation: jsPDF + html2canvas
• Deployment: Vercel (recommended)

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone https://github.com/pablorecio/pablorecio.github.io.git
cd pablorecio.github.io

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

src/
├── app/                 # Next.js app directory
│   ├── globals.css     # Global styles
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Home page
├── components/         # React components
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section
│   ├── Experience.tsx  # Work experience
│   ├── Technologies.tsx # Tech stack
│   ├── Hobbies.tsx     # Hobbies section
│   ├── Contact.tsx     # Contact information
│   └── PDFExport.tsx  # PDF export functionality
├── data/              # JSON data files
│   ├── experience.json
│   ├── technologies.json
│   ├── hobbies.json
│   └── contact.json
└── lib/               # Utility functions
    └── utils.ts

All content is managed through JSON files in the src/data/ directory:

• Experience: Edit src/data/experience.json
• Technologies: Edit src/data/technologies.json
• Hobbies: Edit src/data/hobbies.json
• Contact: Edit src/data/contact.json

The project uses Tailwind CSS with custom configuration. Key files:

• tailwind.config.js - Tailwind configuration
• src/app/globals.css - Global styles and custom CSS
• src/components/ - Component-specific styles

The project uses a custom dark theme with green accents:

• Background: #0E1116
• Primary: #22FF88
• Card: #11161D
• Text: #E6E6E6

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically

The project can be deployed to any platform that supports Next.js applications.

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

The portfolio includes a PDF export feature that generates a clean, printable version of the resume. The export uses:

• jsPDF for PDF generation
• html2canvas for content capture
• Custom styling for print optimization

• Mobile-first approach
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Touch-friendly navigation
• Optimized images and fonts

• Server-side rendering for fast loading
• Image optimization with Next.js Image component
• Minimal JavaScript bundle
• CSS optimization with Tailwind

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is open source and available under the MIT License.

The project uses PostHog for analytics. To configure PostHog with environment variables:

• NEXT_PUBLIC_POSTHOG_KEY: Your PostHog project key
• NEXT_PUBLIC_POSTHOG_HOST: PostHog API host (default: https://eu.i.posthog.com)

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

# PostHog Configuration
NEXT_PUBLIC_POSTHOG_KEY=phc_Dr4HuSTh5ssM6Gw0Shm5Vh3h0QFyMc0dI7omWNXdghW
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

2. Restart your development server:

npm run dev

Option 1: Using Vercel CLI

# Install Vercel CLI if you haven't already
npm i -g vercel

# Set environment variables
vercel env add NEXT_PUBLIC_POSTHOG_KEY
vercel env add NEXT_PUBLIC_POSTHOG_HOST

# Deploy
vercel --prod

Option 2: Using Vercel Dashboard

1. Go to your project in the Vercel dashboard
2. Navigate to Settings → Environment Variables
3. Add the following variables:
   • NEXT_PUBLIC_POSTHOG_KEY: phc_Dr4HuSTh5ssM6Gw0Shm5Vh3h0QFyMc0dI7omWNXdghW
   • NEXT_PUBLIC_POSTHOG_HOST: https://eu.i.posthog.com
4. Redeploy your application

The PostHog configuration has been moved from the hardcoded index.html file to a React component (src/components/PostHogProvider.tsx) that uses environment variables. This provides:

• Flexibility: Different keys for development and production
• Security: No hardcoded keys in your repository
• Maintainability: Easy to update keys without code changes

• Never commit .env.local to version control
• Use different PostHog keys for development and production
• Consider using Vercel's built-in environment variable management for production

1. PostHog not tracking: Check that environment variables are properly set
2. Environment variables not loading: Ensure they start with NEXT_PUBLIC_ for client-side access
3. Fallback behavior: If environment variables are not set, the system will fall back to the original hardcoded values

• Email: [email protected]
• LinkedIn: linkedin.com/in/pablorecio
• GitHub: github.com/pablorecio