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

📱 view is here

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

what 🚢🚢

REAL MOBILE SHELL ( not a zoom hack )

front face got its own phone composition

each main section has proper new made assets

DATA FILE back also got a real narrow pass

• tabs go PROJ / EXP / HONORS / SKILLS so they dont wrap into mush
• honors stickers sit in a 2×2 instead of a crushed 4-up
• skills become a bigger stacked grid
• experience stops overlapping itself on tall thin viewports

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

HONORS ON A PHONE ( redid all assets )

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

LITTLE SIDE QUESTS ( still counts )

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 )

whats next unless i get distracted🍽️

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

• 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

still needs to be done includes

need to compress the shit out of everything basically lol

until we meet again :DD

HONORs revamp and hari.md for AI 🥞🥞

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

MAINNN CHANGE

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

THE 1B+ TOKENS SAGA

(this took way too many attempts lol)

honestly the tokens honor was the whole pain point

• first it was html pieces and overlays and conveyors and then it looked fake
• then we tried splitting the stage and putting brand logos in the flow and that also fought the layout
• then the whole idea flipped — stop reconstructing pixel art in react and just ship ONE card image (avif → webp → png) inside the honor chrome

and 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

CARD IS COOKING AGAIN

whats done so farr

• honors feel more finished
• footer is smaller and sits lower across every tab
• tokens art is framed proper
• hari.md is live on prod too

cooking rn 🍽️

theres 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
• stop shipping dead 1–2mb pngs
• preload only first paint
• lazy the back face until u flip

still needs to be done includes

• asset compression across the card
• maybe defer honor / project sprites until flip
• kill unused diorama / blast pngs from the deploy
• more sprite polish later ig

[ 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

more data file yipeee!!!

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

HONORSSSS ( the spicy part of the card )

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 ON THE CARD

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

SMALLER CARD POLISH ( still counts )

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

COOKING RN 🍽️

few things which still needs to be done includes

• more sprites cleaner idle loops wallpapers
• personal AI assistant on the front with access to the - knowledge vault so it can answer questions about me directly
• automated scripts fetching github projects and linkedin posts
• maybe sqlite later if the file based blog starts feeling too small

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

CARD IS COMPLETE ( for now ig )

whats done so farr 🗣️🗣️

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

MAINNN PORTFOLIO REVAMP ( basically the professional section of portfolio )

/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

• project cards with screenshots
• experience filled in
• skills with proper brand icons
• honors and achievements actually listed
  so thats there

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 ‘SPRITEEEEE’

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 other changes as well

• focus badges on the card revamped ( honestly i wanna change this section but no idea what to do give me some ideas people 👀 )
• project icons and skill tiles
• card polish spacing layout CURRENTLY panel and stuff
  basically just making the whole fire red trainer card feel finished instead of half done

cooking rn 🍽️

few things which still needs to be done includes

• more sprites icons wallpapers
• personal AI assistant on the front page with access to my knowledge vault so it can answer questions about me directly
• automated scripts fetching github projects and linkedin posts
• maybe sqlite later if the file based blog starts feeling too small

sprites are work in progress soon to come again lol

[ my pokemon partner is soon to come on the portfolio ]

from planning gym on fire red to building a pokemon card portfolio lol

Where We At Now

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

The Front Face

recreated the fire red gba trainer card layout. looks super clean.

• gba trainer card header flanked by white pokeballs
• stats capsules: name (hariharan), money (role: ai & web dev), pokedex (projects: 24/150), time (exp: 1+ year), started date (oct 2024)
• trainer sprite: custom mascot sprite in a rounded box
• badges row: slot 1 holds a custom pixel-art yc logo badge, other slots are empty placeholders

Interactive Card Mechanics

• 3d tilt: card rotates on hover tracking mouse coordinates
• zoom controls: plus/minus snap scale buttons with spring physics
• float animation: slow sine-wave bobbing that pauses on hover so buttons are stable targets

The Back Face

flips over to show a custom data file.

• 4 slanting columns: projects, experience, honors, skills
• columns expand on hover and show custom retro backgrounds
• dynamic details block at the bottom updates based on hovered column
• buttons to enter the main portfolio

The Wild Transition & Main Page

• white flash transition: entering the portfolio flashes screen white like a wild pokemon fight entry
• minimal portfolio: dark theme, hero, about, experience, projects, skills, honors
• reverse easter egg: back to trainer card button in footer triggers reverse flash transition
• deep links: coming from a card back tab scrolls smoothly straight to that section on layout mount
  and the minimal main portfolio:

few things which still needs to be done includes:

1. proper sprites for my character , icons , wallpapers, etc
2. proper minimal version of my website with proper routing sectiosn and a file based storage on sqlite or something like that ( mainly to save blogs and shi )
3. autmoated script fetching from my github projects and linkedin posts

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