Portfolio Website - Rodrigo Manuel Navarro Lajous

A modern, SEO-optimized portfolio website showcasing professional experience, projects, speaking engagements, and education.

🌐 Live Site: navarrolajous.com | www.navarrolajous.com

Overview

This is a professional portfolio website built with Next.js 14 (App Router) and TypeScript, featuring a modern design system with dark mode support, comprehensive SEO optimization, and dynamic content sections. The site showcases professional experience, project portfolio, academic background, and speaking engagements at conferences.

Key Highlights:

📱 Fully responsive design (mobile-first approach)
🌓 Dark/Light theme with system detection
🔍 SEO optimized with sitemap, robots.txt, and Schema.org structured data
⚡ Static generation for optimal performance
📊 Integrated Umami Analytics
📧 Contact form with Resend email integration
🎤 Speaking engagements and conference talks showcase

✨ Features

Core Sections

🏢 Experience

Jobs & Startups: Separate tabs for employment history and entrepreneurial ventures
Detail Pages: Individual pages for each role with dynamic routes (/experience/[slug])
Rich Content: Responsibilities, achievements, tech stack, location, and period
Company Links: Direct links to company websites and profiles

💼 Projects

Three Categories: Freelance, Hobby, and Open Source projects
Detail Pages: Comprehensive project showcase (/projects/[slug])
Project Details: Features, challenges, impact, screenshots, and banners
Links: GitHub repositories and live project URLs
Visual Content: Project banners and multiple screenshots

🎤 Talks & Speaking Engagements

Conference Presentations: Showcase of talks at DuneCon, DeFi Security Summit, etc.
Detail Pages: Full talk information with descriptions and topics (/talks/[slug])
Media Integration: YouTube video embeds and PDF slide viewers
Event Information: Date, location, and event details

🎓 Education

Academic Background: Degrees and certifications
Detail Pages: In-depth educational credentials (/education/[slug])
Academic Details: Thesis information, coursework, achievements, and tech stack

📬 Contact

Contact Form: Validated form with Zod schema
Email Integration: Automated email notifications via Resend API
User Feedback: Toast notifications for form submission status

Additional Features

📄 Resume Download: Direct PDF download from header navigation
🔗 Social Links: GitHub and LinkedIn integration
🎨 Theme Toggle: Smooth dark/light mode switching with persistence
📱 Mobile Navigation: Responsive header with mobile menu
🔍 SEO: Meta tags, OpenGraph, Twitter cards, and JSON-LD structured data
🗺️ Sitemap: Auto-generated sitemap for all routes
🤖 Robots.txt: Search engine crawler configuration
📈 Analytics: Umami Analytics integration for privacy-friendly tracking

🛠️ Tech Stack

Frontend Framework

Next.js 14 - React framework with App Router
React 18 - UI library
TypeScript 5 - Type-safe JavaScript (strict mode)

Styling

Tailwind CSS 3 - Utility-first CSS framework
tailwindcss-animate - Animation utilities
tailwind-merge - Utility for merging Tailwind classes

UI Components

shadcn/ui - Re-usable component library
Radix UI - Unstyled accessible components
- Dialog, Dropdown Menu, Label, Navigation Menu, Slot, Tabs, Toast, Avatar
Lucide React - Icon library
class-variance-authority - CVA for component variants

Features & Utilities

next-themes - Dark mode implementation
react-hook-form - Form handling
Zod - Schema validation
@hookform/resolvers - Form validation resolvers
Resend - Email API for contact form
clsx - Conditional classNames utility

Development Tools

ESLint - Code linting
PostCSS - CSS processing
Autoprefixer - CSS vendor prefixes

Deployment & Analytics

Vercel - Hosting and deployment platform
Umami Analytics - Privacy-friendly analytics

📁 Project Structure

