Nova Portfolio

About the Project: Nova Portfolio is a clean, single-page personal portfolio website built with HTML, CSS, and JavaScript. It presents a designer's work, skills, experience timeline, pricing, and contact details in a structured and polished layout.

Key Highlights: Smooth scroll navigation, animated hero section, horizontal portfolio and news sliders, sticky header on scroll, and a fully responsive layout across all screen sizes.

Project Details

What's Inside

• Header / Navigation — Fixed navbar with mobile toggle and active scroll state.
• Hero Section — Profile image, title, specialties list, and experience stats.
• Portfolio Section — Horizontally scrollable cards showcasing selected works.
• Skills Section — Visual progress bars displaying key technical skills.
• Timeline Section — Work history listed with role, company, and period.
• Pricing Section — Service cards with interactive hover color change effect.
• News Section — Scrollable blog cards with title, date, and cover image.
• Contact Section — Contact info list and a message submission form.
• Footer — Copyright text and social media icon links.

Key Features

• Sticky Header — Header background activates with a smooth scroll effect.
• Mobile Navigation — Hamburger menu toggles with animated open and close.
• Horizontal Sliders — Portfolio and news sections scroll smoothly with snap.
• Skill Progress Bars — Each skill displays a filled bar with percentage value.
• Hover Effects — Pricing cards change background color on hover interaction.
• Responsive Layout — Adapts cleanly across mobile, tablet, and desktop screens.
• Smooth Scrolling — All nav links scroll to sections with a smooth transition.

Technologies Used

• HTML5 — Semantic structure for all sections and page content.
• CSS3 — Custom properties, flexbox, grid, and keyframe animations used.
• JavaScript (ES6) — Controls navigation toggle, scroll events, and menu behavior.
• Google Fonts — Poppins and Mulish fonts loaded for clean typography.
• Ionicons — Icon library used for navigation, contact, and social icons.

Project Structure

nova-portfolio/
│
├── index.html                 # Main page with all sections and content
│
├── assets/
│   ├── css/
│   │   └── style.css         # Complete styles with responsive design and animations
│   │
│   ├── js/
│   │   └── script.js         # Navigation toggle, header scroll effect, menu close on link click
│   │
│   └── images/               # Hero banner, portfolio projects, blog images, skill background
│
├── LICENSE                   # Project license file
│
└── README.md                 # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/nova-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 specialties in the hero section inside <code>index.html</code></li>
      <li>Replace portfolio card images and titles with your own work in <code>index.html</code></li>
      <li>Edit skill names and progress bar percentages to match your skills in <code>index.html</code></li>
      <li>Update timeline entries with your own work experience inside <code>index.html</code></li>
      <li>Change the theme color and font settings at the top of <code>style.css</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