https://github.com/allahrakha-7/portfolio
Hi 👋 , I'm Allah Rakha. I'm a full-stack developer with 2+ years of experience, turning complex ideas into exceptional digital experiences. Let's build something amazing together.
https://github.com/allahrakha-7/portfolio
framer-motion html-css-javascript reacticons reactjs tailwindcss vercel-deployment
Last synced: about 1 month ago
JSON representation
Hi 👋 , I'm Allah Rakha. I'm a full-stack developer with 2+ years of experience, turning complex ideas into exceptional digital experiences. Let's build something amazing together.
- Host: GitHub
- URL: https://github.com/allahrakha-7/portfolio
- Owner: allahrakha-7
- Created: 2025-11-05T08:00:15.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-05T11:01:44.000Z (7 months ago)
- Last Synced: 2025-11-05T12:07:51.108Z (7 months ago)
- Topics: framer-motion, html-css-javascript, reacticons, reactjs, tailwindcss, vercel-deployment
- Language: JavaScript
- Homepage: https://allahrakhadevcom.vercel.app/
- Size: 683 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Portfolio
This is the official repository for my personal portfolio, built from scratch to showcase my skills, projects, and work experience as a Full-Stack Developer. The site is fully responsive, interactive, and designed with a modern, eye-catching UI.
---
## 🚀 Live Demo
You can view the live deployed version of this portfolio here:
**https://allahrakhadevcom.vercel.app/**
---
## ✨ Features
This portfolio is a single-page application that includes:
* **Dynamic Hero Section:** A professional "welcome" section with an animated `TypeAnimation` component to display my roles (e.g., "Full-Stack Developer", "Node.js Expert").
* **Eye-Catching Visuals:** Features a custom circular image component with a soft, pulsing glow effect.
* **Interactive Skills Grid:** A "Skills & Technologies" section with filter buttons. Users can click "All," "Frontend," "Backend," etc., to see an animated grid of relevant technology icons.
* **Animated Experience Timeline:** A vertical timeline that showcases my professional work history, with cards that animate in on scroll.
* **Featured Projects Section:** A clean, alternating (left/right) layout to display my best projects, complete with descriptions, tech tags, and links.
* **WhatsApp Contact Form:** A modern contact form that captures the user's name, email, subject, and message, and then formats it into a pre-filled WhatsApp message by opening a `wa.me` link.
* **Responsive Design:** The entire site is built mobile-first and is fully responsive for all devices, from small phones to large desktops.
* **Consistent UI/Branding:** Uses a custom-defined dark theme based on the `rich_black`, `prussian_blue`, `cerulean`, and `picton_blue` color palette.
---
## 💻 Tech Stack
This project was built using a modern frontend stack:
* **Core:** React.js, Vite
* **Styling:** Tailwind CSS (for all component styling and layout)
* **Animations:** Framer Motion (for all page-scroll and component-level animations)
* **Icons:** React Icons
* **Deployment:** Vercel
---
## 🏃♂️ Running Locally
To get a local copy up and running, follow these simple steps.
### Prerequisites
You must have [Node.js](https://nodejs.org/en) (which includes npm) installed on your machine.
### Installation & Startup
1. **Clone the repository:**
```bash
git clone https://github.com/allahrakha-7/portfolio.git
```
2. **Install NPM packages:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm run dev
```
---
## 👤 Contact
You can reach me through the following channels:
* **GitHub:** [@allahrakha-7](https://github.com/allahrakha-7)
* **LinkedIn:** [@allahrakha7](https://www.linkedin.com/in/allahrakha7)
* **Email:** armozi07911000@gmail.com
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh