LIVE

Personal Blog

A multi-category personal blog at roopkishorepaliwal.com — the first fully deployed web product built under the ArthRoute Studios banner. Covers Engineering & Technology, Life & Philosophy, and Astrology & Spirituality.

Static HTML/CSS/JS Vercel GitHub Giscus Comments Google Translate API Open Graph / SEO
Visit Live Site →

What is this project?

The personal blog was the very first ArthRoute Studios project — a deliberate decision to start with something meaningful and personal before building other products. The goal was to create a professional online presence that honestly reflected three distinct sides of one person (which is me): the engineer, the philosopher, and the Jyotishi.

Rather than using an off-the-shelf blogging platform, the site was built entirely from scratch as a static HTML/CSS/JS project — giving full control over design, performance, features, and the learning experience. It is hosted on Vercel with source managed on GitHub.

⚙️
Engineering & Technology

Articles on aerospace systems, tools, AI in engineering, and lessons from 20+ years of jet engine design and development.

🌿
Life & Philosophy

Reflections on leadership, consistency, personal growth, and the quiet lessons that come from living with intention and curiosity.

🪐
Astrology & Spirituality

Explorations of Vedic Astrology, Karma theory, and the intersection of ancient wisdom with a modern, questioning mind.


Features & Capabilities

A significant set of features was designed, built, debugged, and iterated — entirely with AI coding assistance and no prior web development background.

💬
Giscus Comments

GitHub-backed commenting system on every article, enabling reader discussion without a database.

👍
Like / Dislike Reactions

Per-article reaction counters giving readers a frictionless way to signal engagement.

🌐
Google Translate Integration

Custom pill-shaped language dropdown supporting 12 languages including Hindi, Telugu, Kannada, Tamil, and more.

🔊
Text-to-Speech

In-article audio playback letting readers listen to content instead of reading.

📤
Social Sharing with Preview Cards

Open Graph tags and per-article preview pages ensure rich link previews on LinkedIn, Twitter, and WhatsApp.

🍞
Breadcrumb Navigation

Contextual breadcrumbs on all article pages for clean navigation and improved SEO structure.

⏱️
Read Time Badges

Estimated reading time displayed on every article card, setting reader expectations upfront.

📊
Scroll Progress Bar

A thin progress indicator at the top of article pages showing how far through the piece the reader is.

Mobile Hamburger Menu

Fully responsive navigation with a collapsible menu for mobile and tablet viewports.

🔍
SEO Pre-rendering

Server-side-style SEO injection via an ARTICLE_EXCERPTS constant and injectSEOPrerender() — making JS-rendered content visible to crawlers.

🗺️
Sitemap & Canonical Tags

Proper sitemap.xml and canonical URL tags across all pages for full search engine discoverability.

📷
Photography Gallery

A visual journal section showcasing captured moments, linked to Instagram for extended reach.


Tech Stack

Deliberately kept simple — no frameworks, no build tools, no CMS. The constraint became the teacher.

📄
HTML / CSS / JS
Pure static — no framework
Vercel
Hosting & CI/CD
🐙
GitHub
Source control
💬
Giscus
GitHub-backed comments
🌐
Google Translate API
12-language support
🔗
Open Graph
Social link previews

The Journey of Building It

This project started with no prior web development experience — just a clear vision of what was needed and the willingness to use AI coding assistants as partners in building it. The process was genuinely iterative: build a feature, find a bug, fix it, find the next thing to improve.

The build evolved through multiple phases — from fixing foundational issues (broken image paths, JS-rendered content invisible to search engines) to layering in an increasingly rich set of reader-facing features.

Phase 1
Foundation & Fixes

Resolved broken image paths, SEO invisibility (JS-rendered content), missing Open Graph tags, and sitemap issues that made the site invisible to crawlers.

Phase 2
Reader Features

Added Giscus comments, like/dislike reactions, text-to-speech, scroll progress bar, read time badges, breadcrumbs, and mobile hamburger menu.

Phase 3
SEO & Sharing

Built per-article Open Graph preview pages, injectSEOPrerender(), sitemap, and social sharing so LinkedIn and WhatsApp previews render correctly.

Key Lessons Learned

Static doesn't mean simple. A static HTML site can carry significant complexity — SEO pre-rendering, social sharing infrastructure, multilingual support, and comment systems — when built thoughtfully.

AI coding assistance is a genuine equalizer. Every feature on this site was built by someone with no prior web dev background. The combination of domain knowledge and AI assistance is a powerful, legitimate path to success.

Start with a real project, not a tutorial. Building something personally meaningful — a blog that reflects who you actually are — is a far better teacher than following generic exercises.

SEO is not optional, it's necessary and it's structural. Content that search engines can't see doesn't exist on the internet.


Read the Blog ✍️

Articles on aerospace engineering, leadership, Vedic Astrology, and the philosophy of a life spent learning. Free astrology consultations are also available — just reach out.