Today: Christine Liang

Christine Liang’s portfolio has a simple structure.

A short hero. The work right underneath it. A small footer interaction at the end.

On paper, that sounds like the most basic portfolio setup possible. But that’s also why it’s worth looking at closely. Because Christine uses that structure well. She doesn’t overcomplicate the entrance. She doesn’t hide the work behind a huge intro. She gives you enough context to understand who she is, then lets the projects carry the rest.

And that context matters.

Christine positions herself as a product designer and front-end engineer, and the portfolio backs that up quickly. This isn’t just a line in the hero. It continues through the project selection, the personal project, the web development work, and even the way she brings in her previous background in electrical engineering.

That gives the portfolio a clear spine.

You understand very quickly that Christine can move from user research to production code, from product thinking to implementation, from design to engineering. That combination is valuable, and she presents it without making the portfolio feel heavy.

The Good

A simple portfolio structure that uses the hero and project previews well

Christine’s homepage is a good reminder that you don’t need a complicated portfolio structure to make a strong impression.

The hero is small, direct, and useful.

“From user research to production code, design and engineering end-to-end” says a lot without needing much space. It tells me she has range. It tells me she can work across the process. It tells me the bridge between design and engineering is central to her profile.

That’s exactly what a good hero should do.

It should set the scene for the work that follows.

And Christine does continue that story. In the project grid, you can see product design, front-end development, web development, personal projects, and even a piece from her electrical engineering background. The portfolio doesn’t say one thing in the intro and then show something else underneath. It stays aligned.

That’s where many portfolios fall apart.

A designer says they care about systems, but the work doesn’t show it. Or they say they’re focused on interaction, but the projects are mostly static screens. Christine avoids that. The positioning and the evidence match.

The project previews are also doing a lot of good work.

They are not overloaded, but the information that is there is useful. The stronger previews show enough of the work to make you want to click. There’s a sense of visual polish, some motion, and clear labels that help you understand the type of contribution.

The little interactive cat in the intro also adds a nice personal touch. It’s small, cute, and doesn’t get in the way. That’s the right amount of personality for a portfolio that otherwise stays clean and focused.

A personal project that proves she can build, not just design

The second strong part is Christine’s personal project.

This is becoming more important for designers, especially in 2026.

For a long time, if you wanted to ship something, you needed to team up with a developer. That made side projects harder to finish. You could design something, maybe prototype it, maybe write a case study, but turning it into a working product was much more difficult.

That has changed.

With AI-assisted building, vibe coding, and better tooling, designers can ship more by themselves. Christine has an advantage here because she is also an engineer. For her, building means something slightly different than it does for designers without a technical background. But the broader lesson still applies.

She took a problem that mattered to her, shaped it into a product, designed the experience, handled technical decisions, and shipped a working site.

That is valuable.

The project doesn’t need to be a giant business opportunity. Side projects don’t need to become startups to matter. What matters is that the project shows initiative, judgment, and the ability to turn an idea into something usable.

Christine’s project does that.

It feels tangible. It has a purpose. It works. It looks considered. It gives her a space where she can show her full range without waiting for client constraints, company constraints, or team constraints.

That’s why this belongs in the main work section.

If a side project has enough depth, it can absolutely sit next to client work or product work. In Christine’s case, it reinforces the exact story the homepage starts: she can design and build end-to-end.

The Potential

The freelance e-commerce case study needs more depth and stronger presentation

The first opportunity is the freelance e-commerce case study.

There is nothing wrong with showing freelance work. Especially early in your career, freelance projects can be important evidence. They show that someone trusted you, that you worked with a client, and that your work had some form of business context.

But freelance case studies have one common risk: they can feel thin.

A lot of them follow the same pattern. Client brief, some analysis, a redesign, a few screenshots, and then a short reflection. That can be accurate to the work, but it often doesn’t give hiring managers enough substance.

Christine’s e-commerce case study has some good things in it. She includes impact, which many people forget. She also shows before and after states. But the story currently feels too abrupt compared to the other case studies.

The beginning could be clearer.

When she talks about the issues with the existing site, I’d expect to see the original site immediately. That would make the problem more concrete. Right now, the sequence is a little confusing because the section heading points one way, while the visuals don’t immediately show the “before” state clearly enough.

