Skip to content

Latest commit

 

History

History
185 lines (135 loc) · 6.18 KB

README.md

File metadata and controls

185 lines (135 loc) · 6.18 KB

Hassan Shahzad | Portfolio Website

Welcome to my portfolio website repository! This project showcases my work, skills, and experiences with a modern, responsive design built using React, Vite, and Mantine UI. The website is automatically deployed on GitHub Pages at https://hxndev.github.io/.

Table of Contents

Demo

Visit the live website: https://hxndev.github.io/

Notable projects:

Features

  • Responsive Design: Adapts seamlessly to mobile, tablet, and desktop screens.
  • Project Showcase: Explore detailed project pages with filtering options by category.
  • Smooth Animations: Enjoy dynamic transitions powered by GSAP with performance optimization.
  • Modern UI: Crafted with Mantine UI and Tabler Icons for a sleek look.
  • Dark/Light Theme: Toggle between dark and light modes for comfortable viewing.
  • Optimized Performance: Built with Vite for lightning-fast builds and performance.
  • Automated Deployment: GitHub Actions ensure your changes are live as soon as you push to the main branch.
  • Quantum-Inspired Design: Custom color system based on dynamic interactions.

Technologies

  • React 18: For building interactive user interfaces.
  • Vite: A modern build tool for fast development.
  • React Router 7: For seamless client-side routing.
  • Mantine UI 7: For a robust and stylish component library.
  • GSAP: For creating smooth, high-performance animations.
  • GitHub Actions: Automating CI/CD and deployments.
  • GitHub Pages: Hosting the live website.
  • ESLint/Prettier: For code quality and consistent formatting.

Installation

  1. Clone the repository:

    git clone https://github.com/HxnDev/hxndev.github.io.git
cd hxndev.github.io

  2. Install dependencies:

    npm install

Usage

Development

Start the development server with hot reloading:

npm run dev

Open http://localhost:3000 in your browser to view the website.

Production Build

Generate an optimized production build:

npm run build

The build output will be located in the dist directory.

Preview the Production Build

To preview the production build locally:

npm run preview

Linting and Formatting

# Check formatting
npm run format:check

# Fix formatting issues
npm run format

# Check for linting issues
npm run lint

# Run all checks
npm run check

Deployment

This project is configured for automated deployment using GitHub Actions. Every push to the main branch triggers a build and deploys the dist folder to the gh-pages branch.

Live Website: https://hxndev.github.io/

The deployment workflow is defined in .github/workflows/deploy.yml.

Project Structure

hxndev.github.io/
├── .github/workflows/    # GitHub Actions workflow for deployment
├── public/               # Public assets and static files
├── src/
│   ├── animations/       # Animation configurations and utilities
│   ├── components/       # Reusable React components
│   │   ├── about/        # About page components
│   │   ├── common/       # Shared components
│   │   ├── contact/      # Contact page components
│   │   ├── home/         # Home page components
│   │   ├── projects/     # Project components
│   │   └── utils/        # Component utilities
│   ├── context/          # React context providers
│   ├── data/             # Static data (projects.json)
│   ├── hooks/            # Custom React hooks
│   ├── pages/            # Page components
│   ├── styles/           # Global styles and effects
│   ├── theme/            # Theme configuration
│   ├── App.jsx           # Main application component
│   └── main.jsx          # Entry point for React
├── index.html            # HTML template
├── package.json          # Project configuration
├── vite.config.js        # Vite configuration
├── .eslintrc.cjs         # ESLint configuration
├── .prettierrc           # Prettier configuration
└── README.md             # This file

Performance Optimizations

This portfolio includes several performance optimizations:

  • Code Splitting: Lazy loading of page components.
  • Asset Preloading: Critical assets are preloaded for faster initial rendering.
  • Reduced Motion Support: Respects user preferences for reduced motion.
  • Responsive Images: Optimized images with fallbacks.
  • GSAP Animations: Optimized animations with hardware acceleration.
  • Adaptive Features: Adjusts features based on device capabilities.

Accessibility

The portfolio is built with accessibility in mind:

  • Semantic HTML: Proper HTML structure for better screen reader support.
  • Keyboard Navigation: All interactive elements are keyboard-accessible.
  • Color Contrast: Meets WCAG 2.1 guidelines for color contrast.
  • Reduced Motion: Respects user preferences for reduced motion.
  • Focus Management: Proper focus handling for navigation.

Contributing

Contributions, issues, and feature requests are welcome!
Please check the issues page for ideas or open a new issue if you have a suggestion.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Hassan Shahzad
Email: [email protected]
LinkedIn: hassan-shahzad-2a6617212
GitHub: HxnDev
Portfolio: https://hxndev.github.io/