Personal portfolio site built with Astro, Tailwind CSS, and JetBrains Mono. Dark theme with Claude-console-inspired warm grays, scroll animations, page transitions, and Ctrl+K search.
npm install
npm run dev # localhost:4321
npm run build # production build to ./dist/
npm run preview # preview production buildsrc/
├── consts.ts # All site-wide constants (see below)
├── content.config.ts # Zod schemas for content collections
│
├── data/ # JSON data files
│ ├── profile.json # Name, bio, education, social links, typed roles
│ ├── skills.json # Programming languages, technologies, categories
│ ├── about.json # Quick facts, journey highlights
│ └── research-interests.json # Research interest cards
│
├── content/ # Markdown content collections
│ ├── projects/ # One .md per project (10 files)
│ ├── publications/ # One .md per paper
│ ├── experience/ # One .md per role
│ ├── blog/ # Blog posts (.md/.mdx)
│ └── pages/
│ └── about.md # About page bio paragraphs
│
├── components/
│ ├── BaseHead.astro # <head> meta, fonts, OG tags
│ ├── Navigation.astro # Sticky nav, dark mode toggle, search trigger
│ ├── Footer.astro # Social links footer
│ ├── Hero.astro # Homepage hero with typed.js animation
│ ├── ProjectCard.astro # Project card with hover effects
│ ├── PublicationCard.astro # Publication card with collapsible abstract
│ ├── ExperienceTimeline.astro # Vertical timeline for CV
│ ├── SearchModal.astro # Ctrl+K search overlay
│ └── FormattedDate.astro # Date formatting helper
│
├── layouts/
│ ├── BaseLayout.astro # Master layout (nav, footer, transitions, scroll reveal)
│ └── BlogPost.astro # Blog post layout
│
├── pages/
│ ├── index.astro # Homepage
│ ├── projects.astro # Filterable project grid
│ ├── research.astro # Publications + research interests
│ ├── cv.astro # CV with sidebar nav + scroll spy
│ ├── about.astro # Bio, stats, journey timeline
│ └── blog/
│ ├── index.astro # Blog listing
│ └── [...slug].astro # Individual blog post
│
├── styles/
│ └── global.css # Tailwind directives, font, scrollbar, glass utilities
│
└── assets/
├── profile/ # Profile photos
├── projects/ # Project screenshots
└── logos/ # VR logo
All visible text on the site comes from one of these sources. Nothing is hardcoded in the templates.
Site-wide strings that appear across multiple pages:
| Export | What it controls |
|---|---|
SITE_TITLE |
Browser tab title on homepage |
SITE_DESCRIPTION |
Homepage meta description |
SITE_AUTHOR |
Footer copyright name |
SOCIAL_LINKS |
GitHub, LinkedIn, email URLs (used in hero, footer, nav) |
NAV_LINKS |
Navigation bar items (label + href) |
PAGES |
Title and description for each subpage (projects, research, cv, about, blog) |
HOME_SECTIONS |
Headings, subheadings, and CTA text for homepage sections |
HERO |
Hero greeting ("Hi, I'm"), intro ("I'm a"), and button labels |
Structured data rendered as lists, cards, and grids:
| File | What it controls |
|---|---|
profile.json |
Name, title, short bio, email, location, education array, social links, and roles array (the words that cycle in the hero typed animation) |
skills.json |
Programming languages, technologies, human languages, and category groupings (frontend/backend/robotics/ml) shown on the CV page |
about.json |
Quick facts stats (value + label), journey highlights (date + description), and the "Journey Highlights" heading |
research-interests.json |
Array of {title, description} rendered as cards on the research page |
Long-form content managed as Astro content collections with Zod-validated frontmatter:
---
title: "Project Name"
description: "One-line summary"
category: "robotics" # robotics | ml | web | game | research | other
tags: ["Tag1", "Tag2"]
date: 2024-06-15
featured: true # shows on homepage
github: "https://github.com/..."
demo: "https://..." # optional
image: "../../assets/projects/screenshot.png"
tech: ["C++", "ROS 2"]
---
Body text (markdown) shown on detail views.---
title: "Paper Title"
authors: ["Author One", "Author Two"]
venue: "IEEE IPCCC 2024"
date: 2024-12-01
abstract: "Paper abstract text..."
pdf: "/docs/paper.pdf" # path in public/docs/
doi: "10.1109/..."
citation: "BibTeX or IEEE citation string"
------
title: "Job Title"
organization: "Company Name"
location: "City, State"
startDate: 2025-09-01
endDate: 2025-12-01 # omit for current roles
current: true # shows "Current" badge + appears in homepage "What I'm Doing Now"
description: "One-line role summary"
highlights:
- "Achievement one"
- "Achievement two"
tech: ["Rust", "TypeScript"]
------
title: "Post Title"
description: "Post summary"
pubDate: 2024-01-01
updatedDate: 2024-02-01 # optional
heroImage: "../../assets/blog-placeholder-1.jpg" # optional
---Plain markdown paragraphs. Each paragraph separated by a blank line becomes a <p> on the about page. The first paragraph gets larger text.
| Location | Contents |
|---|---|
src/assets/profile/ |
Profile photos (processed by Astro image optimization) |
src/assets/projects/ |
Project screenshots (referenced from project frontmatter) |
src/assets/logos/ |
VR logo for navigation |
public/docs/ |
Downloadable files (resume PDF, research paper PDF) |
public/CNAME |
Custom domain for GitHub Pages |
- Add a screenshot to
src/assets/projects/ - Create
src/content/projects/my-project.mdwith the frontmatter above - Set
featured: trueif it should appear on the homepage
- Create
src/content/experience/company-name.md - Set
current: trueif it's ongoing (it will appear in the homepage "What I'm Doing Now" section)
- Put the PDF in
public/docs/ - Create
src/content/publications/paper-slug.md
- Create
src/content/blog/post-slug.md
Edit the roles array in src/data/profile.json
Edit HOME_SECTIONS or HERO in src/consts.ts
Edit the PAGES object in src/consts.ts
Edit src/content/pages/about.md
Edit src/data/about.json
Edit src/data/research-interests.json
Edit src/data/skills.json
Edit the education array in src/data/profile.json
- Dark mode toggle (persists in localStorage, defaults to dark)
- Ctrl+K / / search across all content
- View Transitions for smooth SPA-style page navigation
- Scroll reveal animations on all pages (
data-revealattribute) - CV sidebar scroll spy with section navigation
- Project filtering with staggered fade animations
- Typed.js hero animation driven by
profile.jsonroles - Image optimization via Astro's built-in sharp integration
- RSS feed at
/rss.xml - Sitemap auto-generated
Push to GitHub. The site deploys via GitHub Actions (.github/workflows/deploy.yml) to GitHub Pages. The public/CNAME file maps to visvamrajesh.com.
- Astro 5 with TypeScript
- Tailwind CSS for styling
- JetBrains Mono terminal font
- Typed.js for hero animation
- GSAP (available, used sparingly)