{"id":50311280,"url":"https://github.com/fajarnugraha37/fajarnugraha37.github.io","last_synced_at":"2026-05-28T21:01:44.930Z","repository":{"id":354282425,"uuid":"1217067276","full_name":"fajarnugraha37/fajarnugraha37.github.io","owner":"fajarnugraha37","description":"A statically exported Next.js personal website, Tailwind CSS, and themed like it escaped Night City","archived":false,"fork":false,"pushed_at":"2026-04-27T21:58:39.000Z","size":16251,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-27T23:28:17.350Z","etag":null,"topics":["blog","duckdb","framer-motion","markdown","mermaid","motion","nextjs","postgresql","protofolio","react","reactjs","tailwind","tailwindcss","three-js","threejs","wasm"],"latest_commit_sha":null,"homepage":"https://fajarnugraha37.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fajarnugraha37.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-21T14:08:50.000Z","updated_at":"2026-04-27T21:59:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/fajarnugraha37/fajarnugraha37.github.io","commit_stats":null,"previous_names":["fajarnugraha37/fajarnugraha37.github.io"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/fajarnugraha37/fajarnugraha37.github.io","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajarnugraha37%2Ffajarnugraha37.github.io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajarnugraha37%2Ffajarnugraha37.github.io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajarnugraha37%2Ffajarnugraha37.github.io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajarnugraha37%2Ffajarnugraha37.github.io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fajarnugraha37","download_url":"https://codeload.github.com/fajarnugraha37/fajarnugraha37.github.io/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajarnugraha37%2Ffajarnugraha37.github.io/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33626142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","duckdb","framer-motion","markdown","mermaid","motion","nextjs","postgresql","protofolio","react","reactjs","tailwind","tailwindcss","three-js","threejs","wasm"],"created_at":"2026-05-28T21:01:42.302Z","updated_at":"2026-05-28T21:01:44.914Z","avatar_url":"https://github.com/fajarnugraha37.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SYS//OP: The Personal Website\n\n[![DEPLOY_STATUS](https://img.shields.io/github/actions/workflow/status/fajarnugraha37/fajarnugraha37.github.io/deploy.yml?style=flat-square\u0026color=00ff88\u0026label=UPLINK)](https://github.com/fajarnugraha37/fajarnugraha37.github.io/actions)\n[![LICENSE](https://img.shields.io/badge/LICENSE-MIT-00ff88?style=flat-square)](LICENSE)\n\n\u003e \"Because you need a multi-layer WASM laboratory just to render a blog post. Allegedly.\"\n\nA high-tech, low-life portfolio and laboratory environment. Built with the \"boring\" production stack that definitely isn't boring once you look under the hood. No heroics, just pure engineering.\n\n---\n\n## HYBRID_ARCHITECTURE (READ/WRITE)\n\nThe system operates in two distinct logical modes controlled by the `NEXT_PUBLIC_APP_MODE` environment variable.\n\n### 1. READ_MODE (Static / Production)\n- **Engine:** SSG (Static Site Generation).\n- **Deployment:** Optimized for GitHub Pages (`/out` export).\n- **Data:** Consumes static indices (`assets-index.json`, `search-index.json`) and pre-rendered MDX.\n- **Security:** Immutable. All write-based APIs are disabled and UI components are sanitized/locked.\n\n### 2. WRITE_MODE (Dynamic / CMS)\n- **Engine:** SSR (Server-Side Rendering) + API Routes.\n- **Deployment:** Localhost / Docker environment.\n- **Data:** Direct access to the local filesystem via Node.js API routes.\n- **Features:** Full CRUD enabled. Create, edit, and delete blogs or assets directly from the UI. Changes persist to the `/content` and `/public/assets` directories.\n\n---\n\n## THE_TECH_STACK\n\nRunning on the latest stable firmware:\n\n- **Framework:** [Next.js 16](https://nextjs.org/) (Static Export Mode)\n- **Runtime:** [React 19](https://react.dev/) (Concurrent by default)\n- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/) (The one with the new engine)\n- **Engine:** [Bun](https://bun.sh/) (Fast. Faster than you. Definitely faster than my internet.)\n- **Persistence:** `localStorage` Buffers + WASM Database Nodes.\n- **Infrastructure:** Docker + Nginx (The old guard) + GitHub Actions.\n\n---\n\n## LABORATORY_NODES\n\nThe site isn't just text; it's a series of experimental laboratories:\n\n### 1. SQL_TERMINAL (PostgreSQL WASM)\n\n- Powered by [PGlite](https://pglite.dev/).\n- A full PostgreSQL instance running directly in your browser's memory.\n- No backend. No cloud. Just pure client-side relational power.\n\n### 2. DATA_ANALYTICS (DuckDB WASM)\n\n- High-performance analytical queries on Parquet datasets.\n- Fast enough to make your fans spin (if you have them).\n- Visualize data without leaving the DOM.\n\n### 3. MARKDOWN.EXE (The Advanced Editor)\n\n- **VIM_MODE:** Because using a mouse is a failure of imagination.\n- **Sync_Scroll:** Keep your source and preview in perfect alignment.\n- **Content_Editor (Write Mode Only):** In write mode, access the Content Database to search, open, save, and delete actual `.mdx` blogs directly to the filesystem. Built-in metadata (frontmatter) management via a Cyberpunk Accordion UI.\n- **GitHub_Alerts:** Full support for `[!NOTE]`, `[!TIP]`, and more.\n- **Exporters:** Static HTML and PDF Report generation integrated.\n- **Security:** DOMPurify sanitization. High-fidelity, zero-trust.\n\n### 4. MEDIA PROCESSOR.EXE (FFmpeg WASM)\n\n- High-performance client-side media transcoding and signal processing.\n- Features Video to GIF generation with 2-pass palette optimization.\n- Audio extraction, video compression, and fast-seeking segment trimming.\n- Fully multithreaded operations running entirely in the browser. Zero server uploads.\n\n### 5. TRANSLATION NODE.EXE (ONNX Runtime / Transformers)\n\n- Client-side NLLB-200 machine translation.\n- Zero-server inference running securely in the browser.\n- Supports multiple languages: English, Indonesian, Chinese (Simplified), Spanish, Arabic, Malay, Japanese, Korean, German, Dutch, Russian.\n- Dynamic environment-based model loading (local filesystem in dev, CDN in production) to save bandwidth.\n\n---\n\n## SYSTEM_STRUCTURE\n\nAdheres to strict **Atomic Design** principles for UI scalability:\n\n```bash\n/app          # The Routing Matrix (App Router 16)\n/components   # Modular Hardware\n  /atoms      # Primitives (Button, Toast, AnimatedNumber)\n  /molecules  # Functional Blocks (BlogCard, Search, Tabs)\n  /organisms  # Orchestrated Sections (Header, Hero, LabContent)\n/content      # Encrypted Archives (MDX Blogs)\n/hooks        # Headless Logic (useMarkdown, useTerminal, useFFmpegCore)\n/labs         # Experimental Chambers (SQL, MD, DuckDB, FFmpeg)\n/lib          # Core Utilities \u0026 Static Data\n/public       # Static Assets, Datasets \u0026 Web Workers (coi-serviceworker)\n/scripts      # Build-time automation (pre-build/post-build)\n/types        # Global API Contracts (Strongly Typed)\n```\n\n---\n\n## LOCAL_UPLINK\n\n### Prerequisites\n\n- [Bun](https://bun.sh/) (Required. Node is legacy now.)\n- A terminal with a dark background.\n\n### 1. Initialize_System\n\n```bash\nbun install\n```\n\n### 2. Boot_Environment\n\n```bash\nbun dev\n```\n\n### 3. Build_Production_Artifacts\n\n```bash\nbun run build\n```\n\n*Note: The `build` script automatically triggers `pre-build` to generate search indices and asset manifests.*\n\n---\n\n## ENVIRONMENT_VARIABLES\n\nThe system behavior is controlled by the following centralized environment variables (configured in `lib/env.ts`):\n\n- `NEXT_PUBLIC_APP_MODE`: Controls the mode of the application. Set to `write` to enable SSR and the Content Editor API routes for managing markdown blogs. Defaults to `read` (SSG / Static Export Mode) which disables data-mutating APIs.\n- `NEXT_PUBLIC_BASE_URL`: The base URL of the deployment (used for SEO, metadata, and RSS feed). Defaults to `https://fajarnugraha37.github.io`.\n- `DISABLE_HMR`: Set to `true` to disable Hot Module Replacement in dev mode.\n- `NODE_ENV`: Standard environment flag (`development`, `production`).\n\n---\n\n## DEPLOYMENT_PROTOCOLS\n\nThe system auto-deploys via GitHub Actions to Pages upon every push to `main`.\n\n**GitHub Pages \u0026 WASM Multithreading (The COOP/COEP):**\nGitHub Pages does not natively support setting custom `Cross-Origin-Opener-Policy` (COOP) and `Cross-Origin-Embedder-Policy` (COEP) HTTP headers. These headers are strictly required by browsers to enable `SharedArrayBuffer`, which FFmpeg-WASM needs for multithreading.\nTo bypass this limitation, this project uses the [coi-serviceworker](https://github.com/gzuidhof/coi-serviceworker) library. A local service worker (`public/coi-serviceworker.js`) intercepts the initial page load and injects the necessary security headers into the browser's response, allowing full multithreading capabilities on a static host.\n\n**GTM_TRACKING_INJECTION:**\nTo activate analytics tracking:\n1. **Local Setup:** Add `NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX` to your `.env.local`.\n2. **Production Setup:** In your GitHub Repository, navigate to **Settings \u003e Secrets and variables \u003e Actions** and add a new repository secret named `NEXT_PUBLIC_GTM_ID` with your container ID as the value. The CI/CD pipeline will automatically inject it during the build phase.\n\n**The Docker Routine:**\n\n```bash\ndocker-compose up --build\n```\n\nStandard Nginx config provided. Static files served at port 80. Simple. Boring. Production-ready.\n\n---\n\n## LICENSE\n\n[MIT](LICENSE). Take it. Fork it. Break it. Just don't blame me when you realize rewrites are a lifestyle.\n\n---\n\n\u003e // EOF_TRANSMISSION\n\u003e // SYS//OP v0.1.0-STABLE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffajarnugraha37%2Ffajarnugraha37.github.io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffajarnugraha37%2Ffajarnugraha37.github.io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffajarnugraha37%2Ffajarnugraha37.github.io/lists"}