A modern, professional portfolio website showcasing my journey as a Web Developer and CIT student. Built with high-performance modern web technologies.
- Modern Dark UI: Premium dark theme with glassmorphism and animated gradients
- Responsive Design: Fully optimized for mobile, tablet, and desktop
- Dynamic Content:
- Typing animations
- Interactive skill bars with real SVG icons
- Filterable project cards with live previews
- Achievement timelines
- Contact Form: Functional contact form integrated with Google Sheets
- Performance: High Lighthouse scores with optimized assets
- Frontend Framework: React 18 + Vite
- Styling: Tailwind CSS + Tailwind Animate
- Icons: Lucide React + SVG Logos
- Animation: Framer Motion (Ready) + Custom CSS Keyframes
- Routing: Wouter (Lightweight routing)
Portfolio/
├── client/
│ ├── public/ # Static assets (images, CV)
│ └── src/
│ ├── components/ # Reusable UI components (Hero, Skills, Projects...)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── pages/ # Page views
├── package.json # Dependencies and scripts
└── vite.config.ts # Vite configuration- Node.js (v18 or higher)
- npm (v9 or higher)
-
Clone the repository
git clone https://github.com/Abdul-Rasheed-Talal/portfolio.git cd portfolio -
Install dependencies
npm install
-
Start local server
npm run dev
The site will open at
http://localhost:5173 -
Build for production
npm run build
The contact form uses a serverless approach with Google Sheets. 👉 Read the Setup Guide to connect your own Google Sheet.
This portfolio is static-site ready and can be deployed anywhere. 👉 Read the GitHub Pages Guide for easy deployment.
This project is open source and available under the MIT License.