Ravi Sorathiya — Portfolio

Ravi Sorathiya — Android Developer portfolio

Ravi Sorathiya — Portfolio

Android developer · Kotlin & Jetpack Compose · 12 apps live on Google Play

🌐 ravisorathiya.github.io

🔗 Quick links

Page	URL
🏠 Home	https://ravisorathiya.github.io/
👤 About & tech explorer	https://ravisorathiya.github.io/about
📱 All apps (search + filters)	https://ravisorathiya.github.io/projects
🟢 Only apps live on Google Play	https://ravisorathiya.github.io/projects?status=live
📄 Flagship — PDF Reader & Editor	https://ravisorathiya.github.io/projects/pdf-reader
📝 Dev Notes (blog)	https://ravisorathiya.github.io/blog
📡 RSS feed	https://ravisorathiya.github.io/blog/rss.xml
✉️ Contact	https://ravisorathiya.github.io/contact

💡 Tip: press Ctrl + K anywhere on the site to search every app and article.

📖 Quick guide: how do I…?

The easiest way to do anything: open Claude Code in this folder and say it in plain words. Claude makes the change, checks it, publishes it automatically, and gives you the link.

I want to…	Ask Claude	Or do it yourself
Publish my changes	"publish it"	Double-click `publish.cmd`, or run `npm run deploy -- "what changed"`
Add an app from my workspace	`/add-project producation/MyApp`	See Add a new app by hand
Add an app that's only on Google Play	"add this app: "	Same as above, using the listing for details
Remove an app	`/remove-project <app>`	Delete its `.md` file + icon, move its row to Excluded in `docs/PROJECTS.md`
Write an article	`/new-post <topic>` (saved as a draft)	Create `content/blog/<name>.md` with `draft: true`
Publish a draft article	"publish the article "	Change `draft: true` → `draft: false`, then publish
Plan article ideas	"write the next article from the ideas list"	Add a line under Ideas in `docs/POSTS.md`
Change my bio, email, skills, job	"change my bio to …"	Edit `src/data/portfolio.js`, then publish
Update an app's screenshots	"refresh screenshots for "	`npm run screenshots -- <app>`, then publish
Preview before publishing	"show me locally"	`npm run dev` → open http://localhost:5173
See what's on the site	"what apps/articles are on the site?"	`docs/PROJECTS.md` (apps) · `docs/POSTS.md` (articles)

Where things live:

content/projects/   → one .md file per app      (what each app page shows)
content/blog/       → one .md file per article  (draft: true = hidden until you publish)
src/data/portfolio.js → your name, bio, email, skills, experience
docs/PROJECTS.md    → list of apps on the site (+ removed ones, so they never come back)
docs/POSTS.md       → list of articles (+ ideas to write next)
publish.cmd         → double-click to publish

Safety net: every publish runs npm run check first. If something's wrong (a missing or too-long field, an app or article missing from its list, a missing image, a secret key pasted in), it stops and tells you exactly which file and field, and nothing broken goes live.

📱 Featured apps

App	What it is	Status
PDF Reader & Editor	Annotate, sign, edit text, lock, convert & scan PDFs	🟠 In progress
Phone Call	Default dialer with spam blocking & call themes	🟢 Google Play
Messages	Default SMS & MMS app built in Jetpack Compose	🟢 Google Play
Gallery - Photo Gallery	Compose gallery with timeline, editor & photo picker	🟢 Google Play

➡️ See all 14 apps →

✨ What's on the site

Content-driven: every app and article is a Markdown file in content/, validated on every build.
App pages: Google Play screenshots with a zoomable lightbox, a features / under-the-hood breakdown, a written case study, and a Google Play badge.
Dev Notes (blog): technical articles with a table of contents, code highlighting and an RSS feed. The blog appears once the first article is published.
Search: typo-tolerant full-text search across apps and articles. Use Ctrl/⌘ + K anywhere, or the Projects page (filters live in the URL).
Tech explorer: click any technology on the About page to see which apps use it.
Installable & offline (PWA), with optimised WebP images.
SEO: pre-rendered HTML, structured data, sitemap, and an auto-generated share image for every page.

🤖 AI-driven maintenance

This site is maintained with Claude Code. The plan and project tracking live in the repo:

