Science Fair Portfolio

Devlog #5 (FINAL DEVLOG)
I bought my second ever domain :) I connected it to github pages so hopefully the DNS check goes through sometime soon… BUT the rest of the website is pretty much complete.

For the mobile version, I was kinda too lazy to switch everything around again so I just added a little notification on the bottom telling the user that the website is made for desktop devices and will be pretty wonky on the mobile version.

I switched up some colors around again to just make everything match and flow a little better. I think I really like how this website came out and hopefully it will be fully functioning!

p.s: huge thanks to the big AZ for making me the backgrounds lol

Devlog #4
Profiles all complete!
I finished everybody’s about me with their descriptions and accent colors. I changed the highlight color for each one to make it more custom and added more font awesome emojis
I added dark mode after watching a tutorial on it and tracked/inverted all my colors. I think darkmode looks pretty good for now (not perfect but highkey im too lazy to change the colors)

I added sfx from taking samples from a random website and adding audio tags to my html. I got ai to fix up my javascript for the audio to work for specific buttons (original javascript for the audio feature came from a 1 min long youtube tutorial)

I am going to focus on the mobile version after this because I think the website is basically complete. (I also bought a domain lols) Our offical team name is squigs now so thats kinda cool

Devlog #3
Contacts page complete!
This took way too long for what it is lol
Reused blucky from one of my previous projects I did for the starbeam hackathon (yes! he makes a reappearance)
Added our student emails with a button that automatically sends you to gmail cuz I was too lazy to add three buttons that sent you to each of our emails individually
I rescaled everything and so the contacts page is a little longer than the other windows
The contacts page and projects page I colored with a different background color to add a little personality to each window, I plan on adding our favorite colors as the background for our about mes
Im probably going to work on the projects next and try to figure out how to make it scroll downwards (probably going to use the trick I learnt fro the carousel on my other website)

also I updated the javascript so then the window header does not leave the viewable screen

Devlog #2
WINDOWS COMPLETE!
I was able to get the modal to popup, drag and stack it on top of the other modals. I got font-awesome to work as emojis for the clickable buttons. I am waiting on my teammates to send me their about mes to replace the filler lorem ipsum text. I still don’t know why the border around the modal body has a very odd height, I just used a bit of padding to get the border to fit but I probably need to figure it out in order for the website to be able to be used on mobile
I added box shadow and got the borders and fonts and headers to be colored and work properly
The javascript took the longest because I had to rely on like 4 year old tutorials and a LOT of gemini for debugging
I took the modal template from an old youtube tutorial and the rest of the javascript was mainly vibe coded except for a bit of debugging I had to do.

Overall it works pretty well and the animations work great

I will probably start working on overall design after this because the shadows look kinda odd under the main box and I think I want to look for better like skinnier fonts for aesthetics

Devlog #1
Hello! This is my first devlog for my newest project: a portfolio website for my science fair team. We need a portfolio website to like cold email people to get advisors and to show them like what projects we’ve made and stuff. This is heavily inspired by shar since I really like the look of her website.

This will also be my first time using javascript in web development so bare with me

Currently I have made the main box that will display our team name, and all our names. I was able to use flexbox to center everything and put them in the right position.
The fonts i decided on were Cascadia Code, Consolas and arial. I heard that you should use monospaced fonts so I am just going off the wikipedia article about that. I chose a nice blue and dark grey for the header tab thing and the other text. I think it looks decent so far.

Next I will probably work on getting little modals to work on the bottom that will display about us pages for each of us.