🚀 Personal Portfolio Website

A modern, responsive single-page portfolio website designed to showcase developer skills, services, and portfolio projects. ✨

📖 About the Project

This is a personal portfolio website built with vanilla HTML, CSS, and JavaScript. It features a clean, modern design with smooth animations and a fully responsive layout that works seamlessly across all devices. 🎨

✨ Key Features

• 📱 Responsive Design: Fully responsive layout that adapts to desktop, tablet, and mobile screens
• 🧭 Smooth Navigation: Sticky navigation bar with smooth scrolling between sections
• 🎬 Interactive Animations:
  • Scroll reveal animations for content sections
  • Typing animation for job titles
  • Floating image animation
  • Hover effects on buttons and portfolio items
• 📑 Multiple Sections:
  • 🏠 Home: Introduction with social media links
  • 👤 About: Personal information and background
  • 💼 Services: Showcase of offered services (Web Development, Graphic Design, Digital Marketing)
  • 🖼️ Portfolio: Gallery of 6 project showcases with overlay effects
  • 📧 Contact: Contact form for inquiries
• 📲 Mobile Menu: Hamburger menu for mobile devices
• 🌐 Social Media Integration: Links to Facebook, Twitter, Instagram, and LinkedIn
• 🎨 Modern UI/UX: Dark theme with neon accent colors and glassmorphism effects

🛠️ Tech Stack

Core Technologies

• 📄 HTML5: Semantic markup and structure
• 🎨 CSS3: Styling with advanced features including:
  • CSS Custom Properties (Variables)
  • Flexbox and Grid layouts
  • CSS Animations and Transitions
  • Media Queries for responsive design
• ⚡ JavaScript (ES6+): Vanilla JavaScript for interactivity

External Libraries

• 🎯 Boxicons (v2.1.4): Icon library for UI elements and social media icons
  • CDN: https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css
• 📜 ScrollReveal: Scroll animation library for revealing elements on scroll
  • CDN: https://unpkg.com/scrollreveal
• ⌨️ Typed.js (v2.1.0): Typing animation library for dynamic text effects
  • CDN: https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js

Fonts

• 🔤 Google Fonts - Poppins: Modern sans-serif font family
  • CDN: https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap

📁 Folder Structure

one-pager-portfolio/
├── 📄 index.html              # Main HTML file containing all sections
├── 📝 README.md               # Project documentation (this file)
├── ⚖️ LICENSE                 # MIT License file
├── 🎨 css/
│   └── style.css          # Main stylesheet with all styles and responsive breakpoints
├── ⚡ js/
│   └── script.js          # JavaScript for interactivity (menu, scroll, animations)
├── 🖼️ images/
│   ├── about.png          # About section profile/image
│   ├── home.png           # Home section hero image
│   ├── portfolio1.jpg     # Portfolio project showcase 1
│   ├── portfolio2.jpg     # Portfolio project showcase 2
│   ├── portfolio3.jpg     # Portfolio project showcase 3
│   ├── portfolio4.jpg     # Portfolio project showcase 4
│   ├── portfolio5.jpg     # Portfolio project showcase 5
│   └── portfolio6.jpg     # Portfolio project showcase 6
└── ⚙️ .kilocode/             # Project configuration and skills directory

⚙️ Setup Information

📋 Prerequisites

None required! 🎉 This is a static website that can be opened directly in any modern web browser. No build tools, package managers, or servers are needed.

🚀 Installation

1. 📥 Clone the repository

   git clone <repository-url>
   cd one-pager-portfolio

2. 🌐 Open the website

   • Simply open index.html in your web browser
   • Or use a local server (optional):

     # Using Python 3
     python -m http.server 8000
     
     # Using Node.js (with http-server)
     npx http-server

   • Then navigate to http://localhost:8000

💻 Usage

• 👀 Viewing: Open index.html directly in any modern web browser (Chrome, Firefox, Safari, Edge)
• 🚫 No Server Required: The website works without a server, making it easy to deploy anywhere

🌍 Deployment

This static website can be deployed to any static hosting service:

• 🐙 GitHub Pages: Free hosting for GitHub repositories
• 🟢 Netlify: Drag and drop deployment
• ▲ Vercel: Zero-config deployment
• 📡 Surge.sh: Simple CLI deployment
• 🏢 Any traditional web hosting: Upload files via FTP

✏️ Customization

To customize the portfolio for your own use:

1. 📝 Update Content (index.html):

   • Change name, titles, and descriptions
   • Update social media links
   • Modify services and portfolio items
   • Update contact form details

2. 🎨 Modify Styles (css/style.css):

   • Change color scheme (CSS variables at the top)
   • Adjust fonts and spacing
   • Modify animations and transitions
   • Update responsive breakpoints

3. ⚡ Adjust Animations (js/script.js):

   • Change typing animation text
   • Modify scroll reveal settings
   • Adjust animation timing and effects

4. 🖼️ Replace Images (images/ folder):

   • Replace home.png with your hero image
   • Replace about.png with your profile picture
   • Replace portfolio images with your project screenshots

🌐 Browser Compatibility

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

👨‍💻 Developer Information

👤 Author

• 👨‍💻 Name: Melwyn Titus
• 💼 Role: Frontend Developer

⚖️ License

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

©️ Copyright

Copyright © 2024-2025 Melwyn Titus. All Rights Reserved.

📧 Contact

For inquiries or collaboration opportunities, please use the contact form on the website or reach out through the provided social media links.

🙏 Credits

• Design inspired by modern portfolio trends
• Icons provided by Boxicons
• Fonts from Google Fonts
• Animations powered by ScrollReveal and Typed.js

---

💡 Note: This is a personal portfolio template. Feel free to fork, modify, and use it for your own projects! 🎉

⭐ If you find this project helpful, consider giving it a star! ⭐