Scrolling implemented!!!

Made nav links scroll!

• This was easier than I thought! you just put ids for the target element and then use regular anchor tags and make the href the id! (with # prefix though)

Challenges

• I spent so much time trying to figure out how to do that with react-router-dom….it was so painful until I realized regular html works asdfkljalskdf

Future additions

• I’m literally about to add about us page right now

Footer created w/placeholders!

Added footer

This was a really simple operation, just needed to creatively organize divs to make it work!

Tailwind shadows

I familiarized myself with tailwind css’ shadows and its parameters, like shadow=[x-offset, y-offset, blur, spread, color] and I made use of it at the top border of the footer!

Future additions

Now i’m focusing on making the links on the top nav bar work cuz they don’t work rn and once I figure out how to do that I’ll add quick links. I’m still asking for images from the corporation so yeah

FAQ Section Done

Added modularity for FAQ template

• Each template accepts 2 props: question & answer. This makes it really reusable for the FAQ section! I also used useState to render the answer section if the button is clicked and toggle visibility with the button.

Styled it

• Once again using padding and the wonderfully convenient tailwind css presets I styled the FAQ Section

Rearranged the website

• I put the certifications section below FAQs because it seemed better there!

Challenges

• Honestly I didn’t know that you could render stuff using true and false statements when using useState but when I found out I was like wow this is so easy { true/falsestatement && the element you want to put }

Future additions:

• Need to add images, about me section, footer!

Services Search Done!

Added filtering system

• filters a “services” array with what is state search is set to (it’s set as what’s in the input text box when the box is changed)
• Only renders the thing on the list if it’s equivalent to the value typed in the search bar!

Styled it

• I styled it with tailwind, using purple-950 and rounded lol. Looks like a nice little file looking thing!

Challenges

• Not much honestly! practiced useState but this was a pretty simple instance of using it lol
• I learned how to set up npm run dev locally so I don’t have to rely on the crappy school wifi :D

Future additions

• I will add the next thing on the list from my future additions list (I wrote them in my last devlog!)

Added certifications SplideJS slideshow!

Imported SplideJS

• Installed React dependencies
• Imported CSS accordingly

Added placeholder images

• These placeholder images will be replaced w/ real cert images once I have them!

Challenges

• I was looking at the docs again cuz I forgot how to use Splide and I totally forgot to import the CSS (didn’t know I needed to do it) so I was so confused as to why my slides stacked vertically instead of the slideshow rows.

Future additions:

• My next addition will be the treatment searchbar! wish me luck cuz i have no idea how to code that, never coded something like that before!

Got started on homepage hero + navbar!

Brainstorming website layout

• I brainstormed the website layout on a notebook! It’ll have a navbar on top, hero first, then certification SplideJS slide, Services section, About Us section, & FAQ section. Then a simple little footer

Homepage Hero

• Put some catchy hero phrases for the business owner
• Allotted placeholder hero space

Navbar

• Put a call now button, phone number, and also on the right side navigation buttons (just to scroll because I intend this website to be just a one-pager)

Incorporated mobile friendliness already

• Using tailwind css’s sm, md, lg I’m incorporating mobile friendliness rn so I don’t have to do it later lol

Challenges

• I was having trouble because I forgot how to import tailwind css into my project but looked it up and now we’re good lolllll

Near-future additions

• Actual relevant hero image
• Clickable nav bar buttons
• A services section below the hero with a searchbar to search for if a given service is provided

Later additions

• About us section
• FAQ section
• Footer

New untitled dream game!

This game is basically like heavily rpg inspired almost but it’s also not. Also, the premise is supposed to be like combat but psychological because a lot of fighting in games is physical but I want there to be some kinda mental aspect to the fighting in this game.

Dream switches

This is the main mechanic where you’re teleported into another dimension, the person you’re fighting’s mind. In their mind there will be different dream settings and once you escape the first dream you go to the second – dreams don’t make sense. For example you transition from their childhood neighborhood to a random day at school they had. You’re doing this on a time crunch + the person’s mind agents are chasing you. You’re trying to find their inner mind (through the dream switches) and ignite it.
I worked on a bit of how it could look like; a very basic prototype. made at the crisp hour of almost 12am

Cleaned game up for shipping!

Export files added

I exported this into an HTML file so that I could have players access it on their browser really easily!
I also updated the godot loading screen and icon to be my own custom screens for more cohesiveness!

Fixed minor bug

There was a minor bug with the MIDI where it wasn’t escaping the cutting vegetables minigame, found the problem. It was only detecting the escape if it was pressed from the keyboard, not the MIDI.

Art

Drew assets for:

• Itch.io banner
• Stardance screenshot

That’s pretty much it! yayy I’m so glad this has come to a wrap! I learned so much honestly from creating just this little digital experience. I hope you all enjoy exploring it as much as I enjoyed making it!

Finally about to ship!!

Title Screen

Created a title screen + keyboard tutorial instructions so that players know what keys to press + their keyboard equivalents if they don’t have a nanoKEY2
Everything was drawn by me in Aseprite, except the nanoKEY2 base image was taken from the internet

Digital experience

More than a game, I’ve decided that this game should be more like an experimental digital experience. It features a cutting experience and just pan/pot placing/removing. It doesn’t feature a storyline, almost just like a little aimless simulator.

Audio

Added some pixel + lofi bg music and satisfying SFX!

Keyboard compatibility

Added keyboard compatibility

Mapped keys 1, 2, 3, 4, 5, 6, 7, 8 with corresponding MIDI pitch values (like an intermediary value switch) using event.get_keycode (it’s really neat and the transfer over was p smooth)

Added navigation buttons

Way to go back to start screen or exit cutting vegetables mode

Challenges

• Finding satisfying audio :’)
• It was just a lot of little content to add so it was just time consuming
• It took a bit of decision-making to decide whether to keep going with Keytchen (because honestly I could keep adding content forever) or move onto another project. I decided to move on because at this point I’ve hurdled over all the foreign technicalities that I’ve sought out to learn (the MIDI mapping and beat timing.) Any new additions would just be things I already know (but I want to actively learn more.)

