Jack Portfolio

About the Project: A personal portfolio website for Jack, a UI Designer and Front-End Developer based in London. It presents his services, skill levels, selected projects, and a contact form — all in a clean, modern layout built with HTML, CSS, and JavaScript.

Key Highlights: Smooth scroll reveal animations, a sticky header on scroll, mobile-friendly navigation, and a fully responsive layout across all screen sizes.

Project Details

What's Inside

• Hero Section — Introduces Jack with a photo, title, and call-to-action buttons.
• About Section — Displays services, skill progress bars, and service cards.
• Projects Section — Showcases four selected design and development projects.
• Contact Section — Includes a contact form with name, email, and message fields.
• Header & Footer — Sticky navigation with logo, links, and social media icons.

Key Features

• Scroll Reveal Animations — Elements animate into view as the user scrolls down.
• Sticky Header — Header fixes to the top with a slide-in animation on scroll.
• Mobile Navigation — Off-canvas sidebar menu with overlay for small screens.
• Skill Progress Bars — Animated bars showing proficiency levels for each skill.
• Fully Responsive — Layout adapts cleanly from 375px mobile to 1400px+ desktop.
• Blob Image Mask — Hero photo styled with an SVG blob shape using CSS masking.

Technologies Used

• HTML5 — Semantic markup with accessible landmark roles and attributes.
• CSS3 — Custom properties, flexbox, grid, animations, and media queries.
• JavaScript (ES6) — Handles navigation toggle, header scroll, and reveal logic.
• Google Fonts — Manrope font loaded via the Google Fonts API.
• Ionicons — Icon library used for navigation and social media icons.

Project Structure

jack-portfolio/
│
├── index.html                 # Main HTML with hero, about, projects, and contact sections
│
├── assets/
│   ├── css/
│   │   └── style.css         # Complete styling, animations, and responsive breakpoints
│   │
│   ├── js/
│   │   └── script.js         # Mobile menu toggle, header scroll, reveal animations
│   │
│   └── images/               # Hero photo, project screenshots, service icons, SVG shapes
│
└── README.md                 # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/jack-portfolio.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update name, title, and intro text in <code>index.html</code></li>
      <li>Replace the hero photo and project images in <code>assets/images/</code></li>
      <li>Adjust skill percentages and service card content in <code>index.html</code></li>
      <li>Change colors and fonts using CSS variables in <code>assets/css/style.css</code></li>
      <li>Update project cards with your own titles, descriptions, and links in <code>index.html</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo