https://github.com/abirchebbi45/portfolio-website
Professional portfolio website showcasing software engineering and AI/ML expertise. Built with React, TypeScript, and Tailwind CSS. Features responsive design, smooth navigation, and clean presentation of experience, projects, skills, and contact information.
https://github.com/abirchebbi45/portfolio-website
ai-ml portfolio professional-website react responsive-design software-engineering tailwindcss typescript
Last synced: 2 months ago
JSON representation
Professional portfolio website showcasing software engineering and AI/ML expertise. Built with React, TypeScript, and Tailwind CSS. Features responsive design, smooth navigation, and clean presentation of experience, projects, skills, and contact information.
- Host: GitHub
- URL: https://github.com/abirchebbi45/portfolio-website
- Owner: abirchebbi45
- Created: 2025-09-20T21:29:31.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-21T13:31:06.000Z (9 months ago)
- Last Synced: 2025-10-12T03:00:10.985Z (8 months ago)
- Topics: ai-ml, portfolio, professional-website, react, responsive-design, software-engineering, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://abirchebbi-portfolio.vercel.app/
- Size: 1.85 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Portfolio Website - Abir Chebbi
[](https://abirchebbi-portfolio.vercel.app/)
[](https://github.com/abirchebbi45/portfolio-website)
[](LICENSE)
> **Professional portfolio website showcasing software engineering and AI/ML expertise. Built with modern web technologies featuring responsive design, smooth navigation, and clean presentation of experience, projects, skills, and contact information.**
## 👨💻 About
This is the personal portfolio website of **Abir Chebbi**, a Software Engineer and AI/ML Specialist from Tunisia. The website presents a comprehensive overview of professional experience, technical skills, projects, and achievements in an elegant and user-friendly interface.
## ✨ Features
- 🎨 **Modern & Responsive Design** - Optimized for all device sizes
- ⚡ **Fast Performance** - Built with Vite for lightning-fast loading
- 🌙 **Dark/Light Theme** - Toggle between themes for better user experience
- 📱 **Mobile-First Approach** - Seamless experience across all devices
- 🎯 **Interactive Navigation** - Smooth scrolling and intuitive user interface
- 📊 **Dynamic Content** - Real-time data rendering with React
- 🔒 **Type Safety** - Full TypeScript implementation
- 🎭 **Smooth Animations** - Enhanced with Framer Motion
- 📧 **Contact Integration** - Direct communication capabilities
## 🛠️ Tech Stack
### Frontend
- **React 18** - Modern UI library with hooks
- **TypeScript** - Type-safe JavaScript development
- **Tailwind CSS** - Utility-first CSS framework
- **Framer Motion** - Production-ready motion library
- **Lucide React** - Beautiful & customizable icons
- **React Hook Form** - Performant forms with easy validation
### Backend & Infrastructure
- **Express.js** - Fast, unopinionated web framework
- **Node.js** - JavaScript runtime environment
- **Drizzle ORM** - Lightweight TypeScript ORM
- **PostgreSQL** - Robust relational database
- **Vite** - Next generation frontend tooling
### Development Tools
- **ESBuild** - Extremely fast JavaScript bundler
- **PostCSS** - Tool for transforming CSS
- **Cross-env** - Cross-platform environment variables
- **TSX** - TypeScript execute for Node.js
## 🚀 Getting Started
### Prerequisites
- **Node.js** (v18 or higher)
- **npm** or **yarn**
- **Git**
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/abirchebbi45/portfolio-website.git
cd portfolio-website
```
2. **Install dependencies**
```bash
npm install
```
3. **Set up environment variables**
```bash
cp .env.example .env
# Fill in your environment variables
```
4. **Start development server**
```bash
npm run dev
```
5. **Open your browser**
```
http://localhost:5000
```
## 📜 Available Scripts
```bash
# Development
npm run dev # Start development server
npm run check # Type check with TypeScript
# Production
npm run build # Build for production
npm start # Start production server
# Database
npm run db:push # Push database schema changes
```
## 🏗️ Project Structure
```
portfolio-website/
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── data/ # Portfolio data and types
│ │ ├── hooks/ # Custom React hooks
│ │ └── lib/ # Utility functions
│ └── index.html # Entry HTML file
├── server/ # Backend Express application
│ ├── index.ts # Server entry point
│ ├── routes.ts # API routes
│ └── storage.ts # Database configuration
├── shared/ # Shared types and schemas
└── attached_assets/ # Static assets and media
```
## 🎯 Key Sections
### 🏠 **Hero Section**
- Professional introduction
- Call-to-action buttons
- Social media links
### 👨💻 **About**
- Professional summary
- Core specializations
- Technical expertise areas
### 💼 **Experience**
- Work history and achievements
- Project descriptions
- Technology stacks used
### 🚀 **Projects**
- Featured projects portfolio
- Technical implementations
- Live demos and repositories
### 🎓 **Education**
- Academic background
- Certifications
- Continuous learning
### 🛠️ **Skills**
- Technical skill categories
- Proficiency levels
- Technology expertise
### 📞 **Contact**
- Professional contact information
- Direct communication form
- Social media presence
## 🎨 Design Philosophy
- **Minimalist Aesthetic** - Clean, professional appearance
- **User-Centric Design** - Intuitive navigation and accessibility
- **Performance First** - Optimized loading and interactions
- **Mobile Responsive** - Consistent experience across devices
- **Professional Branding** - Cohesive visual identity
## 🚀 Deployment
### Production Build
```bash
npm run build
npm start
```
### Environment Variables
```env
NODE_ENV=production
DATABASE_URL=your_database_url
PORT=5000
```
## 📊 Performance
- ⚡ **Lighthouse Score**: 95+ across all metrics
- 🚀 **First Contentful Paint**: < 1.5s
- 📱 **Mobile Performance**: Optimized for all devices
- ♿ **Accessibility**: WCAG 2.1 compliant
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👤 Author
**Abir Chebbi**
- 💼 **LinkedIn**: [Abir Chebbi](https://linkedin.com/in/abir-chebbi-049119216/)
- 🐙 **GitHub**: [@abirchebbi45](https://github.com/abirchebbi45)
- 📧 **Email**: abirc240@gmail.com
- 📍 **Location**: Sousse, Tunisia
## 🙏 Acknowledgments
- **React Team** for the amazing framework
- **Tailwind CSS** for the utility-first CSS framework
- **Vite Team** for the blazing fast build tool
- **Vercel** for deployment platform
- **Open Source Community** for inspiration and resources
---
**[⬆ Back to Top](#-portfolio-website---abir-chebbi)**
Made with ❤️ by [Abir Chebbi](https://github.com/abirchebbi45)