Skip to content

feat(ui): restyle the app with a hand-drawn doodle theme - #5

Merged
DongDuong2001 merged 1 commit into
mainfrom
feat/doodle-style
Nov 1, 2026
Merged

DongDuong2001 merged 1 commit into
mainfrom
feat/doodle-style

Conversation

@DongDuong2001

@DongDuong2001 DongDuong2001 commented Nov 1, 2026 •

Copy link
Copy Markdown
Collaborator

Why

The app used a brutalist black-and-white look. This PR replaces it with a friendly hand-drawn sketchbook style, while keeping the CV itself clean for recruiters and ATS software.

What changed

Theme

  • Paper and ink colors, wobbly hand-drawn borders, hard offset shadows, sticky notes and notebook paper.
  • Shantell Sans for headings and buttons, chosen because it has Vietnamese letters. Kalam and Caveat do not. IBM Plex Sans is used for body text.
  • Bordered buttons press down over their shadow when clicked.
  • Global CSS now sits inside Tailwind layers. Before this, those rules overrode Tailwind classes, so dark buttons and selected tabs did not show correctly.

Pages

  • New login page with a notebook layout and the real Google logo.
  • Hand-drawn details on the landing page.
  • Sketch cards on the dashboard, applications and builder pages.
  • Capitals and code-style labels such as FULL_NAME * replaced in English and Vietnamese.
  • "Brutalist" wording removed from the site text, metadata and README.

CVs stay plain

  • CV previews and public resumes sit inside .cv-sheet, which restores pure black and white and square corners.
  • No CV template or PDF file changed.

Other fixes

  • Added the missing Vietnamese text for the Sponsors and Ecosystem sections, which showed raw code names.
  • Removed the immutable cache header for /_next/static. Next sets this itself in production, and the custom rule served stale code in development.
  • Fixed footer icons and the header login button overflowing at narrow widths. The Products menu is hidden on small phones to make room.

Testing

  • Unit tests (47), typecheck and lint pass after the commit.
  • The production build passed before one last small header change, and CI will rebuild it.
  • Checked in the browser: landing, login, dashboard, applications and the guest builder.
  • Checked at 375px on landing, login and the guest builder, with no sideways scroll.
  • Vietnamese accents render correctly on /vi, and no Vietnamese text is missing from the message files.
  • The builder preview keeps pure black and white and square corners, including the black Creative template.

Not tested yet:

  • The pop-ups: tutorial, GitHub sync, import preview and PDF preview
  • The public resume page and its print output
  • The signed-in builder, only the guest builder was checked
  • The Playwright test on this branch, which CI will run

Things to review

  • Vietnamese wording: the new Sponsors and Ecosystem text needs a native speaker's read.
  • Touch targets: a few small buttons are under 44px on phones, such as the 32px header login button.
  • Kim Huy's testimonial: it still says "Neo-brutalism interface paired with email login", which is no longer true. It was left unchanged because it is someone's review, so decide whether to keep it.
  • Diff size: the pre-commit hook ran Prettier, so the diff includes formatting-only lines.

🤖 Generated with Claude Code

Replace the brutalist look with a sketchbook style: paper and ink
colors, wobbly borders, hard offset shadows and sticky notes.

Theme:
- Move global CSS into Tailwind layers so utility classes finally
  apply, which also makes selected tabs and dark buttons show correctly
- Add Shantell Sans, which has Vietnamese letters, for headings and
  buttons, and use IBM Plex Sans for body text
- Add sketch cards, press-down buttons, notebook paper and doodle marks

Pages:
- Redesign the login page with the real Google logo
- Add hand-drawn details to the landing page
- Replace capitals and code-style labels in English and Vietnamese
- Replace brutalist wording in the metadata and README

CV previews and public resumes sit inside .cv-sheet, which keeps them
plain. CV templates and PDFs are unchanged.

Fixes:
- Add the missing Vietnamese text for the Sponsors and Ecosystem sections
- Remove the immutable cache header that served stale code in dev
- Stop the footer icons and header login overflowing at narrow widths

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Nov 1, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
lab68cvbuilder Ready Ready Preview Nov 1, 2026 12:26pm UTC

@coderabbitai

coderabbitai Bot commented Nov 1, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 7 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 950db5a8-2b33-48f2-91fc-9f9ad1c97dc0
Commits

Reviewing files that changed from the base of the PR and between 45c1146 and f791625.

Files selected for processing: 42
  • README.md
  • messages/en.json
  • messages/vi.json
  • next.config.ts
  • src/app/[locale]/applications/page.tsx
  • src/app/[locale]/builder/[id]/error.tsx
  • src/app/[locale]/dashboard/error.tsx
  • src/app/[locale]/dashboard/page.tsx
  • src/app/[locale]/layout.tsx
  • src/app/[locale]/login/page.tsx
  • src/app/[locale]/page.tsx
  • src/app/[locale]/r/[id]/page.tsx
  • src/app/globals.css
  • src/components/LanguageSwitcher.tsx
  • src/components/applications/mock-interview-client.tsx
  • src/components/builder/ai-suggestions.tsx
  • src/components/builder/builder-client.tsx
  • src/components/builder/builder-form.tsx
  • src/components/builder/builder-header.tsx
  • src/components/builder/builder-preview.tsx
  • src/components/builder/forms/certifications-form.tsx
  • src/components/builder/forms/competitions-form.tsx
  • src/components/builder/forms/education-form.tsx
  • src/components/builder/forms/experience-form.tsx
  • src/components/builder/forms/github-sync-modal.tsx
  • src/components/builder/forms/languages-form.tsx
  • src/components/builder/forms/personal-info-form.tsx
  • src/components/builder/forms/projects-form.tsx
  • src/components/builder/forms/skills-form.tsx
  • src/components/builder/import-preview-modal.tsx
  • src/components/builder/pdf-preview-modal.tsx
  • src/components/builder/resume-score.tsx
  • src/components/builder/template-picker.tsx
  • src/components/builder/tutorial-popup.tsx
  • src/components/builder/version-history-panel.tsx
  • src/components/dashboard/create-resume-button.tsx
  • src/components/dashboard/guest-draft-migration.tsx
  • src/components/dashboard/resume-card.tsx
  • src/components/doodles.tsx
  • src/components/layout/footer.tsx
  • src/components/layout/header.tsx
  • src/components/layout/products-dropdown.tsx
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

@DongDuong2001
DongDuong2001 changed the base branch from feat/cv-builder-ux-ats-optimization to main November 1, 2026 12:26
@DongDuong2001
DongDuong2001 merged commit 38d6db7 into main Nov 1, 2026
4 checks passed

This branch was successfully deployed

1 active deployment
Preview — f7916252 Deployed Nov 1, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant