Modern Portfolio Website Template

A sleek, modern portfolio website template built with pure HTML, CSS, and JavaScript. Designed to showcase your skills, projects, and professional information in an elegant and responsive layout.

Features

• Modern UI Design: Clean aesthetic with vibrant accent colors and glass-morphism elements
• Fully Responsive: Works flawlessly on mobile, tablet, and desktop devices
• Interactive Elements:
  • Scroll-triggered animations
  • Smooth scrolling navigation
  • Dynamic hover effects
  • Mobile-friendly hamburger menu
• Comprehensive Sections:
  • Hero with call-to-action
  • About Me profile
  • Skills showcase
  • Project gallery
  • Contact form
  • Professional footer
• Performance Optimized: Lightweight and fast-loading
• Easy Customization: Change colors, content, and styling with minimal effort

Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with Flexbox, Grid, and CSS variables
• JavaScript: Interactive elements and animations
• Font Awesome: Icon library
• Google Fonts: Poppins and Montserrat fonts

How to Use

1. Clone the repository:

   git clone https://github.com/bjmdevelopers/portfolio-template-.git

2. Open the project:

   • Navigate to the project folder and open index.html in your browser

3. Customize the content:

   • Replace placeholder text with your personal information
   • Update colors by modifying CSS variables in the :root selector
   • Add your own images in the hero and about sections
   • Modify project details in the portfolio section

Customization Options

Change Colors

Modify these CSS variables in the <style> section:

:root {
  --primary: #6c63ff;       /* Main brand color */
  --secondary: #4a44b5;     /* Secondary color */
  --dark: #2a2a3c;          /* Dark text color */
  --light: #f8f9ff;         /* Light background */
  --accent: #ff6584;        /* Accent color */
  --gray: #7b88a8;          /* Gray text */
}

Update Content

Replace placeholder text in these sections:

• Hero section (name, title, description)
• About Me section (bio text)
• Skills section (your actual skills)
• Projects section (your projects with descriptions)
• Contact section (your contact details)

Add Real Images

Replace the gradient placeholders with your actual images:

<!-- In Hero section -->
<div class="hero-image">
  <img src="your-image.jpg" alt="Your Name">
</div>

<!-- In About section -->
<div class="about-image">
  <img src="your-about-image.jpg" alt="About You">
</div>

License

This project is licensed under the MIT License.

Live Demo

View Live Demo

---