The Portfolio Landing Page¶

What this file is: A skeleton for the single-page personal site at raghulr2003.dev (or GitHub Pages equivalent) that acts as the top-level entry point to your portfolio. When to build it: By end of M6 (December 2026), once Rungs 1-4 have shipped and there’s something to display. Refresh it whenever a new rung ships. Do not: Build this in M1. There’s nothing to put on it yet. Building it early is procrastination-shaped-like-productivity.

The Purpose Of This Page¶

A recruiter clicks a link in your email signature or LinkedIn profile. They land here. They have 20 seconds.

In those 20 seconds, they must be able to answer three questions:

Who is this person, in one sentence?
What have they built, at a glance?
How do I contact them?

That is the whole design brief. Everything else is decoration. This page is not your life story. It is a fast dispatcher to the artifacts that already exist on GitHub, Hashnode, and LinkedIn.

Hosting¶

Two options. Pick one on day one and don’t change.

Option A: GitHub Pages (free, sufficient)¶

Repo: github.com/RaghulR2003/RaghulR2003.github.io
URL: RaghulR2003.github.io
Optional custom domain: raghulr2003.dev (buy from Namecheap / Cloudflare Registrar; ~$12/year)
TLS: free, automatic

Option B: Cloudflare Pages + custom domain (free, more polish)¶

Same repo but deployed via Cloudflare Pages
Faster CDN, edge caching
Slightly more setup, no ongoing cost

Recommendation: Option A unless you’re already comfortable with Cloudflare. Simplicity wins here. Domain purchase is the one paid piece and it’s worth it for the email address alone.

The Structure (Four Sections, In Order)¶

Hero — the M13 pitch, one sentence, giant type
The Ladder — 8 rung cards, each a tile with title / one-line description / links to repo + blog
Current Focus — what you’re building this month, updated monthly
Contact — email, LinkedIn, GitHub, blog

No blog embed. No project screenshots gallery. No résumé timeline. The links go outward to the real artifacts. This page is a router, not a destination.

HTML/Markdown Skeleton¶

Below is a minimal, no-JavaScript skeleton. Copy it, replace the bracketed values, deploy. Total build time: 4-6 hours including CSS polish.

