Nova Portfolio

About Project: A single-page designer portfolio website showcasing creative work through horizontal scrollable galleries, smooth animations, and organized sections for projects, skills, timeline, pricing, and contact information. Features sticky navigation with mobile hamburger menu, progress bars for skill visualization, and interactive hover effects on portfolio cards—all built with clean HTML5 structure, CSS Grid and Flexbox layouts, and vanilla JavaScript for navigation and scroll behavior, and much more.

What I learned: Implemented horizontal scrollable sections with custom scrollbar styling, created sticky positioning for multi-column layouts, combined fixed and absolute positioning for overlapping elements, and built hamburger menu animations using CSS transforms and transitions, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Hero Section - Full-screen banner with designer introduction, service list with arrow icons, experience statistics, and animated scroll-down button
• Portfolio Gallery - Horizontal scrollable project cards with image overlays, hover-triggered content reveals, and project categories
• Skills Section - Black background panel with programming skill progress bars showing HTML/CSS, JavaScript, and WordPress proficiency levels
• Timeline Section - Work experience history with job positions, company names, locations, and date ranges in grid format
• Pricing Section - Service cards displaying WordPress development, HTML development, content writing, brand identity, and PSD design with pricing
• News Section - Latest blog posts in horizontal scrollable cards with images, publication dates, and article titles
• Contact Form - Input fields for name, email, and message with contact information list including address, phone, email, and website
• Sticky Header - Fixed navigation that transforms from transparent to solid white background after scrolling with smooth transition
• Mobile Menu - Hamburger icon with three-line animation that opens full-width navigation dropdown
• Footer - Copyright notice and social media icon links for Facebook, Twitter, Instagram, Dribbble, and TikTok

Technologies Used

• HTML5 - Semantic elements with ARIA labels and proper document structure for accessibility
• CSS3 - Advanced styling with Grid and Flexbox, CSS custom properties, transform animations, and cubic-bezier timing functions
• JavaScript (ES6) - Event listeners for navigation toggle, scroll detection, and menu state management
• Google Fonts - Poppins and Mulish font families for modern typography
• Ionicons - Icon library for arrows, logos, and social media symbols
• CSS Variables - Root-level custom properties for colors, fonts, spacing, and shadows for consistent theming
• CSS Transitions - Smooth hover effects on cards, buttons, and navigation elements
• Media Queries - Responsive breakpoints at 576px, 768px, 992px, and 1200px for mobile-first design

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
    

Key Features

• Mobile-First Responsive Design - Adapts seamlessly from 320px mobile screens to 1920px+ desktop displays
• Horizontal Scroll Galleries - Portfolio and news sections with custom scrollbar styling and snap-scroll behavior
• Animated Hamburger Menu - Three-line icon transforms into X shape with smooth rotation and translation effects
• Sticky Navigation - Header changes from transparent to solid white with shadow when scrolling past 100px
• Interactive Portfolio Cards - Hover effects reveal white overlay with project title, category, and forward arrow icon
• Progress Bar Skills - Visual skill level indicators with percentage labels and colored fill animations
• Fixed Background Image - Skills section uses background-attachment: fixed for parallax-like effect
• Grid Timeline Layout - Three-column responsive layout showing work history with dates, positions, and companies
• Hover State Pricing Cards - Cards change from white to theme color background with smooth color transitions
• Scroll-Down Animation - Bouncing arrow icon in hero section using CSS keyframe animation
• Contact Form Styling - Custom input fields with focus states and icon-labeled contact information list
• Cross-Browser Compatibility - Tested across Chrome, Firefox, Safari, Edge, and Opera browsers

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 portfolio name and services in <code>index.html</code></li>
      <li>Modify theme colors in <code>style.css</code> using CSS variables</li>
      <li>Replace portfolio and blog images in <code>assets/images/</code> folder</li>
      <li>Update contact details and social media links</li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit directly in index.html - change designer name, services, portfolio projects, timeline entries, pricing, and contact information
• Colors: Modify CSS variables in :root selector at the beginning of style.css

  :root {
    --theme-color: hsl(10, 100%, 57%);      /* Primary orange-red accent color */
    --black: hsl(0, 0%, 0%);                 /* Text and backgrounds */
    --white: hsl(0, 0%, 100%);               /* Light backgrounds and text */
    --cultured: hsl(0, 0%, 98%);             /* Section backgrounds */
  }

• Images: Replace files inside assets/images/ with your own portfolio images (maintain same filenames or update HTML references)
• Fonts: Change Google Fonts link in HTML <head> and update --ff-poppins and --ff-mulish variables in CSS
• Portfolio Projects: Add or remove portfolio cards by duplicating <li class="scrollbar-item"> elements in the portfolio section
• Skills: Update skill names, percentages, and progress bar widths in the skills list items
• Timeline: Modify job positions, dates, and companies by editing timeline list items
• Pricing Services: Change service names, icons, and prices in the pricing card elements
• Blog Posts: Update news cards with new images, dates, and article titles
• Contact Info: Change address, phone, email, and website in the contact list items
• Social Media: Update social media links in footer by changing href values

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

You can view the live project here ➜ Live Demo