floating-computer-portfolio-site

Devlog #8: Alright, so I’m ready to ship.
I just added some more comments, organized my assets, fixed some terminal bugs and then improved my ReadMe. Here’s a demo of the final product:

Devlog #7: Almost ready to ship!
Did the following:

• Added a settings menu with a mute button, fullscreen button, and a help button which renders and auto types help into the computer component.
• Fixed resizing issues
• Added Puzzles to it
• Added a simple start screen.
• Hosted site on Github Pages using github actions.

I had fun making my icons on piskelapp.com. What’s left is probably to refine the site, add proper comments and I should be good.

Devlog #6: Added Some Audio!
Used use useSound React hook to add powerOn, powerOff and a Space void default sound. Also added a mute button which I will definitely improve later in a settings kind of layout. In the future I need a starter screen that is like “click to play” or sm cause browser audio only starts after an interaction. There’s also some UI issues with resizing so I need to fix those aswell.

Devlog #5: I got the OrbitControls working finally.
Took me a while because the Camera Rig and Orbit Controls were fighting for control but I got the scene working. Now the transition is pretty seamless except for the fact that the text is different. That’ll be fixed when I make my own custom model. For now I’ll keep this public model because I’m not tryna learn modeling. The next step is probably adding sound and some icons to the top that help the user figure out what’s going on.

Devlog #4: Lots of new progress.

I made my own MOTD, added a history navigation (up/down arrow keys), and a new projects catalog. After that, I refactored the star field to be in React Three fiber and experimented with some views for my computer. As of now, I’m using a model I found online, but I plan to make my own later on. I am also using react three drei’s presentation controls but I don’t really like them so maybe Orbit Controls would fit better. Just going to continue experimenting until I get a transition I like.

Devlog #3:
Basically, I turned the screen into a proper terminal that runs my personal os. It has some nice commands that allow the user to get a brief bio, download my resume, contact me, customize themes and clear the screen. I was inspired by linux terminal for some of the commands/output formatting and I wish to add further features in the future. I also added features that are usual for a typical terminal including autofocusing and going to the input on clicking any part of the screen. For now, the next step is to add the transition between a computer floating in space to the actual screen.

Devlog #2:
Created CSS for the monitor screen. Also had a lot of fun creating the crt terminal like background using a double layered linear gradient with two moving divs on top of it for the scanning effect. The redirects to the different components are functional and the next step is to fill in About.jsx, Projects.jsx … Currently, the crt’s border image is just something I made using pixel art, but I plan to make it look better afterwards. The background effect does not fix with resizing so I have to fix that also. Then, I’ll work on the transition to the monitor screen and the whole experience in general. I’ve gotten good progress so far :)

devlog#1:
The idea for the portfolio is that the user will be controlling a retro computer that is floating in space. All my portfolio details will probably go into the monitor ui, but the design will have some more features to play around with. Took me a while to figure out how to use vanilla THREE.js with React useEffect hooks. I later saw there is something called react three fiber but I might implement using that later.