A modern, responsive portfolio website showcasing my experience as a Full Stack Software Engineer. Built with React 19, TypeScript, Vite, and Tailwind CSS v4, featuring a comprehensive theming system with dark mode support and smooth animations.
🌐 Live Demo: yousifabozid.github.io
I'm a passionate Full Stack Software Engineer with 4+ years of experience creating robust, scalable applications. I specialize in React, TypeScript, Node.js, and cloud technologies, with a focus on delivering high-quality solutions that exceed expectations.
- Modern UI/UX: Clean, professional design with attention to detail
- Fully Responsive: Optimized for all devices and screen sizes
- Dark/Light Mode: Complete theming system with user preference persistence
- Smooth Animations: Intersection Observer-based scroll animations
- Interactive Elements: Hover effects, transitions, and micro-interactions
- Accessibility: Built with accessibility best practices in mind
- Typed Animations: Dynamic typewriter effect in hero section
- Scroll Animations: Elements animate in as they come into view
- Theme Persistence: User's theme preference saved to localStorage
- System Theme Detection: Automatically detects user's system preference
- Performance Optimized: Fast loading with optimized builds
- SEO Friendly: Proper meta tags and semantic HTML structure
- Image Galleries: Certificate image viewing with modal dialogs
- Timeline Components: Interactive education and experience timelines
- Progress Indicators: Visual skill level representations
- Expandable Content: Collapsible sections for achievements and skills
- Hero Section: Dynamic introduction with typing animation
- About: Personal background and professional journey
- Experience: Detailed work history with achievements and technologies
- Education: Comprehensive education timeline with institutions, achievements, and certificates
- Certificates: Dedicated showcase of certifications, badges, and achievements with image gallery
- Skills: Categorized skill set with proficiency levels and visual progress indicators
- Projects: Portfolio of notable projects and contributions with detailed descriptions
- Testimonials: Professional recommendations and feedback from colleagues
- Contact: Multiple ways to get in touch with contact form
- Footer: Additional links and information
- React 19: Latest version with improved performance and features
- TypeScript: Static type checking for robust code
- Tailwind CSS v4: Utility-first CSS framework with dark mode
- Lucide React: Beautiful, customizable SVG icons
- Custom Hooks: Reusable logic for scroll animations and theme management
- React Hook Form: Performant forms with easy validation
- Zod: TypeScript-first schema declaration and validation
- Hookform Resolvers: Integration between React Hook Form and Zod
- Radix UI: Accessible, unstyled UI primitives
- Dialog, Dropdown Menu, Form, Select, Switch, Tabs
- Custom Components: Tailored components for specific needs
- Vite: Next-generation frontend tooling
- ESLint: Code linting with React and TypeScript support
- Prettier: Code formatting for consistency
- Husky: Git hooks for code quality
- lint-staged: Run linters on staged files
- CSS Custom Properties: Semantic color variables
- Tailwind Merge: Utility for merging Tailwind classes
- CLSX: Conditional class name utility
- Font Integration: Inter and JetBrains Mono fonts
- Node.js (version 18 or higher)
- npm, yarn, or pnpm
-
Clone the repository:
git clone https://github.com/YousifAbozid/YousifAbozid.github.io.git cd YousifAbozid.github.io -
Install dependencies:
npm install # or yarn install # or pnpm install
-
Start the development server:
npm run dev # or yarn dev # or pnpm dev
-
Open your browser and visit http://localhost:3000
npm run build
npm run preview # Preview the production buildYousifAbozid.github.io/
├── public/ # Static assets
│ ├── favicon.png
│ ├── Full-App-Screenshot.png
│ ├── Yousif_Abozid_Resume.pdf
│ └── certificates/ # Certificate images
│ ├── Advanced-Full-Stack-Web-Development-Completion-Certificate.jpg
│ ├── ALX-SE-Program-Completion-Certificate.png
│ ├── Challenge-Completion-Badge.jpg
│ ├── Challenge-Recipient-Badge.png
│ ├── Elements-of-AI-Completion-Certificate.png
│ ├── English-Diploma-Completion-Certificate.jpg
│ ├── English-Diploma-Final-Exam-Completion-Certificate.jpg
│ ├── Founder-Academy-Completion-Certificate.jpg
│ ├── Full-Stack-Open-CI-CD-Part-Completion-Certificate.png
│ ├── Full-Stack-Open-MOOC-Completion-Certificate.png
│ └── Top-Graduate-Badge.jpg
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Footer.tsx
│ │ ├── Navbar.tsx
│ │ └── sections/ # Page sections
│ │ ├── About.tsx
│ │ ├── Certificates.tsx
│ │ ├── Contact.tsx
│ │ ├── Education.tsx
│ │ ├── Experience.tsx
│ │ ├── Hero.tsx
│ │ ├── Projects.tsx
│ │ ├── Skills.tsx
│ │ └── Testimonials.tsx
│ ├── contexts/ # React contexts
│ │ └── ThemeProvider.tsx # Theme management
│ ├── data/ # Static data
│ │ └── portfolio.ts # Portfolio content
│ ├── hooks/ # Custom React hooks
│ │ └── useScrollAnimation.ts
│ ├── lib/ # Utility functions
│ │ └── utils.ts
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ ├── globals.css # Global styles and theme variables
│ └── vite-env.d.ts # Vite type definitions
├── eslint.config.js # ESLint configuration
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
The portfolio features a comprehensive theming system with semantic color variables:
- Background Colors: Primary, secondary, tertiary backgrounds
- Text Colors: Primary, secondary, tertiary, and inverted text
- Accent Colors: Primary, secondary, success, warning, danger
- Border Colors: Light and dark mode borders
- Shadow Colors: Consistent shadow effects
// Background with theme colors
<div className="bg-l-bg-1 dark:bg-d-bg-1">
// Text with theme colors
<p className="text-l-text-2 dark:text-d-text-2">
// Accent colors
<button className="bg-primary hover:bg-primary-dark">Modify theme variables in src/globals.css:
@theme {
--color-primary: hsl(217.2 91.2% 59.8%);
--color-l-bg-1: #ffffff;
--color-d-bg-1: #0d1117;
/* Add your custom colors */
}The portfolio is fully responsive with breakpoints for:
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
- Large Screens: 1440px+
npm run dev: Start development servernpm run build: Build for productionnpm run preview: Preview production buildnpm run lint: Run ESLintnpm run lint:fix: Fix ESLint issuesnpm run format: Format code with Prettiernpm run format:check: Check formattingnpm run fix-all: Run both lint:fix and formatnpm run type-check: TypeScript type checkingnpm run upgrade: Update dependencies
- Email: yousif.abozid@yahoo.com
- LinkedIn: linkedin.com/in/yousifabozid
- GitHub: github.com/YousifAbozid
- Twitter: twitter.com/YousifAbozid12
This project is licensed under the MIT License - see the LICENSE file for details.
While this is a personal portfolio, I welcome suggestions and improvements! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Design Inspiration: Modern portfolio designs and UI/UX best practices
- Icons: Lucide React for beautiful SVG icons
- Fonts: Inter and JetBrains Mono
- UI Components: Radix UI for accessible primitives
- Color Palette: GitHub's design system for dark mode inspiration
Built with ❤️ by Yousif Abozid
This portfolio represents my journey as a Full Stack Software Engineer and showcases the projects and experiences that have shaped my career in technology.