Musabhassan.com screenshot

Musabhassan.com

Author Avatar Theme by Musab hassan
Updated: 14 May 2025
159 Stars

My personal portfolio and all its assets. As seen on Awwwards.

Categories

Overview

The source code for MusabHassan’s personal portfolio website, musabhassan.com, is a showcase of his development skills and includes information on the technologies used to build the site. The website is built with SvelteKit as the frontend framework, incorporating scroll effects with Slickscroll, animations with Anime, 3D effects with Three.js, and hosting on Firebase. The source code for this version, which is 2+, is available in the repository, with version 1.0 built with jQuery stored in a separate branch called v1.

Features

  • SvelteKit: Used as the frontend framework for building the website.
  • Slickscroll: Implements scroll effects to enhance user experience.
  • Anime: Includes animations to create a visually appealing design.
  • Three.js: Integrates 3D effects to add depth and interactivity.
  • Firebase: Hosts the website for seamless deployment.
  • Version Control: Offers multiple versions in different branches for tracking changes.

Installation

To set up the development environment for the project, follow these steps:

  1. Clone the repository to your local machine:
    git clone [repository-url]
    
  2. Navigate to the project directory:
    cd [project-directory]
    
  3. Start the Vite development server for local testing:
    npm run dev
    
  4. Note that due to migration from Rollup, Hot Module Replacement (HMR) breaks the site; perform a full reload after modifying components or TypeScript files. For production build, execute:
    npm run build
    

Summary

The source code for MusabHassan’s personal portfolio website showcases a blend of cutting-edge technologies such as SvelteKit, Slickscroll, Anime, Three.js, and Firebase. The development environment is set up with a focus on showcasing the portfolio, making it a valuable resource for those looking to understand modern web development practices and implement similar features in their projects. Remember to respect the licensing terms and guidelines mentioned when utilizing the source code for commercial purposes.