🚀 Modern Homepage UI – Web Development Internship Project

A responsive homepage UI built as part of my Web Development Internship assignment.

This project focuses on clean structure, responsive layouts, and modern frontend design principles using HTML, CSS, and Bootstrap.

🌐 Live Demo

https://kngu.netlify.app/

🖼️ Preview

Full Page View of the UI design implementation

📌 Project Overview

This project is a frontend implementation of a homepage design provided as a visual reference.

The main goal was to convert a static UI design into a fully responsive web page using clean, maintainable code and modern frontend practices.

🎯 Key Focus Areas

• Semantic HTML structure
• Mobile-first responsive design
• Clean and structured layout
• Proper spacing and typography
• Component-based thinking

🛠️ Tech Stack

• HTML5
• CSS3
• Bootstrap 5
• JavaScript

📁 Project Structure

Haptic Drift - Devlog 2

The past few days have mostly been about making the game feel better rather than adding flashy features.

One of the biggest changes is that the haptic system is no longer just individual vibration events. It’s starting to behave more like a layer of feedback that reacts to what’s happening while you drive.

Instead of only vibrating during crashes, different driving situations now have their own distinct feel. High speed, drifting, braking, and impacts each produce different patterns, making the car feel more connected to the road.

I’ve also been tuning the driving physics. Small adjustments to steering, grip, and drift transitions have made the car much more predictable without removing the challenge. It’s surprising how much difference tiny changes can make.

Performance has been another focus. Since the game runs entirely in the browser, keeping everything smooth on mobile devices is just as important as adding new mechanics. I’ve been cleaning up the update loop and reducing unnecessary work each frame.

I’m still collecting feedback from different devices because browser support for haptics is anything but consistent. Android has been working well, but I’m especially interested in hearing from iPhone users to see how the experience compares.

What’s Next

• More road variety and environments
• Better visual effects while drifting
• Improved UI for mobile
• More satisfying sound design
• Additional gameplay mechanics beyond endless driving

The project is slowly becoming the racing experience I originally imagined. There are still plenty of rough edges, but each update makes the game feel less like a prototype and more like an actual game.

Devlog 3 will probably be where the visuals start catching up with the gameplay.

Haptic Drift - Devlog 1

I wanted to experiment with something different: a browser racing game that uses haptics to make the gameplay physically feel alive on your phone.

The entire game is currently built using HTML, CSS, and JavaScript.

So far it includes:

• Procedural endless roads
• Car physics, drifting, and collisions
• Dynamic sound generation
• Mobile and desktop controls
• Haptic feedback integration

The interesting part is the haptics.

On Android devices, vibrations are currently working and are triggered by gameplay events like crashes, drifting, braking, nitro boosts, and speed changes.

I haven’t properly tested iOS yet, so feedback from iPhone users would be really helpful since browser haptic support behaves differently across devices.

This is also my first time building a game around haptics instead of treating vibration as an afterthought.

The goal isn’t to make another simple browser game, but to see how immersive a racing experience can become using only code.

It’s still early and there’s still a lot to improve, but the foundation is finally there.

If you test it, I’d love some feedback:

• Does the haptic feedback feel good?
• Is it too strong or too weak?
• Does the driving feel responsive?
• Is the UI comfortable on mobile?
• Does it actually feel fun?

This is only Devlog 1. There’s still a long road ahead.

DEV LOG FINAL - ASTRAOS PLATFORM INTEGRATION

Overview

AstraOS has evolved into a browser-based operating system simulation that recreates a modern desktop experience with modular applications, persistent storage, and interactive system components.

Implemented Features

Desktop Environment

• Responsive desktop workspace
• Dynamic icon grid system
• Wallpaper support
• Context menus
• Adaptive scaling

Window Management

• Draggable windows
• Minimize, maximize and close controls
• Active window prioritization
• Z-index management
• Multi-window support
• Window restoration and centering

Dock & Menu Bar

• Application launcher dock
• Running application indicators
• Hover animations
• Real-time clock
• Global system navigation

Applications

• Notes application with persistent storage
• Functional calculator engine
• Interactive file explorer
• Settings application

Persistence Layer

• User preferences storage
• Desktop layout persistence
• Application state persistence
• Local storage integration

Design System

• Glassmorphism effects
• Blur surfaces
• Dynamic shadows
• Smooth animations
• Responsive layouts
• Unified visual consistency

Architecture Improvements

• Modular component structure
• Event-driven interactions
• Reusable UI components
• Optimized rendering pipelines

Summary

AstraOS is now a fully interactive browser-based desktop environment that combines operating system concepts, application lifecycle management, persistent data handling, and modern UI engineering into a cohesive web platform.

DEV LOG 01 - ASTRAOS INITIAL SYSTEM ARCHITECTURE BOOTSTRAP

Overview

AstraOS is a browser-based desktop operating system simulation inspired by macOS interaction patterns. This initial phase focuses on establishing core UI infrastructure, deterministic window management, and modular application containers inside a single-page web runtime.

The primary goal is to create a stable foundation for a scalable OS-like environment with persistent state handling and structured UI orchestration.

Core System Architecture

Desktop Shell Layer

• Implemented base desktop rendering system using DOM-based layout structure
• Established icon grid system for desktop applications and folders
• Configured dock and menu bar positioning framework
• Introduced initial spacing and alignment rules for UI consistency
• Defined viewport-based scaling for responsive desktop rendering

