4
Connected surfaces
Home, Work, Book, and Admin were designed as one evaluation-to-action flow.
Victor Greca Portfolio Website
A personal portfolio rebuilt as a small product system: positioning, Work, gated access, booking, admin publishing, and reusable case-study patterns.
Portfolio strategyProduct designNext.jsSupabaseContent system
3 states
Project visibility
Public, locked, and private work can coexist without forcing every project into the same access model.
Reusable
Case-study model
Project metadata can live in Supabase while richer stories use a typed React template.
Brief
Make the portfolio easier to evaluate quickly
The site needed to do more than display polished screens. Recruiters needed a fast read on product judgement, scope, craft, and implementation maturity. Potential clients needed to understand whether the same clarity could help their own product or personal brand.
I treated the portfolio like a conversion product: help the right person understand how I think, inspect proof, and move naturally into a conversation.
- Lead with product thinking instead of a static gallery.
- Make Work the center of evaluation, not a secondary archive.
- Show sensitive work through controlled, honest access states.
- Keep publishing, booking, and future updates manageable.
Component example
Positioning as the first product surface
The hero uses the site's actual mark, CTA label, navigation language, and design tokens to show how the portfolio makes its point before a project is opened.
Victor Greca
WorkAboutBlog
Book a meetingProduct design for complex systems
I design product experiences for complex systems.
AI helps me explore faster. Principles, data, and judgement keep the work grounded.
Book a meetingApproach
Connect proof, trust, and action
The architecture follows the reader's decision path. The homepage establishes point of view. Work carries the proof. Case studies explain decisions. Booking turns interest into a concrete next step. Admin keeps the system alive after launch.
That structure kept the design restrained. Each surface needed a clear job, so the visual system uses typography, spacing, subtle motion, and interface details instead of decorative noise.
- Home: clarify the position.
- Work: let people evaluate evidence.
- Book: continue the intent without a detached contact form.
- Admin: manage the portfolio like an operating system.
System map
The site structure mirrors the user journey
The architecture connects evaluation, proof, trust, and action instead of treating pages as isolated destinations.
Home
Positioning, proof, and entry points
Work
Case-study browsing and gated-work context
Case study
Reusable story template and evidence
Book
Meeting intent, slots, details, confirmation
Admin
Projects, posts, books, bookings, settings
UX decisions that shaped the product
Make Work the evaluation center
Recruiters and clients both need proof, so Work became the place where story, evidence, and process come together.
Tradeoff: The homepage can stay focused on positioning instead of carrying every detail.
Use gated work without hiding the work
Sensitive projects still need a visible signal. Locked cards show category and value while keeping the full story controlled.
Tradeoff: The unlock path adds operational complexity, so the UI has to explain the reason clearly.
Treat booking as the next product step
A conversation is the best next step for recruiters, collaborators, and clients. The CTA is direct because the surrounding content earns it.
Tradeoff: The booking flow has to keep enough context so it feels connected to the portfolio, not bolted on.
Component example
Work cards and gated-work behavior
The project cards reuse the same cover treatment, tags, locked state, and surface language as the public Work page, but the example is static and carries no navigation.
Selected work
Evaluation starts here
List viewCard grid view
PW
Portfolio as product
Victor Greca Portfolio Website
Positioning, Work system, booking, admin, and reusable case-study patterns.
next.jssupabaseux strategy
CW
Locked
Sensitive healthcare product
Category and value stay visible; full details require manual approval.
NDA work, visible with controlled access.
Component example
Booking as a continuation of the portfolio
The booking example reuses the real progress component and CTA pattern while stripping out live slot fetching, form state, and submission behavior.
You are requesting portfolio access, including Sensitive healthcare product. Access is approved manually after your intro.
Choose a day
Mon02Tue03Wed04
Afternoon
2:00 PM3:00 PM5:00 PM
ContinueComponent example
Admin workflows behind the public site
The admin example borrows the protected area's form, table, chip, and sidebar language without exposing routes, actions, uploads, or authentication behavior.
Projects
Maintain the portfolio from one place
publicfeaturedsort: 0
Projects
Visibility, order, case-study body
Posts
Long-form thinking and tags
Bookings
Meeting status and unlock approval
Settings
Operational copy and site controls
The product capabilities that matter
Positioning system
A direct homepage story with a clear point of view, restrained motion, and one primary action.
- - Sharp hero
- - Single CTA
- - Editorial tone
Work system
A project model that supports public, locked, and private visibility across card and list views.
- - Project metadata
- - Gated states
- - Featured work
Booking path
A meeting flow that carries unlock context, slot selection, visitor details, and confirmation.
- - Step wizard
- - Unlock message
- - Calendar-ready intent
Admin publishing
Protected admin screens for projects, posts, books, bookings, requests, settings, and integrations.
- - CRUD workflows
- - Upload route
- - Operational controls
Reusable case-study template
A typed React structure for richer project stories, with MDX fallback for simpler cases.
- - Shared sections
- - Typed content
- - Reusable visuals
Technical decisions that support the experience
Server-first app structure
The public site uses App Router server components for data-backed pages, with client components reserved for interaction-heavy surfaces.
Supabase-backed operations
Projects, posts, books, bookings, profiles, invoices, and requests share generated TypeScript types and row-level security policies.
Hybrid case-study rendering
The Work route reads project metadata from Supabase, then uses a local registry for fully designed React case studies when a project needs more craft.
Clear trust boundaries
Locked work, admin writes, service-role jobs, uploads, booking, and webhook actions stay behind explicit server-side checks.
Outcome
A portfolio that behaves like product evidence
The result is a portfolio that shows the work and demonstrates the way I work. Strategy, content design, interaction design, implementation judgement, and operational thinking all sit inside one connected experience.
It also gives future projects a cleaner path: each new case can reuse the same narrative spine while changing the evidence, visuals, constraints, and decisions.
Lessons learned
What this changed about the work
- A portfolio gets stronger when its structure mirrors the hiring and buying decisions around it.
- Gated work only works when the teaser is specific and the access path is easy to understand.
- Content architecture is product design: the words, order, and CTAs shape the experience as much as the interface.
Need this kind of clarity for your own product?
I can help shape the strategy, structure the story, design the experience, and implement a polished web system that makes the work easier to evaluate.