Bits and Builds. banner

Bits and Builds.

Created by: Lisha
3 devlogs
31h 56m 47s

Bits-and-Builds is my personal dev space disguised as a small interactive world. What started as a colorful comic-style experiment has evolved into a game-like interface built around a blue and cyan aesthetic, lo-fi vibes, and nostalgic Undertale-…

Bits-and-Builds is my personal dev space disguised as a small interactive world. What started as a colorful comic-style experiment has evolved into a game-like interface built around a blue and cyan aesthetic, lo-fi vibes, and nostalgic Undertale-inspired UI design.

The site isn’t meant to feel like a normal webpage, it’s something you move through. Smooth scrolling, shifting moods, and subtle interactions turn browsing into exploration. There’s even a horror mode that flips the atmosphere entirely, complete with its own visuals and music, because sometimes the portfolio decides to change genres.

This project uses AI

Since I’m new to web development, I used ai to understand how to change entire content as u enter horror mode and update parts of my project.

Demo Repository

README

Loading README...
Lisha
Lisha worked on Bits and Builds.
19 days ago
22h 10m logged

Yesterday, I redesigned my entire portfolio. The older version had a colorful comic-style look with blobs, bubbles and playful layouts, but I wanted something that felt more immersive. Most of the work went into CSS since the HTML and JS structure stayed almost the same. Basically, the main change was the overall design.

The new design leans into a game-like interface with a blue and cyan theme, cleaner visuals, and updated typography. A lot of the inspiration came from lo-fi aesthetic websites and the minimal, nostalgic UI style of Undertale. Along with this, I updated my goals section too.

Also, I have made scrolling smooth which is inspired by Niccolo Miranda’s website.

The goal was to make the site feel less like a page and more like an environment you explore.

Attachment
Attachment
Attachment
0
Lisha
Lisha shipped Bits and Builds.
21 days ago

Shipped this project!

Hours: 10.93
Cookies: 🍪 87
Multiplier: 7.94 cookies/hr

Bits-and-Builds is my slightly chaotic, very intentional take on a developer portfolio. Instead of looking “professional,” it looks like me, comic-inspired, scrapbook-like, and built with personality. I made it intentionally informal because I didn’t just want to show projects, I wanted to show personality. The homepage unfolds like a little visual story, and if things get too cute… there’s a full Horror Mode waiting (with its own music, obviously). What started as “let me just learn frontend” slowly turned into a creative playground where I accidentally learned almost everything about frontend. Structure, styling, logic, interactivity, and how design actually changes how something feels. I really learned a lot, now I’ll build a few more web-based projects using HTML, CSS, and JS then I’ll learn React. Also, I will always keep experimenting on this personal site because now it works like a lab for me.

Lisha
Lisha worked on Bits and Builds.
about 2 months ago
1h 17m logged

I’m officially adding some vibes to the site! I finally got the music player working exactly how I wanted. I’ve added a dedicated floating music icon in the corner that makes the whole experience way more intuitive. Now you can vibe to music.mp3 while you browse with just a single tap.

What’s new:
Smart Toggle: The icon now swaps between 🎵 and 🎶 so you can see at a glance if the music is active.
Pulse Animation: Added a CSS ‘heartbeat’ effect that triggers while the music plays, giving the site a living, breathing feel.
Fixed Controls: The toggle stays with you as you scroll, so the vibes are always one click away.

Attachment
Attachment
Attachment
0
Lisha
Lisha worked on Bits and Builds.
about 2 months ago
8h 28m logged

Title: Footer Upgrade Complete! 🎨

I improved the footer of my Bits-and-Builds homepage. Here’s what changed:

=> Previous Footer:

  1. Featured a muted, conservative style with a mauve background and basic “pill” buttons that felt standard and functional.
  2. Used a left-aligned layout that left a significant amount of “dead” or empty space on the right side of the screen.
  3. Primarily highlighted the email address, requiring more effort for users to find other social links.
  4. Used a very standard, “safe” font. It looked like a basic system font, which can feel a bit plain or like a default setting

=> New Footer:

  1. Swapped the “safe” look for a high-energy, pop-art aesthetic using cloud shapes and “superhero” burst effects.
  2. Centers the content within a large speech-bubble shape, creating a stronger focal point for the eye.
  3. Groups Email, LinkedIn, and GitHub together in one central location for instant access.
  4. Switched to a handwritten/comic-style font. This matches the “superhero” theme perfectly and makes the site feel more like a custom piece of art.

This new look better reflects the playful, creative energy I want for this project ;)
Do let me know what y’all think!

Attachment
Attachment
0