Troy Garcia - Portfolio Website

A modern, responsive portfolio website showcasing my work as a Full Stack Software Engineer and Founder of FrontEndOnFront consulting.

🚀 Live Website

Visit the portfolio at: portfolio.frontendonfront.com

📋 About

This portfolio website features:

• Professional Overview: Full-stack developer specializing in MERN stack and AI integration
• Work Experience: Timeline view of my career journey with major companies
• Project Showcase: Current and personal projects with detailed case studies
• FrontEndOnFront Consulting: Information about my consulting business since 2019
• Contact Information: Direct links to resume, LinkedIn, and consultation booking

🛠️ Technologies Used

• Framework: Next.js 15.2.4
• Styling: Tailwind CSS with custom gradients and animations
• TypeScript: Full type safety throughout the application
• UI Components: Custom components with Radix UI primitives
• Icons: Lucide React icons
• Fonts: Inter font family optimized with next/font
• Image Optimization: Next.js Image component with CDN integration
• Deployment: GitHub Pages

✨ Features

🎨 Design & UX

• Responsive Design: Fully optimized for mobile, tablet, and desktop
• Mobile Navigation: Hamburger menu with smooth animations
• Modern Gradients: Beautiful gradient backgrounds and hover effects
• Dark/Light Themes: Professional color schemes throughout
• Smooth Animations: Hover effects, transitions, and micro-interactions

📱 Mobile Optimization

• Hamburger Menu: Collapsible navigation for mobile devices
• Responsive Grids: Cards and content stack appropriately on small screens
• Mobile-First Layouts: Optimized spacing and typography for mobile
• Touch-Friendly: Large buttons and touch targets

🖼️ Content Management

• Project Gallery: Image previews with modal lightbox functionality
• CDN Integration: Fast image loading from FrontEndOnFront CDN
• Dynamic Content: TypeScript-powered data management
• SEO Optimized: Proper meta tags and semantic HTML

🔧 Technical Features

• Static Site Generation: Pre-rendered pages for optimal performance
• ESLint Integration: Code quality enforcement
• Type Safety: Full TypeScript implementation
• Performance Optimized: Lighthouse score optimizations

🗂️ Project Structure

src/
├── app/
│   ├── layout.tsx          # Root layout with theme provider
│   ├── page.tsx            # Main portfolio page
│   └── globals.css         # Global styles and CSS variables
├── components/
│   ├── portfolio/
│   │   ├── about-section.tsx       # About me section
│   │   ├── hero-section.tsx        # Landing hero section
│   │   ├── navigation.tsx          # Mobile-responsive navbar
│   │   ├── projects-section.tsx    # Project showcase
│   │   └── image-preview-modal.tsx # Image lightbox modal
│   └── ui/                 # Reusable UI components
└── lib/
    └── data/
        └── projects.ts     # Project and experience data

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

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

2. Install dependencies

   npm install

3. Run development server

   npm run dev

4. Open in browser Navigate to http://localhost:3000

Available Scripts

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

📊 Performance

• Build Size: ~138kB First Load JS
• Static Generation: All pages pre-rendered
• Image Optimization: Next.js Image component with CDN
• Mobile Performance: Optimized for mobile-first experience

🌟 Key Sections

🏠 Hero Section

• Professional introduction
• Key statistics and achievements
• Call-to-action buttons

👨‍💻 Work Experience

• Timeline-based layout with company icons
• Mobile-optimized card design
• Detailed role descriptions and tech stacks

💼 Projects

• Current projects (in development)
• Personal projects portfolio
• Work projects showcase
• Modal details with image galleries

🚀 FrontEndOnFront Consulting

• Business overview since 2019
• Service highlights and statistics
• Client testimonials and achievements

🔗 Links

• Portfolio: portfolio.frontendonfront.com
• LinkedIn: linkedin.com/in/garciat427
• Consulting: frontendonfront.com
• Resume: Online Resume PDF

📞 Contact

For collaboration opportunities or consulting inquiries:

• Email: Through contact form on portfolio
• LinkedIn: garciat427
• Consulting: FrontEndOnFront

📝 License

This project is personal portfolio property of Troy Garcia. All rights reserved.

---

Built with ❤️ by Troy Garcia | Powered by Next.js & Tailwind CSS