I hope to ship this very soon; I’m going to quickly playtest it one more time!

FINISHED THE SITE!!

I added mobile compatibility
The site was looking really good until someone looked on it on their phone or something other than a desktop, so this was the final element to ship it!

No more fixed widths

The fixed widths, I found, were the culprit for all the breaking when the website was viewed in other dimensions, so I made use of sm:some property and md:some property and lg:some property in tailwind and also w-full and max-w-some number to make the cards flexible depending on the dimensions it’s viewed from

NAVBAR

I’m really proud of this because I used useState for the first time on an actual website to create the hamburger navigation thing. It opens like a set of links if you click it and the text changes from a three-line hamburger thing to an x. useState is actually amazing so many use cases

Challenges

The main challenge was just tweaking what text/font sizes should go with sm/md/lg displays–just a lot of trial and error
Another challenge was making the hamburger opening look good because the background was only coloring to the height of the navbar,, I realized that I needed to move the appearing navigation outside of the navbar and it worked wonders

Future additions

Just if the nonprofit gets more metrics or after outreach initiatives it’s apparent we’re missing some important content. but it’s done and I’m going to ship this!!

Finished About Me Page + program page struggles

Finished the about me!

It’ s a simple about me page; I got inspiration from other NPO about me pages online!

Program Page work in progress

I’m trying to use the same components across two pages for information cards on the programs we do, but the cards need to be two different heights. I’ve been hacking at this for a while but I’m going to rest before I try resolving this problem again :’)))))
(as you can see the images go off the cards for this second component. I want each card to be a standardized height but differ across pages. gl to me in the future lol)

Future additions

After I finish adjusting these card heights, my website will be finished! I just need to hook it to our website domain and replace our outdated website!! yayyy

Added project carousel!

React component

I used React to make a reusable image carousel thing where you can pass an array of photos as an argument and it will put it into the the SplideJS slides

Used SplideJS again

Added a featured projects carousel that has some cool projects that our Code Without Borders Bootcamp participants made!!
Added arrows to the carousel too

Tailwind

Added a gradient background for aesthetic purposes :)

Challenges

I generally had a hard time figuring out how to style the features component–it was really looking rough to start with but we landed on something 😭 I think the gradient helped a lot

Additional information

• I also tweaked styling for the rest of the webpage
• I added some join buttons and linked the donation page
• Updated the impact numbers

Future additions

• About to add the proper join form and also get started on the about us page :D

Keytchen - More visual feedback and debugging!

Had to backtrack w/debugging

I debugged the entire timing system of beats because the gameplay was just not fun, it was not registering beats sometimes and the visual beat feedback wouldn’t update when it was supposed to. I fixed this by separating the visual beat updating system with the input tracking of beats for gameplay and it worked out well 😭

