// README

> Portfolio_Page()_

A static, vanilla-JS portfolio site with a small blog system for technical write-ups. No build step, no framework — plain HTML/CSS/JS served as-is.

Overview

The homepage (index.html) is a single-scroll page:

About Me — bio and a JS-rendered skills list
My Projects — an auto-advancing carousel of GitHub projects, rendered from a data array and cached in sessionStorage
Writings — links out to blog posts
Contact Me — a form (currently a stub; submission is simulated client-side, nothing is actually sent yet)

A dismissible "work in progress" modal appears on first visit; closing it is remembered for the rest of the browser session via sessionStorage.

The blog/ section lists longer write-ups. Each post gets a "Technical Deep Dive" and a "Retrospective" page. There's currently one post: speak() — a four-language (C, C++, Java, Rust) comparison of inheritance-based vs. interface-based polymorphism, ported from a standalone project (Inheritance-BasedVsInterface-Based_PolymorphismAndMonomorphism) into blog/posts/speak/. That project's own GitHub Pages site now redirects here. The post also has a source.html viewer that fetches and syntax-highlights source files straight from the GitHub repo, and an interface-vs-inheritance.html note on a common misconception.

Site-wide navigation is a minimal breadcrumb (.crumb) in the corner of every page — e.g. Home / Blog / speak() / overview — rather than a persistent nav bar.

Design

The whole site uses a dark, IBM Plex Mono/Sans, amber-and-cyan palette (css/themes.css). Shared chrome — fonts, palette, section/crumb layout — comes from css/site.css, which every page imports. Each blog/posts/speak/* page additionally loads its own page-specific stylesheet on top of that: overview.css and interface-vs-inheritance.css handle prose typography, and source.css styles the source-viewer layout and syntax-highlight token colors. There are no inline <style> blocks anywhere in the site.

Dependencies

Google Fonts — IBM Plex Mono / IBM Plex Sans (loaded via <link>, no local copies)
highlight.js 11.9.0, plus its x86asm language pack — loaded via cdnjs, used only on source.html to syntax-highlight fetched source files client-side

No build tools, frameworks, or other external libraries are required.

File Structure


        Portfolio/
        │
        ├── index.html                                  # Homepage
        |
        ├── docs/
        │   ├── README.md
        │   └── README.html
        │
        ├── css/
        │   ├── site.css                                # Entry point — @imports the rest
        │   ├── base.css                                # Reset, typography, section/crumb layout
        │   ├── themes.css                              # Color palette (CSS custom properties)
        │   ├── app.css                                 # Homepage-specific styles (projects, carousel, contact form)
        │   ├── components.css                          # Reusable bits (buttons, modal, tooltip)
        │   ├── blog.css                                # Blog listing table styles
        │   ├── overview.css                            # Prose typography — overview.html
        │   ├── interface-vs-inheritance.css            # Prose typography — interface-vs-inheritance.html
        │   └── source.css                              # Source-viewer layout, syntax-highlight token colors
        │
        ├── scripts/
        │   ├── main.js                                 # Homepage: skills list, modal, contact form stub, project carousel
        │   ├── blog.js                                 # Blog listing: renders posts into the table
        │   └── source.js                               # Source viewer: fetches a file from GitHub and highlights it
        │
        ├── images/                                     # Project preview images + speak() thumbnail
        │
        └── blog/
        ├── index.html                                  # Blog listing page
        └── posts/
        └── speak/
        ├── index.html                                  # Technical deep dive (landing page)
        ├── overview.html                               # Cross-language comparison
        ├── interface-vs-inheritance.html               # Note on a common misconception
        ├── source.html                                 # In-browser source viewer (fetches from GitHub)
        └── retrospective.html                          # Placeholder — retrospective not yet written