madebygio.GitHub

Hi, I'm Gio ✳

Serious code.Playful details.

A React and full-stack developer with an eye for design.
From focused browser tools to a full content platform,
I build things that feel as good as they work.

Explore my work About me

React / Next.js / Full-stack / The little details

Form & interactionStudy 001
An orange wire sculpture, folded into a continuous ribbonMove your cursor to exploreA small study in interaction
Scroll to explore

Thoughtfully designed. Personally built.

PORTFOLIO - 2026

01 / Flagship project

tempestarchive.com

TempestArchive.

A spoiler-aware Tensura companion

A reference site and reading companion for That Time I Got Reincarnated as a Slime: original story summaries, character dossiers, skills, locations, factions and a linked timeline, all filtered by the reader's chosen spoiler level.

Type
Content archive & web app
Role
Design, frontend, data model
Status
Ongoing
  • 01React
  • 02Vite
  • 03Tailwind CSS
  • 04Motion
  • 05Supabase
  • 06Cloudflare
Visit Tempest Archive Read the case study
Tempest Archive home page: a dark navy interface with the headline "Enter Tempest", a featured Volume 1 story card, and a spoiler-level switch set to Moderate
Tempest Archive on a phone, with a bottom tab bar for Archive, Story, Characters and Search
Spoiler level
Tempest Archive home page: a dark navy interface with the headline "Enter Tempest", a featured Volume 1 story card, and a spoiler-level switch set to Moderate

01 / 04 · Home · spoiler level

  1. 01

    Spoiler levels

    Anime, Moderate and Full. Every list, dossier and timeline entry respects the level the reader picks.

    • Anime
    • Moderate
    • Full
  2. 02

    Two continuities

    Light-novel and web-novel material are labelled separately and never merged into one false ending.

    • Light novel
    • Web novel
    • Never merged
  3. 03

    Original writing

    Every summary is written from scratch. No novel prose or dialogue is reproduced.

    • Written from scratch
    • No reproduced prose
  4. 04

    Linked records

    Story records name who was present, what each side wanted, which abilities decided the outcome and what returns later. Characters, skills, places and events link to each other.

    • Characters
    • Skills
    • Places
    • Events

02 / Selected work

Ideas, made useful.

Less talk.More making.

One larger platform, and five focused tools.
Every one of them is live.

  1. 01Tempest ArchiveContent archive & web app
  2. 02QUIREWriting, without the friction
  3. 03KILOLess weight. Same picture.
  4. 04FolioA better home for your PDFs.
  5. 05TransmuteFiles in. Other files out.
  6. 06SIGNALCodes that actually scan.
Tempest Archive home page: a dark navy interface with the headline "Enter Tempest", a featured Volume 1 story card, and a spoiler-level switch set to Moderate
Live
QUIRE in split view: a Markdown editor with a formatting toolbar on the left and the typeset "Field Notes on Kettle Design" document on the right, with Write, Split, Read and Export controls
Live
KILO ("smaller.") on a dark canvas: the headline "Make images lighter", a large dashed drop zone for JPG, PNG, WebP, AVIF, GIF, BMP and SVG, and a "100% private · processed on your device" badge
Live
Folio PDF toolkit on a cream background: five numbered operations across the top (Merge, Split, Compress, Images to PDF, PDF to images), the Merge panel selected, and a hatched drop zone reading "Drop PDFs to merge"
Live
Transmute file converter on a dark grid: "Drop files anywhere" with a Browse files button, format groups for Images, Word and Data, and a side panel with a quality slider and a Convert file button
Live
SIGNAL QR and barcode generator in dark green: an empty preview panel with PNG and SVG export, and content-type tabs (Link, Text, Wi-Fi, Contact, Email, SMS) above module colour, shape, corner-marker, quiet-zone and error-correction controls
Live
QUIRE in split view: a Markdown editor with a formatting toolbar on the left and the typeset "Field Notes on Kettle Design" document on the right, with Write, Split, Read and Export controls
/02

