hassanx.tech

hassanx.tech is my personal portfolio website—built with Next.js, React, and Tailwind CSS. A modern, responsive showcase of my work as a Frontend Developer & Designer.

---

Technology Stack

This is a list of the various technologies used to build this portfolio:

Category	Technology Name
Framework	Next.js 15
Language	TypeScript
Styling	Tailwind CSS 4
Components	React 19
Animations	Framer Motion
Fonts	Geist
Deployment	Vercel

Note

This portfolio is built from scratch using modern web technologies. The project structure and implementation are original works created by Hassan Shafique, showcasing best practices in modern web development.

---

Features

• Modern Design: Clean, minimalist design with smooth animations
• Responsive Layout: Optimized for all devices and screen sizes
• Performance: Built with Next.js 15 and optimized for speed
• Accessibility: WCAG compliant with proper ARIA labels
• SEO Optimized: Meta tags, structured data, and sitemap
• Smooth Animations: Framer Motion powered interactions
• Contact Integration: Newsletter subscription and contact forms

---

Getting Started

Prerequisites

• Node.js 18.0.0 or higher
• npm 8.0.0 or higher

Installation

1. Clone the repository

   git clone https://github.com/HassanXTech/hassanx.tech.git
   cd Portfolio

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

---

Project Structure

src/
├── app/                    # Next.js 13+ app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout component
│   ├── page.tsx           # Home page
│   ├── robots.ts          # Robots.txt configuration
│   └── sitemap.ts         # Sitemap generation
├── components/             # React components
│   ├── About.tsx          # About section
│   ├── AnimatedSection.tsx # Animation wrapper
│   ├── Contact.tsx        # Contact section
│   ├── Footer.tsx         # Footer component
│   ├── Header.tsx         # Navigation header
│   ├── Hero.tsx           # Hero section
│   ├── Newsletter.tsx     # Newsletter subscription
│   └── WorkExperience.tsx # Work experience section
public/                     # Static assets
└── package.json           # Dependencies and scripts

---

Components

Core Components

• Hero: Introduction section with profile image and call-to-action
• About: Personal information and background
• Work Experience: Professional experience and achievements
• Newsletter: Email subscription form
• Contact: Contact information and form
• Header: Navigation with social media links
• Footer: Copyright and additional information

Animation System

The AnimatedSection component provides smooth scroll-triggered animations using Framer Motion, ensuring a polished user experience.

---

SEO & Performance

• Meta Tags: Comprehensive meta information for social sharing
• Structured Data: JSON-LD schema markup for better search visibility
• Sitemap: Automatically generated XML sitemap
• Robots.txt: Search engine crawling configuration
• Performance: Optimized images and lazy loading

---

Responsive Design

The portfolio is fully responsive and optimized for:

• Mobile devices (320px+)
• Tablets (768px+)
• Desktop (1024px+)
• Large screens (1440px+)

---

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on every push

Other Platforms

The project can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

---

Licensing

Important

TL;DR: This codebase requires my explicit permission to directly use, and you should contact me if you are in doubt; of course, you are free to use it for reference/inspiration. This portfolio represents original creative work and implementation.

This project uses a multi-tiered licensing approach to differentiate between various components:

Original Implementation

This portfolio website is built from scratch using modern web technologies including Next.js, React, and Tailwind CSS. The project structure and implementation are original works created by Hassan Shafique.

Website Code

All code, components, and implementations in this portfolio project are proprietary and original works. This includes, but is not limited to, custom HTML, CSS, JavaScript/TypeScript, React components, Next.js configurations, and any other code or scripts used to create the unique functionality and appearance of this portfolio website.

The code is publicly available for viewing and reference purposes only. Modification, redistribution, or commercial use requires explicit permission from the copyright holder.

Website Content

The content of this portfolio website, including but not limited to text, images, graphics, and any other materials (excluding code and design elements covered under the Website Code License above), is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License (CC BY-NC-ND 4.0).

To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/ or view LICENSE.content.md.

For full license details and permission requests, please refer to the LICENSE file in this repository or contact [email protected].

---

Contributing

While this is a personal portfolio, suggestions and improvements are welcome! Please feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

---

Contact

• Portfolio: hassanx.tech
• Email: [email protected]
• GitHub: @HassanXTech
• Instagram: @hassantech
• LinkedIn: Hassan Tech

---

Acknowledgments

• Built with Next.js and React
• Styled with Tailwind CSS
• Animations powered by Framer Motion
• Icons from Lucide

---

Made with ♥ by Hassan Shafique