@sklebi

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.

Devlog #8 (final devlog before ship)
Everything (on the first page at least) is completed!
-> I updated github repository and figured out how to use pages to get a demo link
-> I finished the annoucements section and made the scrollbar pixel perfect to the footer (I hope)

• made sure every button worked
  -> added a “WIP” page cuz I will do the rest after getting feedback for the first page.

Devlog #7

• This is a bit of a shorter devlog. It took forever to finish though

• Finally evened out the calendar carousel. Was genuinely tweaking out. It works as well as I can make it with just straight CSS and HTML

• Removed the little dots on the bottom because I could not get it to look good and work properly since the sixth card and first card would always get skipped

• I added more hover animations to buttons and yah thats about it for devlog #7

Devlog #6
-> Carousel time!!

• added a header part to say calendar w icon from fontawesome
  -> added cards and made the overall carousel smooth (as much as I can with only using CSS)
  -> added long arrow buttons cuz i like the design from the og school website (just changed the colors cuz I want it to match the website theme)
  -> not as interactive as I would’ve liked but I’m not there yet on animations so I guess it’s okay for now
  -> made the little bottom dot things work by removing card #5 to display none
  -> made the calendar icon a button
  -> made the two scroll clickers on the left and right have hover colors

Devlog #5
-> Scrollbar day!
-> learnt about the pseudoclass to change scrollbars
-> made it blocky with dark blue background
-> it turns red when you hover over it cuz i thought it would be kinda cool
-> the actual scroll thumb is light blue
-> i decreased the size of the footer so then when you scroll all the way down, the scrollbar like “fits” into place so it looks more aesthetically pleasing
-> I also made custom recreations of the school logo and background lol
-> made the logos actual buttons so you can click on them.
-> Added text to the front of the background
-> Currently trying to add a CSS carousel (idk JS yet so ima try my best)

Devlog #4
OKAY FOOTER DAY!

• Made my own logo
• Added buttons with underline animations with the CONTACT US and ACCESSIBILITY STATEMENT
• Added a fake phone #
• Added fake address & name
• learnt a bit of flexbox & how to organize my code
  Good progress!
  Oh also i removed the previous background image

Devlog #1:

• read the hackpad tutorial
  -> downloaded kicad & figured out how to start a project
  -> added the switches and microcontroller in the schematic
  -> connected the blue and red lines in the PCB viewer
  -> opened fusion 360
  -> made a box with the tutorial details (tried to align everything best I could cuz for some reason the actual tutorial was a bit off)
  ->got lost in the firmware part so I’ll work on that when I have more time.

Devlog #3:
BIG CHANGES!
OK MADE WEBSITE LAYOUT

• Added footers, main part and school background
  -> made the navbar sticky
  -> added text to background to signify this is NOT official
  -> I might replace the background with placeholder image
  -> going to add contacts
  -> i want to change the font but idk, it looks ok
  -> want to remove scrollbar
  -> made the background scrollable

Devlog #2
damn this took forever for so little progress lol

removed margin on the body so the nav bar fully takes up entire line

added an underline animation (wooo!)
So when you hover over stuff it goes from left to right

Fixed the font being weird on the first row of the nav bar (i misspelt inherit lmao)

I also found out I was using the wrong link to get my downwards pointed caret so I fixed that (the tutorial i found originally to get it on the dropdown was like 10 years old so when i yoinked the link everything was outdated)

• Fixed it by going to awesome fonts and then making a kit and getting my own code

Labeled all the stuff in my css page because it was super long and convoluted and took forever to find stuff (i dont have a monitor so split screen takes a hot minute to scroll)

Devlog #1
Okay so I decided to create my school website but make it look better because for some reason on our website the colors are neon blue and red and like its really glitchy/some things are just impossible to access
Progress so far:
I added a dropdown navigation bar
-> Fun little triangle animation
-> I shortened the original dropdown lengths to the things that ppl actually use
-> still debating if I should make it actually usable or just a design concept
-> Added hover colors to the dropdown
-> I might change the font because it looks kinda ugly but idk
-> I don’t know if its legal to use the school website images and stuff so i’ll make those placeholders so far lol

REMASTERED DEVLOG #2
Hullo! Was really confused today so that’s fun
-> Finished a leaving loop (image below)
-> I was trying for hella long to try and make a game cycle like this without lots of nested loops but idk how to do it still unfortunately (ai was really confusing)
-> Added the actions page & finished the first part of the tutorial
-> Get the official backstory lol (yes lore got added!)
-> added ascii art for the deli! very fun looking mushroom building :)
that’s it for today

REMASTERED DEVLOG #1
Hello! This is my first devlog for my new Deli Simulator! My original game was my first python project ever so I really wanted to remake it after learning a bit more about OOP
-> In this devlog, I added a player class and added actions for them. This removes the like 30 nested loops I had in my previous code making it more efficient
-> I added a player name & inventory
-> You can check your balance
-> You can buy things
-> You can add items into your inventory

CSS!
-> I added a nice blue background and made the textboxes look better
-> added the little hover animation when you click the button
-> added lil banana guy as an icon :)
-> changed the fonts to a more appealing monospaced one