Skip to content

Yasouimo/Portfolio

Repository files navigation

Personal Portfolio Website

A modern, responsive personal portfolio website showcasing my skills, projects, certifications, and professional experience. Built with clean design principles and smooth animations to provide an engaging user experience.

Capture d'écran 2026-02-19 143737

🚀 Live Demo

Visit the live portfolio: https://yasouimo.github.io/Portfolio/

✨ Features

🏠 Home Section

  • Professional introduction with animated elements
  • Clean, modern design with hero section
  • Smooth scrolling navigation

👨‍💻 About Me

  • Comprehensive overview of education and background
  • Technical skills visualization with interactive icons
  • Professional experience and knowledge areas

🛠️ Projects Showcase

  • Detailed project descriptions with live previews
  • Technology stack indicators for each project
  • Direct links to GitHub repositories and live demos
  • Responsive project cards with hover effects

💼 Professional Experiences

  • NEW: Comprehensive internship and work experience showcase
  • Detailed company profiles with logos and descriptions
  • Interactive expandable cards for each experience
  • Technology stacks and key achievements for each role
  • Duration, role, and location information
  • Direct links to project repositories
  • Bilingual support (English/French) for international accessibility

🏆 Certifications

  • Professional certifications and achievements
  • Organized display of credentials
  • Achievement timeline and progress tracking

🎯 Skills Section

  • Visual representation of technical skills
  • Proficiency levels with progress bars
  • Technology icons and categorized skill sets

📱 Responsive Design

  • Mobile-first approach
  • Optimized for all screen sizes (desktop, tablet, mobile)
  • Cross-browser compatibility

🎨 Interactive Elements

  • Smooth scroll animations using AOS library
  • Hover effects and transitions
  • Dynamic content loading
  • Expandable experience cards with detailed information
  • NEW: Dark/Light theme toggle with smooth transitions
  • NEW: Persistent theme preference storage
  • NEW: Modern glassmorphism card designs
  • NEW: Multi-level shadow system for depth
  • NEW: Keyboard navigation support (Arrow keys to navigate projects/certifications)

🌐 Multilingual Support

  • English and French language options
  • Dynamic content switching
  • Culturally appropriate translations

🌓 Theme System

  • NEW: Beautiful dark and light mode toggle
  • Smooth color transitions across all components
  • Persistent theme storage (remembers your preference)
  • Modern purple-blue gradient accent colors
  • Optimized for both accessibility and aesthetics
  • Automatic theme application across all pages

🛠️ Technologies Used

Frontend

  • HTML5: Semantic markup and structure
  • CSS3: Modern styling with Flexbox and Grid
  • JavaScript: Interactive functionality and DOM manipulation

Libraries & Frameworks

  • Font Awesome: Professional icon library
  • Bootstrap: Responsive grid system and components
  • AOS (Animate On Scroll): Smooth scroll animations

Tools & Deployment

  • GitHub Pages: Hosting and deployment
  • Git: Version control
  • VS Code: Development environment

📁 Project Structure

Personal Portfolio/
├── index.html              # Main homepage
├── Aboutme.html            # About section
├── projects.html           # Projects showcase
├── internships.html        # Professional experiences (NEW)
├── Certifications.html     # Certifications page
├── Contact.html            # Contact information
├── navbar.html             # Navigation component
├── styles/                 # CSS stylesheets
│   ├── style.css
│   ├── navbar.css
│   ├── projects.css
│   ├── language-switcher.css
│   └── ...
├── scripts/                # JavaScript files
│   ├── Aboutme.js
│   ├── certifications.js
│   ├── Contact.js
│   ├── projects.js
│   ├── language-switcher.js
│   └── script.js
├── images/                 # Image assets
│   ├── background.png
│   ├── photo.png
│   ├── Radem_logo.png
│   ├── declic_logo.jpg
│   └── ...
├── resources/              # Documents and files
│   ├── Cv_Bellmir_Yahya_AI_DataScience.pdf
│   └── Resume_Bellmir_Yahya_AI_DataScience.pdf
└── README.md

🎨 Design Highlights

  • Modern UI/UX: Clean, professional design with attention to detail
  • Color Scheme: Carefully chosen colors for optimal readability
  • Typography: Professional font choices for enhanced readability
  • Animations: Subtle animations that enhance user experience
  • Interactive Elements: Expandable cards and smooth transitions
  • Accessibility: Designed with accessibility best practices in mind
  • Multilingual Design: Seamless language switching functionality

📱 Responsive Breakpoints

  • Mobile: 320px - 768px
  • Tablet: 768px - 1024px
  • Desktop: 1024px and above

🌟 Key Sections

Navigation

  • Sticky navigation bar with smooth scrolling
  • Mobile-friendly hamburger menu
  • Active section highlighting
  • Multi-language navigation support

Professional Experiences

  • RADEM Internship: Full-stack supervisor management system development
  • Declic Internship: LLM event recommender system with advanced AI techniques
  • Interactive company profiles with detailed project information
  • Technology stack visualization and achievement highlights

Contact

  • Multiple contact methods
  • Social media integration
  • Professional networking links

🔧 Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers

📈 Performance Features

  • Optimized images and assets
  • Minified CSS and JavaScript
  • Fast loading times
  • SEO-friendly structure
  • Lazy loading for enhanced performance

🆕 Recent Updates

  • Keyboard Navigation: Added left/right arrow key support for navigating projects and certifications
  • Experiences Page: Added comprehensive professional experience showcase
  • Bilingual Support: Full English/French language switching
  • Interactive Design: Expandable experience cards with detailed information
  • Company Profiles: Detailed information about internship companies
  • Project Integration: Direct links to GitHub repositories for each experience

📞 Contact Information

Bellmir Yahya


Built with ❤️ by Bellmir Yahya

About

My Personal Portfolio in a website Using HTML&CSS&JavaScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published