As a first-year Electronics and Instrumentation (EIE) student, most of my days revolve around circuits, signal processing, and a growing obsession with Data Structures and Algorithms (DSA). But outside the academic grind, I find comfort in two unexpected places: the whimsical world of Studio Ghibli and the soul-soothing beats of lo-fi music — especially Blue by Yung Kai.
So I did what every curious coder eventually does: I turned my feelings into code.
This is the story of how I built my 6th project — a minimal, aesthetic music player using pure HTML and CSS, inspired by Studio Ghibli’s magical universe and powered by the one song that’s been on repeat in my head.
“My growing obsession with Ghibli pictures from my Pinterest board eventually found its way into VS Code — one pixel at a time.”
🎵 What I Built
A single-page music player UI
No JavaScript — just HTML and CSS doing all the work
An embedded track: Blue by Yung Kai
A dreamy Ghibli-inspired background image
Rounded corners, shadows, pastel tones — soft CSS to match soft sounds
🧠 What I Learned
Even though I’m a DSA-loving student, this project reminded me that:
Design is code too — it speaks without words.
HTML/CSS can express mood, not just structure.
Simplicity isn’t boring — it’s beautiful.
“Sometimes, the most human projects are the ones with the least amount of code.”
GitHub Repo :https://github.com/Swastika3647/MUSIC--PLAYER
Live Hosting :https://swastika3647.github.io/MUSIC--PLAYER/
🌾 Soft Edges & Small Lessons
Not everything was perfect — and that’s okay.
The song title fades a bit too softly into the background. The play button stands a touch too tall. The progress bar feels a little rushed. A stray quote overlaps gently, like an accidental echo. The album art hugs its frame a bit too tightly.
Tiny things. Quiet lessons.
They don’t take away from the experience — they add to the story of how I’m learning to build with feeling, not just function.
Top comments (1)
Nice 👍