Lisha

(69% work done)

today was so frustrating but also so satisfying by the end. phase 6 was about making the satellite actually interactive. built a clickable registry using a reg() function that stores every mesh by name so the raycaster knows which part got hit. then added hover detection inside the animate loop using Raycaster. had lots of bugs and the worst one was the highlight appearing in the completely wrong position, hovering near a part but not on it. turned out mouse coordinates were being calculated relative to the whole window instead of just the canvas, fixed it with getBoundingClientRect(). now hovering works perfectly on every part and it feels like a real interactive app :3

(59% work done)

today was actually so fun. i built a full satellite from scratch using only code and shapes which still feels crazy to me. this phase was all about building each part one by one and sticking them together into one group.
started with the silver metallic body box using BoxGeometry then added solar panels which are two dark blue wings sticking out from both sides connected by CylinderGeometry boom arms. then the antenna which was my favourite part because the dish shape is made by giving LatheGeometry a list of points tracing a curve and three.js spins it into a full 3d bowl shape automatically. in the end i added thrusters at the bottom corners, a telescope payload pointing downward at earth, and a tiny star sensor on the side.
i had a bunch of bugs today mostly typos and wrong variable names but i am getting faster at spotting them. also spent a lot of time tweaking position and size values by trial and error until everything looked correct.
biggest lesson today was about functions. instead of writing the same thruster code four times i put it in one function and called it four times with different positions. way cleaner and if i want to change anything i only change it in one place.
the satellite actually looks like a satellite now and that feels really good :3

(38% work done)

okay so i wanted a background full of stars so i used THREE.BufferGeometry to scatter 6,000 points. Instead of just placing them randomly in a cube, i used spherical coordinates to wrap them around the scene at a distance of 700 to 1000 units. now it kinda looks more appealing. also, the centerpiece is a earth sphere. i used MeshStandardMaterial to take advantage of physically-based lighting, specifically adding a bump map to give the surface some tactile depth. to make it look a bit more real i added a slow rotation to the earth’s y-axis and offset its position slightly downward (y: -420) to frame it better within the camera’s view (this is just a rough design for now i’ll prolly change it after adding the satellite, ive so manyy ideas in my mind)

(15% work done)

hey so this is the very beginning of this project and basic html structure for my satellite explorer is ready!!
i’ve set up the basic structure for my interactive 3D satellite project. the HTML includes:

1. canvas container: a <canvas> inside a div (#canvas-container) where the 3D satellite will be rendered using Three.js.
2. header: shows the project logo ORBITAL / EXPLORER and a subtitle Interactive Satellite Anatomy - by Alisha.
3. info panel: a side panel (#info-panel) to display information about each satellite component. It includes:

• component name
• part title
• description
• primary function
• close button (x)

1. parts list: buttons for each satellite component (bus/body, solar panels, antenna, thrusters, payload, star sensor). these will be clickable to display info in the panel.
2. libraries & fonts
   a) Three.js is included via CDN for rendering 3D models.
   b) google fonts space mono and syne are added for a clean, space-themed style.

I added pixel art animations to replace the static egg images in my timer app. I used AI to help generate the canvas drawing code since pixel-by-pixel animation was a bit outside what I’ve covered so far. I went through the code properly and made sure I understood what each part was doing. I learned how requestAnimationFrame works to create a smooth loop, how Math.sin is used to create that natural bobbing and flickering motion, and how clearRect wipes the canvas each frame so it redraws cleanly. I also rewrote the whole thing to match my own code style so it actually fits in with the rest of my project rather than looking like it came from somewhere else. The animations run transparently over the site background and swap out based on the timer stage, which connects directly to the logic I already wrote myself.
You can see the before(2nd slide) and after results(1st slide) below:

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.

Here are some changes I made in my egg timer:

1. Added egg-specific timers: 🥚 Soft (10 min), 🍳 Medium (15 min), 🔥 Hard (20 min).
2. New home page with clickable egg cards lets users choose the egg type.
3. Timer dynamically updates countdown, progress bar, stage images, and title based on selection.
4. Added a back button for easy navigation.
   You can see the “now’ and “before” images below:

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.

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!