DEV Community: thaumatin

Finding Where You Left Off: Building Animu for the Anime Community

thaumatin — Mon, 02 Mar 2026 05:58:35 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

I built this for the anime community. Anime fans often face a specific problem: managing long-running shows. When a series like Bleach or My Hero Academia takes a long break, or when a viewer simply falls behind, it is hard to remember exactly where they stopped watching. It is also difficult to figure out if a show is worth continuing. Past solutions mostly involve reading through long lists of episode summaries or asking questions on forums like Reddit.

What I Built

I created Animu, a web app designed to solve two big problems for returning or new anime viewers.

First, the app has a cross-season Arc Search. A user might only remember that they stopped watching around the time "Killua met Biski." They can type that phrase into the search bar. The app pulls data for the entire anime franchise and ranks the episodes by relevance. This helps them find the exact episode they need.

Second, the app includes a Sentiment Map. This feature uses AI to read the synopsis of every episode in a series and grades the emotional tone. The app then graphs these scores over the course of the show. If a viewer wants to know if an anime stays lighthearted or eventually turns dark, they can see the overall emotional arc at a glance before they decide to start watching.

Demo

You can try it live here: https://animu.net

Code

The project is completely open source:

ore-codes / animu

Animu

Animu is an open-source web application built for the anime community to solve the problem of managing and exploring long-running shows.

You can try it live here: https://animu.net

Features

Arc Search (Franchise-Wide)

When an anime takes a long break or you fall behind, it is hard to remember exactly where you stopped watching. Searching for specific events across hundreds of episodes is painful.

Animu allows you to search for vague plot points (e.g., "Killua met Biski"). The Arc Search pulls data for the entire anime franchise automatically—crawling related seasons, prequels, and sequels—and ranks the episodes by relevance to help you find the exact episode you need.

Sentiment Map

It is often difficult to figure out if a new show is worth continuing or if its tone matches what you want to watch.

The Sentiment Map feature uses AI to read the synopsis of every episode in a series and…

View on GitHub

How I Built It

The frontend uses React and TypeScript with Tailwind CSS for styling. The application is hosted on Vercel.

For the data side, the app relies on two different APIs. It queries the Jikan API to build the franchise tree and find all related seasons. It then merges that information with the Kitsu API to get the episode synopses. Because Jikan separates every season into a different ID, I wrote a recursive search function that crawls the relations endpoint to group the whole show together.

The Sentiment Map and the fallback Deep Search use the Google Gemini API (gemini-2.5-flash). To keep the API keys secure, I moved these calls off the client. I built a Vercel Serverless proxy backend to handle the requests. The frontend uses the Recharts library to draw the mood graph in the browser.

How I Redesigned My Portfolio with Google Gemini (and Where the AI Actually Let Me Down)

thaumatin — Sun, 01 Mar 2026 00:36:32 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

A few months ago I entered DEV's New Year, New You Portfolio Challenge and decided to rebuild my portfolio from scratch. The brief: use Google AI's tools, deploy to Cloud Run, make it yours.

The result is "Brutalist/Industrial" (original submission post). The aesthetic intentionally rejects the clean, white-space-heavy look that most developer portfolios default to. Exposed grids, heavy typography with the SCHABO typeface, cursor-reactive background cells, a mathematically generated DNA helix that assembles and deconstructs as you scroll. The whole thing runs on Astro with React islands, GSAP for animations, and OGL (a lightweight WebGL library) for a metaballs footer effect.

The most interesting part, at least for this challenge, was the Gemini integration I shipped as actual product features rather than just development tooling:

Pitch Generator: paste any job description into it, and it pulls from a structured knowledge base of my work to generate a tailored pitch explaining why I'm a fit. Not a boilerplate cover letter, a specific one.

Interactive Assistant: a terminal-style interface that answers questions about my stack and recommends relevant projects based on what the visitor is looking for. It uses RAG with my portfolio data as the knowledge base, served through Google Genkit with Zod-validated flows and server-side rendering via Astro's Node adapter.

Both features run on Gemini 2.5 Flash. I wanted to demonstrate that AI in a portfolio doesn't have to mean a chatbot that says "Hi! I'm Ore's assistant." It can be a tool that does something useful for the person looking at your work.

I also used Google Antigravity as my primary AI coding pair throughout the build, and Nano Banana Pro to generate and iterate on imagery to match the industrial art direction.

Demo

