AI website review for portfolio website layout and typography

Contents

• [Make the work easy to understand](#make-the-work-easy-to-understand)
• [Review the project grid and case studies](#review-the-project-grid-and-case-studies)
• [Build a typography system around the work](#build-a-typography-system-around-the-work)
• [Prioritize the next improvements](#prioritize-the-next-improvements)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A strong portfolio website helps the right visitor understand what you make, how you think, and which project to open next. Review it in this order: positioning, project selection, case-study structure, navigation, then typography and visual polish.

Make the work easy to understand

Begin with the opening screen. A visitor should quickly answer three questions: who is this for, what kind of work is shown, and where should I look first? Use a clear role, a short description, and one visible project or action.

Use this check:

1. Is the role clear without decoding clever language?
2. Is the strongest relevant work visible early?
3. Can visitors tell which items are projects, services, experiments, or writing?
4. Are project titles and thumbnails understandable before opening them?
5. Is there a direct path to contact, a resume, or the next useful action?

If the opening screen shows everything at equal weight, reduce the competition. A portfolio earns attention by making a few choices confidently. Put biography, secondary services, and extra links later unless they are central to the visitor's decision.

Review the project grid and case studies

A project index should support scanning. Give each project a consistent title, useful category or role label when needed, and an image crop that still communicates the work at a smaller size. Keep the grid rhythm predictable unless a deliberate change signals a meaningful difference.

When a visitor opens a project, check whether the page answers these questions in sequence:

• What was the problem or opportunity?
• What did this person or team contribute?
• What decisions shaped the work?
• What can the visitor see or interact with?
• What was the result, if a result is available?
• What should the visitor open next?

Do not add unsupported outcomes. If results are private or unavailable, explain the process and decisions clearly. A concise project page with strong evidence is more useful than a long page of vague praise.

Use COLLINS, Fix Studio, and Daniel Sun as visual references for composition and tone. Compare image scale, rhythm, navigation, and the relationship between text and work. Do not assume that any reference is the correct model for your own practice.

Build a typography system around the work

Choose a primary family for navigation, project information, captions, and body copy. Add a display face only when it improves the brand or editorial voice without reducing clarity.

The captured Linear typography example lists Inter Variable as a primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. This is an observed reference system, not a recommendation that every portfolio should copy. Assign each family a clear job and avoid adding typefaces merely because they look distinctive in isolation.

Test the system with a one-word project title, a long project title, a short caption, a multi-line introduction, navigation, and a contact section. Check font size, weight, line height, tracking, and maximum line length. Headlines can be expressive, but project descriptions and captions should remain easy to scan.

Watch for type choices that compete with the work. Oversized headlines can push project images too far down. Very light text can disappear on image backgrounds. Tight line height can make case studies feel dense. Let the work carry visual complexity while the interface provides a stable reading structure.

Prioritize the next improvements

Sort findings into three groups:

• Clarity: unclear role, confusing project labels, weak opening message, or hidden contact path.
• Presentation: inconsistent image crops, weak project ordering, poor case-study pacing, or missing context.
• Polish: font pairing, spacing, borders, shadows, color details, and animation.

Fix clarity first, then presentation, then polish. For every recommendation, state the visitor problem, the specific page area, the proposed change, and how you will check it. A useful review should identify the portfolio capture, the kind of work you want more of, and two or three references that match the intended direction.

Use this in your AI agent

> Review my portfolio website for layout and typography. Start by assessing whether my role, work, and next action are clear on the opening screen. Then review project-index structure, image crops, case-study order, navigation, responsive risks, type families and roles, sizes, weights, and line heights. Compare the page with the supplied portfolio references, separate observed details from recommendations, and finish with a prioritized revision plan for clarity, presentation, and polish.

Install Fudge for your AI agent

Show only what helps a visitor decide whether to continue. A practical opening structure is a clear role or service, one short supporting sentence, one strong project or project group, and an obvious way to browse or contact you.

Choose featured work based on the visitor you want, not only on what is easiest to display. The first project should communicate your strongest relevant skill and make its context understandable from the title, image, and short label. If the work is abstract, add one sentence explaining your contribution or the problem it addresses.

Avoid placing a full biography, a dense service list, every social link, and a large decorative statement in the same opening area. Check the layout at phone width as well as desktop width. The featured project should still feel intentional when the image, title, and action stack vertically.

Use a small, testable sequence. On day one, write the clearest version of your role and choose the visitor action you want most. On day two, reorder the project index so the most relevant work appears first and give every item a consistent title and label. On day three, revise the first project page so its problem, contribution, decisions, and visible work appear in that order.

On day four, test phone and desktop layouts using long titles, long descriptions, missing images, and narrow screens. On day five, simplify the type system. Keep the primary family for interface and reading text, then retain only display or supporting faces with a clear purpose. On day six, adjust spacing, image crops, and contrast. On day seven, ask someone unfamiliar with the work to identify your role, strongest project, and contact path without assistance.

Record each change with the visitor problem it addresses. Keep polish fixes that do not improve clarity out of the first week.

Related questions

• AI website review for pricing page layout and typography
• AI website review for a developer tool homepage
• AI website review for generated layouts and typography
• Website Design Critique for a Vibe-Coded Website