🌟 Justine Cesaro Campo - Portfolio

A modern, responsive portfolio website showcasing my journey as a Frontend Developer and BS Information Technology student.

🚀 Live Demo

🔗 View Live Portfolio

✨ Features

• Modern Design: Clean, professional interface with smooth animations
• Responsive Layout: Optimized for all devices (mobile, tablet, desktop)
• Interactive Background: Dynamic particles and visual effects
• Smooth Animations: Scroll-based animations using Intersection Observer
• Fast Performance: Built with Next.js 15 and optimized for speed
• SEO Optimized: Complete meta tags and Open Graph support
• TypeScript: Fully typed for better development experience

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: React Icons (Simple Icons)
• Deployment: Vercel
• Version Control: Git & GitHub

🏗️ Project Structure

├── app/
│   ├── layout.tsx        # Root layout with metadata
│   ├── page.tsx          # Main portfolio page
│   ├── globals.css       # Global styles and animations
│   └── favicon.ico       # Favicon
├── public/
│   ├── my love.jpg       # Background image
│   ├── favicon.svg       # Custom favicon
│   └── *.svg            # Various icons
├── types/
│   └── global.d.ts      # TypeScript declarations
└── package.json

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/tatineeeeeee/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

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

📱 Sections

• Hero: Introduction with animated elements
• Tech Stack: Technologies and tools I use
• About: My journey and philosophy as a developer
• Projects: Featured work and projects
• Contact: Ways to get in touch

🎨 Key Features

Interactive Background

• Parallax scrolling background image
• Animated particle system
• Floating orbs and visual effects
• Mouse-following interactive elements

Smooth Animations

• Scroll-triggered animations
• Intersection Observer API
• CSS animations and transitions
• Responsive design patterns

Performance Optimizations

• Next.js Image optimization
• Component lazy loading
• Optimized bundle size
• Fast loading times

📊 Performance

• Lighthouse Score: 95+ Performance
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Mobile Responsive: ✅
• SEO Score: 100/100

🤝 Contact

• Email: justinecesarocampo@gmail.com
• GitHub: @tatineeeeeee
• Portfolio: justinecesarocampo.vercel.app

📄 License

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

---

⭐ If you like this portfolio, please give it a star! ⭐