This Portfolio
The site you are reading this on. A design-and-build project where I set the vision and art direction, then worked with an AI development partner to ship custom, production-grade responsive components in Framer.
Client :
Personal project
Industry :
Design portfolio
My Role :
Design and build
Year :
2026
Tag :
Portfolio
Tools :
Framer, React code components, Figma
View live website →
Project Health
Snapshot
A portfolio built on research, not decoration. Every interaction here started as a question about how visitors actually behave, then became a decision. We researched broadly, using AI subagents to pull patterns and best practice fast, and let each finding shape a specific move: a hook that earns attention, navigation that beats scroll fatigue, case study menus that cut the work of reading, and gallery filters that make a large body of work easy to browse.
Most portfolios are built screen by screen and hope the visitor keeps up. I built this one the other way around, starting from how people actually move through a site: where they lose interest, where they get tired of scrolling, where they give up looking for something.
Working in tight loops, we used AI subagents to gather patterns and best practice across strong portfolios and product sites quickly, then turned each insight into a concrete decision. The result is a site where the interface is doing a job, not just looking good.
The Problem
A portfolio has seconds to earn attention, then has to keep a visitor moving without friction. Long case studies invite scroll fatigue. A big body of work is hard to browse. And a visitor who wants to jump straight to a category, or from a screen to its full case study, should never have to hunt for the way there.
The question guiding the whole build was simple: at each point on the page, what does the visitor need next, and how do we hand it to them before they have to look for it.
Goals and Objectives
Earn attention in the first seconds without a hard sell.
Let visitors reach any category of work without endless scrolling.
Make long case studies easy to navigate, not a wall of text.
Make a large gallery of shots easy to filter and browse.
Connect related work so the journey never dead-ends.
Process
We worked research first. For each part of the site we asked a behaviour question, used AI subagents to research how the best sites answer it, weighed the options, then committed to one decision and built it as a custom component. Nothing shipped on taste alone, and nothing shipped without a reason tied back to the visitor.
Then we tested it live, watched how it behaved on real screens, and refined. The research set the direction, and the live behaviour kept it honest.
Key Decisions
A hook that earns attention
Research on first impression and engagement pointed to a light, well timed prompt over a static banner. The decision: a floating hook that slides in after a moment, once, and points to the work, so it invites rather than interrupts.
Navigation that beats scroll fatigue
The insight was that visitors give up before reaching work lower on the page. The decision: a floating category bar fixed at the bottom, so a visitor can jump straight to any type of work, UI and UX, branding, esports, without scrolling through everything first.
Case studies you can move around, not just read
Long case studies lose people. The decision: a sticky side menu on every detail page that tracks where you are and lets you jump between sections, so reading becomes navigating, not enduring.
A gallery that is easy to browse
A large wall of shots is hard to scan. The decision: a filter that narrows the gallery to a single project or type, plus links from a shot to its full case study, so a big body of work stays easy to move through.
The Solution
Each research question became a working, reusable component: the attention hook, the floating category bar, the sticky case study menu, the gallery filter, and the cross links that connect a shot to its case study and a project to its branding. Together they make the site feel guided, so a visitor is always one clear step from what they want next.
Results and Impact
The portfolio reads as a designed system rather than a filled in template. Visitors can reach any category in one move, navigate a long case study without fatigue, and browse a large gallery by project instead of scrolling blindly. Every interaction traces back to a decision, and every decision traces back to a question about the person on the other side of the screen.
Reflections
The lesson that stuck: research does not have to be slow. Pairing broad, AI accelerated research with fast decision making let a solo designer run a real research to decision loop and ship custom solutions that usually need a team. I stayed the one making the calls, and the research made those calls better and faster.
This is how I want to work: ask what the user needs, research the honest answer, decide, build, and keep refining once it is live.
CLIENT PROOF
Nick Simmons
founder of JAH creative design agency
Having Lawrence work under my agency made me money as an efficient designer he is, helped me retain my status as a Top 4% upwork agency and I can't be any less proud of him. Under me he learnt framer just so we could get more jobs and he delivered.
Loong Pancoast
CEO of DriveOn
Lawrence is a professional through and through. He has been an absolute pleasure to work with, taking in account all of our needs while meeting expectations. I would 100 percent recommend Lawrence for any developmental design needs. If you are hesitating, don't, you won't regret it.
Drew Levin
Co-founder of SideShift
Lawrence worked hand in hand with me and Nick Lawton to get the first version of our site out the door, staying flexible through every change we needed. His cooperation is a big reason we could launch on time and begin major operations. A designer who listens closely and delivers.
08:05
This Portfolio
The site you are reading this on. A design-and-build project where I set the vision and art direction, then worked with an AI development partner to ship custom, production-grade responsive components in Framer.
Client :
Personal project
Industry :
Design portfolio
My Role :
Design and build
Year :
2026
Tag :
Portfolio
Tools :
Framer, React code components, Figma
View live website →
Project Health
Snapshot
A portfolio built on research, not decoration. Every interaction here started as a question about how visitors actually behave, then became a decision. We researched broadly, using AI subagents to pull patterns and best practice fast, and let each finding shape a specific move: a hook that earns attention, navigation that beats scroll fatigue, case study menus that cut the work of reading, and gallery filters that make a large body of work easy to browse.
Most portfolios are built screen by screen and hope the visitor keeps up. I built this one the other way around, starting from how people actually move through a site: where they lose interest, where they get tired of scrolling, where they give up looking for something.
Working in tight loops, we used AI subagents to gather patterns and best practice across strong portfolios and product sites quickly, then turned each insight into a concrete decision. The result is a site where the interface is doing a job, not just looking good.
The Problem
A portfolio has seconds to earn attention, then has to keep a visitor moving without friction. Long case studies invite scroll fatigue. A big body of work is hard to browse. And a visitor who wants to jump straight to a category, or from a screen to its full case study, should never have to hunt for the way there.
The question guiding the whole build was simple: at each point on the page, what does the visitor need next, and how do we hand it to them before they have to look for it.
Goals and Objectives
Earn attention in the first seconds without a hard sell.
Let visitors reach any category of work without endless scrolling.
Make long case studies easy to navigate, not a wall of text.
Make a large gallery of shots easy to filter and browse.
Connect related work so the journey never dead-ends.
Process
We worked research first. For each part of the site we asked a behaviour question, used AI subagents to research how the best sites answer it, weighed the options, then committed to one decision and built it as a custom component. Nothing shipped on taste alone, and nothing shipped without a reason tied back to the visitor.
Then we tested it live, watched how it behaved on real screens, and refined. The research set the direction, and the live behaviour kept it honest.
Key Decisions
A hook that earns attention
Research on first impression and engagement pointed to a light, well timed prompt over a static banner. The decision: a floating hook that slides in after a moment, once, and points to the work, so it invites rather than interrupts.
Navigation that beats scroll fatigue
The insight was that visitors give up before reaching work lower on the page. The decision: a floating category bar fixed at the bottom, so a visitor can jump straight to any type of work, UI and UX, branding, esports, without scrolling through everything first.
Case studies you can move around, not just read
Long case studies lose people. The decision: a sticky side menu on every detail page that tracks where you are and lets you jump between sections, so reading becomes navigating, not enduring.
A gallery that is easy to browse
A large wall of shots is hard to scan. The decision: a filter that narrows the gallery to a single project or type, plus links from a shot to its full case study, so a big body of work stays easy to move through.
The Solution
Each research question became a working, reusable component: the attention hook, the floating category bar, the sticky case study menu, the gallery filter, and the cross links that connect a shot to its case study and a project to its branding. Together they make the site feel guided, so a visitor is always one clear step from what they want next.
Results and Impact
The portfolio reads as a designed system rather than a filled in template. Visitors can reach any category in one move, navigate a long case study without fatigue, and browse a large gallery by project instead of scrolling blindly. Every interaction traces back to a decision, and every decision traces back to a question about the person on the other side of the screen.
Reflections
The lesson that stuck: research does not have to be slow. Pairing broad, AI accelerated research with fast decision making let a solo designer run a real research to decision loop and ship custom solutions that usually need a team. I stayed the one making the calls, and the research made those calls better and faster.
This is how I want to work: ask what the user needs, research the honest answer, decide, build, and keep refining once it is live.
CLIENT PROOF
Nick Simmons
founder of JAH creative design agency
Having Lawrence work under my agency made me money as an efficient designer he is, helped me retain my status as a Top 4% upwork agency and I can't be any less proud of him. Under me he learnt framer just so we could get more jobs and he delivered.
Loong Pancoast
CEO of DriveOn
Lawrence is a professional through and through. He has been an absolute pleasure to work with, taking in account all of our needs while meeting expectations. I would 100 percent recommend Lawrence for any developmental design needs. If you are hesitating, don't, you won't regret it.
Drew Levin
Co-founder of SideShift
Lawrence worked hand in hand with me and Nick Lawton to get the first version of our site out the door, staying flexible through every change we needed. His cooperation is a big reason we could launch on time and begin major operations. A designer who listens closely and delivers.
08:05
This Portfolio
The site you are reading this on. A design-and-build project where I set the vision and art direction, then worked with an AI development partner to ship custom, production-grade responsive components in Framer.
Client :
Personal project
Industry :
Design portfolio
My Role :
Design and build
Year :
2026
Tag :
Portfolio
Tools :
Framer, React code components, Figma
View live website →
Project Health
Snapshot
A portfolio built on research, not decoration. Every interaction here started as a question about how visitors actually behave, then became a decision. We researched broadly, using AI subagents to pull patterns and best practice fast, and let each finding shape a specific move: a hook that earns attention, navigation that beats scroll fatigue, case study menus that cut the work of reading, and gallery filters that make a large body of work easy to browse.
Most portfolios are built screen by screen and hope the visitor keeps up. I built this one the other way around, starting from how people actually move through a site: where they lose interest, where they get tired of scrolling, where they give up looking for something.
Working in tight loops, we used AI subagents to gather patterns and best practice across strong portfolios and product sites quickly, then turned each insight into a concrete decision. The result is a site where the interface is doing a job, not just looking good.
The Problem
A portfolio has seconds to earn attention, then has to keep a visitor moving without friction. Long case studies invite scroll fatigue. A big body of work is hard to browse. And a visitor who wants to jump straight to a category, or from a screen to its full case study, should never have to hunt for the way there.
The question guiding the whole build was simple: at each point on the page, what does the visitor need next, and how do we hand it to them before they have to look for it.
Goals and Objectives
Earn attention in the first seconds without a hard sell.
Let visitors reach any category of work without endless scrolling.
Make long case studies easy to navigate, not a wall of text.
Make a large gallery of shots easy to filter and browse.
Connect related work so the journey never dead-ends.
Process
We worked research first. For each part of the site we asked a behaviour question, used AI subagents to research how the best sites answer it, weighed the options, then committed to one decision and built it as a custom component. Nothing shipped on taste alone, and nothing shipped without a reason tied back to the visitor.
Then we tested it live, watched how it behaved on real screens, and refined. The research set the direction, and the live behaviour kept it honest.
Key Decisions
A hook that earns attention
Research on first impression and engagement pointed to a light, well timed prompt over a static banner. The decision: a floating hook that slides in after a moment, once, and points to the work, so it invites rather than interrupts.
Navigation that beats scroll fatigue
The insight was that visitors give up before reaching work lower on the page. The decision: a floating category bar fixed at the bottom, so a visitor can jump straight to any type of work, UI and UX, branding, esports, without scrolling through everything first.
Case studies you can move around, not just read
Long case studies lose people. The decision: a sticky side menu on every detail page that tracks where you are and lets you jump between sections, so reading becomes navigating, not enduring.
A gallery that is easy to browse
A large wall of shots is hard to scan. The decision: a filter that narrows the gallery to a single project or type, plus links from a shot to its full case study, so a big body of work stays easy to move through.
The Solution
Each research question became a working, reusable component: the attention hook, the floating category bar, the sticky case study menu, the gallery filter, and the cross links that connect a shot to its case study and a project to its branding. Together they make the site feel guided, so a visitor is always one clear step from what they want next.
Results and Impact
The portfolio reads as a designed system rather than a filled in template. Visitors can reach any category in one move, navigate a long case study without fatigue, and browse a large gallery by project instead of scrolling blindly. Every interaction traces back to a decision, and every decision traces back to a question about the person on the other side of the screen.
Reflections
The lesson that stuck: research does not have to be slow. Pairing broad, AI accelerated research with fast decision making let a solo designer run a real research to decision loop and ship custom solutions that usually need a team. I stayed the one making the calls, and the research made those calls better and faster.
This is how I want to work: ask what the user needs, research the honest answer, decide, build, and keep refining once it is live.
CLIENT PROOF
Nick Simmons
founder of JAH creative design agency
Having Lawrence work under my agency made me money as an efficient designer he is, helped me retain my status as a Top 4% upwork agency and I can't be any less proud of him. Under me he learnt framer just so we could get more jobs and he delivered.
Loong Pancoast
CEO of DriveOn
Lawrence is a professional through and through. He has been an absolute pleasure to work with, taking in account all of our needs while meeting expectations. I would 100 percent recommend Lawrence for any developmental design needs. If you are hesitating, don't, you won't regret it.
Drew Levin
Co-founder of SideShift
Lawrence worked hand in hand with me and Nick Lawton to get the first version of our site out the door, staying flexible through every change we needed. His cooperation is a big reason we could launch on time and begin major operations. A designer who listens closely and delivers.
08:05