website/
├── app/                          # Next.js App Router
│   ├── api/
│   │   └── contact/
│   │       └── route.ts         # Contact form API endpoint
│   ├── contact/
│   │   ├── components/
│   │   │   └── ContactForm.tsx  # Contact form component
│   │   └── page.tsx             # Contact page
│   ├── education/
│   │   ├── [slug]/
│   │   │   └── page.tsx         # Education detail pages
│   │   ├── components/
│   │   │   └── EducationCard.tsx
│   │   └── page.tsx             # Education list page
│   ├── experience/
│   │   ├── [slug]/
│   │   │   └── page.tsx         # Experience detail pages
│   │   ├── components/
│   │   │   ├── ExperienceCard/
│   │   │   └── ExperiencesTab.tsx
│   │   ├── layout.tsx           # Experience layout for metadata
│   │   └── page.tsx             # Experience list with tabs
│   ├── projects/
│   │   ├── [slug]/
│   │   │   └── page.tsx         # Project detail pages
│   │   ├── components/
│   │   │   ├── ProjectCard/
│   │   │   └── ProjectTabs.tsx
│   │   ├── layout.tsx           # Projects layout for metadata
│   │   └── page.tsx             # Projects list with tabs
│   ├── talks/
│   │   ├── [slug]/
│   │   │   └── page.tsx         # Talk detail pages
│   │   ├── components/
│   │   │   ├── PDFViewer.tsx
│   │   │   ├── TalkCard.tsx
│   │   │   └── YouTubeEmbed.tsx
│   │   └── page.tsx             # Talks list page
│   ├── favicon.ico
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page
│   ├── robots.ts                # Robots.txt generation
│   └── sitemap.ts               # Sitemap generation
│
├── components/                   # Shared components
│   ├── emails-templates/        # Email templates for Resend
│   ├── Footer/
│   ├── Header/                  # Navigation header
│   ├── ModeToggle/              # Dark/light theme toggle
│   ├── SchemaOrgScripts/        # SEO structured data
│   ├── ui/                      # shadcn/ui components
│   └── theme-provider.tsx       # Theme provider wrapper
│
├── constants/                    # Application constants
│   └── routes.ts                # Route definitions and SITE_URL config
│
├── domains/                      # TypeScript interfaces/types
│   ├── Education.ts             # Education interface
│   ├── Experience.ts            # Experience interface
│   ├── Project.ts               # Project interface
│   └── Talk.ts                  # Talk interface
│
├── lib/                         # Library utilities
│   └── utils.ts                 # Tailwind utility (cn function)
│
├── public/                      # Static assets
│   ├── assets/                  # Images, banners, etc.
│   └── resume.pdf               # Downloadable resume
│
├── services/                    # Data services (static data)
│   ├── education.ts             # Education data
│   ├── experience.ts            # Jobs, startups, skills data
│   ├── projects.ts              # Projects data (freelance, hobby, opensource)
│   └── talks.ts                 # Talks and presentations data
│
├── utils/                       # Utility functions
│   ├── getEnv.ts               # Environment variable helper
│   └── iconUtils.ts            # Icon utilities
│
├── .claude/                     # Claude Code configuration
│   ├── commands/                # Custom slash commands
│   │   ├── start.md            # /start - Create feature branch
│   │   ├── commit.md           # /commit - Stage and commit
│   │   ├── sync.md             # /sync - Sync with main
│   │   ├── build.md            # /build - Build and validate
│   │   ├── release.md          # /release - Create release
│   │   ├── dev.md              # /dev - Start dev server
│   │   ├── finish.md           # /finish - Create PR
│   │   └── release-notes.md    # /release-notes - Enhance release
│   └── CLAUDE.md               # AI assistant guidance
│
├── .env.template                # Environment variables template
├── .nvmrc                       # Node version specification
├── components.json              # shadcn/ui configuration
├── next.config.js               # Next.js configuration
├── package.json                 # Dependencies and scripts
├── postcss.config.js            # PostCSS configuration
├── tailwind.config.ts           # Tailwind configuration
└── tsconfig.json                # TypeScript configuration

🗄️ Data Architecture

This project uses a static TypeScript data pattern where all content is stored as typed data in the services/ directory. This approach provides:

✅ Type safety for all content
✅ Easy content management
✅ Fast builds (static generation)
✅ No database needed