https://ore.codes

What I Learned

Google Antigravity handled things I would have spent hours on otherwise: refactoring the original Codegrid template (raw HTML/CSS/JS with a sci-fi theme) into Astro and React components, writing the sine wave math for the DNA helix, catching performance regressions in the WebGL loop.

On the engineering side, it was often genuinely good. Give it a clear, bounded problem ("make this GSAP ScrollTrigger reversible on scroll-up") and it would produce something workable on the first or second attempt.

The design side was a different story, and this was the biggest surprise.

What I didn't anticipate was how little the AI could help with actual creative direction. I had a clear concept (Industrial/Brutalist, raw, engineering-first) but when I tried to use it to develop the visual language, I kept getting suggestions that were technically fine and aesthetically inert. Gradient proposals that belonged on a SaaS landing page. Color palettes that were "safe." Layout ideas that could have come from any template.

The AI wasn't wrong. It just had no sense of what I was going for, and no amount of prompting about "brutalism" or "industrial aesthetic" closed that gap. I ended up doing all the design decision-making myself and using the AI to execute those decisions, not to arrive at them.

The real skill I walked away with is knowing which problems to hand off and which to hold. Bounded, well-specified engineering problems: hand off. Open-ended creative decisions that require taste: hold.

Google Gemini Feedback

My biggest gripe isn't dramatic. No hallucinated APIs, no rate limit crises. The problem was subtler: outputs were consistently competent and consistently generic until I provided so much direction that I might as well have specified the answer in the prompt.

For the Pitch Generator, early iterations produced pitches that were accurate but read like they were assembled from a template. "Ore is a skilled full-stack engineer with experience in X, Y, and Z..." Fine. Forgettable. I spent a lot of time refining the system prompt and knowledge base schema to push the outputs toward something that actually sounded like how I'd pitch myself in a real conversation.

What worked well was the Genkit integration. The type-safe flows with Zod schemas made it straightforward to build production-ready AI features without treating the model as a black box. Server-side rendering through Astro's Node adapter kept API keys secure without any awkward workarounds. That part of the experience was genuinely smooth.

The lesson on the friction side: Gemini rewards precision. Vague prompts produce vague results. When I described exactly what I wanted (the tone, the structure, specific things to emphasize) the quality went up meaningfully. But that precision requires you to already know what good looks like, which means the model can't substitute for taste, only for execution once the taste is established.

What's next

The portfolio is staying live and I plan to keep building on the AI features. The Pitch Generator currently takes a job description and outputs a pitch; I want to add a follow-up mode where the visitor can ask it to emphasize particular aspects of my background, making it more of a back-and-forth tool than a one-shot output.

The Interactive Assistant's knowledge base is static right now, a JSON structure I maintain manually. I want to connect it to a proper database so I can update it as I ship new projects without redeploying.

I'm also looking at adding project search using embeddings instead of keyword matching, so someone can describe what they're trying to build and get back relevant work from my portfolio rather than having to browse everything.

The DNA helix math, the Genkit integration, the Cloud Run deployment pipeline: all of it benefited from AI assistance. The decision to build an industrial portfolio that looks nothing like other portfolios? That one was mine.

First of its kind: Online checkers multiplayer app

thaumatin — Wed, 11 Feb 2026 00:46:37 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Draughts Pro is more than just a checkers app; it’s a tribute to the global popularity of the game. Built with inclusivity at its core, the platform brings internationalization to the forefront, allowing players from different regions to play by their own rules and in their own language.

Key Features

🌍 Truly International: Support for 7 languages and 4 major game variants (International, American/British, Brazilian, and Nigerian).
🤖 Adaptive AI: Four unique difficulty levels designed to challenge everyone from casual players to seasoned strategists.
⚔️ Remote Multiplayer: Challenge friends globally with real-time gameplay.
🕹️ Immersive UX: High-fidelity sound effects (with toggle support) and full keyboard action support for a seamless, distraction-free experience.

Demo

The game is live at: https://draughts.pro

draughts.pro

My Experience with GitHub Copilot CLI

As someone with a strong full-stack background but limited Python and FastAPI experience, GitHub Copilot CLI became my indispensable coding partner throughout this project. It transformed what could have been weeks of documentation diving into a focused, productive build sprint.

How Copilot Accelerated Development

