Skip to content

Latest commit

 

History

History
93 lines (72 loc) · 3.55 KB

README.md

File metadata and controls

93 lines (72 loc) · 3.55 KB

✨ Personal Portfolio

A modern, responsive portfolio designed with the Glassmorphism aesthetic.
Built with a focus on clean UI/UX, performance, and cross-browser compatibility.

🌐 View Live Demo · 🪲 Report Bug


🎨 About The Project

This portfolio serves as a digital showcase for my projects, skills, and professional journey. The design leverages the Glassmorphism trend (frosted glass effect), implemented using modern, vanilla CSS without heavy frameworks.

✨ Key Features

  • 💎 Glassmorphism UI: Extensive use of backdrop-filter: blur(), semi-transparent borders, and rgba colors to create depth.
  • 🌓 Dark / Light Mode: Fully supported via CSS Variables with state persistence using LocalStorage.
  • 📱 Fully Responsive: Optimized for all viewports – from 4k desktops to mobile devices.
  • 🍏 iOS Optimized: Includes specific WebKit fixes to handle border-radius clipping and overflow rendering issues on Safari (iPhone).
  • ⚡ High Performance: Built with pure Vanilla JS and CSS to ensure maximum load speed.

🛠️ Built With

I intentionally avoided frameworks like Bootstrap or Tailwind to demonstrate strong fundamental understanding of CSS architecture and Layouts.

  • HTML5: Semantic markup and structure.
  • CSS3:
    • Flexbox & CSS Grid layouts.
    • CSS Custom Properties (Variables) for theming.
    • Mobile-first media queries.
    • Advanced selectors and backdrop filters.
  • JavaScript (ES6+):
    • Theme toggling logic.
    • DOM manipulation.

🚀 Installation & Usage

You can clone this repository to check out the code or use it as a template.

  1. Clone the repo

    git clone https://github.com/Kryzziii/kryzziii.github.io.git

  2. Navigate to directory

    cd kryzziii.github.io

  3. Run Simply open index.html in your browser or use the VS Code "Live Server" extension.

📂 File Structure

/
├── assets/               # Images, icons and screenshots
├── css/
│   ├── main.css          # The central import file (linked in HTML)
│   ├── 1-variables.css   # CSS Variables (Colors, Fonts, Glassmorphism settings)
│   ├── 2-base.css        # Resets, typography, and global defaults
│   ├── 3-layout.css      # Structure (Navbar, Grid, Footer)
│   ├── 4-components.css  # Reusable UI elements (Cards, Buttons, Pills)
│   └── 5-utilities.css   # Specific mobile overrides & fixes
├── js/
│   ├── main.js           # Core logic (Event listeners, Initialization)
│   └── components.js     # UI helpers (Dark mode toggle, Scroll logic)
├── 404.html              # Custom 404 error page
├── certifications.html   # Certifications and courses
├── experience.html       # Professional experience
├── index.html            # Main landing page
├── projects.html         # Detailed project overview
└── README.md             # Documentation