Forem: Taminoturoko Briggs

Immersive 3D Archipelago Portfolio built with Antigravity

Taminoturoko Briggs — Tue, 27 Jan 2026 13:22:55 +0000

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

About Me

I am a software developer interested in building cool projects and solving real-world problems.

Ever since I came across Bruno Simon's 3D Portfolio in my early days as a developer, it has stuck with me. I have wanted to build something just as cool, but lacked the time and opportunity to do so. This challenge presented the perfect chance to finally dedicate myself to building my own 3D portfolio, and with the help of LLMs like Gemini, I was sure I could pull it off in a few days or weeks.

The idea for this portfolio was to combine the creativity of the past with the agentic capabilities of the present, and to create a space with more meaningful ways to include AI.

Personality-wise, it highlights my explorative nature and boldness to take on unfamiliar territories in order to build something cool or solve real-world problems.

Portfolio

How I Built It

I used the Gemini website to generate the design for the portfolio's Islands, modeled them in Blender, and then iteratively implemented the entire portfolio with Antigravity.

My Tech Stack:

Framework: Next.js (App Router)
Styling: Tailwind CSS & Vanilla CSS
3D Graphics & Rendering: @react-three/fiber, @react-three/drei and @react-three/postprocessing.
Animations: GSAP
AI Integration: Gemini 2.0 Flash

What I'm Most Proud Of

I’m most proud of building my first 3D website and portfolio. It still looks cool every time I see it.

FluentDocs: Keep Docs Accurate as Code Evolves

Taminoturoko Briggs — Mon, 05 Jan 2026 04:10:07 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

What I Built

FluentDocs is a documentation maintenance system that keeps your docs accurate as your code changes.

Its value is not in writing new documentation, but in eliminating the hidden cost of keeping documentation up to date. Instead of relying on memory, manual audits, or late CI warnings, FluentDocs continuously connects code changes to the documentation they affect.

With every git push, FluentDocs identifies which parts of your docs are impacted, explains why they are affected, and proposes precise, section-level updates. Writers and developers stay in control by reviewing, editing, or rejecting suggestions in a WYSIWYG editor, then shipping the result as a standard pull request.

My Pitch Video

stream.mux.com

Demo

Live Demo: https://www.fluentdocs.dev/

The Story Behind It

FluentDocs is actually an upgrade to an AI Agent I built called AutoDoc, which won me my first Dev.to challenge. Seeing its real-world value and potential, I decided to take it further and turn it into a fully fledged product.

The goal was clear: help developers and technical writers keep documentation accurate as code evolves, without adding more manual work to their workflow.

Building FluentDocs also reflects my broader ambition to move from building side projects to building businesses, and to explore entrepreneurship through solving real problems.

Technical Highlights

Frontend & Backend: Next.js
Editor: Tiptap (WYSIWYG) with a custom Markdown/Diff plugin.
AI Agent: FastAPI
Authentication: NextAuth.js with GitHub provider.
Database & Search: MongoDB Atlas with Vector Search for semantic documentation mapping.
Infrastructure & Tooling:
- GitHub API: Octokit for repository interaction and PR creation.
- Real-time Updates: Server-Sent Events (SSE).

FluentDocs is unique because it shifts documentation from a reactive task to a proactive automated workflow. Key differentiators include:

Event-Driven Automation: Unlike AI assistants that require manual prompts (e.g., Copilot), FluentDocs triggers automatically on every git push. It proactively identifies "documentation drift" before it becomes a technical debt.
Semantic Context Mapping: It uses vector embeddings and search to understand the relationship between code logic and documentation chunks, ensuring suggestions are contextually relevant rather than just keyword-based.
Specialized WYSIWYG Diffing: The custom Tiptap-based editor provides a unique visual interface for reviewing AI suggestions. It allows users to see rich-text diffs and accept changes without manually editing raw Markdown files.
Cross-Repository Intelligence: It supports complex architectures where documentation lives in a separate repository from the source code, maintaining synchronization across distributed systems.
Seamless PR Integration: By orchestrating the full lifecycle—from webhook ingestion to automated Pull Request creation via Octokit—it fits directly into existing CI/CD pipelines without requiring developers to change their tools.

Automate Doc Maintenance: Detect and Update Outdated Docs Using Algolia MCP Server, n8n, and LLM

Taminoturoko Briggs — Thu, 24 Jul 2025 05:40:28 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

AutoDoc is an AI agent that analyzes recent code commits, detects affected documentation pages, and intelligently suggests updates—ensuring your documentation stays accurate and up-to-date with every push.

Demo

Tammibriggs / n8n-auto-doc

AutoDoc

This is a submission for the Algolia MCP Server Challenge

What I Built

