{"id":20631944,"url":"https://github.com/mariarodr1136/portfolio","last_synced_at":"2026-05-07T14:41:01.947Z","repository":{"id":259298239,"uuid":"866754835","full_name":"mariarodr1136/Portfolio","owner":"mariarodr1136","description":"Maria Rodriguez's Portfolio is an interactive website that mimics an old computer desktop, providing a fun and engaging experience as users navigate through draggable icons representing various applications, making it feel like a playful retro computer adventure. 👾","archived":false,"fork":false,"pushed_at":"2025-01-17T03:17:54.000Z","size":82820,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T03:26:26.959Z","etag":null,"topics":["creative-web-design","expressjs","interactive","javascript","old-school-project","retro","retrocomputing","web-development"],"latest_commit_sha":null,"homepage":"https://mariarodr1136.github.io/Portfolio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mariarodr1136.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-10-02T20:15:07.000Z","updated_at":"2025-01-17T03:18:25.000Z","dependencies_parsed_at":"2024-10-24T06:53:23.268Z","dependency_job_id":"13be6598-d5e9-4210-9d7a-8048f354de2e","html_url":"https://github.com/mariarodr1136/Portfolio","commit_stats":null,"previous_names":["mariarodr1136/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariarodr1136%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariarodr1136%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariarodr1136%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariarodr1136%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mariarodr1136","download_url":"https://codeload.github.com/mariarodr1136/Portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242619105,"owners_count":20159001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["creative-web-design","expressjs","interactive","javascript","old-school-project","retro","retrocomputing","web-development"],"created_at":"2024-11-16T14:14:15.185Z","updated_at":"2025-10-28T19:37:56.045Z","avatar_url":"https://github.com/mariarodr1136.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Maria Rodriguez Portfolio\n\n## Overview\nWelcome to my **Portfolio** — an interactive site styled like a vintage **computer desktop**. Drag icons to open apps and tabs for a nostalgic, hands-on experience. Inside the desktop you'll find my **software development projects**, an **about me** section, a **contact form**, a fun **minigame** section, and quick links to my **resume**, **LinkedIn**, and **GitHub**.\n \n The interactive design was built using modern web technologies, including **HTML**, **CSS**, and **JavaScript**, and offers visitors a hands-on experience where they can explore my work and learn more about my technical skills and background. My goal with this project was to create an engaging and memorable user interface while demonstrating my abilities as a developer.\n \nFeel free to click around, move things, and explore. Each icon and tab reveals something new, so your journey through my portfolio is just as interactive as the projects it contains.  \n\n![HTML](https://img.shields.io/badge/HTML-5-orange) ![CSS](https://img.shields.io/badge/CSS-3-blue) ![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow) ![Node.js](https://img.shields.io/badge/Runtime-Node.js-green) ![Express](https://img.shields.io/badge/Backend-Express-lightgrey) ![Nodemailer](https://img.shields.io/badge/Email-Nodemailer-red) ![dotenv](https://img.shields.io/badge/Config-dotenv-success) ![body-parser](https://img.shields.io/badge/Middleware-body--parser-purple) ![WebAssembly](https://img.shields.io/badge/Tech-WebAssembly-654ff0) ![Emscripten](https://img.shields.io/badge/Toolchain-Emscripten-302f8e) ![SDL2](https://img.shields.io/badge/Library-SDL2-0d72b9) ![SDL_mixer](https://img.shields.io/badge/Audio-SDL__mixer-bd3d3a) ![ImGui](https://img.shields.io/badge/UI-ImGui-1b6ac6) ![TinySoundFont](https://img.shields.io/badge/MIDI-TinySoundFont-6a4) ![GitHub Pages](https://img.shields.io/badge/Deploy-GitHub%20Pages-171515)\n\nhttps://github.com/user-attachments/assets/e4c59ba2-cedf-4007-9779-b3876d255786\n\n## Table of Contents\n- [Overview](#overview)\n- [Languages \u0026 Frameworks Used](#languages--frameworks-used)\n- [Purpose](#purpose)\n- [Features](#features)\n- [Code Structure](#code-structure)\n- [Installation](#installation)\n- [Requirements](#requirements)\n- [Inspiration](#inspiration)\n- [Contributing](#contributing)\n- [Contact](#contact)\n\n## Languages \u0026 Frameworks Used\n### Frontend\n- **HTML / CSS / JavaScript (ES6+)**: Core structure, presentation, and client‑side interactivity\n- **Custom Desktop UI**: Windowed modal system (drag, z-index stacking, custom cursor) built from scratch\n- **Accessibility Considerations**: Semantic elements and ARIA roles in interactive components (e.g., Minesweeper grid)\n\n### Games \u0026 Interactive Components\n- **Minesweeper (vanilla JS adaptation)**: Logic port with enhancements \u0026 styling\n- **Space Cadet Pinball (WASM)**: C++ codebase compiled to WebAssembly via Emscripten; uses SDL2, SDL2_mixer for audio, TinySoundFont (TSF) for MIDI playback, and Dear ImGui for in‑game UI overlays\n- **Solitaire (vanilla JS + Vite)**: Original JS/SCSS game bundled with Vite. Built assets are emitted to `docs/games/solitaire` and loaded via an iframe in the “Solitaire” modal. Uses:\n   - JavaScript (ES modules)\n   - SCSS (compiled via `sass`)\n   - Vite (base set to `./` so all asset paths are relative inside the iframe)\n   - All sprites inlined as base64 (no external asset hosting needed)\n\n### Toolchain / Low‑Level\n- **WebAssembly (WASM)**: Performance‑critical C++ game code running in the browser\n- **Emscripten**: Compiles original C++ sources to `.wasm`, generates JS glue \u0026 preloads assets (PINBALL.DAT, sound effects)\n- **SDL2 / SDL2_mixer**: Input, rendering surface, and audio mixing\n- **TinySoundFont (TSF)**: Synth-based MIDI music fallback (selected build path)\n- **ImGui**: Immediate mode UI library (debug / internal overlay elements in the C++ game code)\n\n### Backend / Infrastructure\n- **Node.js + Express**: Lightweight server for local development \u0026 handling contact form POST submissions\n- **Nodemailer**: Email transport for the contact form\n- **dotenv**: Environment variable management\n- **body-parser**: Request body parsing (now built-in to Express \u003e=4.16—kept for clarity)\n\n### Deployment\n- **GitHub Pages**: Static hosting of the portfolio (including built WASM artifacts)\n- **Procfile (optional)**: Enables easy deployment to platforms like Render / Railway / Heroku for the email service if needed\n- **Solitaire bundle**: Vite build writes directly into `docs/games/solitaire` so the iframe at `games/solitaire/index.html` works on static hosts\n\n### Version Control \u0026 Build Utilities\n- **Git / GitHub**: Source hosting \u0026 issue tracking\n- **CMake**: Build system for the C++ game portion\n\n\u003e If you're only interested in the web portfolio, you can ignore the `spacecadet/` source tree — the built artifacts already live under `docs/games/pinball/`.\n\n## Purpose\nThe purpose of this portfolio website is to:\n- Provide a unique and engaging user interface that mimics an old computer desktop environment.\n- Allow visitors to interact with my portfolio by opening and closing tabs, dragging icons, and exploring my work.\n\n## Live Demo\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mariarodr1136.github.io/Portfolio/\" target=\"_blank\"\u003eLive Demo Link\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg width=\"1460\" alt=\"Screenshot 2024-10-22 at 9 02 15 PM\" src=\"https://github.com/user-attachments/assets/b7146a87-27c8-4a74-acce-babf094f21bf\"\u003e\n\n\u003cimg width=\"1461\" alt=\"Screenshot 2024-11-01 at 11 12 16 AM\" src=\"https://github.com/user-attachments/assets/800784d2-1bfa-416f-a935-c25b3b658b25\"\u003e\n\n\n## Features\n- **Retro Desktop Interface**: Windowed modal system evokes classic OS aesthetics (title bars, close buttons, draggable windows).\n- **Custom Pointer \u0026 Interaction Feedback**: The pointer changes contextually (e.g., clickable vs idle) for a tactile feel.\n- **Draggable Icons \u0026 State Preservation**: Icons can be rearranged to personalize layout per session (simple DOM state managed in JS).\n- **Dynamic Modals**: Modular content windows for About, Projects, Resume (PDF / PNG), Social links, Contact form, and Games hub.\n- **Minesweeper Game**: Playable, keyboard \u0026 mouse friendly; adapted from [Jon Ziebell’s repository](https://github.com/ziebelje/minesweeper) with UI and accessibility adjustments.\n- **Space Cadet Pinball (WebAssembly)**: Fully playable port compiled from original reverse‑engineered C++ sources. Audio (effects + music) enabled via SDL_mixer + TSF Synth.\n- **On‑Demand Game Lifecycle**: Pinball iframe is dynamically reloaded / torn down; music stops cleanly when modal closes.\n- **Contact Form Integration**: Submits through Express backend + Nodemailer (optional when served statically you can disable or point to a server endpoint).\n- **Performance Conscious**: Only one heavy WASM game; lazy iframe loading prevents blocking initial content.\n- **Cross‑Platform**: Runs in any modern WASM‑capable browser (Chrome, Firefox, Safari, Edge, Mobile Chromium variants).\n\n## Code Structure\n```\nroot/\n├── docs/                      # GitHub Pages root (served site)\n│   ├── index.html             # Main desktop UI\n│   ├── styles.css             # Portfolio styling\n│   ├── script.js              # Desktop/window/game modal logic\n│   ├── games/pinball/         # Deployed WASM build (html/js/wasm/data)\n│   └── games/solitaire/       # Deployed Solitaire bundle (Vite output)\n├── spacecadet/                # C++ source + CMake for Space Cadet Pinball\n│   ├── CMakeLists.txt\n│   └── SpaceCadetPinball/     # Game source (SDL2, ImGui, audio, assets preload)\n├── games/\n│   └── solitaire-vite/        # Vite project used to build the Solitaire bundle\n├── portfolio-contact-form/    # (If separated) contact form package.json / service\n├── server.js                  # Express server (email relay + static)\n├── package.json               # Node dependencies (backend utilities)\n├── procfile                   # Optional platform process declaration\n└── README.md\n```\nKey files:\n- `docs/games/pinball/SpaceCadetPinball.html|js|wasm|data`: Runtime artifacts produced by Emscripten build.\n- `docs/games/solitaire/index.html` (+ assets): Static Vite build for Solitaire used by the iframe in the “Solitaire” modal.\n- `spacecadet/game_resources/`: Original DAT + WAV assets used at build time (preloaded into virtual FS).\n- `server.js`: Provides `/contact` endpoint (POST) using Nodemailer.\n\n## Installation\n### 1. Clone\n```bash\ngit clone https://github.com/mariarodr1136/Portfolio.git\ncd Portfolio\n```\n\n### 2. Install Node dependencies\nUses `package.json` (no need to manually install each library):\n```bash\nnpm install\n```\n\n### 3. Run locally (static + contact form)\n```bash\nnode server.js\n# or with nodemon if installed: npx nodemon server.js\n```\nVisit: http://localhost:3000/\n\n### 3.1 (Optional) Build the Solitaire game\nRebuild only when you change files under `games/solitaire-vite/`.\n```bash\n# From repo root\nnpm run build:solitaire\n\n# Dev server for Solitaire (standalone, hot reload)\nnpm run dev:solitaire\n```\nThe build writes to `docs/games/solitaire/` which the desktop iframe loads.\n\n### 4. (Optional) Build Space Cadet Pinball from source\nYou only need this if you want to modify the C++ game.\nRequirements: Emscripten SDK (`emsdk`), CMake ≥ 3.16.\n```bash\n# Activate emsdk environment (example path)\nsource ~/emsdk/emsdk_env.sh\ncd spacecadet\nmkdir -p build-web \u0026\u0026 cd build-web\nemcmake cmake -DCMAKE_BUILD_TYPE=Release ..\ncmake --build . -j\ncp bin/SpaceCadetPinball.* ../../docs/games/pinball/\n```\nHard refresh the site to load the new build.\n\n## Requirements\n- Modern browser with WebAssembly support (all evergreen browsers)\n- Node.js 18+ (for local server / contact form)\n- (Optional) Emscripten + CMake if rebuilding the Pinball game\n- Basic web dev knowledge if extending UI\n- Outbound email credentials (SMTP) for Nodemailer (configure via `.env`)\n\n## Inspiration\nThe design of this portfolio website draws inspiration from an old computer desktop screen, allowing users to interact with the portfolio in a nostalgic and playful manner. Icons represent different applications, and users can drag and open them to explore content in a unique style.\n\n---\n\n\u003cimg width=\"1468\" height=\"833\" alt=\"Screenshot 2025-08-11 at 1 08 24 PM\" src=\"https://github.com/user-attachments/assets/be8cc3b4-e534-4082-b681-38050bf6bf4f\" /\u003e\n\u003cimg width=\"1462\" height=\"827\" alt=\"Screenshot 2025-08-11 at 1 09 21 PM\" src=\"https://github.com/user-attachments/assets/00a2ea11-4e9c-404e-b846-14289b04fd9d\" /\u003e\n\n---\n\n## Contributing\nContributions welcome—UI polish, performance tweaks, accessibility improvements, or additional retro mini‑apps.\n\n1. Fork the repo\n2. Create a branch:\n   ```bash\n   git checkout -b feat/my-feature\n   # or\n   git checkout -b fix/issue-###\n   ```\n3. Make changes (for C++ WASM builds, also rebuild \u0026 copy updated artifacts)\n4. Commit:\n   ```bash\n   git commit -m \"feat: add \u003cshort description\u003e\"\n   ```\n5. Push \u0026 open a Pull Request with context / screenshots if UI related\n\n\u003e Tip: If modifying the Pinball C++ sources, keep PRs focused (avoid mixing frontend \u0026 game engine changes unless necessary).\n\n## Contact\nIf you have any questions or feedback, feel free to reach out at [mrodr.contact@gmail.com](mailto:mrodr.contact@gmail.com).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariarodr1136%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariarodr1136%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariarodr1136%2Fportfolio/lists"}