File	Purpose
`CLAUDE.md`	Rules and step-by-step workflows that AI agents follow
`docs/SITE_PLAN.md`	Site plan: pages, content model, design system, SEO, search, PWA, backlog, decision log
`docs/PROJECTS.md`	Project registry: 📥 Inbox, ✅ on site, 🚫 excluded, 📝 changelog
`docs/POSTS.md`	Blog registry: 💡 ideas, 📰 published & drafts, 📝 changelog

Claude Code commands:

Command	What it does
`/add-project producation/MyNewApp`	Reads the app's source, checks Google Play, adds icon + screenshots + a case study, updates the registry, publishes
`/remove-project <slug>`	Removes an app and records it as Excluded so it's never re-added
`/new-post <topic>`	Drafts a Dev Notes article from the real source code (stays a draft until you approve it)

You can also add a line to the Inbox in docs/PROJECTS.md and ask Claude to "process the project inbox".

npm run check (also run in CI before every deploy) blocks a deploy if any content file is invalid, either registry (apps or articles) disagrees with the content, or a secret slipped in.

🚀 Publish (one command)

After any change (an app, an article, your bio…), publish with one of:

How	Command
Terminal	`npm run deploy -- "what changed"`
Double-click	`publish.cmd` in the project folder (asks what changed)
Ask Claude	"publish it". Claude publishes automatically after every change anyway.

What it does (scripts/deploy.mjs):

npm run check: stops if any content is invalid, so nothing broken gets pushed
commits all changes with your message (skipped if nothing changed)
pushes to GitHub, which triggers the deploy workflow
waits for the deploy and tells you if it succeeded or failed (with a link)
confirms https://ravisorathiya.github.io/ is live

Options: --build builds locally first (catches errors before pushing) · --no-wait pushes and exits.

✏️ How to update the site

I want to…	Edit this
Add / edit an app	`content/projects/<slug>.md` (+ a row in `docs/PROJECTS.md`)
Write / publish an article	`content/blog/<slug>.md` (set `draft: false` to publish) + its row in `docs/POSTS.md`
Change my name, bio, email, socials, skills, experience	`src/data/portfolio.js`
Change the colour theme	`--color-brand-*` in `src/style.css`

➕ Add a new app by hand

Icon: put it at public/images/apps/my-app.png, then run npm run icons (converts it to a 256px WebP).

Content: create content/projects/my-app.md (the file name becomes the URL /projects/my-app):

---
title: "My App"
type: "Productivity"          # Messaging | Dialer & Contacts | Gallery & Media | Productivity | Social
status: live                  # live | completed | in-progress
featured: false               # true = show on the home page (keep exactly 4)
order: 50
icon: /images/apps/my-app.webp
playPackage: com.example.myapp   # omit if not on Google Play
summary: "One sentence about the app (110 characters max)."
features:
  - "Feature one"
  - "Feature two"
  - "Feature three"
highlights:
  - "Interesting technical detail"
  - "Another one"
tags: ["Kotlin", "Jetpack Compose", "Room"]
---

## Overview

What the app does and who it's for.

## How it works

The interesting technical parts.

Screenshots & developer (live apps): npm run screenshots -- my-app and npm run play-meta -- my-app pull them from the app's Google Play listing.
Registry: add a row to docs/PROJECTS.md, then run npm run check.
Publish: npm run deploy -- "Add My App" (or double-click publish.cmd).

📝 Still to fill in

~~Contact email~~ (done)
~~Publish the first articles~~ (done: 3 live)
University names in education (in src/data/portfolio.js)
LinkedIn / other profiles in socials
Optional: public/resume.pdf, then set resumeUrl: '/resume.pdf'
Google Search Console: verify the site and submit sitemap.xml (see SEO)

🛠️ Run it locally

Requires Node 20+.

npm install
npm run dev            # dev server → http://localhost:5173 (draft articles visible)
npm run check          # validate content + registry + secrets scan
npm run build          # pre-render pages + sitemap + RSS + share images + service worker
npm run build:drafts   # local preview including draft articles (don't deploy)
npm run preview        # serve the production build
npm run icons          # normalise app icons (+ PWA icons)
npm run screenshots -- <slug>   # fetch Google Play screenshots for an app
npm run og             # regenerate share images (+ this README's banner)
npm run play-meta -- <slug>     # fetch the Play developer (console) name for an app
npm run deploy -- "message"    # publish: check → commit → push → wait → verify