AutoDoc is an AI-powered agent that analyzes recent code commits, detects which documentation pages are affected, and intelligently suggests updates—ensuring your documentation stays accurate and up-to-date with every push.

Setup Instructions

1. Clone Algolia MCP Server Repo

Run the following command in your terminal to clone the Algolia MCP Server:

git clone https://github.com/algolia/mcp-node

2. Self-Host n8n

Self-host n8n to use the n8n-nodes-mcp community node, which enables integration with external MCP servers. As the workflow uses webhooks, you’ll need a publicly accessible URL:

Start the n8n instance with the --tunnel flag or
Preferably, create a dedicated ngrok tunnel using:

ngrok http 5678

Ensure ngrok is installed on your system.

3. Install MCP Client node

Install the n8n-nodes-mcp node to enable communication with the Algolia MCP server.

4. Create a new workflow

Create a new workflow in…

View on GitHub

How I Utilized the Algolia MCP Server

I used the Algolia MCP server to help the LLM discover documentation pages containing outdated code references. This reduces the amount of data passed to the model, keeping it within its context window and ensuring the LLM remains accurate, performant, and cost-effective.

Key Takeaways

Development Process

I started by creating a dummy Next.js documentation site for an SDK and wrote a script to generate an Algolia index from it.
Uploaded the generated index to Algolia.
Chose to use n8n for orchestrating my AI agent, with Google Gemini as the model to analyze code changes and suggest documentation updates.
Set up a webhook to listen for GitHub push events and trigger the workflow.
Built a workflow in n8n to:
- Fetch commit data from GitHub
- Identify renamed, replaced, or modified code, and search the Algolia index for documentation pages referencing them
- Pass the resulting documentation pages one at a time to the model for update suggestions
- Create a new GitHub branch for each suggested update
- Open a GitHub issue summarizing all proposed changes
Tested the system by modifying lines of code.
Iteratively improved the prompts, indexing strategy, and workflow based on the test results.

Challenges Faced

I encountered two major challenges while building my AI agent:

Webhook integration without paid hosting I struggled to get the webhook working without having to pay to host my n8n instance. Using ngrok for local tunneling solved this issue and allowed me to test workflows reliably during development.
Fetching outdated documentation data I had difficulty retrieving documentation pages that referenced outdated code. To resolve this, I added extra fields to each Algolia record:
- An array of all unique code snippets
- A string containing all unique, searchable code-related terms I then searched for code references in batches, which significantly improved matching accuracy.

Two(2) ways to prevent padding from causing an overflow in CSS

Taminoturoko Briggs — Sun, 28 Nov 2021 22:46:44 +0000

When padding is added to an element with a width or a height of 100% it causes that element to overflow. It’s no surprise since padding creates extra space within an element.

To fix this issue caused by padding, in this tutorial I am going to introduce two(2) ways of tackling this.

Introduction

By default in CSS, an element's actual width and height is width + padding + border. Meaning, when we give an element a width of maybe 10px, the actual width of that element becomes 10px + padding + border. This is why giving it padding or border when it is already at 100% will cause an overflow.
This problem can be solved in the following ways:

Using CSS Box-sizing property
Using the CSS calc() function

1. Using CSS Box-sizing property

Using box-sizing is the best way of tackling the issue of an overflow caused by padding.
The box-sizing property will allow us to define how the width and height of an element are calculated. The default value of the box-sizing property is content-box, but when we set it to border-box this will make the element’s padding and border to also be included in its width and height.
Meaning if we set the element as a width/height of 10px and add padding or a border of 2px, the element’s actual width/height will still be 10px except the padding + border is greater than 10px

Example:

.div{
   width: 10px;
   height: 10px
   padding: 2px;
   border: 2px;
}

Element's actual width = width + padding + border
Element's actual width = 10px + 4px + 4px = 18px

This is the same for the height.
Element's actual height = 10px + 4px + 4px = 18px

We used 4px instead of 2px for the border and padding because in our code we are adding 2px to both the left and right sides of the element.

But with the box-sizing property:

.div{
   width: 10px;
   padding-right: 2px;
   border-right: 2px;
   box-sizing: border-box;
}

Element's actual width = 10px + 2px + 2px = 10px
Element's actual height = 10px + 2px + 2px = 10px

2. Using the CSS calc() function

The calc() function allows us to perform calculations when we want to specify a property value. The cool thing about the calc() function is that even when the values are in a different unit, it can still be used to calculate the adding(+), subtraction(-), multiplication(*) and division of the values.
For example, we can use the calc() function to do something like this:

.div{
   width: calc(100% - 20px)
}

For the overflow issue of adding padding to a 100% width/height element Using the calc() function is not the most efficient way of going about it but it will still suffice.

Here is how we go about using the calc() function to handle the overflow issue:

