Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ahmedalsanadi/portfolio

Modern Full-Stack Developer Portfolio – A responsive Next.js portfolio showcasing Ahmed Al-Sanadi’s projects, skills, and experience in React, Laravel, PHP, and modern web technologies. Features dark theme, smooth animations, and interactive components.
https://github.com/ahmedalsanadi/portfolio

ahmed-al-sanadi animations component-based dark-theme full-stack-developer modern-web nextjs portfolio react responsive-design seo-optimized tailwindcss typescript vercel-deployment web-development

Last synced: 2 months ago
JSON representation

Modern Full-Stack Developer Portfolio – A responsive Next.js portfolio showcasing Ahmed Al-Sanadi’s projects, skills, and experience in React, Laravel, PHP, and modern web technologies. Features dark theme, smooth animations, and interactive components.

Awesome Lists containing this project

README 

          
# ✨ Ahmed Al-Sanadi - Full-Stack Developer Portfolio



[![Next.js](https://img.shields.io/badge/Next.js-15.3.4-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)

[![React](https://img.shields.io/badge/React-18.2.0-blue?style=for-the-badge&logo=react)](https://reactjs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5.2.2-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.3.3-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/)

[![Laravel](https://img.shields.io/badge/Laravel-11-red?style=for-the-badge&logo=laravel)](https://laravel.com/)

[![PHP](https://img.shields.io/badge/PHP-8.3-777BB4?style=for-the-badge&logo=php)](https://www.php.net/)



> **Modern, responsive portfolio website showcasing full-stack development projects and skills**



## 📋 Table of Contents



- [About](#about)

- [Features](#features)

- [Technologies Used](#technologies-used)

- [Projects Showcased](#projects-showcased)

- [Installation](#installation)

- [Usage](#usage)

- [Deployment](#deployment)

- [Contact](#contact)



## 🎯 About



This is the personal portfolio website of **Ahmed Mohammed Abdulrahman Al-Sanadi**, a passionate Full-Stack Developer with over 4+ years of experience. The portfolio showcases a collection of modern web applications, demonstrating expertise in both frontend and backend technologies.



### Key Highlights:

- **4+ Years** of software development experience

- **Full-Stack** expertise (Frontend & Backend)

- **Modern Tech Stack** (Next.js, React, Laravel, PHP)

- **Mobile Development** (Flutter/Dart)

- **Database Management** (MySQL, SQLite, Oracle)

- **Cloud Deployment** (Vercel, Netlify)



## ✨ Features



### 🎨 Modern Design

- **Responsive Design** - Optimized for all devices

- **Dark Theme** - Professional dark color scheme

- **Smooth Animations** - Intersection Observer animations

- **Interactive Elements** - Hover effects and transitions

- **Particle Background** - Dynamic visual effects



### 📱 User Experience

- **Fast Loading** - Optimized performance with Next.js

- **SEO Optimized** - Meta tags and structured data

- **Accessibility** - WCAG compliant design

- **Cross-browser** - Compatible with modern browsers



### 🛠️ Technical Features

- **Component-based Architecture** - Reusable React components

- **TypeScript Support** - Type-safe development

- **Tailwind CSS** - Utility-first styling

- **Data Management** - JSON-based content management

- **Image Optimization** - Next.js image optimization



## 🛠️ Technologies Used



### Frontend

- **Next.js 15** - React framework with App Router

- **React 18** - UI library with hooks

- **TypeScript** - Type-safe JavaScript

- **Tailwind CSS** - Utility-first CSS framework

- **Lucide React** - Beautiful icons

- **React Intersection Observer** - Scroll animations



### Backend & Database

- **Laravel 11** - PHP web framework

- **PHP 8.3** - Server-side scripting

- **MySQL** - Relational database

- **SQLite** - Lightweight database

- **Oracle** - Enterprise database



### Mobile Development

- **Flutter** - Cross-platform mobile framework

- **Dart** - Programming language



### Tools & Deployment

- **Git & GitHub** - Version control

- **Vercel** - Frontend deployment

- **Netlify** - Static site hosting

- **Postman** - API testing

- **Figma** - Design collaboration



## 🚀 Projects Showcased



### 1. **Movie Streaming App** 🎬

- **Tech Stack**: Next.js, React, Tailwind CSS, Firebase, i18next

- **Features**: Advanced search, watchlists, multi-language support, Firebase auth

- **Live Demo**: [Movie Streaming App](https://movie-streaming-app-virid.vercel.app/)

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/Movie-Streaming-App)



### 2. **Car Rental Platform** 🚗

- **Tech Stack**: Next.js 15, React 18, TypeScript, Tailwind CSS, Shadcn/ui

- **Features**: Car browsing, filtering, rental management

- **Live Demo**: [Car Rental](https://car-rental-psi-nine.vercel.app/)

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/car-rental)



### 3. **FinBiz Financial Dashboard** 📊

- **Tech Stack**: React, Chart.js, AOS, Tailwind CSS

- **Features**: Interactive charts, smooth animations, responsive design

- **Live Demo**: [FinBiz Dashboard](https://main--finbiz-al-sanadi.netlify.app/)

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/FinBiz)



### 4. **Twitter Clone** 🐦

- **Tech Stack**: TypeScript, React, Next.js, Prisma, MongoDB

- **Features**: Tweet posting, liking, commenting, user profiles

- **Live Demo**: [Twitter App](https://twitter-2n7ic2inc-ahmedalsanadis-projects.vercel.app/)

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/twitter-app)



### 5. **Pixel Positions Job Site** 💼

- **Tech Stack**: Laravel, PHP, Tailwind CSS, MySQL

- **Features**: Job posting, application management, employer profiles

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/Pixel-Job-App-Site)



### 6. **Biccas Landing Page** 🎨

- **Tech Stack**: HTML5, CSS3, JavaScript

- **Features**: Modern design, responsive layout, smooth animations

- **Live Demo**: [Biccas Landing](https://ahmedalsanadi.github.io/Biccas-Landing-Page-Ahmed-Al-Sanadi/)

- **GitHub**: [Repository](https://github.com/ahmedalsanadi/Biccas-Landing-Page-Ahmed-Al-Sanadi)



## 🚀 Installation



### Prerequisites

- **Node.js** >= 18.17.0

- **npm** >= 9.0.0



### Setup Instructions



1. **Clone the repository**

   ```bash

   git clone https://github.com/ahmedalsanadi/Portfolio.git

   cd Portfolio

   ```



2. **Install dependencies**

   ```bash

   npm install

   ```



3. **Run the development server**

   ```bash

   npm run dev

   ```



4. **Open your browser**

   Navigate to [http://localhost:3000](http://localhost:3000)



### Available Scripts



```bash

# Development

npm run dev          # Start development server with Turbopack

npm run build        # Build for production

npm run start        # Start production server

npm run lint         # Run ESLint

npm run lint:fix     # Fix ESLint errors

npm run type-check   # TypeScript type checking

npm run format       # Format code with Prettier

npm run format:check # Check code formatting

```



## 📦 Usage



### Project Structure

```

Portfolio/

├── app/                    # Next.js App Router pages

│   ├── about/             # About page

│   ├── contact/           # Contact page

│   ├── experience/        # Experience page

│   ├── portfolio/         # Portfolio projects

│   └── services/          # Services page

├── components/            # React components

│   ├── common/           # Shared components

│   └── layouts/          # Layout components

├── data/                 # JSON data files

├── lib/                  # Utility functions

├── public/               # Static assets

└── styles/               # Global styles

```



### Customization



1. **Update Personal Information**

   - Edit `data/personal-data.json` for your details

   - Modify `data/projects-data.json` for your projects



2. **Styling**

   - Customize colors in `tailwind.config.ts`

   - Update global styles in `app/globals.css`



3. **Content**

   - Replace images in `public/` directory

   - Update component content in respective files



## 🌐 Deployment



### Vercel (Recommended)

1. Connect your GitHub repository to Vercel

2. Vercel will automatically detect Next.js

3. Deploy with one click



### Netlify

1. Build the project: `npm run build`

2. Deploy the `out` directory to Netlify



### Manual Deployment

```bash

npm run build

npm run start

```



## 📞 Contact



- **Name**: Ahmed Mohammed Abdulrahman Al-Sanadi

- **Email**: [AhmedAlsanadi40@gmail.com](mailto:AhmedAlsanadi40@gmail.com)

- **Phone**: +967 736 333 377

- **Location**: Hada'a Street, Sana'a, Yemen

- **GitHub**: [@ahmedalsanadi](https://github.com/ahmedalsanadi)

- **LinkedIn**: [Ahmed Al-Sanadi](https://www.linkedin.com/in/ahmed-al-sanadi/)



## 📄 License



This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.



## 🙏 Acknowledgments



- **Next.js Team** - For the amazing React framework

- **Tailwind CSS** - For the utility-first CSS framework

- **Laravel Team** - For the elegant PHP framework

- **Open Source Community** - For inspiration and tools



---






**Made with ❤️ by Ahmed Al-Sanadi**



[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ahmedalsanadi)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ahmed-al-sanadi/)

[![Email](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:AhmedAlsanadi40@gmail.com)