`index.html`¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raghul R — Java + ML Engineer</title>
  <meta name="description" content="Applied ML engineer at Zoho building Java 21 and ML-serving systems.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header class="hero">
    <h1>Raghul R</h1>
    <p class="pitch">
      Applied ML engineer at Zoho. I debug 15-year-old Java monoliths,
      refactor them toward modern patterns, and ship services that survive
      the next 10 years — from <code>OutOfMemoryError</code> to deployment.
    </p>
    <p class="quick-links">
      <a href="https://github.com/RaghulR2003">GitHub</a> ·
      <a href="https://raghulr2003.hashnode.dev">Blog</a> ·
      <a href="https://linkedin.com/in/raghulr2003">LinkedIn</a> ·
      <a href="mailto:hello@raghulr2003.dev">Email</a>
    </p>
  </header>

  <section class="ladder">
    <h2>The Ladder</h2>
    <p class="section-lede">
      Eight public artifacts, shipped over 13 months (July 2026 — July 2027).
      Every one is a real repo you can open, run, and evaluate.
    </p>

    <ol class="rungs">

      <li class="rung">
        <h3>Rung 1 — 50 Programs, No AI</h3>
        <p class="month">Shipped: August 2026</p>
        <p>50 hand-typed Java 21 programs, tiered by difficulty, one repo, one commit story.</p>
        <p class="links"><a href="https://github.com/RaghulR2003/java-50-drills">Repo</a></p>
      </li>

      <li class="rung">
        <h3>Rung 2 — DSA in Java, by Pattern</h3>
        <p class="month">Shipped: October 2026</p>
        <p>150 problems, organized by 13 patterns, each with tests and written pattern explanations.</p>
        <p class="links"><a href="https://github.com/RaghulR2003/dsa-in-java">Repo</a></p>
      </li>

      <li class="rung">
        <h3>Rung 3 — MiniCollections Library</h3>
        <p class="month">Shipped: November 2026</p>
        <p>ArrayList, HashMap, LinkedList, PriorityQueue, ArrayDeque, LinkedHashMap — rewritten from scratch, contract-tested against the JDK, benchmarked with JMH.</p>
        <p class="links">
          <a href="https://github.com/RaghulR2003/minicollections">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/i-rewrote-java-util">Blog</a>
        </p>
      </li>

      <li class="rung">
        <h3>Rung 4 — Java 6 → Java 21 Refactor</h3>
        <p class="month">Shipped: December 2026</p>
        <p>A real legacy codebase modernized in 15 atomic commits: POJO → record, visitor → sealed switch, try-catch → try-with-resources. Blog post walks through 10 transformations.</p>
        <p class="links">
          <a href="https://github.com/RaghulR2003/java6-to-21-refactor">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/refactoring-java6-to-21">Blog</a>
        </p>
      </li>

      <li class="rung hard-gate">
        <h3>Rung 5 — Concurrency Playground</h3>
        <p class="month">Shipped: February 2027</p>
        <p>Three thread-safe rate limiter algorithms + a virtual-threads-vs-platform-threads benchmark on an HTTP-fanout workload. Contention-tested with Lincheck, benchmarked with JMH.</p>
        <p class="links">
          <a href="https://github.com/RaghulR2003/java-concurrency-playground">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/virtual-threads-crossover">Blog</a>
        </p>
      </li>

      <li class="rung">
        <h3>Rung 6 — JVM Performance Case Study</h3>
        <p class="month">Shipped: March 2027</p>
        <p>A real before/after profiling investigation: 5 iterations, flame graphs at each stage, one very surprising <code>synchronized</code>. Numbers, GC analysis, JIT commentary.</p>
        <p class="links">
          <a href="https://github.com/RaghulR2003/jvm-perf-case-study">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/jvm-perf-case-study">Blog</a>
        </p>
      </li>

      <li class="rung">
        <h3>Rung 7 — Production URL Shortener</h3>
        <p class="month">Shipped: May 2027</p>
        <p>Spring Boot 3 + Java 21 + Postgres + Redis, deployed on Fly.io. Rate-limited (using my own Rung 5 library), observable with Micrometer, integration-tested with Testcontainers.</p>
        <p class="links">
          <a href="https://shortlnk.raghulr2003.dev">Live</a> ·
          <a href="https://github.com/RaghulR2003/shortlnk">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/production-url-shortener">Blog</a>
        </p>
      </li>

      <li class="rung hard-gate capstone">
        <h3>Rung 8 — ML Serving on Kubernetes</h3>
        <p class="month">Shipped: July 2027</p>
        <p>An ML model served from Java 21 + Spring Boot 3 on Kubernetes. Virtual threads, ONNX Runtime, in-process feature preprocessing, hot model reload, HPA, sub-100ms p95. The capstone.</p>
        <p class="links">
          <a href="https://ml.raghulr2003.dev">Live</a> ·
          <a href="https://github.com/RaghulR2003/ml-serving-java">Repo</a> ·
          <a href="https://raghulr2003.hashnode.dev/ml-serving-java-part-1">Blog Series</a>
        </p>
      </li>

    </ol>
  </section>

  <section class="current">
    <h2>Current Focus</h2>
    <!-- Update this monthly -->
    <p>
      <strong>December 2026:</strong> Rung 4 — refactoring an old Apache Commons
      module from Java 6 to Java 21 idioms. Currently in the sealed-interface
      pattern-matching commits.
    </p>
    <p class="next">Next up (Jan 2027): starting the concurrency playground — the first hard gate.</p>
  </section>

  <footer class="contact">
    <h2>Contact</h2>
    <p>
      <a href="mailto:hello@raghulr2003.dev">hello@raghulr2003.dev</a> ·
      <a href="https://linkedin.com/in/raghulr2003">LinkedIn</a> ·
      <a href="https://github.com/RaghulR2003">GitHub</a>
    </p>
    <p class="colophon">
      Built with plain HTML and CSS. Hosted on GitHub Pages. Source at
      <a href="https://github.com/RaghulR2003/RaghulR2003.github.io">github.com/RaghulR2003/RaghulR2003.github.io</a>.
    </p>
  </footer>

