Skip to content

README.md

Latest commit

 

History

History
226 lines (173 loc) · 6.42 KB

README.md

File metadata and controls

226 lines (173 loc) · 6.42 KB

🚀 Charlie James Z. Abejo - Professional Portfolio

A modern, responsive, and dynamic personal portfolio website built with React.js, Vite, and Tailwind CSS.

Deploy with Vercel

✨ Features

🎯 Dynamic & Interactive

  • Real-time Role Rotation - Title changes every 3 seconds
  • Live Clock - Shows current Philippines time
  • Active Section Tracking - Navbar highlights current section automatically
  • Form Validation - Real-time error checking with instant feedback
  • Animated Background - Floating blob animations
  • Smooth Animations - 60fps transitions throughout

📱 Fully Responsive

  • Mobile-First Design - Perfect on all devices
  • Breakpoints: Mobile (320px+), Tablet (768px+), Desktop (1024px+)
  • Touch-Optimized - Large tap targets and smooth interactions
  • Adaptive Layouts - Content reorganizes for optimal viewing

🎨 Professional Design

  • Glassmorphism Effects - Modern backdrop blur
  • Gradient Themes - Blue → Purple → Pink color scheme
  • Custom Scrollbar - Gradient-styled scrollbar
  • Hover Effects - Interactive feedback on all elements
  • Loading States - Visual feedback during form submission

💼 Portfolio Sections

  1. Hero - Professional photo, dynamic roles, quick stats
  2. About - Background, achievements, interests
  3. Education - Academic history with awards (Dean's Lister!)
  4. Certificates - 10+ professional certifications
  5. Projects - 4 major full-stack projects
  6. Skills - Technical skills with progress bars
  7. Contact - Real-time form with validation + live clock
  8. Footer - Quick links and social media

🛠️ Tech Stack

  • Frontend: React 18.2.0
  • Build Tool: Vite 5.0.8
  • Styling: Tailwind CSS 3.3.6
  • Icons: Lucide React 0.294.0
  • Deployment: Vercel

📦 Installation

# Clone the repository
git clone https://github.com/CharlieJamesGwapo/portfolio.git

# Navigate to project directory
cd portfolio

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🚀 Quick Start

  1. Install Node.js (v14 or higher) from nodejs.org
  2. Clone this repository
  3. Run npm install to install dependencies
  4. Run npm run dev to start development server
  5. Open http://localhost:5173 in your browser

🌐 Deployment to Vercel

Method 1: GitHub Integration (Recommended)

  1. Push your code to GitHub
  2. Go to vercel.com
  3. Click "New Project"
  4. Import your GitHub repository
  5. Click "Deploy"
  6. Done! Your site is live 🎉

Method 2: Vercel CLI

# Install Vercel CLI
npm install -g vercel

# Login to Vercel
vercel login

# Deploy
vercel --prod

📱 Responsive Design

The portfolio is fully responsive across all devices:

  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px - 1439px
  • Large Desktop: 1440px+

🎨 Color Palette

  • Primary: Blue (#3b82f6)
  • Secondary: Purple (#8b5cf6)
  • Accent: Pink (#ec4899)
  • Success: Green (#10b981)
  • Error: Red (#ef4444)

📂 Project Structure

portfolio/
├── public/
│   ├── profile.png          # Professional photo
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── Navbar.jsx       # Navigation with active tracking
│   │   ├── Hero.jsx         # Landing section with photo
│   │   ├── About.jsx        # Personal background
│   │   ├── Education.jsx    # Academic history
│   │   ├── Certificates.jsx # Certifications
│   │   ├── Projects.jsx     # Portfolio projects
│   │   ├── Skills.jsx       # Technical skills
│   │   ├── Contact.jsx      # Contact form with validation
│   │   └── Footer.jsx       # Footer with links
│   ├── App.jsx              # Main app component
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles + animations
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md

✨ Key Features Explained

Real-Time Form Validation

  • Validates email format
  • Checks minimum character length
  • Shows errors instantly
  • Clears errors as you type
  • Character counter for message field

Active Section Tracking

  • Automatically detects scroll position
  • Highlights current section in navbar
  • Smooth scroll to sections
  • Works on mobile and desktop

Dynamic Role Display

  • Rotates between 4 professional roles
  • Changes every 3 seconds
  • Smooth fade transitions
  • Engaging visual effect

Live Clock

  • Shows current Philippines time
  • Updates every second
  • Displays full date
  • Located in Contact section

🔗 Connect With Me

👨‍💻 About Me

Charlie James Z. Abejo
Full Stack Developer | BSIT Student at MOIST | Dean's Lister (Ranked 2)

Passionate about creating innovative web solutions with expertise in:

  • Frontend: React, HTML5, CSS3, JavaScript, Tailwind CSS, Bootstrap
  • Backend: PHP, Laravel, Node.js
  • Database: MySQL, MongoDB
  • Tools: Git, Figma, VS Code

🏆 Achievements

  • 🥈 Dean's Lister - Ranked 2 (2nd & 3rd Year)
  • 📜 10+ Professional Certifications
  • 💼 4+ Major Full-Stack Projects
  • 🎓 Consistent Fifth Honors (Grade 1-6)

📄 License

This project is open source and available for personal use.

🙏 Acknowledgments

Built with modern web technologies:

  • React.js for component architecture
  • Tailwind CSS for styling
  • Vite for fast development
  • Lucide React for beautiful icons
  • Vercel for deployment

Made with ❤️ by Charlie James Z. Abejo

Last Updated: November 2024

🚀 Ready to Deploy!

Your portfolio is production-ready and optimized for:

  • ⚡ Fast loading times
  • 📱 All screen sizes
  • 🎨 Modern design
  • ♿ Accessibility
  • 🔍 SEO optimization

Deploy now and showcase your skills to the world! 🌟