This document covers the lynkos.github.io repository: its purpose, high-level structure, primary technologies, and how the three major layers (source, build, deployment) relate to each other. It is the entry point to the wiki.
For details on specific systems, see:
The repository contains the source code for lynkos.dev, a personal portfolio website by Kiran Brahmatewari. The site presents portfolio content — projects, skills, an about page, contact form, and resume — through a simulated macOS desktop environment running entirely in the browser. Windows are draggable and resizable. The dock, menu bar, Launchpad, and application windows all emulate macOS Sonoma/Sequoia visual conventions.
A standalone 404.html page renders a WebGL shader animation as the background.
The project is licensed under the MIT License (LICENSE.md1-22).
lynkos.github.io/
├── index.html # Main desktop page
├── 404.html # Error page with WebGL background
├── assets/
│ ├── img/ # Images, icons, favicons
│ ├── stylesheets/
│ │ ├── sass/ # SASS source (never served directly)
│ │ └── css/ # Compiled CSS output (gitignored)
│ ├── resume.pdf # Static asset served directly
│ └── audio/ # Sound effects (e.g. empty-trash.mp3)
├── src/
│ ├── components/ # Application JS modules
│ └── utilities/ # Utility JS modules
├── dist/
│ ├── components/ # Babel-compiled JS output
│ ├── utilities/ # Babel-compiled JS output
│ └── lib/jquery-ui.js # Vendored jQuery UI (not compiled)
├── package.json # npm scripts, Babel config, browserslist
└── .github/workflows/gh-pages.yml # GitHub Actions deployment
Note:
dist/andassets/stylesheets/css/are gitignored (.gitignore1-7) and produced at build time. Thedist/lib/directory is excluded from gitignore to keep the vendored jQuery UI bundle in source control.
Sources: .gitignore1-7 README.md1-30 package.json1-61
The codebase has a clear separation between source, build output, and deployment target.
Architecture: Source → Build → Deploy with npm scripts
Sources: package.json4-13 .github/workflows/gh-pages.yml23-105 README.md114-157
src/)| File | Role |
|---|---|
src/components/windows.js | Core window management: open/close/drag/resize/z-index/dock/launchpad/menus |
src/components/calculator.js | Calculator logic (eval-based arithmetic) |
src/components/preview.js | Image rotate/zoom controls |
src/components/text-edit.js | TextEdit toolbar: font, alignment, decorations |
src/components/notes.js | Notes sidebar navigation, project switching |
src/components/email.js | Contact form: XHR to Google Script, reCAPTCHA, Toastify |
src/utilities/particles.js | particlesJS configuration for desktop background |
All files in src/ are compiled by Babel (@babel/preset-env + babel-preset-minify) to corresponding paths under dist/ (package.json7).
assets/stylesheets/sass/)Two entry-point .sass files compile into two CSS bundles:
| Entry Point | Output | Load Strategy |
|---|---|---|
preloaded-styles.sass | preloaded-styles.css | Render-blocking <link rel="stylesheet"> |
styles.sass | styles.css | Async preload (onload swap) |
Both import shared modules from assets/stylesheets/sass/components/_variables.sass and assets/stylesheets/sass/components/_mixins.sass.
| File | Description |
|---|---|
index.html | Main desktop page; full macOS-inspired UI shell |
404.html | Standalone error page with WebGL canvas background |
Sources: index.html1-94 package.json4-13 src/components/windows.js1-10
The browser-side runtime combines CDN-loaded libraries with locally compiled modules.
Runtime: index.html dependency graph
Sources: index.html14-94 src/components/windows.js1-10
The main page (index.html) renders a full-page desktop with the following persistent structural elements:
| DOM Element | Description |
|---|---|
#menu-bar | Fixed top bar: Apple menu, Finder, File, Edit, View, Go, Window, Help; right side: play, wifi, control-center, clock |
#main-content | Desktop canvas; contains #particles-js background and all child content |
#particles-js | Canvas element populated by particlesJS |
.folder | Desktop icons (src/, about.rtf, profile.jpg, resume.pdf) |
#dock | Bottom application launcher bar |
#launchpad | Full-screen app grid overlay |
#sticky-note | Draggable sticky-note widget |
.windows | All application window elements share this class |
DOM: #main-content child structure
Sources: index.html96-120 index.html555-577 src/components/windows.js13-18
Each application is a div.windows element with its own header (traffic-light buttons), body, and optional controls. The complete list:
| Window ID / Selector | Application | JS Module | Key Functions |
|---|---|---|---|
#mac-terminal | iTerm2-style terminal | (static HTML) | positionWindow() |
#calc | Calculator | calculator.js | closeWindow(), maximizeWindow() |
#text-edit | TextEdit (About Me) | text-edit.js | openWindow(), openDesktopFile() |
#music-app | Music Player (Spotify) | (static HTML + Spotify API) | openWindow(), maximizeWindow() |
#notes | Notes (Portfolio) | notes.js | openWindow(), launchApp() |
#browser | Safari (Skills) | (static HTML) | openWindow(), launchApp() |
.preview | Preview (profile image) | preview.js | openDesktopFile(), showDesktopFile() |
.resume | Preview (resume PDF) | preview.js | openDesktopFile(), showDesktopFile() |
#email | Mail (Contact Form) | email.js | openWindow() (commented out) |
All windows are managed by functions in src/components/windows.js: openWindow() windows.js218-250 closeWindow() windows.js318-336 maximizeWindow() windows.js385-416 bringToFront() windows.js120-200 makeDraggable() windows.js202-216
See Window Management System and Applications for details.
Sources: src/components/windows.js218-678 index.html600-1005
All build and development commands are defined in package.json4-13
| Script | Command summary |
|---|---|
npm run build | Runs build:js, build:html, build:css, then build:prefix in parallel/sequence |
npm run build:js | babel src --out-dir dist --no-comments |
npm run build:css | sass --quiet --no-source-map --style=compressed assets/stylesheets/sass:assets/stylesheets/css |
npm run build:prefix | postcss assets/stylesheets/css/*.css --replace --use autoprefixer --no-map |
npm run build:html | html-minifier on all .html files in-place |
npm run dev | Runs dev:js (nodemon + babel) and dev:css (sass --watch) in parallel |
Prerequisites: Node.js and npm (README.md114-150).
Sources: package.json4-13 README.md114-150
Pushes to main (excluding certain paths) trigger the GitHub Actions workflow defined in .github/workflows/gh-pages.yml. The workflow:
npm install then npm run buildsitemap.xml and robots.txtprod branch via peaceiris/actions-gh-pagesGitHub Pages serves the prod branch at lynkos.dev. The site uses a custom domain configured via a CNAME file.
For full workflow documentation, see Build and Deployment.
Sources: README.md152-186
| Topic | Wiki Page |
|---|---|
| Desktop canvas structure, metadata, and asset loading | Desktop Environment |
Window open/close/drag/focus functions in windows.js | Window Management System |
| Menu bar, dock, and launchpad components | UI Components |
| Individual application windows | Applications |
| 404 error page and WebGL background | 404 Error Page |
| SASS variables, mixins, and component styles | Styling System |
| npm scripts, Babel config, and GitHub Actions | Build and Deployment |
| CDN libraries, Spotify, reCAPTCHA, Google Script | External Integrations |
Refresh this wiki