Skip to content

Caio Pavoski · Professional profile website

Caio Pavoski: Professional Profile Website

  • UX/UI
  • Building with AI
  • SEO

An editorial approach with color for a writer's professional presence

I designed and built Caio Pavoski's website using the copy and photographs he supplied. The interface combines serif typography, light surfaces, and dark blue to organize his introduction, services, process, and career history.

Explore the screens
Client
Caio Pavoski
Type
Professional profile website
My role
  • Visual direction and design
  • UX/UI and information organization
  • SEO
  • Website development
Tools
Lovable, ChatGPT
Estimated timeline
About one day, with brief changes on another day
Open the project
caiopavoski.com.br ↗

§ 01

Context

Caio is an advertising copywriter and communications analyst. The website needed to bring his introduction, skills, and career history together in a professional presence for agencies, companies, and recruiters.

He supplied the copy and photographs, which I organized into the page. The main design consideration was an editorial layout with color, keeping the presentation restrained and connected to his work with text.

  1. § 02

    UX/UI decisions

    01

    Create rhythm with typography and color

    I used Libre Baskerville for headings and Source Serif 4 for body text to establish the editorial direction. Dark blue appears in sections such as his working principles and contact, as well as buttons and markers.

    Alternating with light surfaces distinguishes the sections. Fine lines, icons, and space between elements complete the composition.

    Color distinguishes the working-principles section from the light surfaces. The previous section at the top belongs to the original frame.
  2. 02

    Give the supplied content a clear role

    I organized the supplied material into an introduction, working principles, services, process, career history, and education. The opening gives the text, portrait, and contact actions their own areas.

    For services, I used a grid with icons, headings, and descriptions. My contribution was the presentation and hierarchy of the information; the client supplied the copy.

    A shared structure for the services. The client supplied the copy; Matheus designed the visual organization and hierarchy.
  3. 03

    Show the process as a sequence

    Caio's working process uses four stages aligned across the desktop layout. Numbers, lines, and labels connect the briefing, research, structure and writing, and review stages.

    This section uses a different arrangement from the service grid. Its visual sequence follows content explaining how Caio approaches his own work.

    Briefing, research, structure and writing, and review in a visual sequence of the client's process.
  4. 04

    Adapt the composition for smaller screens

    Services change from three columns on desktop to two on tablet and one on mobile. The process also rearranges, while the introduction and portraits move into a vertical flow.

    I kept the palette and typographic hierarchy while adapting grids and buttons. On mobile, the opening actions stack and navigation collapses into a menu.

    The two-column services grid in tablet emulation. The menu outline indicates focus, not an open menu.

§ 03

AI-assisted development

I used Lovable and ChatGPT to turn the visual direction into a working interface, using the supplied material.

Interactive components
The page includes section navigation, professional recommendations with carousel controls, expandable certificates, and an FAQ.
Execution
I estimate about one day for the main build, followed by a few minutes of changes on another day.

§ 04

SEO

I implemented the SEO foundations for Caio's professional presentation, tied to his work and location.

Search presentation
A specific page title and description, a canonical URL at the domain root, and a declared language.
Page semantics
One H1, section headings, image alt text, and structured data for the professional, service, and website.

↳ These elements were observed in the rendered DOM. No ranking, traffic, or hiring data was attributed to the website.

§ 05

Delivery and content status

Caio liked the delivery, based on the feedback I received. In the documented version, the work selection was still waiting for the projects he planned to gather. This case study presents the interface already built, with that content stage still open.

§ 06

Screens

Images from the version captured on October 23, 2026. Tablet and mobile views use viewport emulation.

Desktop · 03

FIG. 01The client's portrait and introduction brought together in the About section, with access to the résumé.
FIG. 02Caio’s professional history. The career information belongs to him and is not a website result.
FIG. 03The page’s closing section and its alternating color blocks.

Tablet · 03

FIG. 04Editorial composition in tablet emulation, with copy and a photograph supplied by the client.
FIG. 05Tablet: portrait and introduction in a vertical sequence, with a résumé action between them. Caio supplied the copy and photograph.
FIG. 06Working principles and the start of the services in tablet emulation. Caio supplied the text and retains the copywriting credit.

Mobile · 03

FIG. 07Opening in mobile emulation. The portrait appears below this frame.
FIG. 08Color and hierarchy preserved in mobile emulation. The menu is collapsed with visible focus.
FIG. 09The introduction in mobile emulation. The photo belongs to another part of the section.

§ 07

Credits

Matheus Barros: visual direction, design, UX/UI, information organization, SEO, and development. Copy and photographs supplied by Caio Pavoski.

Contact

Need a clearer professional presentation?

Tell me what you need to present and what materials you already have. We can discuss the structure and visual direction of your website.

Let's talk

Team opportunities

WhatsApp