All articles

Evolution of a Personal Website: From React Discord Card to Astro 5 Islands Architecture

astroreactarchitectureperformancefrontendtypescripttailwind

Evolution of a Personal Website: From React Discord Card to Astro 5 Islands Architecture

A developer’s personal website is rarely a static milestone: it continuously evolves alongside technical expertise, toolsets, and performance standards. However, foundational architectural decisions determine vital platform metrics — First Contentful Paint (FCP), search engine visibility (SEO), social preview reliability (OpenGraph), and the maintainability of an expanding archive of technical case studies.

This article reviews the development journey across three distinct generations: from basic HTML+CSS, through the interactive React-Discord-Business-Card, to the modern OneHeka Portfolio powered by Astro 5 and Islands Architecture.

1. Generational Timeline: From Raw Static to Islands

Each iteration solved contemporary product challenges while highlighting the boundaries of its stack:

[ Generation 1: Static HTML + CSS ]
  Simple landing page, minimal features, no interactivity
       │
       ▼ (Demand for interactive Discord aesthetics)
[ Generation 2: React Discord Business Card (SPA) ]
  React, Vite/CRA, CSS/Framer Motion, Discord profile simulation
       │
       ▼ (Scaling: blog, engineering case studies, i18n, FCP & SEO optimization)
[ Generation 3: OneHeka Portfolio (Astro 5 + React 19 Islands) ]
  Astro 5, Tailwind CSS v4, React 19 (islands), Content Collections,
  support for 4 languages (RTL/LTR), 100/100 Lighthouse

Generational Architecture Matrix

Parameter Generation 1: HTML+CSS Generation 2: React Discord Card Generation 3: OneHeka Portfolio
Stack Pure HTML5, CSS3 React, Vite, Tailwind, Framer Motion Astro 5, React 19, Tailwind v4, Zod
Rendering Static file Client-side SPA (CSR) Static Site Generation (SSG) + Islands
Base Page Weight ~5–10 KB ~250–400 KB (JS bundle) ~15–30 KB (Pure HTML + CSS)
First Contentful Paint (FCP) 0.2 s 1.4–2.4 s 0.1–0.3 s
Interactivity None Full (monolithic overhead) Targeted (via client:* directives)
SEO & OpenGraph Static Compromised (empty <div id="root">) Native SSG across 4 languages
Content Scalability Manual markup State & client routing complexity Type-safe Content Collections

2. Generation 2: React Discord Business Card & SPA Limits

The second generation focused on authentic Discord user profile aesthetics: animated profile headers, custom badges, live activity statuses, interactive modal popups, and connection badges.

Architectural Constraints of Pure React SPA

While visually engaging, transforming the card into a comprehensive engineering portfolio with long-form articles exposed classic Single Page Application flaws:

  1. First Contentful Paint & TTI Delays: Browsers received an empty <div id="root"></div> shell and were forced to download, parse, and execute the entire React runtime bundle before rendering any content.
  2. Fragile OpenGraph & Search Indexing: Search crawlers and messenger embed preview scrapers (Telegram, Discord, Twitter) frequently captured empty previews due to client-side JS evaluation timeouts.
  3. Codebase Bloat: Adding multi-page navigation via react-router-dom, heavy JSON localization dictionaries, and code-splitting (React.lazy) introduced unnecessary architectural overhead.

3. The Astro 5 Paradigm: Islands Architecture & Zero-JS

For the third generation — OneHeka Portfolio — the architecture was rebuilt on Astro 5 utilizing Astro Islands:

  • By default, all pages (articles, project directories, headers, footers) are pre-rendered into static HTML and CSS without client-side JavaScript runtime.
  • React components are integrated strictly as isolated islands with explicit hydration triggers:
---
import { TableOfContents } from "@/components/molecules/table-of-contents";
import { ShareButton } from "@/components/molecules/share-button";
import { CommandMenu } from "@/components/molecules/command-menu";
import MainLayout from "@/layouts/main.astro";

const { headings, lang, title, description } = Astro.props;
---

<MainLayout title={title} description={description} lang={lang}>
    <!-- Static content: semantic HTML, 0 KB JavaScript -->
    <article class='prose min-w-0 max-w-full'>
        <slot />
    </article>

    <!-- Interactive React islands hydrated independently -->
    <TableOfContents headings={headings} lang={lang} client:load />
    <ShareButton lang={lang} client:load />
    <CommandMenu lang={lang} client:idle />
</MainLayout>

Island Hydration Strategies:

  • client:load — Immediate hydration upon page load (CustomScrollbar, TableOfContents).
  • client:idle — Hydration deferred until browser main thread is idle (CommandMenu, ShareButton).
  • client:visible — Scripts loaded only when the element enters the viewport.

4. Type-Safe Content: Content Collections & Zod

Publishing engineering case studies and technical notes is managed through Content Collections (src/content.config.ts), guaranteeing schema validation at build time:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        tags: z.array(z.string()).optional().default([]),
        lang: z.enum(['ru', 'en', 'zh', 'ae']).default('ru')
    })
})

export const collections = { blog }

Any metadata discrepancy in Markdown (missing required frontmatter, invalid dates, or unsupported locales) immediately halts the build with exact line references, preventing broken production deployments.

5. Internationalization (i18n): 4 Languages & Native RTL

OneHeka Portfolio delivers native localization across 4 languages:

  • 🇷🇺 Russian (ru)
  • 🇬🇧 English (en)
  • 🇨🇳 Chinese (zh)
  • 🇦🇪 Arabic (ae) — with full Right-to-Left (dir="rtl") layout support.

Unlike SPAs that download large JSON locale bundles in memory, Astro compiles static localized pages with proper hreflang tags and canonical URLs.

6. Modern Frontend Stack: Tailwind v4, Geist Font & React Aria

The visual ecosystem leverages state-of-the-art tooling:

  • Tailwind CSS v4 with a Vite-native engine for instantaneous HMR.
  • Geist Variable Font by Vercel for crisp typography and code readability.
  • React Aria Components ensuring 100% accessible UI (a11y), keyboard focus traps, and screen-reader support.
  • Cmd+K Command Palette built on cmdk with automatic OS platform detection (Mac vs Windows) and smooth modal transitions.

7. Key Engineering Takeaways

  1. SPAs Are Overkill for Content: Relying on client-side React for blogs and portfolio sites introduces needless bundle weight and harms FCP.
  2. Islands Offer the Ideal Balance: Astro 5 pairs the rich developer experience of React with the lightweight performance of static HTML.
  3. Type-Safe Content Pipelines: Enforcing Zod schemas across Markdown metadata eliminates runtime data errors before deployment.