Synaptic OS: A Maker Portfolio

Ruchika De Zoysa — Sat, 24 Jan 2026 04:22:00 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I'm Ruchika De Zoysa. I don’t just write code; I design and build things that are cool, interesting, or solve problems that i see needs to be addressed.

I’m a jack of all trades by instinct. Over the past three years, my focus was primarily on code. I work across the entire stack — from frontend and backend logic to networks. This portfolio is intentionally designed to expose my personality, so anyone viewing it understands not just what I do, but why I do it as well.

Portfolio

How I Built It

Overview & Ideology

Synaptic Portfolio is a single-page personal portfolio application built with a modern React stack. My design philosophy was desktop-first, as most recruiters review candidates on a desktop. This allowed me to remove the design constraints inherent to mobile-first design and lean into a high-fidelity "Sci-Fi / Neural network" aesthetic with a strong emphasis on motion and a "old operating system" theme.

Tech Stack

Framework: React 19 (via Vite)

Language: TypeScript

Styling: Tailwind CSS (via CDN with custom config)

Animations: Framer Motion, customized HTML5 Canvas

Icons: Lucide React

Build Tool: Vite

Architecture & Configuration

The project follows a flattened, lightweight structure designed for speed:

Root: Entry configurations (vite.config.ts, index.html) and the main App.tsx.
components/: Houses all UI sections (AboutMe, Projects, Skills) and specialized visual components like NeuralNodes.
Entry & Build: I implemented a "zero-bundle-ish" pattern in index.html using an importmap to load React and Framer Motion directly from a CDN (esm.sh). This focuses on rapid prototyping and high deployment speed.

Design System & UI/UX (Design Ideology)

The design language mimics a futuristic interface titled "Synaptic OS." I chose this to bridge the gap between my specialization in ML/AI and my Tinkering background—making the web feel like hardware.

Color Palette: Obsidian (#05070A) for the void, Cyan (#00F2FF) for active status, and Violet (#7000FF) for structural elements.
Typography: JetBrains Mono for data/headers to provide a technical, "terminal" feel.
Interactive Neural Network: A custom HTML5 Canvas implementation (NeuralNodes.tsx) creates a particle system where nodes connect and interact elastically with the cursor, providing a dynamic, "living" background.

Coding Practices & Performance

Functional Design: All components utilize React Hooks (useState, useEffect, useRef).
Performance Engineering: Heavy animations are managed manually via requestAnimationFrame to ensure a consistent 60fps performance separate from React's render cycle.
Type Safety: types.ts defines strict interfaces for all data structures, ensuring the codebase remains maintainable and bug-free.

Google AI Tools & Development Process

Google AI Studio
Used to prototype the System Status narrative and refine the interactive logic for node connections.
Antigravity
Primary debugging tool for high-frequency animations, ensuring the particle system remained fluid and responsive.
Cloud Run & CI/CD
Deployment is fully automated via a GitHub trigger. To meet the challenge requirements, the service was tagged using the gcloud SDK:

# Applying the required challenge label to the service
gcloud run services update ruchika-dominic-de-zoysa \
  --update-labels dev-tutorial=devnewyear2026 \
  --region us-west1

What I'm Most Proud Of

The progress bar and loading animations

The 60fps neural mesh

I intentionally designed this portfolio to be desktop-first. By removing the design constraints of mobile, I was able to build a robust, "Pro" interface that mirrors the complexity of the systems I work on daily.

The Neural Mesh Background: I built a custom HTML5 Canvas particle system where "nodes" drift and connect elastically based on cursor movement. It runs at a buttery-smooth 60fps outside of the main React render cycle to ensure the UI remains snappy.
The "System Boot" Sequence: First impressions matter. The application features a technical "boot-up" state on mount that sets the sci-fi tone before the user even reaches the main navigation.
Deep-Stack Integration: I’m proud of how I’ve translated my experience in backend logic and network infrastructure into a frontend experience that feels like a piece of high-end hardware.

DEV Community: Ruchika De Zoysa