Skip to content

Monochrome editorial layout with notes rail - #5

Draft
o1x3 wants to merge 2 commits into
mainfrom
cursor/bw-editorial-layout-3ac1
Draft

Monochrome editorial layout with notes rail#5
o1x3 wants to merge 2 commits into
mainfrom
cursor/bw-editorial-layout-3ac1

Conversation

@o1x3

@o1x3 o1x3 commented Aug 5, 2026

Copy link
Copy Markdown
Owner

Redesigns the portfolio into a left-aligned editorial column with a pure black-and-white theme, and uses the open desktop space on the right for a sticky scrolling notes feed.

Layout

  • Primary column ~38rem on desktop
  • On mobile, single full-width column — no empty side gutter; notes appear inline
  • Sticky right rail on desktop with independently scrollable note cards + a bottom ticker

Content

  • /notes archive and /notes/[slug] pages
  • Five seeded notes so the rail is populated from day one
  • Stack marquee on the homepage for motion

Theme / type

  • White / black (with dark invert via existing toggle)
  • Instrument Sans for body, JetBrains Mono for the brand mark
  • Hierarchy via weight and muted gray, not color accents or pane chrome

Also

  • /stuff and /story wrapped in the same chrome
  • Sitemap includes notes

Desktop homepage
Dark mode
Mobile homepage
recording_demo.mp4

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

Replace the bento panes with a left-aligned editorial column and a
desktop sticky notes feed on the right. Pure black-and-white theme,
wider primary column (~34rem), full-width on mobile, stack marquee,
and /notes routes with seeded posts.

Co-authored-by: Karthik <karthikvinayan57@gmail.com>
@vercel

vercel Bot commented Aug 5, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
web Ready Ready Preview Aug 5, 2026 3:02pm

@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 568c13a0-02bb-4c59-81c3-2f4d82809118

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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

Comment @coderabbitai help to get the list of available commands.

Drop the duplicated bio paragraph, widen the primary column to 38rem,
and clip horizontal overflow from the stack marquee on narrow viewports.

Co-authored-by: Karthik <karthikvinayan57@gmail.com>
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.

2 participants