Repository files navigation

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 athttps://hxndev.github.io/.

• Demo
• Features
• Technologies
• Installation
• Usage
• Deployment
• Project Structure
• Performance Optimizations
• Accessibility
• Contributing
• License
• Contact

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

Notable projects:

• JobFit - AI Job Matching Platform - Live demo available!

• 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.

• 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.

1. Clone the repository:

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

2. Install dependencies:

   npm install

Start the development server with hot reloading:

npm run dev

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

Generate an optimized production build:

npm run build

The build output will be located in thedist directory.

To preview the production build locally:

npm run preview

# Check formattingnpm run format:check# Fix formatting issuesnpm run format# Check for linting issuesnpm run lint# Run all checksnpm run check

This project is configured for automated deployment using GitHub Actions. Every push to themain branch triggers a build and deploys thedist folder to thegh-pages branch.

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

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

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

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.

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.

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

Distributed under the MIT License. SeeLICENSE for more information.

Hassan Shahzad
Email:hassanshahzad.dev@gmail.com
LinkedIn:hassan-shahzad-2a6617212
GitHub:HxnDev
Portfolio:https://hxndev.github.io/