🪴 Shreyas' Garden

2026-04-12-mockup-brief

7 min read

Mockup Brief: shreyasgokhale.com Redesign

Generate mockups for a personal website for a Robotics/Embedded/IoT engineer. The design is inspired by rd.me - minimalist, black ink on white paper, polished and professional.

Design Principles

  • Black text on white background, with subtle muted accent colors only on tags and badges
  • Clean sans-serif typography (Inter), generous whitespace
  • No decorative elements, gradients, or illustrations (except the placeholder map)
  • Dark mode support (inverted: white text on near-black)
  • Responsive: desktop (1080px max), tablet, and mobile
  • Professional but personal - this is an engineer’s website, not a corporate landing page

Fonts

  • Headings: Inter (sans-serif), bold
  • Body: Inter (sans-serif), regular
  • The “/scribbles” blog section uses Lora (serif) for body text to give it a literary feel

Accent Colors (used sparingly, only on tags and small badges)

  • Amber: Embedded/Hardware topics
  • Teal: Robotics topics
  • Blue: IoT/Cloud topics
  • Slate: Software/Systems topics

Page 1: Landing Page (/)

A hub page that directs visitors to different sections of the site.

Layout

  • Header: Top bar with “Shreyas Gokhale” as site name on the left. Navigation links on the right: Resume, Scribbles, Subroutines, Now, Contact. A small theme toggle (sun/moon icon) at the far right.
  • Hero section: Below the header, a short 2-3 line introduction. Just text, no photo, no hero image. Something like: “[Greeting and introduction placeholder - 2-3 lines about who Shreyas is and what he does]”
  • Card grid: Below the intro, a grid of 6-8 cards in 2-3 columns on desktop, single column on mobile. Each card has:
    • A title (e.g. “Resume”, “Scribbles”, “Subroutines”, “GSoC ‘20”, “Masters FAQ”, “Digital Garden”, “Domain Map”, “Contact”)
    • A one-line description below the title
    • A subtle right-arrow icon
    • Cards have a thin 1px border, slight rounded corners, and a subtle hover state (border darkens or slight shadow)
  • Footer: Minimal. A row of social media icon links (LinkedIn, GitHub, GitLab, Mastodon, Instagram) and a copyright line.

Desktop Wireframe Description

┌─────────────────────────────────────────────────────────────┐
│  Shreyas Gokhale          Resume  Scribbles  Now  Contact  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  [2-3 line introduction placeholder]                        │
│                                                             │
│  ┌──────────────────┐  ┌──────────────────┐  ┌────────────┐│
│  │ Resume        →  │  │ Scribbles     →  │  │ Subrout. → ││
│  │ Portfolio & CV    │  │ Travel & thoughts│  │ Tech write ││
│  └──────────────────┘  └──────────────────┘  └────────────┘│
│  ┌──────────────────┐  ┌──────────────────┐  ┌────────────┐│
│  │ GSoC '20      →  │  │ Masters FAQ   →  │  │ Garden   → ││
│  │ Summer of Code   │  │ EIT Digital info │  │ Digital gdn││
│  └──────────────────┘  └──────────────────┘  └────────────┘│
│  ┌──────────────────┐  ┌──────────────────┐                │
│  │ Domain Map    →  │  │ Contact       →  │                │
│  │ Expertise areas  │  │ Get in touch     │                │
│  └──────────────────┘  └──────────────────┘                │
│                                                             │
│  LinkedIn  GitHub  GitLab  Mastodon       © Shreyas Gokhale│
└─────────────────────────────────────────────────────────────┘

Page 2: Resume (/resume)

A clean, single-column resume page optimized for both screen reading and printing (Ctrl+P).

Layout

  • Header: Same site header as landing page
  • Name and title: Large heading “Shreyas Gokhale”, subtitle “Robotics, Embedded and IoT System Engineer” below it
  • Skills section: A horizontal flow of small pill-shaped tags, each with its domain accent color. Example tags: “ROS”, “C++”, “Zephyr”, “BLE”, “Docker”, “Python”, “KiCad”
  • Work Experience section: Heading “Work Experience”, then a list of entries. Each entry:
    • Date range on one line (e.g. “Mar 2022 - Present”), muted/gray
    • Company name, bold
    • Role title, regular weight
    • 2-3 bullet points of description
    • A small “Read more →” link to the detail page
    • Thin horizontal separator between entries
  • Education section: Same format as work experience
  • Projects section: Heading “Projects”, grid or list of project cards with title, date, short description, and optional links (Demo, Source)
  • Footer: Same as landing page