.div{
   width: calc(100% - 20px - 20px )
   height: calc(100% - 20px - 20px )
   padding: 10px
   border: 10px
}

Conclusion

In this article, we have learned how to use the box-sizing property and calc() function in CSS to prevent padding from causing an overflow. If you know of any other ways of doing this, feel free to drop it in the commend section below.

Managing Secrets with Doppler in Django

Taminoturoko Briggs — Sat, 02 Oct 2021 05:13:11 +0000

Using .env files to manage application config and secrets is a step forward from hard-coding secrets, but there are also security risks and issues relating to the synchronization and manual management of .env files across different environments. This tutorial introduces Doppler, a solution to secret management and synchronization.

Overview

In this article, we have a Django application that has its secrets defined in a .env file. We will look at how we can move those secrets from the traditional .env file to Doppler.

Doppler — a universal secrets manager

Managing secrets and configs in Doppler keeps them in sync across different environments. You only have to define your secrets once and Doppler acts as a central source of truth for your secrets, saving you the stress of having to re-define them in every environment or share them to team members, probably over unsecured channels.

Doppler has a CLI that provides easy access to secrets in every environment from local development to production and a single dashboard makes it easy for teams to centrally manage app configuration for any application, platform, and cloud provider.

Why use Doppler?

Security of App configs and Secrets.
Boosts Productivity by not having to manually manage .env files across different environments and cloud providers.
Keeps all secrets in sync across devices, environments, and team members.

These are just some of the reasons why we should adopt the use of Doppler in our Projects.

Using Doppler in a Django app

In this section we will demonstrate how we can use Doppler to manage secrets in Django. Here, we have a blog app that has its secrets defined in a .env file, we will be moving those secrets over to Doppler.

App Structure

Here is the file structure of the root folder of our Django app.

+--blog
+--images
+--proj_blog
+--.env
+--.gitignore
+--manage.py
+--requirements.txt

Our main interest here is the .env file which contains all the secrets of the app. The .env file looks something like this:

SECRET_KEY = ajdflkmdjoiejmoaidjfamlamlddga2353
SENDGRID_KEY = supersecretkey
DATABASE_NAME = postgresdatabase
DATABASE_USER = tammibriggs
DATABASE_PASS = supersecretpassword

Getting started with Doppler

To start using Doppler, the first step is to create an account. After doing that, we will be prompted to create a workplace. Give the workspace a preferred name and then click on the Create Workplace button.

Creating a project

A project in Doppler is where app configs and secrets are defined. Doppler comes with a default project called example-project but we can create another by clicking on the plus(+) button.

Click on the plus(+) button and create a new project. In my case, I named my project blog_project but you can give yours any other name.

Once we have created the project, Doppler will provide us with three environments which are:

Development
Staging
Production

We can use these environments to manage our secrets for the three different stages of our app.

Installing Doppler CLI

There are different commands used to install the CLI based on the operating system. I’m using windows but you can look at Doppler’s installation guide to help out with installation on other operating systems.

# Add Doppler's scoop repo
scoop bucket add doppler https://github.com/DopplerHQ/scoop-doppler.git

# Install latest doppler cli
scoop install doppler

If you run into any problems, this article will be of help.
After running the command, we can check if the installation was successful by running:

doppler --version

Now, we need a way for our local machine to authenticate with Doppler. We can do that with this command:

doppler login

We will be asked to open a browser window, where we will authenticate with our email, then an auth token to log in will appear in our terminal which we can use to authenticate Doppler.

Next, we will be asked to name our token. After doing that if we check our terminal, we can see we have received a welcome message.

Managing secrets with Doppler

It is time that we moved our secrets defined in the .env over to Doppler.
Head over to the blog_project we created earlier on Doppler and click on dev.

We have been provided with two options on how we can add our secrets. We are going to use the second which is import Secrets because when using it all we have to do is to copy and paste our secrets rather than manually writing our secrets if we use Add First Secret.

After we have copied and pasted our secrets, click on the Import Secrets button, to import our secrets.

Click on the Save button at the top right of the page to save the imported keys.
Now, in our terminal let's run the setup command to configure Doppler

doppler setup

We choose the project we are working on which is blog_project and select the environment, in this case, the dev environment.
We can now run our Django app, but instead of the regular way which is python manage.py runserver, we will use:

doppler run -- python manage.py runserver

What this command does is it fetches the latest secrets that we stored in Doppler and injects them as environmental variables. Now we can delete the .env file from our project and everything will still work perfectly.

Conclusion

Doppler is a better way of managing secrets than using .env files. This article introduced us to the solution Doppler provides to secret synchronization and security. We have also demonstrated how we can start using Doppler in Django.
The solution Doppler provides is amazing, it's high time we say Goodbye to .env files.