1. Bridging the Knowledge Gap
The CLI helped me rapidly understand Pythonic patterns I wasn't familiar with. When implementing board state management, I could ask directly in my terminal: "How do I validate complex nested game state using Pydantic?" Instead of parsing through documentation, I got targeted examples that I could immediately apply and iterate on.

2. Staying in Flow
Context-switching kills productivity. Rather than bouncing between my IDE, browser tabs, and Stack Overflow, I kept my hands on the keyboard. Questions like "How do I handle WebSocket room management in FastAPI?" got instant, actionable answers without breaking my concentration.

3. Rapid Prototyping with Confidence
The CLI was instrumental for brainstorming complex game logic:

Enforcing variant-specific rules (different capture mechanics for International vs. American rules)
Implementing the AI difficulty levels with appropriate minimax depth
Managing real-time state synchronization across multiplayer sessions

What I appreciated most was Copilot's transparency. It explained what changes it was making and why, which turned every interaction into a learning opportunity.

Challenges I Faced

Permission Prompts on Sensitive Operations
Copilot always asked for permission before executing commands like starting the FastAPI server or installing packages. While this added a safety layer, I learned to anticipate which operations would trigger prompts and plan accordingly.

Prompt Engineering Strategy
Early on, I tried cramming too many requirements into single prompts, which sometimes confused the model and introduced errors. I adapted by:

Breaking complex features into smaller, focused requests
Being more specific about the context (e.g., "for the Brazilian draughts variant" vs. just "update rules")
Iterating in steps rather than expecting perfect code in one shot

Balancing AI Assistance with Learning
I initially leaned heavily on Copilot for code generation, but realized I learned more by using it as a mentor rather than a ghostwriter. Asking "explain this approach" or "what are alternatives to this pattern?" gave me deeper understanding than just accepting suggestions.

The Verdict

GitHub Copilot CLI didn't just help me build Draughts Pro. It expanded my capabilities as a developer. I built a production-ready FastAPI backend despite minimal prior experience with the framework, and learned Pydantic, WebSockets, and async Python patterns along the way.

For future projects, I'm planning to use Copilot more strategically: as a research assistant for unfamiliar domains, a sounding board for architectural decisions, and a real-time documentation lookup while keeping the creative problem-solving and critical decisions in my own hands.

Would I recommend it? Absolutely. Whether you're exploring new tech stacks or deepening expertise in familiar ones, GitHub Copilot CLI is a force multiplier that keeps you building instead of searching.

The Tech Stack

Frontend: React (State management for complex board positions and UI/UX).
Backend: FastAPI (Python) for high-performance game logic and API endpoints.
Real-time: WebSockets for multiplayer synchronization.

If you are interesting in the Repository and Demo, check out the links below!

GitHub Repository: https://github.com/ore-codes/draughts
Demo Site: https://draughts.pro

Any questions or comments? I would love to hear from you!

Brutalist / Industrial: Creative Developer Portfolio

thaumatin — Tue, 27 Jan 2026 22:39:12 +0000

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

About Me

I am Ore Adeleye (also known as thaumatin), a Full Stack Engineer and Creative Technologist based in Nigeria.

Using code as a medium for creative exploration, I specialize in architecting systems that are not only resilient in logic but also fluid in presentation. My work sits at the intersection of technical performance and immersive design, treating every codebase as a living environment waiting to be optimized and explored.

Portfolio

https://portfolio-947306688997.europe-west1.run.app

How I Built It

For this portfolio, I wanted to create a digital representation of my "Core Philosophy": that technical decisions directly shape creative outcomes.

Tech Stack

Astro: Chosen for its incredible performance and "island architecture," ensuring the site loads instantly while still supporting rich interactivity.
React: Used for managing complex UI state specifically where needed.
Google Genkit: Powers the AI features with type-safe flows, enabling production-ready integration of Gemini 2.5 Flash for the Pitch Generator and Interactive Assistant.
GSAP (GreenSock Animation Platform): The engine behind the fluid motion, scroll-triggered reveals, and the complex DNA sequence animation.
OGL: A minimal WebGL library used for high-performance visual effects that don't weigh down the browser.
Lenis: For that buttery smooth scrolling experience that ties the whole narrative together.

Design Decisions

The technical backbone of this site is based on a template by Codegrid, originally designed with a futuristic space exploration theme.

My goal was to completely overhaul the art direction, pivoting from "Sci-Fi" to Industrial/Brutalist. I stripped away the space motifs and rebuilt the aesthetic to reflect a raw, engineering-first mindset.