The solution section could also do more.

A few static screenshots are not quite enough here. This is the moment where the redesign needs to impress. If the case study is shorter because the project was smaller, the presentation has to work harder. That could mean more motion, stronger before-and-after moments, isolated UI details, a more polished product walkthrough, or a few focused callouts around what changed and why.

There might also be room for a small note about the client collaboration. Not a long process story, but enough to show how Christine handled feedback, alignment, and decision-making.

This matters because if Christine applies to a company with any e-commerce angle, this might be the first project they open. And right now, it doesn’t quite match the strength of the rest of the portfolio.

The work may be worth showing, but the presentation needs to give it the same level of care.

The unfinished projects may dilute the homepage

The second opportunity is about the project grid.

Christine has a few projects that are currently still being built. She did the right thing by not putting them first. That already avoids the worst version of this problem, where someone clicks the top-left project and immediately hits a dead end.

But I’d still question whether they should be visible at all right now.

Teasing unfinished projects often feels useful to the designer, but not to the hiring manager.

A hiring manager is not likely to come back later to see whether the case study is finished. They are making a judgment based on what is available now. If they click something and can’t access it, that creates a small moment of frustration. And portfolios don’t have much margin for that.

There is one exception.

If the preview is so compelling and so clear that someone would say, “I need to hear more about this in an interview,” then it can be worth teasing.

But to do that, the preview has to work much harder. It needs to explain what the project is, why it matters, and why it is worth asking about, even without a full case study.

Right now, those unfinished projects don’t quite do that. They look promising, but they require too much guessing.

Christine already has enough strong work to support a cleaner two-by-two grid. Removing the unfinished projects for now would make the homepage feel tighter and reduce unnecessary friction.

If she wants to keep them, I’d make the previews feel almost like mini case studies: stronger visuals, a short context line, and enough motion or detail to make the value obvious.

The Verdict

Christine Liang’s portfolio is strong, clear, and well-positioned.

It communicates a designer who can also build, and it does that through evidence rather than buzzwords. The homepage sets the story, the project selection supports it, and the personal project makes the design-engineering angle feel tangible.

The strongest parts are the overall positioning and the shipped personal project. Together, they show someone who can think through a product and then help bring it to life.

The main opportunities are small but worth addressing. The freelance e-commerce case study needs more depth and a stronger presentation, especially because it could matter for roles with a commerce angle. And the unfinished projects should either be removed for now or made much more compelling as previews.

But the base is excellent.

Christine’s portfolio is especially useful for anyone trying to position themselves between product design and engineering. There’s a lot to learn from how clearly she frames that combination, and from how calmly the portfolio lets the work support it.

If you’d like to craft a similarly impressive portfolio Framer is likely your best choice.

Still struggling to get your portfolio off the ground?

Don’t want to spend weeks learning yet another tool? Framer is my top recommendation for building your portfolio — fast, clean, and without the usual headaches.

If you’re just starting out (or even if you’re not), I think Framer is a perfect fit. Here’s why:

• Flat learning curve: The interface feels familiar if you’ve used Figma — plus, there’s a plugin to bring your designs straight in.

• Plenty of learning support: Framer Academy is packed with free tutorials, videos, and guides to help you go from zero to published.

• A huge template library: Tons of high-quality (often free) templates in the marketplace to help you launch quickly without starting from scratch.

• Free if you are a student: Although Framer already offers a generous free plan for everyone, if you are an enrolled student you can get Framer Pro completely for free!

And that’s just scratching the surface. I wrote more about why I recommend Framer here—but honestly, the best way is to try it for yourself.

Affiliate disclaimer: I only recommend tools I personally believe in. Some links in this post are affiliate links, which means I may earn a small commission if you choose to purchase — at no extra cost to you.

How I can help YOU

Do you want your own portfolio reviewed in-depth with a 30-minute advice-packed video review? Or do you require mentoring to figure out a proper strategy for your job search?

I got you!

• Book an in-depth portfolio or resume review with me

• Book a mentoring session with me

• Book a quick 15 min chat to ask a question and see if we vibe