🪴 Shreyas' Garden

2026-04-12-website-redesign-design

4 min read

Website Redesign: shreyasgokhale.com

Goal

Redesign shreyasgokhale.com as a polished, modern personal website that tells a coherent professional story. The site consolidates the current subdomain-based architecture (scribbles, subroutines, gsoc, faq, resume) into a single Astro site with route-based sections. It should make a startup looking for senior/leadership roles in Embedded/IoT/Robotics/Systems engineering want to reach out.

Non-Goals

  • No AI-generated content. All copy is written by Shreyas. Placeholders only.
  • No digital garden integration beyond linking out to garden.shreyasgokhale.com
  • No interactive domain map in phase 1 (placeholder SVG only)
  • No content migration in this phase (structure and components only, with sample placeholder content)

Design Reference

  • Primary inspiration: rd.me - minimalist, black ink on white paper, content-focused
  • Current site: shreyasgokhale.com - hub with cards to subdomains

Site Structure

Routes

/                     Landing page: intro + card grid linking to sections
/resume               Full resume (printable via Ctrl+P)
/resume/[slug]        Expanded experience detail (photos, stories, testimonials)
/now                  Currently working on (manually updated markdown)
/scribbles            Personal writing index
/scribbles/[slug]     Individual post
/subroutines          Technical writeups index
/subroutines/[slug]   Individual post
/gsoc                 GSoC 2020 index
/gsoc/[slug]          Individual post
/faq                  Masters in Europe FAQ
/domain               Domain of Shreyas map (phase 2, placeholder for now)
/tags                 Browse all tags
/tags/[tag]           All content tagged with X
/contact              Contact form (name, email, phone, message)

Content Collections

Each section maps to an Astro content collection sourced from markdown/MDX files in the Obsidian subtree:

CollectionFrontmatter
workcompany, role, dateStart, dateEnd, location, tags, draft
educationcompany, role, dateStart, dateEnd, tags
projectstitle, description, date, tags, draft, demoURL, repoURL
scribblestitle, description, date, tags, draft
subroutinestitle, description, date, tags, draft
gsoctitle, description, date, tags, draft
about(no schema)
skills(no schema)
nowupdated (date)

Work/education entries have a summary rendered on /resume and a full detail page at /resume/[slug] with extended content (photos, testimonials, project highlights).

Visual Design System

Typography

  • Primary font: Inter (sans-serif) - headings and body text
  • Serif accent: Lora - used in the /scribbles section for a literary/journal feel
  • Monospace accent: system monospace - used in /subroutines for code and technical elements
  • Type scale: Tailwind defaults

Color Palette

Base: Black on white. Dark mode: inverted.

Domain accent colors (muted, used only for tags, skill badges, subtle borders, hover states):

DomainColorUsage
Embedded/HardwareAmberTags and badges for embedded-related items
RoboticsTealTags and badges for robotics items
IoT/CloudBlueTags and badges for IoT/cloud items
Software/SystemsSlateTags and badges for general software items

The page itself stays monochrome. Accents are small and deliberate.

Layout

  • Content max-width: ~720px for reading content (blog posts, resume)
  • Landing page max-width: ~1080px for the card grid
  • Card grid: 2-3 columns on desktop, single column on mobile
  • Resume: Single column, optimized for print
  • Generous whitespace: Consistent spacing scale throughout

Sub-Blog Personality

Each section shares the same shell (nav, footer, layout grid) but shifts personality through CSS custom properties:

SectionFont ShiftAccentVibe
/scribblesLora (serif) bodyWarm grayLiterary, journal
/subroutinesMono code accentsSlateTechnical, precise
/gsocDefault (Inter)BlueDocumentation
/faqDefault (Inter)DefaultReference/utility

Component Inventory

ComponentPurpose
BaseLayoutHTML shell, meta tags, font loading, theme toggle
NavSite name + route links, consistent on all pages
FooterMinimal: social links + copyright
CardLanding page section links with title + short description
SectionHeading + content block, used on resume and index pages
TagSmall pill with domain accent color, links to /tags/[tag]
ExperienceEntryCompany/role/dates/summary, links to detail page
PostListList of posts with date and title for blog indexes
ProseWrapper for markdown content with tailwind typography

A @media print stylesheet for /resume that:

  • Hides nav, footer, theme toggle
  • Tightens spacing for A4
  • Removes colors (black and white only)
  • Adjusts font sizes for print
  • Produces a clean, professional resume

No separate PDF generation. Ctrl+P from /resume is the workflow.

Search & Tags

  • Pagefind (already in the project) for full-text search across all built pages
  • Tags are frontmatter fields on all content types
  • Tags rendered as clickable Tag components linking to /tags/[tag]
  • /tags page lists all tags with post counts
  • /tags/[tag] shows all content across all collections matching that tag

Phase 2 (Out of Scope)

  • Domain of Shreyas map: Curated SVG illustration of expertise domains, clickable regions linking to relevant experience/projects. For now, /domain shows a placeholder.
  • Content migration: Moving actual markdown content from Scribbles (GitLab), Subroutines, GSoC repos into this site’s content collections.
  • Contact form backend: The form HTML will be built; backend integration (Netlify Forms, Formspree, etc.) is a later decision.
  • Garden visual alignment: Matching garden.shreyasgokhale.com fonts/colors to this site.

Graph View