Google AI Tools

This entire portfolio was a deep collaboration with Google's AI ecosystem. I operated as the Creative Director, while the AI tools acted as my production studio and engineering team.

Nano Banana Pro: I used this to generate and edit almost all the imagery on the site. It allowed me to rapidly iterate on the visual assets to match my new art direction.
Google Antigravity: My primary AI pair programmer. Antigravity was instrumental throughout the development process, helping me:
- Refactor the Core: Modifying the raw HTML, CSS, JS from the original template to Astro/React components to support my new features.
- Generate Complex Logic: Writing the mathematical logic for the DNA helix animation and ensuring it was responsive.
- Debug & Optimize: Identifying performance bottlenecks in the WebGL and animation loops.
Gemini & Antigravity (Brainstorming): Before writing a single line of code, I used these models to brainstorm the "Industrial/Brutalist" concept.

AI-Powered Features

Beyond using AI as a development tool, I integrated Gemini 2.5 Flash directly into the portfolio as live, interactive features on the "Works" page:

Pitch Generator: A tool that takes any job description and generates a personalized pitch highlighting why I'm the perfect fit. It analyzes the requirements and matches them against my skills, projects, and technical background in real-time.
Interactive Assistant: An interactive terminal-style assistant that answers questions about my expertise and recommends relevant projects based on specific tech stacks or requirements. It uses RAG (Retrieval-Augmented Generation) with a structured knowledge base of my portfolio data.

What I'm Most Proud Of

I am most proud of how I balanced high-fidelity visuals with raw performance. By using Astro's island architecture, I was able to deliver a site that feels like a heavy, high-end WebGL experience but loads with the speed of a static HTML page.

The Interactive Background Grid:
Instead of a simple image, I built a logic-driven grid system that calculates the exact number of 60px blocks needed to fill the viewport and uses a distance-based algorithm (Math.sqrt) to trigger highlight "clusters" around the cursor.
Electric Card Borders:
I avoided heavy image assets for the UI borders. Instead, I used complex CSS clip-path polygons and linear-gradient hacks to create "electric," industrial-style framing for the cards. This delivers a sharp, resolution-independent aesthetic that scales perfectly on any device.
Fluid Typography & Motion:
Typography is the layout. I used the SCHABO typeface and aggressive CSS clamp() functions to ensure headings scale mathematically with the viewport. This is paired with GSAP SplitText animations that trigger character-by-character reveals, making the text feel alive.
DNA Synthesis Section:
A centerpiece of the "Profile" page. It's not a video or GIF, but a mathematically generated SVG code. I used JavaScript to calculate sine waves for the strands and animate them with GSAP ScrollTrigger. The animations are fully reversible: scrolling down assembles the helix, while scrolling up deconstructs it, creating a seamless playback loop.
Footer OGL Animation:
For the footer, I integrated OGL (a minimal WebGL library) to create a "Metaballs" effect. It adds a subtle, organic liquid motion to the bottom of the page, contrasting the rigid grid structure above without the heavy overhead of Three.js.
Polished Micro-interactions:
Every interaction was audited for "feel."
- Lenis Scroll: Implemented for that heavy, inertial scrolling feel.
- Magnetic Buttons: Hover effects that use ::before and ::after pseudo-elements to animate borders and lines, responding physically to user intent.
- Mobile Optimizations: Custom logic to disable complex scroll triggers on mobile and replace them with performant, touch-friendly slide transitions.
Production-Ready AI Integration:
Rather than just using AI during development, I built AI directly into the portfolio as production features. The Pitch Generator and Interactive Assistant run on Gemini 2.5 Flash via Google Genkit, demonstrating real-world AI integration with:
- Type-safe flows with Zod schemas for input/output validation
- Server-side rendering using Astro's Node adapter for secure API key handling
- RAG implementation with a structured knowledge base for accurate, context-aware responses
- Markdown rendering for rich, formatted AI outputs in a terminal-style interface
Comprehensive Light/Dark Theme System:
Built a fully adaptive theme system with smooth View Transitions API cross-fades, theme-aware component styling with optimal contrast, dynamic CSS variable resolution in animations, page-specific color overrides, and persistent localStorage state with system preference fallback.

This portfolio represents a ceiling-break for me, proving that "Brutalist" doesn't have to mean "boring," and "High-Performance" doesn't have to mean "clunky."