</body>
</html>

`styles.css` (minimal, deliberately)¶

:root {
  --fg: #1a1a1a;
  --bg: #fafaf7;
  --accent: #b8501f;    /* burnt orange — use sparingly */
  --muted: #6a6a6a;
  --gate: #b8501f;
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 17px;
}

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

code { font-family: var(--font-mono); background: #eeeae2; padding: 0 4px; border-radius: 3px; }

.hero h1 { font-size: 2.5rem; margin-bottom: 0.25rem; }
.hero .pitch { font-size: 1.2rem; color: var(--fg); margin-top: 0.5rem; }
.hero .quick-links { color: var(--muted); }
.hero .quick-links a { color: var(--accent); text-decoration: none; }
.hero .quick-links a:hover { text-decoration: underline; }

.ladder { margin-top: 4rem; }
.ladder h2 { border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; }
.section-lede { color: var(--muted); }

.rungs { list-style: none; padding: 0; }
.rung {
  border-left: 3px solid #ddd;
  padding: 1rem 0 1rem 1.25rem;
  margin: 1.5rem 0;
}
.rung h3 { margin: 0 0 0.25rem 0; }
.rung .month { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.5rem 0; }
.rung .links a { color: var(--accent); text-decoration: none; margin-right: 0.5rem; }
.rung .links a:hover { text-decoration: underline; }

.rung.hard-gate { border-left: 3px solid var(--gate); }
.rung.hard-gate::before {
  content: "HARD GATE";
  display: inline-block;
  font-size: 0.7rem;
  color: var(--gate);
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.rung.capstone { background: rgba(184, 80, 31, 0.05); }

.current { margin-top: 4rem; }
.current h2 { border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; }
.current .next { color: var(--muted); }

.contact { margin-top: 4rem; }
.contact h2 { border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; }
.contact a { color: var(--accent); text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact .colophon { color: var(--muted); font-size: 0.85rem; }

Design Rules (Do Not Break These)¶

No JavaScript unless you have a real reason. Plain HTML+CSS loads in 100ms globally. Every JS framework adds a second and a maintenance headache.
No dark-mode toggle in v1. Ship, then iterate. A dark-mode toggle in the first version is procrastination.
No stock photography. Especially not “cool Java logo” clipart. The words and the links are the design.
One accent color. Anything more looks amateur. Pick one, use it sparingly for links and the hard-gate stripe.
Mobile-friendly by default. Max-width 720px with generous padding does the job without media queries.
Update monthly. The current section going stale is a bad signal — worse than not having the section at all. If you can’t commit to updating monthly, remove that section.

The Update Ritual¶

On the last Sunday of every month, spend 20 minutes:

Update the Current Focus section to name what you’re building next month
If a rung shipped this month, verify its tile links work (repo + blog + live URL)
Push to main; GitHub Pages redeploys automatically
Verify the site loads correctly in an incognito window
Tweet / post a link if it’s a fresh rung month

Twenty minutes, monthly, forever. The landing page compounds.

What This Page Is Not¶

It is not a résumé. Résumé lives at resume.pdf linked from GitHub, updated separately.
It is not a blog. Blog lives at Hashnode.
It is not a portfolio gallery with screenshots. It is a dispatcher to real artifacts.
It is not “branding.” You are an engineer, not a personal-brand influencer. The page should look like a serious engineer built it, which means it should look simple, not slick.

Return to README.md