Personal Web Portfolio - Static Multipage

A clean, responsive, and professional static personal portfolio website built with HTML, CSS, and JavaScript. This multi-page website showcases personal information, projects, and provides a contact form for potential clients or employers.

🌟 Features

• Multi-Page Design: Four distinct pages (Home, About, Projects, Contact)
• Responsive Layout: Fully responsive design that works seamlessly on desktop, tablet, and mobile devices
• Unified Navigation: Consistent navigation bar across all pages with active page highlighting
• Modern UI/UX: Clean and professional design with smooth animations and transitions
• Interactive Elements: Mobile menu toggle, form validation, and smooth scrolling
• Cross-Browser Compatible: Works across all modern browsers

📁 Project Structure

Personal-Web-Portfolio/
│
├── index.html              # Home page
├── about.html              # About page
├── projects.html           # Projects showcase page
├── contact.html            # Contact page with form
├── styles.css              # Main stylesheet with responsive design
├── README.md               # Project documentation
│
├── js/
│   └── script.js          # JavaScript for interactivity
│
├── assets/
│   ├── fonts/             # Custom fonts
│   ├── icons/             # Icon files
│   └── images/            # Images and visual assets
│
└── docs/
    └── REPORT.md          # Design choices and testing report

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A text editor (VS Code, Sublime Text, etc.) for editing
• Optional: A local web server for development

Installation

1. Clone or download the repository:

git clone https://github.com/ducduyhsme/Personal-Web-Portfolio.git

2. Navigate to the project directory:

cd Personal-Web-Portfolio

3. Open index.html in your web browser:
   • Double-click the file, or
   • Right-click and select "Open with" your preferred browser, or
   • Use a local development server

Using a Local Server (Optional)

For a better development experience, you can use a local server:

Using Python:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js (http-server):

npx http-server

Then open http://localhost:8000 in your browser.

📱 Pages Overview

Home (index.html)

• Hero section with call-to-action buttons
• Introduction section with personal overview
• Featured projects preview
• Quick navigation to other pages

About (about.html)

• Personal background and story
• Skills and technologies showcase
• Experience and education timeline
• Call-to-action for collaboration

Projects (projects.html)

• Grid layout of project cards
• Project descriptions and technologies used
• Links to view individual projects
• Demonstrates range of work and capabilities

Contact (contact.html)

• Contact form with validation
• Contact information (email, phone, location)
• Social media links
• Reasons to work together section

🎨 Design Features

• Color Scheme: Professional blue and gray palette
• Typography: Clean sans-serif fonts for readability
• Layout: CSS Grid and Flexbox for modern layouts
• Animations: Subtle transitions and hover effects
• Icons: Emoji icons for visual appeal (can be replaced with icon fonts)

📱 Responsive Breakpoints

• Desktop: 1200px and above
• Tablet: 768px to 1199px
• Mobile: Below 768px
• Small Mobile: Below 480px

🛠️ Technologies Used

• HTML5: Semantic markup for structure
• CSS3: Styling, animations, and responsive design
• JavaScript: Interactivity and form handling
• Git: Version control

🔧 Customization

Changing Colors

Edit the CSS variables in styles.css:

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    /* Add your colors here */
}

Adding Your Information

1. Update text content in HTML files
2. Replace placeholder images in the assets/images/ folder
3. Update social media links in footer sections
4. Modify project cards with your actual projects

Form Integration

The contact form currently shows an alert message. To integrate with a backend:

1. Update the form action in contact.html
2. Modify the JavaScript in js/script.js to send data to your backend
3. Or use a service like Formspree, Netlify Forms, or EmailJS

📝 Testing

The website has been tested on:

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

For detailed testing results, see REPORT.md

🚀 Deployment

GitHub Pages

1. Push your code to GitHub
2. Go to repository Settings → Pages
3. Select main branch as source
4. Your site will be available at https://yourusername.github.io/repository-name

Netlify

1. Sign up at Netlify
2. Drag and drop your project folder
3. Your site will be deployed instantly

Vercel

1. Sign up at Vercel
2. Import your GitHub repository
3. Deploy with one click

📄 License

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

👤 Author

Your Name

• GitHub: @ducduyhsme
• Email: contact@myportfolio.com

🙏 Acknowledgments

• Design inspiration from modern portfolio websites
• Color palette from Material Design
• Icons: Emoji (can be replaced with Font Awesome or similar)

📞 Support

For questions or issues, please open an issue on GitHub or contact via the contact form on the website.

---

Note: This is a static website template. Customize it with your own information, images, and content to make it your own unique portfolio!