📁 File Structure

The ‘portfolio-website’ folder is organized to keep your files neat and easy to manage. Each file and folder has a specific role in building and maintaining your portfolio website.

📁 portfolio-website ├── 📄 index.html # The main website of your portfolio ├── 📄 projects.js # JS file for displaying all your projects separately ├── 📄 script.js # JS file handing the website's interactivity └── 📁 assets # Folder for images and media └── 🖼️ profile.jpg # Your profile picture in jpg format

🌐 Understanding Your Portfolio Website Structure For Customizing

• Navigation Section

  • A navigation bar at the top which has hyperlinks to Home, About, Projects, Contact sections
  • For customization, this section usually doesn’t need any changes, except if you want to adjust the colors

• Hero Section

  • Introductory section with background image, your name, short description, and a button linking to ‘Contact’.
  • This section can be customized by changing the text and background image

• About Section
  • Displays your profile picture, a short bio, and a grid of skills
  • Customization here is limited to updating the bio, profile image, and skill labels

• Projects Section

  • The container is filled dynamically by projects.js with project cards showing title, description, tags, and link
  • You can customize this section by editing the project data in projects.js

• Contact Section

  • Form connected to Formspree to send messages via email.
  • Customization options is limited to changing the Formspree endpoint. Other than that, this section usually stays the same.

• Footer
  • Contains social media links.
  • Usually, you only need to customize this section if you want to change the links or adjust colors.

Phase 1: Integrating Formspree into your Website