Window Management System

• Implemented draggable window containers using pointer-event interaction model
• Introduced window lifecycle handling (create, focus, minimize, maximize, close)
• Centered window launch logic based on viewport calculations
• Added basic z-index stacking system for active window prioritization
• Defined initial window state model (normal, minimized, maximized)

Dock System

• Built application launcher registry mapped to dock UI elements
• Enabled app instantiation via dock click events
• Added hover interaction states for dock icons
• Introduced basic runtime tracking for active applications

Menu Bar System

• Implemented persistent top-level system bar

• Added basic clock display module (initial implementation)

• Reserved integration points for system indicators:

  • Network status
  • Battery state
  • System settings routing

Application Layer

Initial applications implemented as isolated UI modules:

• Notes: localStorage-based text persistence prototype
• Calculator: UI scaffold with incomplete computation binding
• File Explorer: static interface without filesystem backend
• Settings: configuration UI skeleton without full state linkage

These apps currently function as independent UI shells awaiting central state integration.

Persistence Layer

• Implemented localStorage-based persistence strategy

• Defined early schema for:

  • User preferences
  • Desktop layout state
  • Application metadata

• Initial groundwork for virtual filesystem simulation

Design System

• Established macOS-inspired visual language (rounded surfaces, depth shadows, blur effects)
• Defined spacing grid for desktop icon placement
• Implemented window styling primitives
• Added basic transition timing system for UI animations

System Limitations

• No centralized state manager implemented yet
• Window resizing not fully supported
• No multitasking scheduler or process isolation layer
• Missing system-level integrations (battery, network, audio)
• Menu clock not synchronized with real-time API
• No virtual filesystem fully implemented

Next Objectives

• Implement full window resize and transform system
• Build global state manager (event-driven architecture)
• Complete Notes and Calculator logic engines
• Introduce virtual filesystem layer (VFS abstraction)
• Improve dock animations and runtime process tracking
• Add system API integrations (battery, network, audio)
• Begin Safari rendering engine stabilization

Summary

This phase establishes the foundational UI and interaction architecture of AstraOS. The system is currently a structured desktop shell with modular applications and persistent state groundwork. Future development will transition toward full OS-like behavior with real-time system integration and improved runtime consistency.

DEV LOG 01 - ASTRAOS INITIAL SYSTEM ARCHITECTURE BOOTSTRAP

Overview

AstraOS is a browser-based desktop operating system simulation inspired by macOS interaction patterns. This initial phase focuses on establishing core UI infrastructure, deterministic window management, and modular application containers inside a single-page web runtime.

The primary goal is to create a stable foundation for a scalable OS-like environment with persistent state handling and structured UI orchestration.

Core System Architecture

Desktop Shell Layer

• Implemented base desktop rendering system using DOM-based layout structure
• Established icon grid system for desktop applications and folders
• Configured dock and menu bar positioning framework
• Introduced initial spacing and alignment rules for UI consistency
• Defined viewport-based scaling for responsive desktop rendering

Window Management System

• Implemented draggable window containers using pointer-event interaction model
• Introduced window lifecycle handling (create, focus, minimize, maximize, close)
• Centered window launch logic based on viewport calculations
• Added basic z-index stacking system for active window prioritization
• Defined initial window state model (normal, minimized, maximized)

Dock System

• Built application launcher registry mapped to dock UI elements
• Enabled app instantiation via dock click events
• Added hover interaction states for dock icons
• Introduced basic runtime tracking for active applications

Menu Bar System

• Implemented persistent top-level system bar

• Added basic clock display module (initial implementation)

• Reserved integration points for system indicators:

  • Network status
  • Battery state
  • System settings routing

Application Layer

Initial applications implemented as isolated UI modules:

• Notes: localStorage-based text persistence prototype
• Calculator: UI scaffold with incomplete computation binding
• File Explorer: static interface without filesystem backend
• Settings: configuration UI skeleton without full state linkage

These apps currently function as independent UI shells awaiting central state integration.

Persistence Layer

• Implemented localStorage-based persistence strategy

• Defined early schema for:

  • User preferences
  • Desktop layout state
  • Application metadata

• Initial groundwork for virtual filesystem simulation

Design System

• Established macOS-inspired visual language (rounded surfaces, depth shadows, blur effects)
• Defined spacing grid for desktop icon placement
• Implemented window styling primitives
• Added basic transition timing system for UI animations

System Limitations

• No centralized state manager implemented yet
• Window resizing not fully supported
• No multitasking scheduler or process isolation layer
• Missing system-level integrations (battery, network, audio)
• Menu clock not synchronized with real-time API
• No virtual filesystem fully implemented

Next Objectives

• Implement full window resize and transform system
• Build global state manager (event-driven architecture)
• Complete Notes and Calculator logic engines
• Introduce virtual filesystem layer (VFS abstraction)
• Improve dock animations and runtime process tracking
• Add system API integrations (battery, network, audio)
• Begin Safari rendering engine stabilization

Summary

This phase establishes the foundational UI and interaction architecture of AstraOS. The system is currently a structured desktop shell with modular applications and persistent state groundwork. Future development will transition toward full OS-like behavior with real-time system integration and improved runtime consistency.