devlog 1

just built + broke + fixed a voice-disease detector

did this whole thing in one session, not mutliple so this is gonna be one really long devlog so im sorry for that. oopsssssss

what changed:

• my model went from “84% accuracy predicting if someone’s sick from their voice” to realizing that number was basically fake (this itself took 3 hours to build and it was kinda sad when i realized it all didnt work)
• decided to scrap it and i made everything for two other diseases where the accuracy was actually real (0.83 and 0.86 AUC)

what i built

• so this is the first model its a group of models like random forest, svm, etc
• a metadata-only model (just age, gender, recording date, zero audio) as a sanity check
• a cross-dataset test, train on one dataset, evaluate on a totally different one it’s never seen (this is SUPPOSED to be the standard but liek most medical companies dont so they can inflate their numbers)
• had a goodtrain/test splits for the datasets
• a decoder for an basically ancient audio thing
• one clean pipeline for the liek 100 test runs plus trained models that anyone can download and run

what broke

• the 84% “sick or not” model turned out to not be hearing illness at all, it matched a model trained on metadata not acutally what it was supposed to be
• cross-dataset test dropped auc to 0.54, a literal coin flip, and nothing i tried fixed it (relabeling, per-dataset standardization, synthetic oversampling) – first parkinson’s dataset hit ~95% which was immediately suspicious, turned out patients had multiple recordings and my split let the same voice leak into both train and test

what i learned

• a metadata-only “no audio” baseline is the single fastest way to catch a model that’s cheating
• patient-level splitting matters way more than recording-level splits

a decision i made

• instead of scrapping the project after the 0.54 collapse, i split the question into two: “can voice reveal illness at all” vs “can voice reveal a cold specifically.” tested the first idea against parkinson’s and voice disorders instead of respiratory infections, since those change your vocal cords/motor control permanently instead of for a few days

the repo, organized

• kept the failed experiments in the repo right next to the ones that worked instead of deleting them, felt more honest that way
• color-coded results red (didn’t generalize) vs teal (actually held up) so it’s obvious at a glance which is which

devlog 1: built the HEIC and MOV converter

• prototyped the process and the overall goal of the project
• built the format converters because apple is a bum and it stores in HEIC and MOV for photos and videos, so i made them lossless PNG and MP4 format so its actually viewable on windows
• this is basically cuz the HEVC codec reader costs like a $1 on windows and im lowk to broke for that
• this is like step one of the entire thing because to sort the photos, you need to be able to actually make sure its in the right category

the problem

• basically every one of the converted photos lost their metadata like the date, and EXIF data
• i was like “okay its chill, nothing is gonna happen” but the ENTIRE process depends on it so like i had to figure smth out
• saving a PNG in pillow removes the EXIF unless u pass it back, so my “working” converter was basically not working
• fixed it by adding a section to carry over the EXIF metadata. for videos i swtiched from re-encoding to an ffmpeg stream copy with map_metadata, which kept the creation date and made conversion near instant instead of minutes per clip (it took a lottttt of time)

how it works (windows only)

• Runs on Windows (u need a decent cpu)
• you just gotta run the batch file and then everything works on the machine, so nothing gets uploaded to the cloud
• yay ur data is save
• step zero: plug ur phoen into the USB and copy my entire camera roll to my computer
• step one: make sure its all in the Unsorted_Media folder so the script actually reads it

the main like bottleneck ig idk what to call this

• the smart part (deciding what each photo actually is, a real memory versus a document or junk, plus things like food or a place) will probably need a local AI vision model, which pretty much needs a GPU to be usable. (its gonna work on my 5080, but without it, it takes like 40 seconds per on an i7 150U)
• the sorting also needs EXIF, the timestamp the camera stamps into each photo. If every photo has clean EXIF, sorting into events is easy and accurate.
• the issue with EXIF is that forwarded photos, screenshots, downloads dont have EXIF

next up

• reading each EXIF date and sorting them to events

What I built:

