Portfolio

Personal portfolio project to showcase my projects, skills, and development journey. Built to practice modern web development, component structuring, and project organization. You can check the live demo on this link : portfolio

Goals

On top of showcasing all my projects, this project is also meant to:

• Practice DOM manipulation, modular JavaScript, and dynamic UI updates
• Implement responsive design and modern CSS (Sass, Grid, Flexbox)
• Apply Docker for reproducible development environments

Features

• Project Gallery: Display projects with dynamic filters and tags
• Responsive Layout: Works seamlessly on desktop and mobile
• Dynamic Content: Project information and images loaded from structured data
• Interactive UI: Clickable tags, hover effects, modal previews

Tools

• HTML, CSS, Sass
• JavaScript (ES6 modules)
• Vite for development with HMR (Hot Module Replacement)
• Docker for containerized development environment

Project structure

 📁 Portfolio
 ├── 📁 src
 │   ├── 📁 assets
 │   │   ├── 📁 certifications_img
 │   │   │   ├── cpp.png
 │   │   │   ├── docker.png
 │   │   │   ├── git.png
 │   │   │   ├── html-css-sass.png
 │   │   │   ├── linux-bash.png
 │   │   │   └── mysql.png
 │   │   ├── 📁 data
 │   │   │   ├── generateTagsAndFilters.js
 │   │   │   ├── project-list.js
 │   │   │   └── tags.js
 │   │   ├── 📁 icon
 │   │   └── 📁 project_img
 │   ├── 📁 components
 │   │   ├── filter-element.js
 │   │   ├── footer.html
 │   │   ├── head.html
 │   │   ├── nav.html
 │   │   └── project-elements.js
 │   ├── 📁 scripts
 │   │   ├── filter.js
 │   │   ├── load-components.js
 │   │   └── projects.js
 │   ├── 📁 style
 │   │   └── 📁 scss
 │   │       ├── 📁 base
 │   │       │   ├── _base.scss
 │   │       │   ├── _helpers.scss
 │   │       │   ├── _icon.scss
 │   │       │   ├── _reset.scss
 │   │       │   └── _variables.scss
 │   │       ├── 📁 components
 │   │       │   ├── _card.scss
 │   │       │   ├── _common.scss
 │   │       │   ├── _courses.scss
 │   │       │   ├── _filter-title.scss
 │   │       │   ├── _footer.scss
 │   │       │   ├── _header.scss
 │   │       │   ├── _nav.scss
 │   │       │   └── _skillbar.scss
 │   │       ├── 📁 pages
 │   │       │   ├── _homepage.scss
 │   │       │   └── _projects.scss
 │   │       ├── 📁 tools
 │   │       │   ├── _media_queries.scss
 │   │       │   └── _mixin.scss
 │   │       └── style.scss
 │   ├── certifications.html
 │   ├── contact.html
 │   ├── index.html
 │   └── projects.html
 ├── .dockerignore
 ├── .gitignore
 ├── 🐳 Dockerfile
 ├── 📝 README.md
 ├── 🐳 docker-compose.yml
 ├── googleaee6053547a5f496.html
 ├── package-lock.json
 ├── package.json
 ├── robots.txt
 ├── sitemap.xml
 └── ⚙️ vite.config.js

---

Generated by FileTree Pro Extension