Domain Interfaces

All content types are defined as TypeScript interfaces in domains/:

// domains/Experience.ts
export interface Experience {
  id: number;
  slug: string;
  type: 'job' | 'startup';
  company: string;
  position: string;
  period: string;
  location?: string;
  companyUrl?: string;
  responsibilities: string[];
  achievements?: string[];
  technologies: string[];
  banner?: string;
}

// domains/Project.ts
export interface Project {
  id: number;
  slug: string;
  type: 'freelance' | 'hobby' | 'opensource';
  name: string;
  company: string;
  github?: string;
  website?: string;
  period: string;
  description: string;
  detailedDescription?: string;
  features?: string[];
  challenges?: string[];
  technologies: string[];
  banner?: string;
  screenshots?: string[];
  impact?: string;
}

Data Services

Content is stored in services/ files as typed arrays:

// services/experience.ts
import { Experience } from "@/domains/Experience";

export const jobs: Experience[] = [
  {
    id: 1,
    slug: "webacy",
    type: "job",
    company: "Webacy",
    position: "Staff Software Engineer",
    period: "Jan 2023 — Present",
    // ... more fields
  },
  // ... more jobs
];

export const startups: Experience[] = [
  // ... startups
];

🚀 Getting Started

Prerequisites

Node.js: Version specified in .nvmrc (use nvm use if you have nvm installed)
npm: Comes with Node.js
Resend Account: For contact form email functionality (sign up at resend.com)

Installation

Clone the repository:

git clone https://github.com/rlajous/website.git
cd website

Set up Node.js version:
```
nvm use
```
If you don't have nvm, ensure you're using the Node.js version from .nvmrc.
Install dependencies:
```
npm install
```

Configure environment variables:

cp .env.template .env.local

Update .env.local with your values:

# Resend API Key (get from https://resend.com/api-keys)
RESEND_API_KEY=re_your_api_key_here

# Email recipient for contact form
RECIPIENT_EMAIL=[email protected]

# Optional: Override site URL for different environments
NEXT_PUBLIC_SITE_URL=https://navarrolajous.com

Start the development server:
```
npm run dev
```
Open your browser: Navigate to http://localhost:3000

Troubleshooting

Issue: Module not found errors

Solution: Delete node_modules and .next, then run npm install again

Issue: Environment variables not working

Solution: Restart the dev server after changing .env.local
Ensure variables start with NEXT_PUBLIC_ for client-side access

Issue: Build fails

Solution: Run npm run build locally to see detailed error messages
Check TypeScript errors with npm run lint

💻 Development Workflow

This project uses custom slash commands (in .claude/commands/) for streamlined development:

Available Commands

/start - Start a new PR by creating a feature branch
- Creates branch following naming convention (feat/, fix/, etc.)
- Stores context for other commands
/commit - Stage and commit changes with proper formatting
- Follows conventional commit format
- Adds co-author attribution
/sync - Sync your feature branch with latest main
- Prevents merge conflicts
- Keeps branch up to date
/build - Build and validate the production bundle locally
- Runs npm run build
- Validates output
/dev - Start the development server with environment validation
- Checks environment variables
- Starts npm run dev
/finish - Create a pull request with comprehensive description
- Generates PR description
- Creates PR on GitHub
/release - Create a new release version and trigger deployment
- Bumps version (patch/minor/major)
- Creates git tag
- Triggers Vercel deployment
/release-notes - Enhance GitHub release with detailed notes
- Generates categorized changelog
- Updates GitHub release

Git Workflow

Branch Naming Convention:

feat/feature-name       # New features
fix/bug-description     # Bug fixes
refactor/what-changed   # Code improvements
content/what-updated    # Content updates
design/what-improved    # Design changes
docs/what-documented    # Documentation

Commit Message Format:

[ Type ] Description

Examples:
[ Feature ] Add blog section with MDX support
[ Bug ] Fix mobile navigation overflow
[ Content ] Update experience with Webacy role
[ Design ] Improve dark mode theme transitions
[ Refactor ] Simplify contact form validation