QUIRE - Writing, without the friction

A focused Markdown editor with a live preview and a PDF export engine. Searchable text, working links and considered typography, all in the browser.

  • React 19
  • Vite
  • Tailwind CSS
  • pdf-lib
Live SourceDetails
KILO ("smaller.") on a dark canvas: the headline "Make images lighter", a large dashed drop zone for JPG, PNG, WebP, AVIF, GIF, BMP and SVG, and a "100% private · processed on your device" badge
/03

KILO - Less weight. Same picture.

A batch image compressor and resizer with a before-and-after comparison. Fine-tune the quality and see exactly what changes.

  • React 19
  • Vite
  • Tailwind CSS
  • Canvas API
Live SourceDetails
Folio PDF toolkit on a cream background: five numbered operations across the top (Merge, Split, Compress, Images to PDF, PDF to images), the Merge panel selected, and a hatched drop zone reading "Drop PDFs to merge"
/04

Folio - A better home for your PDFs.

Merge, split and compress PDFs, or move between images and PDF pages, with a visual page-by-page workflow. Documents stay on your device from start to finish.

  • React 19
  • Vite
  • Tailwind CSS
  • pdf.js
  • pdf-lib
Live SourceDetails
Transmute file converter on a dark grid: "Drop files anywhere" with a Browse files button, format groups for Images, Word and Data, and a side panel with a quality slider and a Convert file button
/05

Transmute - Files in. Other files out.

A local-first file converter. Images to PNG, JPG, WebP, GIF or PDF; DOCX to HTML, Markdown or text; CSV, TSV and JSON between each other. Every conversion runs in the tab, and the app works offline after first load.

  • React 19
  • Vite
  • Tailwind CSS
  • Canvas API
  • pdf-lib
Live SourceDetails
SIGNAL QR and barcode generator in dark green: an empty preview panel with PNG and SVG export, and content-type tabs (Link, Text, Wi-Fi, Contact, Email, SMS) above module colour, shape, corner-marker, quiet-zone and error-correction controls
/06

SIGNAL - Codes that actually scan.

A QR code and barcode generator. Links, text, Wi-Fi, contact cards, email and SMS as QR codes with styled modules and an optional logo; nine barcode symbologies; PNG or self-contained SVG export. Nothing leaves the tab.

  • React 19
  • Vite
  • Tailwind CSS
  • qrcode
  • JsBarcode
  • SVG
Live SourceDetails

All five tools share one repository and deploy independently to their own subdomains.

Source for the tools on GitHub

03 / The toolkit

Good tools. Better possibilities.

Built onsolid foundations.

From the first pixel
to the last database query.

Show what powers
01

Interface

Where the experience takes shape.

  • React
  • Next.js
  • JavaScript
  • TypeScript
02

Styling

Layout, rhythm, the way it feels.

  • HTML
  • CSS / SCSS
  • Tailwind CSS
  • MUI
03

Backend

The logic that holds it together.

  • Laravel
  • PHP
  • MySQL
  • Supabase
04

Workflow

From branch to production.

  • Git / GitHub
  • Vite
  • Vercel
  • Cloudflare

04 / A little about me

The details makethe difference.

I'm Gio - Giorgi, if we're being formal. A React and full-stack developer who likes taking a useful idea and making every part of it feel considered.

The layout. The response to a click. What happens on a slow connection. Tempest Archive taught me how to keep a large, linked body of content honest; the tools taught me how to make one small thing feel finished.

More about how I work
01

Thoughtful interfaces

Clear, accessible, easy to use.

02

Purposeful interaction

Motion that helps things make sense.

03

Care under the hood

Readable code. Performance in mind.

05 / Next starts here

Have somethingin mind?

A role, a collaboration, or a good idea.
I'd love to hear about it.

Find me on GitHub