Ali Tnacheri Ouazzani - Portfolio

A modern, professional portfolio website built with Astro and deployed on Vercel. This portfolio showcases technical skills, education, experience, projects, and professional accomplishments with a beautiful dark theme and glassmorphism design.

🌐 Live Demo

https://portfolio-ali-tnacheri.vercel.app

✨ Features

📱 Responsive Design

• Fully responsive and mobile-first approach
• Works perfectly on desktop, tablet, and mobile devices
• Touch-friendly navigation and interactions

🎨 Modern Design System

• Dark professional theme with glassmorphism effects
• Smooth animations and transitions
• Gradient accent colors (blue, purple, cyan)
• Custom CSS variables for easy theming
• Beautiful decorative background with floating orbs

🧬 Dynamic Content

• Single TypeScript data file for all content
• Sections automatically hide if no data is available
• Navigation dynamically generated based on active sections
• Easy to maintain and update

📊 Sections Included

• Hero - Eye-catching landing section with availability badge and CTA buttons
• About - Personal introduction with numbered cards
• Skills - Technical skills organized by category + soft skills
• Education - Timeline of educational background
• Experience - Work experience history (optional)
• Projects - Portfolio of projects with technologies and links
• Contact - Contact information and functional contact form
• Header - Fixed sticky navigation with mobile hamburger menu
• Footer - Footer with brand, quick links, and social connections
• Back-to-Top - Floating button for easy navigation

🎯 Interactive Elements

• Sticky header with scroll effects
• Mobile-responsive hamburger menu
• Active link detection using IntersectionObserver
• Hover effects on cards and buttons
• Smooth scroll behavior
• Form validation and submission (Formspree integration)
• Animated skill icons and badges

♿ Accessibility

• Skip-link for keyboard navigation
• Semantic HTML structure
• Focus-visible states on interactive elements
• ARIA labels and attributes
• Keyboard navigation support
• High contrast text

🚀 Performance

• Ultra-fast static site generation with Astro
• Optimized bundle size
• No heavy JavaScript frameworks
• Quick Time-to-Interactive (TTI)
• Optimized images and assets

🛠️ Tech Stack

• Framework: Astro - The web framework for content-driven websites
• Language: TypeScript - For type-safe development
• Styling: CSS - Global styles with CSS custom properties
• Icons: Lucide SVG - Stroke-based, consistent SVG icons
• Deployment: Vercel - Optimal hosting for Astro
• Version Control: Git & GitHub

📁 Project Structure

portfolio/
├── src/
│   ├── components/          # Reusable Astro components
│   │   ├── Header.astro     # Navigation header
│   │   ├── Hero.astro       # Hero section
│   │   ├── About.astro      # About section
│   │   ├── Skills.astro     # Skills section
│   │   ├── Education.astro  # Education timeline
│   │   ├── Experience.astro # Work experience
│   │   ├── Projects.astro   # Projects showcase
│   │   ├── Contact.astro    # Contact section
│   │   ├── Footer.astro     # Footer
│   │   └── BackToTop.astro  # Back-to-top button
│   ├── layouts/
│   │   └── BaseLayout.astro # Main layout wrapper
│   ├── pages/
│   │   └── index.astro      # Main page
│   ├── data/
│   │   └── portfolio.ts     # Central data file (EDIT THIS!)
│   └── styles/
│       └── global.css       # Global styles and design system
├── public/                  # Static assets
├── astro.config.ts          # Astro configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Dependencies and scripts
├── vercel.json              # Vercel deployment config
└── README.md                # This file

🚀 Getting Started

Prerequisites

• Node.js version 18 or higher
• npm or yarn package manager
• Git for version control

Local Development

1. Clone the repository:

   git clone https://github.com/ALI-OUAAZANI/portfolio.git
   cd portfolio

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The site will be available at http://localhost:3000

4. Build for production:

   npm run build

5. Preview the production build:

   npm run preview

✏️ Customization

📝 Update Your Content

All your portfolio content is stored in one file: src/data/portfolio.ts

This TypeScript file contains:

• Personal information (name, title, email, phone, location)
• Statistics and achievements
• Technical and soft skills
• Education history
• Work experience
• Projects and portfolio items
• Certifications
• Publications
• Social links

To update your portfolio:

1. Open src/data/portfolio.ts
2. Edit the data in the portfolioData object
3. Save the file
4. The website will automatically reflect changes
5. Sections without data will automatically hide

🎨 Customize Styling

The design system uses CSS custom properties located in src/styles/global.css:

• Colors: Modify --color-* variables for theme colors
• Typography: Change --font-* variables for fonts
• Animations: Adjust --transition-* variables for animation speed
• Shadows: Customize --shadow-* variables for depth

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Deployment

Deploy to Vercel

1. Push to GitHub:

   git add .
   git commit -m "Update portfolio"
   git push origin main

2. Deploy to Vercel:

   npm run deploy
   # or
   vercel --prod

Custom Domain

The portfolio is automatically deployed to:

https://portfolio-ali-tnacheri.vercel.app

To use a custom domain:

1. Add your domain in Vercel project settings
2. Update DNS records to point to Vercel
3. Deploy with the new domain

📚 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build locally
npm run deploy	Deploy to Vercel production

🔧 Configuration Files

astro.config.ts

Astro framework configuration with Vercel adapter for static site generation.

tsconfig.json

TypeScript configuration for strict type checking and JSX support.

vercel.json

Vercel deployment configuration with custom domain alias.

package.json

Project dependencies and npm scripts.

📄 License

This portfolio template is free to use and customize for personal use.

🤝 Contributing

Feel free to fork this project and adapt it for your own portfolio!

📞 Support

For questions or issues with Astro:

• Astro Documentation
• Astro Discord Community

For Vercel deployment issues:

• Vercel Documentation
• Vercel Support

---

Created with ❤️ by Ali Tnacheri Ouazzani

Built with Astro • Deployed on Vercel