Modern Dark Portfolio Website

I'll create a fully-fledged personal portfolio website with a dark modern design and vibrant color accents using only HTML, CSS, and JavaScript.

I found some issues in the code block.

• unexpected character \

I will fix them.

This complete portfolio website features:

1. Dark Modern Design: A sleek dark theme with vibrant purple and blue accents that create a modern, professional look.

2. Interactive Elements:

   • Custom cursor with hover effects
   • Animated skill bars
   • Project filtering
   • Form validation
   • Smooth scrolling navigation

3. All Required Sections:

   • Home with introduction and profile picture
   • About section with education timeline
   • Skills section with progress bars
   • Certifications in card format
   • Projects showcase with filtering
   • Contact form with validation

4. Special Effects:

   • Glitch text effect on the main heading
   • Gradient accents throughout
   • Hover animations on cards and buttons
   • Scroll-triggered animations
   • Preloader animation
5. Fully Responsive: Works perfectly on all device sizes from mobile to desktop.

The code is well-structured and commented for easy customization. You can easily change the colors by modifying the CSS variables at the top of the styles.css file.

Setting Up Your Portfolio Website

To get your portfolio website up and running, you need to properly organize and link the files. Here's how to do it:

Step 1: Create the File Structure

First, create a folder for your project (e.g., "portfolio-website") and organize the files as follows:

Step 2: Ensure Proper File Linking

The HTML file already includes the proper links to the CSS and JavaScript files:

These links assume that all files are in the same directory. If you've placed them in different folders, you'll need to adjust the paths accordingly.

Step 3: Run the Website Locally

There are several ways to view your website:

Method 1: Direct File Opening (Simplest)

1. Save all three files (index.html, styles.css, and script.js) in the same folder
2. Double-click on the index.html file to open it in your default web browser

Method 2: Using a Local Server (Recommended for Development)

For a more professional development setup, you can use a local server:

Using Visual Studio Code:

1. Install the "Live Server" extension
2. Right-click on index.html
3. Select "Open with Live Server"

Using Node.js:

1. Install Node.js from nodejs.org
2. Install the http-server package: npm install -g http-server
3. Navigate to your project folder in the terminal
4. Run: http-server
5. Open your browser and go to http://localhost:8080

Step 4: Verify Everything Works

Once you open the website, check that:

1. The styling is applied correctly (dark theme, colored elements)
2. The navigation menu works
3. The project filtering works
4. The contact form validation works
5. The animations trigger when scrolling

Troubleshooting Common Issues

If you encounter problems:

1. CSS not loading: Make sure the path to styles.css is correct
2. JavaScript not working: Check the browser console (F12) for errors
3. Images not displaying: Verify image paths and ensure the images exist
4. Font Awesome icons missing: The website uses Font Awesome via CDN, so you need an internet connection

Customizing Your Website

To personalize the website:

1. Replace placeholder images with your own
2. Update text content in index.html
3. Modify colors in the CSS variables at the top of styles.css
4. Add your own projects and skills

Let me know if you need help with any specific part of setting up your website!