Desktop Wireframe Description

┌─────────────────────────────────────────────────────────────┐
│  Shreyas Gokhale          Resume  Scribbles  Now  Contact  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Shreyas Gokhale                                            │
│  Robotics, Embedded and IoT System Engineer                 │
│                                                             │
│  [ROS] [C++] [Zephyr] [BLE] [Python] [Docker] [KiCad]     │
│                                                             │
│  ── Work Experience ──────────────────────────────────────  │
│                                                             │
│  Mar 2022 - Present                                         │
│  Company Name                                               │
│  Senior Engineer                                            │
│  • Description point one                                    │
│  • Description point two                                    │
│  Read more →                                                │
│  ─────────────────────────────────────────────────────────  │
│  Jan 2020 - Feb 2022                                        │
│  Previous Company                                           │
│  Engineer                                                   │
│  • Description point one                                    │
│  Read more →                                                │
│                                                             │
│  ── Education ────────────────────────────────────────────  │
│                                                             │
│  (same format as work)                                      │
│                                                             │
│  ── Projects ─────────────────────────────────────────────  │
│                                                             │
│  (project cards with title, date, description, links)       │
│                                                             │
│  LinkedIn  GitHub  GitLab  Mastodon       © Shreyas Gokhale│
└─────────────────────────────────────────────────────────────┘

Page 3: Experience Detail (/resume/[slug])

An expanded view of a single work experience entry, with rich content.

Layout

  • Header: Same site header
  • Back link: ”← Back to Resume” at the top
  • Company header: Company name (large heading), role, date range, location
  • Summary: The same 2-3 bullet points from the resume
  • Extended content: Full markdown-rendered content below. This can include:
    • Paragraphs of description
    • Photos/images
    • Lists of technologies used (rendered as Tag pills)
    • Testimonials (styled as blockquotes with attribution)
    • Links to projects built at this company
  • Footer: Same as all pages

Page 4: Blog Index (/scribbles)

Index page listing all personal writing posts. Uses Lora serif font for body text.

Layout

  • Header: Same site header
  • Page title: “Scribbles” as heading, with a subtitle “Analects of travels and thoughts”
  • Post list: Vertical list of posts, each showing:
    • Date (muted, small)
    • Post title (bold, links to the post)
    • One-line description or excerpt
    • Tags as small pills
    • Thin separator between posts

Page 5: Blog Post (/scribbles/[slug])

Individual blog post page. Uses Lora serif font for the body text to give a literary, “written on paper” feel.

Layout

  • Header: Same site header
  • Back link: ”← Back to Scribbles”
  • Post title: Large heading
  • Meta: Date and reading time, muted text
  • Tags: Row of tag pills
  • Content: Full markdown content rendered with generous line height, comfortable reading width (~720px). Serif font (Lora).
  • Footer: Same as all pages

Page 6: Now Page (/now)

Simple page showing what Shreyas is currently working on.

Layout

  • Header: Same site header
  • Title: “Now”
  • Last updated: “Updated [date]” in muted text
  • Content: Free-form markdown content. Could include current projects, current role focus, books reading, etc.
  • Footer: Same

Page 7: Contact (/contact)

Layout

  • Header: Same site header
  • Title: “Contact”
  • Intro text: Short line like “[Your contact intro here]”
  • Form: Clean, minimal form with fields:
    • Name (text input)
    • Email (text input)
    • Message (textarea, larger)
    • Submit button (black background, white text, rounded)
  • Alternative contact: Below the form, social media links as a row
  • Footer: Same

Page 8: Tags (/tags)

Layout

  • Header: Same site header
  • Title: “Tags”
  • Tag cloud: All tags displayed as pill badges with their domain accent colors and a count number next to each. Clickable, linking to /tags/[tag].

Page 9: Tag Detail (/tags/[tag])

Layout

  • Header: Same site header
  • Title: “Tagged: [tag name]” with the tag pill displayed
  • Results: List of all content (across all sections - work, projects, posts) matching this tag. Each item shows its type (e.g. “Work”, “Scribble”, “Project”), title, date, and a link.

Mobile Behavior

  • Navigation collapses into a hamburger menu
  • Card grid becomes single column
  • All content areas become full width with appropriate padding
  • Same typography and color system, just reflowed

When printed (Ctrl+P):

  • Header navigation and footer are hidden
  • Theme toggle is hidden
  • All colors become black and white
  • Spacing tightens for A4 paper
  • “Read more” links are hidden
  • Font sizes reduce slightly
  • Result should look like a clean, traditional resume on paper

Graph View