➕ Adding Content

Adding a New Job/Experience

Open services/experience.ts
Add a new entry to the jobs or startups array:

export const jobs: Experience[] = [
  {
    id: 8, // Increment ID
    slug: "company-name", // URL-friendly slug
    type: "job",
    company: "Company Name",
    position: "Your Position",
    period: "Jan 2024 — Present",
    location: "Remote", // Optional
    companyUrl: "https://company.com", // Optional
    responsibilities: [
      "Key responsibility 1",
      "Key responsibility 2",
      "Key responsibility 3",
    ],
    achievements: [ // Optional
      "Achievement 1",
      "Achievement 2",
    ],
    technologies: ["React", "TypeScript", "Node.js"],
    banner: "/experience/company-banner.jpg", // Optional
  },
  // ... existing jobs
];

Add banner image to public/assets/experience/ (if using)
The detail page will be auto-generated at /experience/company-name

Adding a New Project

Open services/projects.ts
Add to freelance, hobby, or opensource array:

export const freelance: Project[] = [
  {
    id: 8, // Increment ID
    slug: "project-name",
    type: "freelance",
    name: "Project Name",
    company: "Client Name",
    github: "https://github.com/user/repo", // Optional
    website: "https://project.com", // Optional
    period: "2024",
    description: "Brief description for card view",
    detailedDescription: "Longer description for detail page", // Optional
    features: [ // Optional
      "Feature 1",
      "Feature 2",
    ],
    challenges: [ // Optional
      "Challenge 1",
      "Challenge 2",
    ],
    technologies: ["Next.js", "Tailwind CSS"],
    banner: "/projects/project-banner.jpg", // Optional
    screenshots: [ // Optional
      "/projects/project-screenshot-1.jpg",
      "/projects/project-screenshot-2.jpg",
    ],
    impact: "Impact description", // Optional
  },
  // ... existing projects
];

Add images to public/assets/projects/
Detail page will be at /projects/project-name

Adding a New Talk/Speaking Engagement

Open services/talks.ts
Add a new talk:

export const talks: Talk[] = [
  {
    id: 3, // Increment ID
    slug: "event-name-year",
    title: "Talk Title",
    event: "Conference Name",
    location: "City, Country",
    date: "2025-03-15",
    description: "Talk description and key points",
    topics: ["Topic 1", "Topic 2", "Topic 3"],
    slides: "https://slides.com/presentation", // Optional
    video: "https://youtube.com/watch?v=...", // Optional
    banner: "/talks/event-banner.jpg", // Optional
  },
  // ... existing talks
];

Add banner to public/assets/talks/
Detail page will be at /talks/event-name-year

Adding Education

Open services/education.ts
Add new entry:

export const education: Education[] = [
  {
    id: 3, // Increment ID
    slug: "degree-institution",
    degree: "Degree Name",
    institution: "University Name",
    period: "2020 — 2024",
    location: "City, Country", // Optional
    institutionUrl: "https://university.edu", // Optional
    specialization: "Specialization", // Optional
    thesis: { // Optional
      title: "Thesis Title",
      description: "Thesis description",
      link: "https://thesis-link.com",
    },
    coursework: ["Course 1", "Course 2"], // Optional
    achievements: ["Achievement 1"], // Optional
    technologies: ["Python", "R", "MATLAB"],
    banner: "/education/institution-banner.jpg", // Optional
  },
  // ... existing education
];

🎨 Customization

Changing Theme Colors

Edit app/globals.css to modify the color palette:

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%; /* Change primary color */
    --secondary: 210 40% 96.1%; /* Change secondary color */
    /* ... other colors */
  }

  .dark {
    --primary: 210 40% 98%; /* Dark mode primary */
    /* ... other colors */
  }
}

Modifying Components

Components follow the shadcn/ui pattern. To modify a component:

Find it in components/ui/
Edit the component file
Maintain the CVA pattern for variants

Adding New Pages

Create a new directory in app/

Add page.tsx:

export default function NewPage() {
  return <div>New Page Content</div>
}

