Ashik - Personal Portfolio HTML Template preview 1

Ashik - Personal Portfolio HTML Template

bookmark

Ashik is an HTML portfolio template designed for personal showcase, including complete pages such as Home, About, Services, Portfolio, Blog, and Contact. It supports light/dark theme switching, making it ideal for freelancers or creative...

HTML

Project Overview

Ashik is an HTML portfolio template designed for personal showcase, including complete pages such as Home, About, Services, Portfolio, Blog, and Contact. It supports light/dark theme switching, making it ideal for freelancers or creative professionals to quickly build a personal website.

Tech Stack

  • HTML5 + Bootstrap 5
  • SCSS (source)
  • Vanilla JavaScript / jQuery
  • GSAP (animations and scroll effects)
  • Font Awesome + custom icon fonts
  • Google Fonts (Spline Sans, Poppins)

Project Structure

text
ashikhtml-10/package/ashik/
├── index.html              # Home page
├── index-dark.html         # Home page dark version
├── index-2.html            # Home page variant 2
├── index-2-dark.html       # Home page variant 2 dark version
├── blog.html               # Blog list page
├── blog-details.html       # Blog detail page
├── contact.html            # Contact page
├── css/main.css            # Compiled styles
├── fonts/                  # Icon font files
├── img/                    # Image assets
├── js/main.js              # Core interaction logic
└── scss/                   # SCSS source files (_about.scss, etc.)

Core File Description

  • js/main.js — Encapsulates smooth scrolling, sticky navigation, mobile menu, counter, GSAP animations, lightbox popup, and other interactions
  • css/main.css — Merged compiled full stylesheet
  • scss/_about.scss — One of the SCSS source modules; variables can be modified and recompiled as needed
  • index.html — Entry page containing complete sections like Navigation, Banner, About, Services, Projects, etc.
  • fonts/ — ashik-icon custom icons and Font Awesome font files
  • img/ — Pre-built placeholder images and background decorative graphics

Quick Start

  1. Open package/ashik/index.html directly in a browser
  2. For local server, use VS Code Live Server plugin or npx serve
  3. To modify SCSS, install dependencies and run npm run scss or the corresponding build script

Usage Suggestions

  • Dark theme is available via index-dark.html / index-2-dark.html without additional configuration
  • The template relies on Google Fonts loaded online; ensure network connectivity during deployment or replace with local fonts
help_outline

FAQ