• fixed a bunch of small stuff first, like adding in-progress signs to PulseFlow-AI, GardenBuddy, and Python-Examples
• made sure all the project images were showing up, and make sure they werent getting cropped out like before
• added the Best in AI/ML award for PulseFlow-AI from HackJPS
• COMPLETLY REDESIGNED the entire webpage. I wanted it to be more light theme and a geometric design
• picked like a few different colors that acutally look good with each other
• instead of the old word wheel from before, i made a new 3D one with three.js wireframe icosahedron
• words still cycle in the center like before, just actual webgl now not css
• changed all the sections to be more boxy.
• removed all the rounded corners, random cards, buttons, badges, basically simplified everything
• added like little corner brackets on each section because it looks cool, made grid line running through sections, and added a small like bar or sorts on the side with the contact info
• added a like triangle-ish geometric background to make everything look better
• had like a hundred different component files from when i was vibecoding everything, and since im getting away from using AI and switching to handcoding everything, I combined everything into larger files

What broke:

• installed the three.js packages for the 3D hero and it caused a lot of invalid hook errors
• almost put the tennis ball icon inside the merged sections file, would’ve broken the build with a circular import

How I fixed it:

• turns out the hook error wasn’t even my code, vite just had old cached deps from before i installed the new packages. deleted node_modules/.vite, restarted, fixed instantly, didn’t touch a single line of actual code (thank god because it would have been terrible if i had to manually fix everything

got everything read to be shipped

• added pictures

• updated README with new info

• cleaned up repo

• updated project description

• updated viewing link

largest update yet

what i built:

• removed the entire liquid-glass ui, glass, gradients, cursive headings, wallpaper animations- deleted all the older theme that was AI slop

• made a clean new navy theme that IIII coded myself- its a flat design, with a nice navy blue background,and some cool fonts like space grotesk and jetbrains mono

• removed the digital-twin page because it wasn’t even needed anymore

• fixed a nav bar bug and cleaned up the readme to match all the new changes

• wrote a run.py that boots backend and frontend together in one command instead of like 10000 commands

• deleted a bunch of unused old images and docs

• also removed all the old random things too

what broke:

basically two times the app wasnt loading at all…it ended up being some old runs that didnt leave the port

how i fixed it

just killed the programs and restarted everything

big decision

no more vibecoding

• so basically im creating a new basic design because i dont want to make everything look vibecoded

• its going to be very simple, minimalistic, and just really tabular

• im going to slowly make it look better as I get better at coding everything myself unlike the previous liquid glass design where I made the design and it was implemented using AI

Quick Fixes

• revised README demo link and Stardance “Try It Link”

• rewrote all the devlogs to match my style (mods can you create a way for me to update my ship message from before to show all the new features I added)

What I built:

• fully remade each page to match the design. Its like a really APPLEish looking liquid glass vibe, an animated background (kinda like the iMac, but a bit different), updated the frosted sidebar look, and made the cool glass cards everywhere

• command center, patient flow, staffing, clinical, ai insights, and labs were running on fake data before this, so now they run on the backend websocket

• operations, copilot, and sandbox got the same glass restyle as the others, but it was a lot more work to get the buttons and all the other functions to work properly and actually communicate with the backend

• changed the 9 sidebar icons from the design, to text tabs, and made the one ur on a greenish color and made them all black instead of gray

• animated the wallpaperrrrrrrrrrrrrrrr (definitely my favorite part)

• fully removed all the old files, and cleaned up dead weight and made everything cleaner

• fixed up the gitignore, ruff_cache was only ignored at the root before, now it’s ignored everywhere it shows up (backend, frontend, root). added coverage/, .turbo/, and *.tmp

What broke:

• when i made the first animation, it was extremely slow and it was wayyy to subtle and i could barely tell if it was moving

• my second attempt made it look way to active and hectic

• third try was perfect

How I fixed it:

• rewrote the keyframes with bigger swings and rotation on a ~2.5s loop for the dramatic version, then pulled it back about a third once it felt like too much.

what i built

• picked the new look for the entire website. MacOS Liquid Glass vibes instead of the old clinical AI generated design

• did it entirely in figma, no code yet, just comps- built out command center as the first full mockup: floating glass panels, frosted cards, gradient canvas behind everything instead of a flat background…LOOKS STRAIGHT OUT OF APPLE HQ trusttttt

• pulled in a cursive treatment for the wordmark and a tuffff color palette

• this page is kinda like a reference page yk. Basically imma use this page and then figure out how each of the next few pages are gonna look like## what broke

• nothing broke since there’s no implementation yet- the actual friction was getting figma to fake something it doesn’t really do natively. so basically Figma doesn’t have a liquid glass feeling or even a backdrop blur refraction type of thing, so to get the cards to look like the PERFECT APPLE FROSTED GLASS, instead of the boring looking like kinda transparent kinda not white box

how i fixed it

• basically kinda faked the entire blur by creating a duplicate of the background behind each of the cards instead of just using the transparency feature. the blur by layering a blurred duplicate of the background behind each card. thats  kinda how I got that frosted apple glass type instead of a weird semi-transparent glass look

• kept a saturated gradient underneath (THE STANDARD IMAC BACKGROUND) so the glass has something to actually pick up color from

• i basically spent like 30 mins slowly adjusting the opacity by eye until it looked like the goated apple liquid glass look

• next step is turning this into real webpage instead of just a figma mockup

design stages

1. original ui (brown)
the starting point. flat, clinical, warm-brown/cream tones with a green accent. it was functional but looked really AI and generic. It didn’t feel like me or anything that I would personally build.

2. first sketch (white)
this one was mainly like a way for me to figure out how to lay all the elements out while still keeping that abstract vibe that I like. (HEAVILY BASING IT OFF OF APPLE). I also cleaned some things up, made it more minimalistic, and made everything to a light/cream. basically, I wanted it to look more and more like an apple product so that it has the clean , sleek design that I love about MacOs. 

3. final design (blue, liquid glass)
this is my final design. I completely gave up on making it white/cream and decided to make it what I want (A LOT OF BLUE AND THE CLASSIC IMAC BACKGROUND). I made everything with that like liquid glass/frosted effect and basically just built off of the IMAC standard display, MacOS vibes and like the apple minimalism and basically took A LOTTTT OF INSPO from Apple 

What I built:

• gated every REST route under /api/v1 behind one shared bearer token, checked once at the router level so it covers simulation, hospital, and ai endpoints without repeating myself. /health stays open on purpose, load balancers need that.
• gated the websocket too. ?token= checked before the connection even gets accepted, so trigger_event, update_config, add_bottleneck, remove_bottleneck can’t touch live sim state from some random unauthenticated client anymore.
• SECRET_KEY finally does something. used to just sit there unreferenced, now it’s the actual credential, and it’s got the startup check it was missing, refuses to boot in production if it’s still the default.
• also went and built full JWT login with viewer/operator roles along the way, then looked at it and went nah, overkill for a demo hospital sim, and reverted back to the simple shared-secret version. kept the actual gate though, that’s the part that mattered.

What broke:

• first version closed unauthenticated websocket connections with code 4401, except that happens before accept(), and turns out you can’t send a close frame on a connection that was never accepted. so it actually shows up as a plain HTTP 403 on the handshake, not 4401 like the docstring said. wire behavior just didn’t match what I wrote down.
• also, local dev was quietly broken and I didn’t notice for a bit: the backend’s real default SECRET_KEY didn’t match what .env.example said it was, so a fresh clone would 401 on literally everything out of the box.

How I fixed it:

• checked the 403-vs-4401 thing wasn’t actually a bug, just how Starlette handles closing a connection pre-accept. confirmed it with a real client hitting it with no token, still blocks fine, just not with the close code I expected. left it as-is and fixed the docs instead of chasing a non-issue.
• for the env mismatch, just made .env.example, .env.local, and the actual python default all agree, then ran the whole thing end to end again, no token, wrong token, right token, until 401s and 200s landed exactly where they should.

What I built:

• Fixed the resume link that was 404ing on GitHub Pages, it needed the Vite base path prefix not just a plain /resume.pdf

• Swapped every project’s random picsum placeholder image for a real screenshot

• Added a leadership link to the navbar since that section existed but nobody could actually get to it

• Found project cards had hover effects and a pointer cursor like the whole thing was clickable, but only a tiny “view on GitHub” pill actually worked, so now the whole card opens the repo

• Rewrote basically all my portfolio copy to get rid of all the AI garbage and wrote it in my voice

• Added my in-progress Microsoft Python course with the real course link and logo instead of just text

What broke: a bunch of stuff. Resume link worked locally but died in prod because GitHub Pages serves the site under /My-Portfolio/ and the link was a flat root path, same thing hit the project images. jsconfig kept flagging import.meta.env.BASE_URL as an error in my editor. The project cards looked clickable everywhere but only a few pixels of them did anything. And during the full copy rewrite I somehow removed the accents from “Lección 7 de Español,” it just became “Leccion 7 de Espanol” and I didn’t notice till right before I was about to commit.

How I fixed it: stuck import.meta.env.BASE_URL in front of the resume and image paths so they resolve right on the deployed site. Added vite/client to jsconfig’s types so the editor stops complaining. Put an onClick on the whole project card that opens GitHub, kept stopPropagation on the inner button so it doesn’t open two tabs. Caught the accent thing in the diff and fixed it before committing.

Added a leadership section + cleaned up the awards

so i finally added a leadership section to my portfolio. new LeadershipSection.jsx component plus the data lives in portfolio-data.js like everything else. it covers my three 4-H roles: secretary & mentor, leading the curriculum redesign, and co-founding the summer learning program. i also redid the awards/recognitions section. it used to be a boring 2-column grid of cards, now its a vertical timeline with little icon dots running down a gradient line, and i threw in a few more awards while i was at it. hooked the new section into Portfolio.jsx (its between education and tech stack) and added an “Awards” link to the navbar with a smooth-scroll fix.

heads up: the diff looks huge (like 758 added / 537 removed) but honestly most of that is just prettier reformatting my navbar and recognitions files into double-quotes and multi-line jsx. the actual new stuff is way smaller than it looks.

the annoying part: somehow my package.json downgraded react-quill from ^2.0.0 all the way down to ^0.0.2 when the lockfile regenerated. definitely not on purpose, gotta revert that before it breaks something. also i split this into two commits and forgot the LICENSE file, so that got shoved into a random “pushing last few edited files” push lol.

made pulseflow actually look like medical software

so basically before all of this, the entire app looked like a mess of dark neon video game stuff. basically it was a mess of glowing things, random gradients, and felt more like a game then a hospital platform. instead of just redesigning it, i made a design.md file first and actually looked into references like hipaa, fda title 21 cfr part 11, and wcag 2.1. pretty much every design choice came from those

what actually changed

• got rid of all the glow, gradients, and unnecessary animations nurses are already tired during long shifts. they need to read information fast, not watch things moving around. everything respects prefers-reduced-motion now

• phi is masked by default patient names, dobs, mrns, and other sensitive info all go through a privacymask component and stay hidden until a clinician chooses to reveal them. keeps patient data safe

• added a visible auto-logout timer the session timeout is always shown in the top bar so clinicians know exactly how much time is left before they’re logged out automatically to protect patient data

• status is never just color anymore every status uses an icon, text label, and color together, so it’s still easy to understand

• redesigned critical alerts instead of giant glowing red warnings, they’re now banners that clearly explain what’s wrong without being distracting

• added dark mode everything works in both light and dark mode without changing how the interface feels.

the annoying part

• dark mode looked terrible a lot of the status cards were hardcoded with light colors like bg-amber-50, so they ended up looking like pale cream boxes sitting on dark background

• ended up reworking the entire color system instead of hardcoding colors, i moved every color to css variable tokens (safe, flag, crit) so each one automatically changes between light and dark mode. that ended up being 213 replacements across the whole project (it was a LOTTT of work)

• picked better colors. i went with warm off-white and warm charcoal instead of pure white and pure black so it doesn’t hurt your eyes

finished adding all the traces and started on the case design

wayyyy to many traces for all the components and it looks so bad, but it works, also the DRC was being a pain because it kept flagging the switches as an error because of the footprint, but it looks fine so i think thats okay.

made the last few edits before shipping..may have misordered the devlog and the ship but both the ship and the devlog are here…the ship is right before this devlog

Got everything ready to shippppp, added a readme, made a logo, took screenshots, and organized my code