# Roberto Studio — Interactive Application & Algorithm Workspace V12

<div align="center">

<img src="https://capsule-render.vercel.app/api?type=waving&height=250&color=0:120B2E,35:4C1D95,70:6D3AF2,100:27C2FF&text=Roberto%20Studio%20V12&fontSize=48&fontColor=ffffff&animation=fadeIn&fontAlignY=36&desc=Algorithms%20%E2%80%A2%20Applications%20%E2%80%A2%20Portfolio%20%E2%80%A2%20Resume%20%E2%80%A2%20PWA&descAlignY=60" alt="Roberto Studio V12 banner" />

<img src="https://readme-typing-svg.demolab.com?font=JetBrains+Mono&size=17&duration=2200&pause=650&color=7C3AED&center=true&vCenter=true&width=1080&lines=13+Algorithm+Visualizers+%E2%80%A2+13+Application+Tools;Responsive+Admin+Workspace+%E2%80%A2+Local+Authentication;AI+Engineer+Portfolio+%E2%80%A2+Interactive+Public+Resume;Cloudflare+Pages+%E2%80%A2+Installable+Progressive+Web+App" alt="Roberto Studio animated headline" />

<p>
  <img src="https://img.shields.io/badge/Status-Production_Prototype-22C55E?style=for-the-badge&labelColor=111827" alt="Production prototype" />
  <img src="https://img.shields.io/badge/Edition-V12-7C3AED?style=for-the-badge&labelColor=111827" alt="V12" />
  <img src="https://img.shields.io/badge/Live_Modules-28-0EA5E9?style=for-the-badge&labelColor=111827" alt="28 live modules" />
  <img src="https://img.shields.io/badge/Gallery-35_Projects-F59E0B?style=for-the-badge&labelColor=111827" alt="35 project gallery" />
  <img src="https://img.shields.io/badge/App-PWA-EC4899?style=for-the-badge&labelColor=111827&logo=pwa&logoColor=white" alt="PWA" />
  <img src="https://img.shields.io/badge/Deploy-Cloudflare_Pages-F38020?style=for-the-badge&labelColor=111827&logo=cloudflarepages&logoColor=white" alt="Cloudflare Pages" />
  <img src="https://img.shields.io/badge/Author-Roberto_Laksmana-38BDF8?style=for-the-badge&labelColor=111827" alt="Roberto Laksmana" />
</p>

### A responsive PWA workspace that transforms learning projects into visual applications

Roberto Studio combines a low-code-inspired landing page, protected local workspace, algorithm visualizers, JavaScript and React-style applications, project references, an AI Engineer personal website, and a public-safe interactive résumé.

**GitHub About description**

> 🧩 Roberto Studio: 28 aplikasi interaktif, visualisasi algoritma, dashboard, portfolio AI Engineer, resume, dan PWA Cloudflare.

