Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Glassmorphism-Style Developer Portfolio

A responsive and dynamic personal portfolio website built using HTML, CSS, and JavaScript with a modern Glassmorphism UI design. This portfolio dynamically loads all content from a JSON file, making it scalable and easy to maintain.


✨ Features

  • Modern Glassmorphism UI
  • Fully Responsive Design
  • Dynamic Data Rendering using JavaScript
  • JSON-Based Content Management
  • Dynamic Projects Section
  • Dynamic Skills Section
  • Contact Form with mailto: Integration
  • Resume Download Button
  • Smooth Navigation
  • Mobile-Friendly Layout

🛠️ Technologies Used

Frontend

  • HTML5
  • CSS3
  • JavaScript (Vanilla JS)

Concepts Used

  • DOM Manipulation
  • Dynamic Rendering
  • Responsive Design
  • Fetch API
  • Event Handling
  • Glassmorphism UI Design

📂 Project Structure

Portfolio/
│
├── index.html
├── style.css
├── script.js
├── data.json
│
├── assets/
│   ├── images/
│   ├── svgs/
│
└── README.md

📑 Sections Included

🏠 Home

  • Introduction
  • Role
  • Short Tagline
  • Resume Download

👤 About

  • Short Bio
  • Focus Areas
  • Professional Overview

🛠️ Skills

  • Frontend Skills
  • Backend Skills
  • Tools & Software

💼 Projects

  • Project Cards
  • Tech Stack
  • Source Code Link
  • Live Demo Link

🎓 Education

  • Degree Information
  • University Details
  • Academic Status

📬 Contact

  • Contact Information
  • Social Links
  • Contact Form

⚙️ Dynamic Data System

All portfolio content is stored inside data.json.

JavaScript dynamically loads:

  • Personal Information
  • Skills
  • Projects
  • Education
  • Contact Details

This approach keeps the project:

  • scalable
  • organized
  • easy to update

📱 Responsive Design

The website is optimized for:

  • Desktop
  • Tablet
  • Mobile Devices

Media queries are used for adaptive layouts and responsiveness.


🚀 How to View

Click on this link to View my portfolio: https://oswal-suraj-39.github.io/Portfolio/


📌 Future Improvements

  • Dark/Light Theme Toggle
  • Project Filtering
  • Animations & Transitions
  • Backend Contact Form Integration
  • Accessibility Improvements
  • React Version

👨‍💻 Author

Oswal Suraj


📄 License

This project is created for personal portfolio and learning purposes.