Portfolio Website (Deployed)

Author: HxnDev

README.md

@@ -11,6 +11,8 @@ Welcome to my portfolio website repository! This project showcases my work, skil
 - [Usage](#usage)
 - [Deployment](#deployment)
 - [Project Structure](#project-structure)
+- [Performance Optimizations](#performance-optimizations)
+- [Accessibility](#accessibility)
 - [Contributing](#contributing)
 - [License](#license)
 - [Contact](#contact)
@@ -19,24 +21,30 @@ Welcome to my portfolio website repository! This project showcases my work, skil
 
 Visit the live website: [https://hxndev.github.io/](https://hxndev.github.io/)
 
+Notable projects:
+- [JobFit - AI Job Matching Platform](https://hxndev.github.io/JobFit/) - Live demo available!
+
 ## Features
 
 - **Responsive Design:** Adapts seamlessly to mobile, tablet, and desktop screens.
-- **Project Showcase:** Explore detailed project pages with filtering options.
-- **Smooth Animations:** Enjoy dynamic transitions powered by GSAP.
+- **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:** For building interactive user interfaces.
+- **React 18:** For building interactive user interfaces.
 - **Vite:** A modern build tool for fast development.
-- **React Router:** For seamless client-side routing.
-- **Mantine UI:** For a robust and stylish component library.
+- **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
 
@@ -83,35 +91,82 @@ To preview the production build locally:
 npm run preview
 ```
 
+### Linting and Formatting
+
+```bash
+# 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/](https://hxndev.github.io/)
 
+The deployment workflow is defined in `.github/workflows/deploy.yml`.
+
 ## Project Structure
 
 ```
 hxndev.github.io/
-├── .github/
-│   └── workflows/
-│       └── deploy.yml          # GitHub Actions workflow for deployment
-├── public/                     # Public assets (if any)
+├── .github/workflows/    # GitHub Actions workflow for deployment
+├── public/               # Public assets and static files
 ├── src/
-│   ├── assets/                 # Images and other assets
-│   ├── components/             # Reusable React components
-│   ├── context/                # React context providers
-│   ├── hooks/                  # Custom React hooks
-│   ├── pages/                  # Page components (e.g., Projects, About, Contact)
-│   ├── App.jsx                 # Main application component
-│   ├── main.jsx                # Entry point for React
-│   └── index.css               # Global styles
-├── index.html                  # HTML template processed by Vite
-├── package.json                # Project configuration and dependencies
-├── vite.config.js              # Vite configuration
-└── README.md                   # This file
+│   ├── 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!  
@@ -125,4 +180,6 @@ Distributed under the MIT License. See `LICENSE` for more information.
 
 **Hassan Shahzad**  
 Email: [hassanshahzad.dev@gmail.com](mailto:hassanshahzad.dev@gmail.com)  
+LinkedIn: [hassan-shahzad-2a6617212](https://www.linkedin.com/in/hassan-shahzad-2a6617212/)  
+GitHub: [HxnDev](https://github.com/HxnDev)  
 Portfolio: [https://hxndev.github.io/](https://hxndev.github.io/)