[🌐 Live Website](https://app-smith-website.pages.dev/) · [🧩 Workspace](https://app-smith-website.pages.dev/workspace.html) · [👤 Personal Website](https://app-smith-website.pages.dev/personal-website.html) · [📄 Resume Studio](https://app-smith-website.pages.dev/resume-studio.html) · [💻 GitHub Profile](https://github.com/yirassssindaba-coder)

</div>

---

## Table of Contents

- [Project Vision](#project-vision)
- [Current Status](#current-status)
- [Platform Capabilities](#platform-capabilities)
- [Screenshots and Module Guide](#screenshots-and-module-guide)
- [Architecture](#architecture)
- [Technology Stack](#technology-stack)
- [Authentication and Persistence](#authentication-and-persistence)
- [PWA Installation](#pwa-installation)
- [Responsive Design and Accessibility](#responsive-design-and-accessibility)
- [Local Installation](#local-installation)
- [Cloudflare Pages Deployment](#cloudflare-pages-deployment)
- [Project Structure](#project-structure)
- [Validation Notes](#validation-notes)
- [Security and Privacy](#security-and-privacy)
- [Known Limitations](#known-limitations)
- [Future Improvement Plan](#future-improvement-plan)
- [Official and Upstream References](#official-and-upstream-references)
- [License and Attribution](#license-and-attribution)
- [Author](#author)

---

## ✨ Project Vision

Roberto Studio is designed as one coherent place where a recruiter, learner, or developer can inspect practical application interfaces instead of reading isolated assignment names. The project follows these principles:

1. **Every concept should be visible.** Algorithms are represented by interactive controls, graphs, boards, trees, and data structures.
2. **Applications should demonstrate real workflows.** Task management, inventory, SQL, files, CV editing, testing, and games use working browser interactions.
3. **The interface should remain recruiter-friendly.** Portfolio, resume, project references, GitHub links, CodePen references, and official briefs are placed close to the relevant module.
4. **The Cloudflare package should remain lightweight.** The production build is static, dependency-free at runtime, and does not require an npm build command.
5. **Mobile and desktop should both be usable.** Navigation, tables, visualizers, cards, forms, and horizontal workspaces adapt to narrow screens.
6. **Third-party work must remain clearly attributed.** Upstream repositories are references, not claims of ownership.

---

## ✅ Current Status

> **Cloudflare-ready static production prototype with local browser authentication and installable PWA support**

### Implemented

- animated sign-up and login interface;
- PBKDF2-based local password derivation for the browser demonstration;
- protected workspace session and logout;
- responsive enterprise dashboard and command palette;
- dark and light themes with readable contrast;
- 13 interactive algorithm applications;
- 13 interactive JavaScript, React-style, database, and Node-style applications;
- 40-project The Odin Project reference library;
- direct official-brief, GitHub, and CodePen links;
- AI Engineer personal website;
- interactive public-safe resume studio and attached PDF;
- modern vertical and horizontal scrollbars;
- install prompt, manifest, service worker, icons, offline shell, and cache upgrade logic;
- Cloudflare Pages root structure with no wrapper directory or `_worker.js` dependency.

### Gallery interpretation

- **Projects 01–29 and 34–35:** working interfaces available in the deployment.
- **Projects 30–33:** curated full-stack references displayed in Project Library; their original backends are not bundled into the static Pages build.

---

## 🌟 Platform Capabilities

| Area | Capabilities |
|---|---|
| Landing and Auth | Sign up, login, password visibility, responsive modal, local session, logout |
| Dashboard | Metrics, activity charts, modules, project data, quick commands |
| Algorithm Visual Lab | Cipher, strings, stocks, sorting, games, recursion, linked structures, trees, BFS |
| Application Studio | Tasks, weather, testing, games, CV, commerce, SQL, travel, messages, inventory, membership, files |
| Project Library | Searchable official briefs, GitHub references, CodePen references, categories |
| Personal Website | AI Engineer hero, skills, projects, credentials, contact, animated visual scene |
| Resume Studio | Editor, A4 preview, layout controls, density, accent, zoom, print and PDF access |
| PWA | Manifest, icons, service worker, offline shell, install button |
| Responsive UI | Desktop sidebar, mobile drawer, touch-friendly controls, horizontal workspace scrolling |

---

## 🖼️ Screenshots and Module Guide

All gallery screenshots are stored with lowercase relative paths so they render correctly when the repository is cloned or viewed from another branch.

```text
docs/
└── screenshots/
    ├── 01-sign-up-form.png
    ├── 02-admin-dashboard.png
    ├── ...
    └── 35-building-your-resume.png
```

> [!NOTE]
> Screenshots 30–33 document the Project Library reference cards. They do not claim that Ghost, the photo-tagging backend, Hive, or SocialEcho are bundled into the static deployment.

### 01 | Sign-Up Form

**Status:** Live inside Roberto Studio  
**Purpose:** Form login dan pendaftaran animasi dengan flip effect, glass effect, dan password visibility.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form)  
**Reference repository:** [mdsahban/login-signup-form](https://github.com/mdsahban/login-signup-form)  
**CodePen:** [Open visual reference](https://codepen.io/Laing91/pen/qBQXyNx)

<a href="./docs/screenshots/01-sign-up-form.png">
  <img src="./docs/screenshots/01-sign-up-form.png" width="94%" alt="Roberto Studio screenshot for Sign-Up Form" />
</a>

### 02 | Admin Dashboard

**Status:** Live inside Roberto Studio  
**Purpose:** Dashboard React responsif dengan sidebar, kartu statistik, grafik, dan animasi.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard)  
**Reference repository:** [burakorkmez/react-admin-dashboard](https://github.com/burakorkmez/react-admin-dashboard)  
**CodePen:** [Open visual reference](https://codepen.io/stianovesen/pen/RwJLEJJ)

<a href="./docs/screenshots/02-admin-dashboard.png">
  <img src="./docs/screenshots/02-admin-dashboard.png" width="94%" alt="Roberto Studio screenshot for Admin Dashboard" />
</a>

### 03 | Homepage / Developer Portfolio

**Status:** Live inside Roberto Studio  
**Purpose:** Portfolio Next.js modern dengan Tailwind CSS, Shadcn UI, dan Magic UI.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/advanced-html-and-css-homepage)  
**Reference repository:** [magicuidesign/portfolio](https://github.com/magicuidesign/portfolio)  
**CodePen:** [Open visual reference](https://codepen.io/kellychi/pen/GRdKXqe)

<a href="./docs/screenshots/03-homepage-developer-portfolio.png">
  <img src="./docs/screenshots/03-homepage-developer-portfolio.png" width="94%" alt="Roberto Studio screenshot for Homepage / Developer Portfolio" />
</a>

---

### 04 | Caesar Cipher

**Status:** Live inside Roberto Studio  
**Purpose:** Workspace browser visual untuk Caesar Cipher, encoding, encryption, dan transformasi teks.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-caesar-cipher)  
**Reference repository:** [cryptii/cryptii](https://github.com/cryptii/cryptii)  
**CodePen:** [Open visual reference](https://codepen.io/Recidvst/pen/VdwxOo)

<a href="./docs/screenshots/04-caesar-cipher.png">
  <img src="./docs/screenshots/04-caesar-cipher.png" width="94%" alt="Roberto Studio screenshot for Caesar Cipher" />
</a>

### 05 | Sub Strings / String Search

**Status:** Live inside Roberto Studio  
**Purpose:** Aplikasi visualisasi algoritma termasuk pencarian dan pemrosesan string.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-sub-strings)  
**Reference repository:** [abhishek-yadav-aps/Algorithm-Visualizer](https://github.com/abhishek-yadav-aps/Algorithm-Visualizer)  
**CodePen:** [Open visual reference](https://codepen.io/Azizi/pen/MWweQrX)

<a href="./docs/screenshots/05-sub-strings.png">
  <img src="./docs/screenshots/05-sub-strings.png" width="94%" alt="Roberto Studio screenshot for Sub Strings / String Search" />
</a>

### 06 | Stock Picker

**Status:** Live inside Roberto Studio  
**Purpose:** Aplikasi pengelolaan saham dan perhitungan keuntungan atau kerugian portfolio.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-stock-picker)  
**Reference repository:** [Anay-Pampatwar/Stocks-Portfolio-Manager-React-App](https://github.com/Anay-Pampatwar/Stocks-Portfolio-Manager-React-App)  
**CodePen:** [Open visual reference](https://codepen.io/csharp72/pen/VLmRRY)

<a href="./docs/screenshots/06-stock-picker.png">
  <img src="./docs/screenshots/06-stock-picker.png" width="94%" alt="Roberto Studio screenshot for Stock Picker" />
</a>

### 07 | Bubble Sort

**Status:** Live inside Roberto Studio  
**Purpose:** Visualisasi Bubble Sort, Merge Sort, Quick Sort, dan Insertion Sort.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-bubble-sort)  
**Reference repository:** [rkvalandas/sorting-visualizer](https://github.com/rkvalandas/sorting-visualizer)  
**CodePen:** [Open visual reference](https://codepen.io/lonekorean/pen/bqjzqr)

<a href="./docs/screenshots/07-bubble-sort.png">
  <img src="./docs/screenshots/07-bubble-sort.png" width="94%" alt="Roberto Studio screenshot for Bubble Sort" />
</a>

### 08 | Hangman

**Status:** Live inside Roberto Studio  
**Purpose:** Permainan Hangman responsif menggunakan React, TypeScript, dan Tailwind CSS.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-hangman)  
**Reference repository:** [DustyDogCodex/hangman](https://github.com/DustyDogCodex/hangman)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=responsive%20hangman%20game)

<a href="./docs/screenshots/08-hangman.png">
  <img src="./docs/screenshots/08-hangman.png" width="94%" alt="Roberto Studio screenshot for Hangman" />
</a>

### 09 | Custom Enumerables

**Status:** Live inside Roberto Studio  
**Purpose:** Sandbox visual untuk operasi map, filter, group, sort, reduce, dan transformasi data.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-custom-enumerables)  
**Reference repository:** [discoveryjs/jora](https://github.com/discoveryjs/jora)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=array%20map%20filter%20reduce%20visualizer)

<a href="./docs/screenshots/09-custom-enumerables.png">
  <img src="./docs/screenshots/09-custom-enumerables.png" width="94%" alt="Roberto Studio screenshot for Custom Enumerables" />
</a>

### 10 | Connect Four

**Status:** Live inside Roberto Studio  
**Purpose:** Permainan Connect Four browser berbasis HTML, CSS, dan JavaScript.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-connect-four)  
**Reference repository:** [kubowania/connect-four](https://github.com/kubowania/connect-four)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=connect%20four%20javascript)

<a href="./docs/screenshots/10-connect-four.png">
  <img src="./docs/screenshots/10-connect-four.png" width="94%" alt="Roberto Studio screenshot for Connect Four" />
</a>

### 11 | TDD Connect Four / AI Connect Four

**Status:** Live inside Roberto Studio  
**Purpose:** Connect Four dengan web UI, Minimax, reinforcement learning, replay, dan evaluasi model.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/ruby-connect-four)  
**Reference repository:** [dominik3141/connect-four](https://github.com/dominik3141/connect-four)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=connect%20four%20AI%20minimax)

<a href="./docs/screenshots/11-tdd-connect-four-ai.png">
  <img src="./docs/screenshots/11-tdd-connect-four-ai.png" width="94%" alt="Roberto Studio screenshot for TDD Connect Four / AI Connect Four" />
</a>

### 12 | Recursion

**Status:** Live inside Roberto Studio  
**Purpose:** Visualizer recursive calls dan call-stack dalam bentuk pohon animasi.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/javascript-recursion)  
**Reference repository:** [amoshnin/R-Recursion.Tree.Visualizer](https://github.com/amoshnin/R-Recursion.Tree.Visualizer)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=recursion%20tree%20visualizer)

<a href="./docs/screenshots/12-recursion-tree.png">
  <img src="./docs/screenshots/12-recursion-tree.png" width="94%" alt="Roberto Studio screenshot for Recursion" />
</a>

### 13 | Linked Lists

**Status:** Live inside Roberto Studio  
**Purpose:** Text editor browser yang memakai doubly linked list untuk undo dan redo.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/javascript-linked-lists)  
**Reference repository:** [IndexPosition/Linked-List-Text-Editor](https://github.com/IndexPosition/Linked-List-Text-Editor)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=linked%20list%20visualizer)

<a href="./docs/screenshots/13-linked-lists.png">
  <img src="./docs/screenshots/13-linked-lists.png" width="94%" alt="Roberto Studio screenshot for Linked Lists" />
</a>

### 14 | HashMap

**Status:** Live inside Roberto Studio  
**Purpose:** Platform visual struktur data dan algoritma dengan input interaktif.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/javascript-hashmap)  
**Reference repository:** [RhythmPahwa14/AlgoVisualizer](https://github.com/RhythmPahwa14/AlgoVisualizer)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=hashmap%20visualizer)

<a href="./docs/screenshots/14-hashmap.png">
  <img src="./docs/screenshots/14-hashmap.png" width="94%" alt="Roberto Studio screenshot for Hashmap" />
</a>

### 15 | Binary Search Trees

**Status:** Live inside Roberto Studio  
**Purpose:** Aplikasi browser untuk membuat, mengedit, menyimpan, dan mengekspor struktur tree.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/javascript-binary-search-trees)  
**Reference repository:** [D-Gaspa/InteractiveTreeVisualizer](https://github.com/D-Gaspa/InteractiveTreeVisualizer)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=binary%20search%20tree%20visualizer)

<a href="./docs/screenshots/15-binary-search-trees.png">
  <img src="./docs/screenshots/15-binary-search-trees.png" width="94%" alt="Roberto Studio screenshot for Binary Search Trees" />
</a>

### 16 | Knights Travails / Shortest Path

**Status:** Live inside Roberto Studio  
**Purpose:** Visualisasi BFS, shortest path, maze generation, dan traversal grid.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/javascript-knights-travails)  
**Reference repository:** [jayden-woo/pathfinding-visualizer](https://github.com/jayden-woo/pathfinding-visualizer)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=knight%20shortest%20path%20BFS)

<a href="./docs/screenshots/16-knights-travails.png">
  <img src="./docs/screenshots/16-knights-travails.png" width="94%" alt="Roberto Studio screenshot for Knights Travails / Shortest Path" />
</a>

---

### 17 | Todo List

**Status:** Live inside Roberto Studio  
**Purpose:** Task manager lengkap dengan projects, schedule, time tracking, tags, dan integrasi kerja.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-javascript-todo-list)  
**Reference repository:** [super-productivity/super-productivity](https://github.com/super-productivity/super-productivity)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=advanced%20todo%20task%20manager)

<a href="./docs/screenshots/17-todo-list.png">
  <img src="./docs/screenshots/17-todo-list.png" width="94%" alt="Roberto Studio screenshot for Todo List" />
</a>

### 18 | Weather App

**Status:** Live inside Roberto Studio  
**Purpose:** Cuaca saat ini, prakiraan, geolocation, peta, dan dynamic backgrounds.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-javascript-weather-app)  
**Reference repository:** [iamsainikhil/weather-react](https://github.com/iamsainikhil/weather-react)  
**CodePen:** [Open visual reference](https://codepen.io/iamsainikhil/pen/BqNzbM)

<a href="./docs/screenshots/18-weather-app.png">
  <img src="./docs/screenshots/18-weather-app.png" width="94%" alt="Roberto Studio screenshot for Weather App" />
</a>

### 19 | Testing Practice

**Status:** Live inside Roberto Studio  
**Purpose:** Playground visual untuk memeriksa DOM dan mencoba Testing Library queries.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-javascript-testing-practice)  
**Reference repository:** [testing-library/testing-playground](https://github.com/testing-library/testing-playground)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=DOM%20testing%20playground)

<a href="./docs/screenshots/19-testing-practice.png">
  <img src="./docs/screenshots/19-testing-practice.png" width="94%" alt="Roberto Studio screenshot for Testing Practice" />
</a>

### 20 | Battleship

**Status:** Live inside Roberto Studio  
**Purpose:** Battleship multiplayer real-time dengan React, Socket.IO, placement board, dan matchmaking.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-javascript-battleship)  
**Reference repository:** [scc416/battleship](https://github.com/scc416/battleship)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=battleship%20javascript%20game)

<a href="./docs/screenshots/20-battleship.png">
  <img src="./docs/screenshots/20-battleship.png" width="94%" alt="Roberto Studio screenshot for Battleship" />
</a>

### 21 | CV Application

**Status:** Live inside Roberto Studio  
**Purpose:** CV Builder interaktif dengan section editor, live preview, customization, dan PDF download.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-react-new-cv-application)  
**Reference repository:** [jumboduck/CV-Builder](https://github.com/jumboduck/CV-Builder)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=resume%20cv%20builder)

<a href="./docs/screenshots/21-cv-application.png">
  <img src="./docs/screenshots/21-cv-application.png" width="94%" alt="Roberto Studio screenshot for CV Application" />
</a>

### 22 | Memory Card

**Status:** Live inside Roberto Studio  
**Purpose:** Memory Card Game dengan flip animation dan card-matching logic.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/react-new-memory-card)  
**Reference repository:** [code-sketch/memory-game](https://github.com/code-sketch/memory-game)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=memory%20card%20game)

<a href="./docs/screenshots/22-memory-card.png">
  <img src="./docs/screenshots/22-memory-card.png" width="94%" alt="Roberto Studio screenshot for Memory Card" />
</a>

### 23 | Shopping Cart

**Status:** Live inside Roberto Studio  
**Purpose:** E-commerce React dengan katalog, autentikasi, shopping cart, Firebase, dan Redux.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-react-new-shopping-cart)  
**Reference repository:** [jgudo/ecommerce-react](https://github.com/jgudo/ecommerce-react)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=react%20ecommerce%20shopping%20cart)

<a href="./docs/screenshots/23-shopping-cart.png">
  <img src="./docs/screenshots/23-shopping-cart.png" width="94%" alt="Roberto Studio screenshot for Shopping Cart" />
</a>

### 24 | SQL Zoo / SQL Editor

**Status:** Live inside Roberto Studio  
**Purpose:** SQL editor berbasis browser untuk menjalankan query dan mengelola koneksi database.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/databases-sql-zoo)  
**Reference repository:** [sqlpad/sqlpad](https://github.com/sqlpad/sqlpad)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=SQL%20editor%20database%20dashboard)

<a href="./docs/screenshots/24-sql-zoo-sqlpad.png">
  <img src="./docs/screenshots/24-sql-zoo-sqlpad.png" width="94%" alt="Roberto Studio screenshot for SQL Zoo / SQL Editor" />
</a>

### 25 | Basic Informational Site

**Status:** Live inside Roberto Studio  
**Purpose:** Website informasi wisata modern dan responsif sebagai referensi informational site.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/nodejs-basic-informational-site)  
**Reference repository:** [codewithsadee/tourly](https://github.com/codewithsadee/tourly)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=responsive%20travel%20website)

<a href="./docs/screenshots/25-basic-informational-site.png">
  <img src="./docs/screenshots/25-basic-informational-site.png" width="94%" alt="Roberto Studio screenshot for Basic Informational Site" />
</a>

### 26 | Mini Message Board

**Status:** Live inside Roberto Studio  
**Purpose:** Message board dengan Node.js, Express, views, routing, dan form posting.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-nodejs-mini-message-board)  
**Reference repository:** [salvillalon45/MiniMessageBoard-theOdinProject](https://github.com/salvillalon45/MiniMessageBoard-theOdinProject)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=message%20board%20app)

<a href="./docs/screenshots/26-mini-message-board.png">
  <img src="./docs/screenshots/26-mini-message-board.png" width="94%" alt="Roberto Studio screenshot for Mini Message Board" />
</a>

### 27 | Inventory Application

**Status:** Live inside Roberto Studio  
**Purpose:** Inventory dashboard dengan produk, stok, expiry tracking, sales, profit, dan grafik.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-nodejs-inventory-application)  
**Reference repository:** [djunicode/inventory-management-web](https://github.com/djunicode/inventory-management-web)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=inventory%20management%20dashboard)

<a href="./docs/screenshots/27-inventory-application.png">
  <img src="./docs/screenshots/27-inventory-application.png" width="94%" alt="Roberto Studio screenshot for Inventory Application" />
</a>

### 28 | Members Only

**Status:** Live inside Roberto Studio  
**Purpose:** Aplikasi komunitas dengan registration, login, membership, roles, dan authorization.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-nodejs-members-only)  
**Reference repository:** [hussein-m-kandil/odin-members-only](https://github.com/hussein-m-kandil/odin-members-only)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=members%20community%20dashboard)

<a href="./docs/screenshots/28-members-only.png">
  <img src="./docs/screenshots/28-members-only.png" width="94%" alt="Roberto Studio screenshot for Members Only" />
</a>

### 29 | File Uploader

**Status:** Live inside Roberto Studio  
**Purpose:** File manager visual dengan drag-and-drop upload, folders, preview, ZIP, dan permissions.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/nodejs-file-uploader)  
**Reference repository:** [filegator/filegator](https://github.com/filegator/filegator)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=drag%20drop%20file%20manager)

<a href="./docs/screenshots/29-file-uploader.png">
  <img src="./docs/screenshots/29-file-uploader.png" width="94%" alt="Roberto Studio screenshot for File Uploader" />
</a>

---

### 30 | Blog API / Publishing Platform

**Status:** Curated full-stack reference card  
**Purpose:** Platform publishing lengkap dengan editor, admin panel, content API, themes, dan members.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-nodejs-blog-api)  
**Reference repository:** [TryGhost/Ghost](https://github.com/TryGhost/Ghost)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Blog%20API)

<a href="./docs/screenshots/30-blog-api-publishing-platform.png">
  <img src="./docs/screenshots/30-blog-api-publishing-platform.png" width="94%" alt="Roberto Studio screenshot for Blog API / Publishing Platform" />
</a>

### 31 | Where's Waldo / Photo Tagging App

**Status:** Curated full-stack reference card  
**Purpose:** Photo-tagging game dengan image coordinates, timer, validation, dan leaderboard.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/nodejs-where-s-waldo-a-photo-tagging-app)  
**Reference repository:** [wes-q/top-photo-tagging-app](https://github.com/wes-q/top-photo-tagging-app)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Where%27s%20Waldo%20%28A%20Photo%20Tagging%20App%29)

<a href="./docs/screenshots/31-wheres-waldo-photo-tagging.png">
  <img src="./docs/screenshots/31-wheres-waldo-photo-tagging.png" width="94%" alt="Roberto Studio screenshot for Where'S Waldo / Photo Tagging App" />
</a>

### 32 | Messaging App

**Status:** Curated full-stack reference card  
**Purpose:** Chat application dengan private/group chat, Socket.IO, notifications, dan responsive UI.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/nodejs-messaging-app)  
**Reference repository:** [Mahrjose/Hive](https://github.com/Mahrjose/Hive)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Messaging%20App)

<a href="./docs/screenshots/32-messaging-app.png">
  <img src="./docs/screenshots/32-messaging-app.png" width="94%" alt="Roberto Studio screenshot for Messaging App" />
</a>

### 33 | Odin-Book / Social Network

**Status:** Curated full-stack reference card  
**Purpose:** Social network full-stack dengan profiles, posts, follows, likes, comments, dan moderation.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-nodejs-odin-book)  
**Reference repository:** [nz-m/SocialEcho](https://github.com/nz-m/SocialEcho)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Odin-Book)

<a href="./docs/screenshots/33-odin-book-social-network.png">
  <img src="./docs/screenshots/33-odin-book-social-network.png" width="94%" alt="Roberto Studio screenshot for Odin-Book / Social Network" />
</a>

---

### 34 | Building Your Personal Website

**Status:** Live inside Roberto Studio  
**Purpose:** Portfolio 3D React dan Three.js dengan model, planet, stars, projects, dan contact form.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-getting-hired-building-your-personal-website)  
**Reference repository:** [ladunjexa/reactjs18-3d-portfolio](https://github.com/ladunjexa/reactjs18-3d-portfolio)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Building%20Your%20Personal%20Website)

<a href="./docs/screenshots/34-personal-website.png">
  <img src="./docs/screenshots/34-personal-website.png" width="94%" alt="Roberto Studio screenshot for Building Your Personal Website" />
</a>

### 35 | Building Your Resume

**Status:** Live inside Roberto Studio  
**Purpose:** Resume builder open-source dengan templates, live preview, PDF export, dan self-hosting.  
**Official brief:** [Open The Odin Project assignment](https://www.theodinproject.com/lessons/node-path-getting-hired-building-your-resume)  
**Reference repository:** [amruthpillai/reactive-resume](https://github.com/amruthpillai/reactive-resume)  
**CodePen:** [Open visual reference](https://codepen.io/search/pens?q=The%20Odin%20Project%20Building%20Your%20Resume)

<a href="./docs/screenshots/35-building-your-resume.png">
  <img src="./docs/screenshots/35-building-your-resume.png" width="94%" alt="Roberto Studio screenshot for Building Your Resume" />
</a>

---

## 🧱 Architecture

```mermaid
flowchart TB
    Visitor[Visitor] --> Landing[Landing Page]
    Landing --> Auth[Local Sign Up and Login]
    Auth --> Workspace[Roberto Studio Workspace]
    Workspace --> Dashboard[Executive Dashboard]
    Workspace --> Algo[Algorithm Visual Lab]
    Workspace --> Apps[Application Studio]
    Workspace --> Library[Project Reference Library]
    Workspace --> Portfolio[AI Engineer Personal Website]
    Workspace --> Resume[Interactive Resume Studio]
    Algo --> BrowserState[(Browser State)]
    Apps --> BrowserState
    Resume --> BrowserState
    Workspace --> PWA[Manifest and Service Worker]
    PWA --> Offline[Offline Application Shell]
```

### Deployment boundary

```text
Cloudflare Pages
├── static HTML, CSS, and JavaScript
├── browser-local authentication demonstration
├── localStorage application state
├── screenshots and documentation
├── service worker and manifest
└── public-safe CV PDF

Separate server required for production versions of
├── realtime multiplayer
├── cross-device accounts
├── relational database persistence
├── server file storage
├── private API keys
└── the upstream Ghost, Hive, SocialEcho, SQLPad, and FileGator systems
```

---

## 🛠️ Technology Stack

| Technology | Responsibility |
|---|---|
| HTML5 | Semantic landing page, workspace, personal website, resume, dialogs |
| CSS3 | Responsive layouts, Grid, Flexbox, dark theme, animated visuals, scrollbars |
| Vanilla JavaScript | Authentication flow, navigation, state, games, data structures, editors |
| Web Crypto API | PBKDF2 password derivation for local demonstration accounts |
| localStorage and sessionStorage | Accounts, sessions, module state, tasks, inventory, and drafts |
| Canvas | Personal website starfield and visual atmosphere |
| Service Worker | Offline application shell and cache versioning |
| Web App Manifest | Installable PWA identity and icons |
| Cloudflare Pages | Static production hosting |
| GitHub Markdown | Documentation, gallery, relative screenshot links, source attribution |

---

## 🔐 Authentication and Persistence

The default Cloudflare build uses a local demonstration account system:

```text
Sign up
  → validate name, email, password, confirmation, and terms
  → generate a random salt
  → derive a PBKDF2 SHA-256 value
  → store the local demonstration user record
  → create a remembered or session-only workspace session
  → open the protected dashboard
```

This is suitable for a portfolio demonstration. Production authentication should use a trusted server-side identity system and secure cookies rather than browser-local account records.

---

## 📲 PWA Installation

The project includes:

```text
manifest.webmanifest
sw.js
pwa-install.js
assets/icon-192.png
assets/icon-512.png
assets/icon-maskable-512.png
```

On a supported browser, press **Install app**. When the native install event is unavailable, use the browser menu and choose **Install app**, **Add to Home Screen**, or the equivalent option.

---

## ♿ Responsive Design and Accessibility

- desktop sidebar and mobile drawer navigation;
- touch-sized controls and responsive forms;
- labels for inputs and interactive controls;
- visible focus states;
- readable light and dark theme contrast;
- reduced-motion support;
- scrollable data tables and workbenches;
- modern vertical and horizontal scrollbars;
- responsive algorithm boards, cards, editors, graphs, and resume preview;
- semantic headings and descriptive screenshot alternative text.

Recommended manual checks: keyboard-only navigation, 200% zoom, mobile portrait/landscape, dark theme, reduced motion, and offline reload.

---

## 💻 Local Installation

No package installation is required for the static build.

### Python

```bash
python -m http.server 8080
```

### Node.js

```bash
npx serve .
```

Open:

```text
http://localhost:8080
```

Do not rely on `file://` for PWA testing because service workers, origin-scoped storage, and some browser security features require localhost or HTTPS.

---

## ☁️ Cloudflare Pages Deployment

1. Open Cloudflare Dashboard.
2. Select **Workers & Pages**.
3. Open or create a Pages project.
4. Choose **Direct Upload**.
5. Upload the V12 ZIP.
6. Confirm that `index.html` is at the ZIP root.
7. Publish as the production deployment.
8. Perform one hard refresh after replacing an older service worker.

No build command, framework preset, root directory, or output directory is required.

---

## 📁 Project Structure

```text
.
├── index.html
├── workspace.html
├── dashboard.html
├── personal-website.html
├── resume-studio.html
├── styles.css
├── workspace.css
├── personal-website.css
├── resume-studio.css
├── app.js
├── auth.js
├── workspace.js
├── algorithm-lab.js
├── application-lab.js
├── project-data.js
├── personal-website.js
├── resume-studio.js
├── manifest.webmanifest
├── sw.js
├── pwa-install.js
├── _headers
├── 404.html
├── assets/
│   ├── icons
│   └── Roberto_ID_PUBLIC_CV_SAFE.pdf
├── docs/
│   └── screenshots/
│       └── 35 documented project images
├── PROJECT_REFERENCES.md
├── ALGORITHM_REFERENCES.md
├── APPLICATION_REFERENCES.md
├── GITHUB_ABOUT_AND_TOPICS_V12.txt
└── README_GITHUB_ROBERTO_STUDIO_V12.txt
```

---

## 📈 Validation Notes

The V12 documentation build was checked for:

- 35 screenshot files present;
- lowercase relative screenshot paths;
- screenshot filenames mapped to all curated projects;
- root-level `index.html`;
- JavaScript source files retained;
- PWA manifest, service worker, and icons retained;
- no `_worker.js` requirement;
- ZIP integrity;
- no file exceeding the Cloudflare Pages per-asset upload limit;
- README size below GitHub’s rendering truncation threshold.

The screenshots document the browser-native build. They do not prove that every upstream full-stack repository is running inside this static deployment.

---

## 🛡️ Security and Privacy

- never place production passwords, API keys, tokens, or private credentials in frontend files;
- treat localStorage as application convenience, not a secret vault;
- use the public-safe CV only for broad sharing;
- keep raw credential IDs and original academic evidence private;
- use parameterized queries and server-side validation when replacing demonstrations with real backends;
- add rate limits, CSRF protection, secure cookies, authorization, audit logs, and file scanning for production services;
- retain third-party licenses and attribution notices.

---

## ⚠️ Known Limitations

- local accounts do not synchronize across browsers or devices;
- clearing browser storage removes local demonstration data;
- weather and several operational modules use browser demonstration data rather than production services;
- realtime Battleship, messaging, social networking, and publishing require separate backends;
- SQLPad, Ghost, FileGator, Hive, and SocialEcho are upstream references rather than embedded server runtimes;
- CodePen availability depends on the external author and service;
- official curriculum pages and upstream repositories can change;
- the project does not claim ownership of Appsmith, The Odin Project, or referenced repositories.

---

## 🗺️ Future Improvement Plan

### Phase 1 — Documentation and releases

- [ ] Publish V12 as a tagged GitHub release.
- [ ] Add changelog and release checksums.
- [ ] Add a 1280×640 repository social preview.
- [ ] Run automatic link validation for official briefs, GitHub, and CodePen.

### Phase 2 — Testing

- [ ] Add Playwright smoke tests for every module.
- [ ] Add axe accessibility tests.
- [ ] Add mobile visual regression screenshots.
- [ ] Add Lighthouse CI with documented results.

### Phase 3 — Production services

- [ ] Replace local authentication with server-side sessions.
- [ ] Add PostgreSQL-backed projects, inventory, messages, and accounts.
- [ ] Add object storage and malware scanning for files.
- [ ] Add WebSocket infrastructure for realtime applications.

### Phase 4 — Operations

- [ ] Add structured logs, metrics, traces, and alerting.
- [ ] Add backup and recovery procedures.
- [ ] Add CSP reporting and dependency/security scanning.
- [ ] Add user-controlled data export and deletion.

---

## 📚 Official and Upstream References

- [GitHub README documentation](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes)
- [GitHub topics documentation](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/classifying-your-repository-with-topics)
- [The Odin Project](https://www.theodinproject.com/)
- [Cloudflare Pages](https://developers.cloudflare.com/pages/)
- [Progressive Web Apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
- [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)
- [GitHub profile](https://github.com/yirassssindaba-coder)

The module sections above contain the exact official brief and upstream repository for each project.

---

## 📄 License and Attribution

Before redistribution or commercial use:

1. retain the license and notices for Roberto Studio code;
2. inspect the license of every upstream repository;
3. preserve author attribution where required;
4. do not copy branding, proprietary assets, or complete layouts without permission;
5. do not present third-party repositories as Roberto’s original source code;
6. link buttons to Roberto-owned repositories after the corresponding implementations are rebuilt independently.

This README is technical documentation, not legal advice.

---

## 👤 Author

<div align="center">

### Roberto Ocaviantyo Tahta Laksmana

**AI Engineer • Full-Stack Developer • IT & Application Support • Interactive Systems Builder**

[GitHub](https://github.com/yirassssindaba-coder) · [Email](mailto:yirassssindaba@gmail.com) · [Personal Website](https://app-smith-website.pages.dev/personal-website.html) · [Resume](https://app-smith-website.pages.dev/resume-studio.html)

<br>

<img src="https://capsule-render.vercel.app/api?type=waving&height=130&section=footer&color=0:27C2FF,35:6D3AF2,70:4C1D95,100:120B2E" alt="Roberto Studio footer" />

**Visualize the concept. Operate the workflow. Present the evidence.**

</div>