Skip to content

juanp-ctrl/portfolio

Repository files navigation

Juan Pablo JimΓ©nez - Portfolio πŸ§‘β€πŸš€

Overview πŸ“–

This is my personal portfolio website, designed to showcase my skills, projects, and professional journey as a Frontend Developer. The site features a modern, interactive design with smooth transitions, multilingual support, and responsive layouts.

Live Site 🌐

πŸ‘¨β€πŸš€ juanpablojimenez.dev

Technologies Used πŸ’»

  • Next.js 16 - React framework with App Router, server-side rendering and static site generation
  • React 19 - Latest React runtime with improved performance and features
  • TypeScript 5.8 - For type-safe code
  • Framer Motion - For advanced animations and transitions
  • Tailwind CSS - For utility-first styling
  • next-intl - For internationalization (English/Spanish) with cookie-based routing
  • GSAP - For complex animations
  • Custom Cursor - Enhanced user experience with custom cursor effects
  • Responsive Design - Mobile-first approach for all device compatibility

Features 🌱

  • Animated Page Transitions - Smooth transitions between pages using Framer Motion
  • Bilingual Support - Complete English and Spanish translations
  • Interactive UI - Engaging user interface with custom animations
  • Project Showcase - Detailed display of projects with images and descriptions
  • Custom Fonts - Using Libre Baskerville and Josefin Sans for typography
  • Cookie Consent - GDPR compliant cookie consent management
  • PWA Support - Progressive Web App capabilities
  • SEO Optimized - Meta tags and structured data for better search engine visibility

Project Structure

β”œβ”€β”€ public
β”‚   β”œβ”€β”€ fonts             # Custom fonts
β”‚   β”œβ”€β”€ images            # Site images
β”‚   β”œβ”€β”€ locales           # Translation files
β”‚   └── service-worker.js # PWA service worker
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ components        # Reusable UI components
β”‚   β”œβ”€β”€ hooks             # Custom React hooks
β”‚   β”œβ”€β”€ pages             # Next.js pages
β”‚   └── styles            # Global styles

Featured Projects

  • Random-Q - A dynamic web application for generating conversation starters
    • Technologies: NextJS, TypeScript, Firebase Firestore, Firebase App Hosting, CI/CD via GitHub
    • Visit: random-q.com

Getting Started πŸš€

Prerequisites

  • Node.js (v18.18 or higher - required for Next.js 16)
  • pnpm package manager

Installation

  1. Clone the repository
  2. Install dependencies
pnpm install
  1. Start the development server
pnpm dev
  1. Open http://localhost:3000 to view the site

Building for Production

pnpm build
pnpm start

Deployment

This site is configured for easy deployment on platforms like Vercel or through standard NextJS deployment procedures.

Contact πŸ“§

Feel free to reach out to me through the contact section on my website or connect with me on social media.

License πŸ”

All rights reserved. This code is not open for reuse without permission.

This portfolio and its code are published for educational and non-commercial purposes only. You may view and learn from the code, but not use it for commercial purposes or republish it without explicit written permission from the author.

About

My portfolio πŸ§‘β€πŸš€

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published