a behind-the-scenes look

How I built this site

Doodle of a builder in a hard hat holding a hammer

This whole page is a bit long because I believe design is for everyone! Especially with the tools we have access to today, I think that anyone is capable of building cool and creative things — it's just a matter of knowing how to use everything.

Below, I'm walking through the whole process: how I actually think and work (scrapped ideas, notes-app chaos, and all), where AI fit in — and very much didn't — how I planned and researched before touching Figma, the interaction decisions I made along the way, and the hand-drawn assets and animations that ended up being the most time-consuming (BUT most fun) part of the whole thing.

  • Over the summer, I would walk to the gym A LOT, which meant I had some time to just be with myself and my thoughts — I quickly realized that a lot of my best ideas came up during this time (check out my Strava to see it documented…lol).
  • Whenever an idea came to me, I wrote it down as fast as possible. If I was on the go, I would jot it down in my notes app, or if I was on my laptop, I had Claude + Notion MCP make me task organization where I could plug in tasks, and I would check them off.
  • From there, I give myself deadlines so the idea can actually be executed. For this portfolio, I knew I wanted to get it out before September 1st (before school got really busy and before most major companies drop their summer internship roles), so being organized and consistent was a top priority for me.
Screenshot of Elaine's Notion task tracker for the portfolio project, with tasks like fixing nav station colors and adding a walking animation marked done
the actual task tracker — yes, "make stamp placement precise + prevent border cutoff" was a real ticket

To me, a portfolio shouldn't just be a vehicle to display a designer's work. Instead, it should showcase who the designer is at their core (and also, of course, display their work). That's why I only used AI with more menial tasks related to optimizing my workflow — like organizing tasks/feedback, tracking progress, setting deadlines, replicating pages, basic layouts, compressing or cropping images, and coding — instead of it fully doing the work for me and producing AI slop. Because of this, I made sure the portfolio truly reflected my own thinking.

One of my FAVORITE quotes that constantly drives my curiosity and passion for design is from Austin Kleon's book, Steal Like An Artist: "If you steal from one author, it's plagiarism; if you steal from many, it's research."

So before even starting to design my portfolio, I stalked so many portfolios and combined them in a document where I noted down specific interactions (take a look here!) — heads up, I ended up taking my actual notes out, so it's really just a list of the portfolios I looked at with links to each. I found that the most helpful portfolios were the ones that detailed their process and thought process behind their designs — so I hope to do the same!

Early scrapped concept: an underwater speech-bubble hero
an underwater / speech-bubble direction
Early scrapped concept: an ocean hero with a browser window mockup
an ocean/aquarium concept with a browser mockup
Early scrapped concept: a playful art grid for the Play page
a playful grid layout for the aquarium concept Play page
Early scrapped concept: a hand-drawn isometric building as navigation
a hand-drawn isometric building as the nav — scrapped this one because it felt like too much of a Monument Valley knockoff…

After talking with Bruce Cao, he asked me a lot of thought-provoking questions like, "What are the fish supposed to tell me about YOU?" which pivoted the way I viewed portfolios as a whole and led me to creating something that truly felt like "me."

I wanted to fill the site with fun, playful interactions, but I also wanted them to be noticeable enough that people would actually stop and engage with them — without going so far that it felt overstimulating.

Procreate animation timeline showing a walk cycle
frames of my walking animation
Procreate layers panel showing the station interior illustration split across multiple transparent layers
i separated my drawings into multiple layers with transparent backgrounds and animated them with CSS
Another hand-drawn illustration built on its own transparent background layer
another example of the transparent background layer

This is probably where I poured the most time into the whole project — every little doodle and drawing here is hand-drawn.

The animations are hand-drawn too, frame by frame. I had zero prior animation experience, so I leaned on Pinterest references to figure it out. Once I got the hang of it, though, I had so much fun coming up with new illustrations to add (this one is my current favorite).

Elaine, hand-drawn, face-planted on her laptop keyboard mid-build
commit history
Elaine's GitHub contribution graph
can you tell when I really started to build/lock in?
most of June was just planning and brainstorming — actual building didn't start until June 22.
view full profile ↗
  • If you have an idea, act on it ASAP. Because either you're going to forget after a few minutes or someone else is going to think of it. Some actually, most of my best ideas came to me very randomly, but I'm SO glad I wrote them down and executed them.
  • Being inspired is important, but it’s also equally important to not get bogged down in aimlessly looking for inspo (because then you’re just wasting time…)
  • Being organized is SUCH a big deal and sped up the process SOOO much when I figured out an efficient way to work. I could literally just plug and chug any ideas I wanted to implement — this was especially helpful when I got feedback from others.
  • Obviously, when you give Claude or Cursor a prompt, it's going to take some time to execute it, so during that downtime I made sure I was either working on an illustration/animation, writing up a case study, finding design inspo — just doing anything to add to my portfolio instead of sitting idly or doomscrolling.

I think I've come a long way within the span of a few months — check out my old portfolio here.

for more portfolio inspiration, check out this list →

if this didn't answer your questions or you want this to be more comprehensive, my DMs are always open on LinkedIn.

and if you're wondering why this whole site is themed around trains, I wrote a little more about that here.

← back to about ← back to home