hariharan ( portfolio )
- 12 Devlogs
- 74 Total hours
building my portfolio !!
building my portfolio !!
and this time it was a ai generated image i did not notice which i generated a whole 2 months ago 😭🥀🥀
it was the claude background i had but now i redrew it and its much better now as well honestly earlier it was a normal art slop now i redrew on classic pixel art set and now its much better
changed hacktober fest -> my oss journey
YC indian icon swapped
for hackathon wins i realised i cant keep updating the logo to tell the latest number of wins too lazy
so now its an oscar award
ALL THESE RE DESIGNS ARE MADE ON CANVA SO PLEASE DONT TELL THEM THEY ARE AI AGAIN
also the 1B tokens part of my card now is a cron job yay !
after every week ends ( a week before ) sends api request to all the various sources i use to get an estimate on tokens used and displays it the graph was simple UI library - ReCharts just had to tweak teh typography and background a bit
ai ml logo is just bunch of tools i commonly used pout together and made into a pixel art
devops is literally first image i found when i typed ’ mario cloud pipes ’ and thenn ’ fine-tuned’ (lol) a bit
exploring logo is straight outta undertale
webapp is bunch of pixel logos i found in google put togehter and edited the alignment and added applicaitons into them
( this took almost 3 days and i think the time logged here is also being addiitive from my previous devlog for some reason the code refactoring)
hopefully this is my final AND PLEASE DONT ACCUSE ME OF USING AI FOR MY ART ANYMORE BRO
last time the whole src was pretty much slop stacked on slop with like almost 1000 loc lmao ai writes straight shi so i refacotered and have it as modules now
pages and layouts. / and the portfolio routes so the structure is something i can follow again.
the main card. front, back, boot, the whole data file.
portfolio sections under that. projects, experience, skills, honors.
the site itself. nav, player, contact note, the rest of the pages ppl actually land on.
hooks and lib as well. sound, boot, the transition. routing got a bit of the same treatment so it isnt a maze later
css ? hahahahha i never touch that i aint wriitngg 7 lines of tailwind vro 😭🥀
i wasnt chasing a new feature here. i wanted code i can open 10 years and still understand and update as this is not a side project its a portfolio and that lives with us
cleaned the spots where the same idea was written three different ways. optimized the messy bits so it isnt doing extra work for no reason. left self notes in the files so future me doesnt hav to reverse engineer a tuesday night.
basically just making the whole codebase feel like mine instead of generated slop which agents even cant write on as times go on
and to make up for stardance criteria :«
wrote the whole thing in zed ( wanted to try it out as my friend was hyping it and how i wud love it coz i use vim and stuff a lot ) but then realized i did not config it to calculate the hacktime
there goes around 12 hrs of coding ’, /
but the code is still there and i actually liked zed asw so a win - win hope review goes well atleast this time
spent past few weeks re writing code making it clean and proper for shipping it re wrote main auth libs and stuff and proper documentation as well
re wrote docs as well throughout the codebase everywhere on how everything works
and added lots of small tiny easter eggs for yall to find as well lol
people are claiming the assets in my portfolio to be AI made and i am not declining but its not like its fully AI i am an artist myself ( deviant artist for 2 years now )
I use AI to make the flow of making assets faster and simpler these are proof as to how every single asset in my portfolio was originaly drew by me
AND THEN only enhanced by AI i hope this clarifies it u can see the number of iterations i did for every asset u see in my portfolio lol its not like i just prompted and got it and u can also verify the date all these are months old
/portfolio too )
last time the whole post was just the card walking itself into /portfolio now the thing actually has loops on it which is where most of the new hours went into
card was silent besides menu beeps and /portfolio was just a dark page u dumped into with no way to switch anything
chiptune loops sitting under the whole site and u can actually change / mute / skip without it feeling like a website widget slapped on
MUSIC: OFF while audio is screaming in the back lol/portfolio got its own player not the card sprites
mute does not pause it just goes quiet so the loop keeps walking
those short theme clips on the card → /portfolio wipe are gone
now its just a whoosh ( air rush ) both ways so the transition doesnt start playing a whole song for 4 seconds lol
theme 2 · 3 · 5 · 6 · 7 · 8 loopin
aand these musics are totally not nintendo proprietary music 👀👀👀👀👀👀
short ones stayed out of the pool becoz they were stings not BGM
track ends → next one. prev past 3s restarts the same loop
TRANSITION Animation btwn card <-> portfolio
last time was the whole phone layout existing for real ( not a shrunk desk card ) now the trainer card actually feels like a physical thing and then it walks itself into /portfolio which is where most of the hours went into
basically MAIN PORTFOLIO used to just be a button that dumped u onto a dark page with a white flash or a camera zoom or this nasty navy wipe and none of that felt like the card doing anything it just felt like a website changing pages lol
what 🚢🚢
IT TILTS LIKE A REAL CARD ( only the corners tho )
used to track the whole surface so hovering name / stack / sprite would wobble the gba shell for no reason 🥀
now the inner band stays dead flat and only the outer corners actually slant so it feels like ur pressing a sticker not stirring a tray of water
back face freezes the tilt too becoz DATA FILE tabs sliding off ur cursor mid click is a special kind of rage
also it makes noise now
8-bit menu ticks off the web audio api ( no mp3s sitting in public/ being dramatic ) hover / flip / select all do that tiny gba chirp
SOUND: ON in the corner if u want it · MUTED if u dont · it remembers so thats there
THE CARD ITSELF EXTENDS ( not a zoom not a clone )
LITTLE SIDE QUESTS ( still counts )
local compiles were crawling becoz turbopack decided my entire home folder was the project lol pinned it to this repo so it stops watching my whole machine
also slapped vercel analytics on the layout so i can actually see if ppl flip the card or bounce ( mainly just the dashboard for now but eh )
whats next unless i get distracted🍽️
image weight is STILL the villain like last time i said this and then i went and built a wipe instead
theres still a lot of honor heroes stickers logos sprites on that card and first open on mobile still feels heavy even after the card finally behaves
next pass is probably ( for real this time ig )
avif / webp everywhere the front still cheats with fat pngs
lazy the back face until u actually flip
stop shipping dead 1–2mb honor experiments in public/
preload only first paint chrome
compress the shit out of everything basically lol
until we meet again :DD
give me some ideas people 👀 if u want that first paint to stop feeling like a backpack
last time phones were just getting a shrunk desktop trainer card and everything was breaking all over the place now the whole thing flips into a real portrait layout worked on this for past few days had to redo few assets , shift around the components and stuff as well
basically the card used to pretend it was mobile by scaling the gba shell down and that never worked coz the chrome spacing flip hit targets and honors art were all sized for landscape 🥀 so on a phone it felt like looking through a tiny window at a desk site lol
front face got its own phone composition
each main section has proper new made assets
DATA FILE back also got a real narrow pass
shell size morphs soft when u rotate or cross the breakpoint so it doesnt hard-cut mid flip so thats there
also buttons on the back were flipping the card with them 🥀
OPEN PROOF · tabs · stickers · hari.md · project links all used to bubble into the flip handler so u tap proof and the whole card yeets around
now controls + a little near-miss margin dont flip and empty chrome / honor copy / description panels still do which is what u actually want on mobile when ur thumb is hunting for free space
tokens furnace had a full-bleed invisible github link over the whole painted art so tapping the logos took u to github for no reason — killed that. furnace art is view only now
YC banner was cropping the building crown so shifted object-position a bit lower in the same frame ( no bigger no smaller just move the art )
hackathon highlights used to jam two tiny win chips into a crushed grid and the bottom row was getting clipped so that became one clean VIEW ALL PROJECTS HERE button that dumps into /portfolio?tab=projects
added OG image to the website , made the website title dynamic according to how u are using it ( jus try it tbh hard to explain )
image weight is still the villain
theres a lot of honor heroes stickers logos sprites on that card and first open on mobile still feels heavy even after the layout finally makes sense
next pass is probably
still needs to be done includes
need to compress the shit out of everything basically lol
until we meet again :DD
last time the trainer card DATA FILE was cool but something did not sit right with me so did a revamp and oh boy
now the whole honors strip got another pass and then i finally shipped something ive been talking about for a while which is hari.md
the red MAIN PORTFOLIO button is gone.
its a black hari.md now and it dumps u into /portfolio/hari which is basically just a huge markdown context dump on me · school · internship · wins · DNFs · projects · stack · how i actually work.
like 800+ lines.
agents and ppl can read the whole thing without guessing from random cards. so thats there
also nav has hari.md on the main portfolio now so its not only a card footer secret
(this took way too many attempts lol)
honestly the tokens honor was the whole pain point
avif → webp → png) inside the honor chromeand that finally worked.
furnace on top
HOW IT FLOWS under it with the real tool marks:
Claude Code · Cursor · Codex · ChatGPT · OpenCode · Hermes Agent · DeepSeek
had to regenerate a few times becoz the first versions had cute fake mascots instead of actual logos and then the aspect ratio was wrong so the panel was clipping top and bottom.
now it sits in the same rounded accent border the other honors use so it doesnt look like a raw screenshot floating in the cream
whats done so farr
hari.md is live on prod tootheres a shit ton of images on my card now so i need to optimze it
optimizing the card load becoz theres a LOT of images on there and first open still feels heavy.
next pass is probably:
avif / webp for the front tiles + stickers[ inspired from pokemon cards and also my second brain vault hopefully the 1B furnace doesnt melt the vercel bill 🥀🥀 ]
give me some ideas people 👀 if u want the card to load snappier without killing the pixel look
thx for readin :DDDDD
follow up to the last card post becoz the back face was still half vibes and half unfinished morph energy 🗣️🗣️
last time the trainer card front felt finished and /portfolio got ripped into proper routes now most of the hours went into the DATA FILE back — honors experience polish tokens furnace and making that whole sticker row actually mean something instead of placeholder energy
last time honors was basically morphing diorama worlds stacked on top of each other and it got heavy farr too fast now the whole thing is one clean mock layout
left tile + rank bar
title / tag / short sub
middle content (text or shots or furnace flow)
OPEN PROOF as a real top right button
same height metrics footer on every honor so nothing jumps around
so thats there
also revamped all of the sub sections under HONORS as well do check em out
experience order got inverted too
work and internships first education last
so stealth → rinexis → freelancing show before the college rows which is where that whole professional read should start under anyway
card tilt and front chrome got hardened earlier
landing zoom opened more so the DATA FILE can actually breathe
mobile nav + denser /portfolio home summary
noun pixel icons vendored locally so the free trial dying doesnt blank the metrics row later
basically just making the whole fire red trainer card + DATA FILE feel like one finished product instead of two half done faces
few things which still needs to be done includes
sprites are work in progress soon to come again lol
[ my pokemon partner is soon to come on the portfolio 🥀🥀asw ( might do that after the first ship ) ]
MOST IMPORTANT THING I AM GONNA BE LOOKING FORWARD TO IS - trying to reduce the lag coz of lots of images in the card ( if yall have any recommendations do let me know )
live at the trainer card on the site · flip with A · HONORS tab · ← → through the stickers
last time the trainer card was basically the whole show and the /portfolio page was just a dark shell with sections stacked under it now the whole thing got ripped apart and rebuilt properly which is where most of the hours went into
/portfolio is not one long dump anymore it is a summary home and then dedicated routes for projects experience skills achievements blog and stuff so ppl can deep link into the part they care about without scrolling forever
content is real now too not placeholder vibes
also shipped a file based blog under /portfolio/blog which is mainly just markdown posts for now but eh its the first step toward that whole knowledge vault thing i was talking about earlier ( no db here coz i write and redeploy directly :))) )
the card front finally has a proper custom mascot sprite instead of whatever placeholder energy was sitting there before spent a decent chunk of time on standing and sitting frames and idle loops and lining the feet up so it doesnt float weird in the box
[ inspired from pokemon sprites hopefully wudnt get sued or sm 🥀🥀]
still cooking more frames and cleaner loops but the main card already feels way more alive with it on there
few things which still needs to be done includes
sprites are work in progress soon to come again lol
[ my pokemon partner is soon to come on the portfolio ]
this was originally started in macondo now in stardance for age related issues ( yes i am old 🥀)
and now some version of it is working ig
recreated the fire red gba trainer card layout. looks super clean.
flips over to show a custom data file.
few things which still needs to be done includes:
ANDDD MOST IMPORTANTLY : NEED TO BUILD MYSELF AN PERSONAL AI ASSISTANT in front page whihc has access to my knowledge vault and answers all questions about me directly as a portfolio sub assistant
the sprites are work in progress soon to come