Visual feedback

• Error for wrong timing red key
• Error for wrong key red key
• Key you’re supposed to press is highlighted green
• The beats pulse whenever a beat happens to help the player feel the beat in the game better

Miscellaneous

• You can access the minigame through the main screen’s cutting board now!

Challenges

• Debugging my beat system was so painful and a nightmare because my code was so messy and I confused myself with it. I solved this by commenting out all my code so now there’s no way I get confused LOL

Future additions

• As you can tell, I still haven’t added the new potato / zucchini textures so i will have to do that :’). The next time you see a post it will have different textures not just a carrot i promise!!
• I’ll need to create some kind of inventory system so that the cut up vegetables can be stored somewhere so when the player wants to cook something using those ingredients they have it on hand and can add it to a pot or pan or something

That’s all folks! see ya in the next update! ;D

Cutting mechanism almost done

Notes autoload

Now the player knows what notes to hit based on the note shown on screen! I’m going to add a note guide so that it’s also more obvious which note to hit if they’re not familiar with cdefgabc keys!

Different vegetable settings

Though there aren’t any graphics to match at the moment, there are different vegetables that call for different mini-games! I finished the carrot, zucchini, and potato mini-games.

Music added

I added some plain beat in the background that the player needs to match with the notes accordingly. It won’t work unless the player matches the beat well enough.

Challenges

• It’s hard to match up the switch of the note; i’m still working on this. sometimes the note even though switches in game logic doesn’t show up and the game remembers the last note as the one to show on screen (u can actually see it in the vid)
• I had to learn a bit about rhythm and bpm in order to set my variables for next beat and secs per beat stuff like that correctly 😭

Next additions

• graphics for different veggies
• the note showing on screen will have flawless timing
• sfx for notes
• there will be a note guide added for players who aren’t familiar with cdefgabc notes!

sorry my updates have slowed down…i’ve started school again D:

Carrot cutting animation + hooked to nanoKEY2!!

Art / animations

I used Aseprite to make the cutting board and the carrot graphics! I made each cut of the carrot a different image to make this work. Now there is a visible cutting animation for carrots!
I timed position changes, rotations, and modulation using AnimationPlayer.
Currently, the animation steps are triggered by a ui_accept input. I’ll change it to be musical chords that the player has to time perfectly as my next update.

Hooked controls to nanoKEY2

I looked into how MIDI inputs are controlled by Godot, and it doesn’t natively detect MIDI inputs from the Input Map in Project Settings, so I had to create a script that detects MIDI input and maps it onto a default Godot input like ui_accept and ui_left etc!
But now it’s working really well :DDDD

Challenges

• It was incredibly time consuming to key frame each individual position but hopefully I can just reuse these frames now and just replace the textures because I left the names generic for modularity
• I didn’t understand how MIDI inputs worked and matching them to other native inputs in Godot so it was tough understanding how to do it (so many diff things like MIDI_MESSAGE_NOTE_OFF/ON that I had to learn)

Next Steps

• I’m going to be adding the chords timing feature so that cutting is actually hard and not just a matter of ui_accept lol
  Stay tuned!

Added some basic game functionality! + recolored background

You can select a pot or pan for each stovetop now

Through a ton of pressed() signals and booleans we have made this happen

Focus

To pair this with my nanoKEY2, I’m starting game development with keyboard focus features early so that it isn’t a hassle to do later on!

Recolored stuff

I changed the colors of the background to make it even more approachable and friendly! I like this cool toned version… that last version looked a little eerie

Future additions

I will be adding:

• hooking nanoKEY2 to the actual game
• actual pot cooking mechanic
• pan cooking mechanic
• cutting vegetables mechanic (maybe I’ll start with a carrot first)
• a bunch of graphics to support those features

Challenges

Not many challenges this time but I keep forgetting to record my aseprite using lapse…I need to remember!

Stay tuned!

Main background drawn!

Aseprite

I drew the main background for the game’s kitchen area with Aseprite! There’s a stove and cutting board so far.

Future additions

Soon, I’ll be adding the following:

• Stove cooking mechanic
• Cutting board mechanic
  So mainly I’ll be establishing gameplay with the nanoKEY2!

Challenges faced

• Choosing the right color and vibe for this cozy game was pretty difficult, but I think I’m happy with the colors I have currently. I can change it anytime I want anyway! :D
  Stay tuned!