🗂️ Project structure

├── .claude/commands/              # /add-project, /remove-project, /new-post for Claude Code
├── .github/workflows/deploy.yml   # check + build + deploy to GitHub Pages on push to main
├── CLAUDE.md                      # AI agent rules + workflows
├── publish.cmd                    # double-click to publish the site
├── content/
│   ├── projects/*.md              # ⭐ one file per app: data + case study
│   └── blog/*.md                  # ⭐ Dev Notes articles
├── docs/
│   ├── SITE_PLAN.md               # site plan, content model, decisions
│   ├── PROJECTS.md                # project registry (inbox / on site / excluded)
│   └── POSTS.md                   # blog registry (ideas / published / drafts)
├── public/
│   ├── images/apps/               # app icons (<slug>.webp) + screenshots (<slug>/*.webp)
│   ├── og.png                     # README banner (generated by npm run og)
│   └── robots.txt, pwa-*.png      # crawler rules, icons for installing the site
├── scripts/
│   ├── content-fs.mjs             # Node content loader + validation
│   ├── check-content.mjs          # npm run check
│   ├── og.mjs                     # share images (satori + resvg)
│   ├── rss.mjs                    # RSS / Atom feeds
│   ├── icons.mjs                  # icon normalisation + PWA icons
│   ├── fetch-screenshots.mjs      # Google Play screenshots
│   ├── play-meta.mjs              # Play developer (console) name
│   └── deploy.mjs                 # one-command publish (npm run deploy / publish.cmd)
├── src/
│   ├── content/                   # schema (zod) + browser loader for content/
│   ├── data/portfolio.js          # profile, skills, experience, nav
│   ├── views/                     # Home, About, Projects, ProjectDetail, Blog, BlogPost, Contact, 404
│   ├── components/                # ProjectCard, ScreenshotGallery, CommandPalette, PostCard, …
│   ├── composables/               # seo.js (meta + JSON-LD), internal links, palette state
│   ├── utils/search.js            # MiniSearch full-text search
│   └── style.css                  # Tailwind theme + Markdown (prose) styles
└── vite.config.js                 # Markdown, PWA, image optimiser, pre-render routes, sitemap/RSS/OG

⚙️ How deployment works

Hosted on GitHub Pages at https://ravisorathiya.github.io/.

Every push to main triggers deploy.yml: npm ci, then npm run check, then npm run build, then publish dist/.
Check progress under the Actions tab.
One-time setting (already done): Settings → Pages → Source: GitHub Actions.

🔍 SEO

What	Where
Pre-rendered HTML for every page (HTTP 200)	`vite-ssg`, routes generated from `content/`
Title, description, canonical, Open Graph, Twitter	`src/composables/seo.js`
Structured data (Person, SoftwareApplication, BlogPosting, Breadcrumbs)	`useSeo()` calls in each view
Share image per page	generated at build → `/og/…png`
Sitemap / RSS	https://ravisorathiya.github.io/sitemap.xml · `/blog/rss.xml` once posts are published
Robots	https://ravisorathiya.github.io/robots.txt

Next step: add the site in Google Search Console and submit sitemap.xml.

Made with 💚 by Ravi Sorathiya · ravisorathiya.github.io

Navigation Menu

Repository navigation

About

Repository files navigation

Ravi Sorathiya — Portfolio

🌐 ravisorathiya.github.io

🔗 Quick links

📖 Quick guide: how do I…?

📱 Featured apps

✨ What's on the site

🤖 AI-driven maintenance

🚀 Publish (one command)

✏️ How to update the site

➕ Add a new app by hand

📝 Still to fill in

🛠️ Run it locally

🗂️ Project structure

⚙️ How deployment works

🔍 SEO

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.claude/commands		.claude/commands
.github/workflows		.github/workflows
content		content
docs		docs
public		public
scripts		scripts
src		src
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
publish.cmd		publish.cmd
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

Ravi Sorathiya — Portfolio

🌐 ravisorathiya.github.io

🔗 Quick links

📖 Quick guide: how do I…?

📱 Featured apps

✨ What's on the site

🤖 AI-driven maintenance

🚀 Publish (one command)

✏️ How to update the site

➕ Add a new app by hand

📝 Still to fill in

🛠️ Run it locally

🗂️ Project structure

⚙️ How deployment works

🔍 SEO

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages