DEV Community

Cover image for Synaptic OS: A Maker Portfolio
Ruchika De Zoysa
Ruchika De Zoysa

Posted on

Synaptic OS: A Maker Portfolio

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

What I'm Most Proud Of

The progress bar and loading animations
Progress bar and loading animation
The 60fps neural mesh
The Neural mesh that runs at 60 fps

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.

Top comments (0)