Add to navigation in components/Header/
Update constants/routes.ts

Updating SEO Metadata

Edit app/layout.tsx for global metadata:

export const metadata: Metadata = {
  title: "Your Name | Title",
  description: "Your description",
  // ... other metadata
};

For page-specific metadata, add generateMetadata to page files.

📜 Available Scripts

# Development
npm run dev          # Start development server (http://localhost:3000)

# Production
npm run build        # Build for production
npm start            # Start production server

# Code Quality
npm run lint         # Run ESLint

🌐 Deployment

Vercel Deployment (Recommended)

This site is optimized for Vercel deployment with automatic CI/CD:

Fork/Clone this repository
Connect to Vercel:
- Go to vercel.com
- Click "New Project"
- Import your repository
- Vercel will auto-detect Next.js

Configure Environment Variables: In Vercel project settings, add:

RESEND_API_KEY=your_resend_api_key
[email protected]
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Configure Domains:
- Add your custom domain in Vercel project settings
- Update DNS records as instructed by Vercel
- Both apex and www domains are supported
Deploy:
- Push to main branch to trigger deployment
- Vercel builds and deploys automatically
- Preview deployments created for pull requests

Post-Deployment

Analytics: Configure Umami Analytics in app/layout.tsx
Sitemap: Automatically generated at /sitemap.xml
Robots: Configured at /robots.txt
Monitoring: Check Vercel dashboard for build logs and analytics

🤝 Contributing

Contributions are welcome! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.

How to Contribute

Fork the repository
Create a feature branch:
```
git checkout -b feat/amazing-feature
```
Make your changes:
- Follow the existing code style
- Add types for all TypeScript code
- Test your changes locally
- Update documentation if needed

Commit your changes:

git commit -m "[ Feature ] Add amazing feature"

Push to your fork:
```
git push origin feat/amazing-feature
```
Open a Pull Request

Code Style Guidelines

TypeScript: Use strict mode, add types for all variables
Components: Follow shadcn/ui patterns
Naming: Use descriptive names, camelCase for variables/functions
Comments: Add comments for complex logic
Formatting: Use Prettier (if configured) or follow existing style

📄 License

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

📧 Contact

Rodrigo Manuel Navarro Lajous

🌐 Website: navarrolajous.com
💼 LinkedIn: linkedin.com/in/rodrigo-lajous
🐙 GitHub: @rlajous
🐦 Twitter: @arlequin_eth

_{Built with ❤️ using Next.js, TypeScript, and Tailwind CSS}

Name		Name	Last commit message	Last commit date
Latest commit History 62 Commits
.claude/commands		.claude/commands
app		app
components		components
constants		constants
domains		domains
lib		lib
public		public
services		services
utils		utils
.env.template		.env.template
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.nvmrc		.nvmrc
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

rlajous/website

Folders and files

Latest commit

History

Repository files navigation

Portfolio Website - Rodrigo Manuel Navarro Lajous

Table of Contents

Overview

✨ Features

Core Sections

🏢 Experience

💼 Projects

🎤 Talks & Speaking Engagements

🎓 Education

📬 Contact

Additional Features

🛠️ Tech Stack

Frontend Framework

Styling

UI Components

Features & Utilities

Development Tools

Deployment & Analytics

📁 Project Structure

🗄️ Data Architecture

Domain Interfaces

Data Services

🚀 Getting Started

Prerequisites

Installation

Troubleshooting

💻 Development Workflow

Available Commands

Git Workflow

➕ Adding Content

Adding a New Job/Experience

Adding a New Project

Adding a New Talk/Speaking Engagement

Adding Education

🎨 Customization

Changing Theme Colors

Modifying Components

Adding New Pages

Updating SEO Metadata

📜 Available Scripts

🌐 Deployment

Vercel Deployment (Recommended)

Post-Deployment

🤝 Contributing

How to Contribute

Code Style Guidelines

📄 License

📧 Contact

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 19

Packages 0

Uh oh!

Contributors 5

Uh oh!

Languages

Packages