📘 Overview
This project was developed as part of my Hybrid 4-Year Computer Science Engineering Program during Year 1 – Spring Semester at Bahçeşehir University.
The goal of this project was to advance my Full-Stack Web Development fundamentals by recreating a fully responsive Notion.so-style landing page using modern frontend techniques.
🖥️ Responsive Design (Mobile-First): Layout adapts seamlessly down to 320px using CSS Media Queries.
📐 Advanced CSS Layouts: Deep use of CSS Grid and Flexbox to build complex, asymmetric grid structures (4×2 cards, 5-column footer).
🎛️ DOM Interactivity with Vanilla JavaScript: Implemented interactive navigation, including hamburger menu toggles and animated mega dropdown menus using classList.toggle and event listeners.
🔧 Professional Git Workflow: Feature-branch development with meaningful commits and proper merge conflict resolution.
| Category | Technology | Application Detail |
|---|---|---|
| Languages | HTML5, CSS3, Vanilla JavaScript | Core UI & DOM functionality |
| Layout Systems | Flexbox, CSS Grid | Modern, modular, responsive UI design |
| Version Control | Git & GitHub | Feature branching, commits, merging |
📁 responsive-site-clone-frontend/ ┣ 📁 assets/ ┣ 📁 css/ ┣ 📁 js/ ┣ 📄 index.html ┗ 📘 README.md
Smooth fade-in/out transitions using CSS opacity + visibility.
Toggle-based menu interaction for small screens using Vanilla JS.
Multiple horizontal grid sections stacked vertically on small screens while maintaining multi-column layouts on desktop.
🔗 Live Demo: bellikerem.github.io/static-personal-portfolio
💻 Repository: github.com/bellikerem/static-personal-portfolio
Kerem Can Belli
📧 k.belli.eng@gmail.com
🔗 linkedin.com/in/keremcanbelli
💾 github.com/bellikerem