Portfolio Webkit

Color tokens

Brand gradient

Scroll-progress bar and TitleSection underline — from-blue-500 via-purple-500 to-cyan-400

blue-500 purple-500 cyan-400

Skill badge purple

Skill pills in Habilidades.astro — #582f82 (same in light and dark)

Sample skill

Hero radial light

Layout.astro page backdrop, forced light — rgba(120,119,198,0.3) on white

Light sample panel

Hero radial dark

Layout.astro page backdrop, forced dark — rgba(70,130,180,0.3) on gray-950

Dark sample panel

Experience category colors

Token map copied from ExperienciaItem.astro categoryColors — light (forced) and dark (forced) side by side

Light

Programming Design Education Others

Dark

Programming Design Education Others

Education gradients

Imported from src/data/education.ts — each card uses bg-gradient-to-br + the gradient class below

Multimedia Design Technician Associate's Degree · 2019 - 2021 from-purple-600 via-pink-600 to-rose-600

Diploma in Education Postgraduate Diploma · 2023 from-blue-500 via-indigo-500 to-violet-500

Business Expert with Accounting and Tax Specialization High School · 2014 - 2019 from-cyan-500 via-blue-600 to-indigo-700

Typography

Roboto weights used across the site — 400 (body), 500 (medium), 700 (bold) — imported via @fontsource/roboto in Layout.astro

h2 — TitleSection style · text-3xl font-semibold · weight 500

Section heading sample

Body · weight 400

Body copy uses Roboto 400 at base size with relaxed leading. This is the default paragraph style across portfolio sections — descriptions, about text, and card content.

Medium · weight 500

Medium weight for nav labels, dates, and emphasized inline text.

Small / tag text · weight 500–700 · text-xs

Tag pill · medium Category · semibold Date · bold

Icons

Auto-discovered with import.meta.glob("../components/icons/*.astro") — 97 components, sorted alphabetically. "iconMap" notes show which tech-tag keys resolve to the component in src/data/iconMap.ts.

Aftereffects iconMap: After Effects

Android iconMap: Android Nativo

Androidstudio iconMap: Android Studio

Angular iconMap: Angular

Arduino iconMap: Arduino

Asesprite iconMap: Aseprite

AstroIcon iconMap: Astro

Audition iconMap: Audition

Autocad iconMap: AutoCAD

Bash iconMap: Bash

BehanceIcon UI icon

Blender iconMap: Blender

Bootstrap iconMap: Bootstrap

C iconMap: C

Canva iconMap: Canva

CapCut iconMap: CapCut

CodeIcon UI icon

ComfyUI iconMap: ComfyUI

ContactoIcon UI icon

Coreldraw iconMap: Corel Draw

Cplusplus iconMap: C++

Csharp iconMap: C#

Css iconMap: CSS3

DiscordIcon UI icon

Discordjs iconMap: Discord.js

Docker iconMap: Docker

EducacionIcon UI icon

Excel iconMap: Excel

Expo iconMap: Expo

Express iconMap: Express.js

FigmaIcon iconMap: Figma

Firebase iconMap: Firebase

Flutter iconMap: Flutter

Gamemaker iconMap: Gamemaker

Gimp iconMap: GIMP

Git iconMap: Git, GitHub

GithubIcon UI icon

GmailIcon UI icon

Gml iconMap: GML

Godot iconMap: Godot

Html iconMap: HTML5

Illustrator iconMap: Illustrator

Indiseing iconMap: InDesign

Inkscape iconMap: Inkscape

InstagramIcon UI icon

JavaIcon iconMap: Java

Jquery iconMap: JQuery

Js iconMap: JavaScript

Json iconMap: JSON

KickIcon UI icon

Kotlin iconMap: Kotlin

Krita iconMap: Krita

Laravel iconMap: Laravel

LinkedinIcon UI icon

LinkIcon UI icon

LunaIcon UI icon

MaletaIcon UI icon

Mongodb iconMap: MongoDB

Mysql iconMap: MySQL

NativeWind iconMap: NativeWind

NextJSIcon iconMap: Next.js

Nodejs iconMap: Node.js

Obsstudio iconMap: OBS Studio

OpenCode iconMap: OpenCode

P5js iconMap: p5.js

Photoshop iconMap: Photoshop

Php iconMap: PHP

PhpIcon UI icon

PinturaIcon UI icon

PlayStore UI icon

Playwright iconMap: Playwright

Powerpoint iconMap: PowerPoint

Premiere iconMap: Premiere Pro

Prisma iconMap: Prisma

ProcessingIcon iconMap: Processing

ProfileIcon UI icon

PuredataIcon iconMap: Pure Data

Python iconMap: Python

React iconMap: React, React Native

Reaper iconMap: Reaper

Sass iconMap: Sass

SistemaIcon UI icon

SkillsIcon UI icon

SolIcon UI icon

Substack UI icon

TailwindIcon iconMap: Tailwind CSS

TwitchIcon UI icon

Typescript iconMap: TypeScript

Unity iconMap: Unity

Unrealengine iconMap: Unreal Engine

Vercel iconMap: Vercel

VisualStudio iconMap: Visual Studio

Vscode iconMap: VS Code

WhatsappIcon UI icon

Word iconMap: Word

Wordpress iconMap: WordPress

YoutubeIcon UI icon

Tech-tag icons

Every key in iconMap with its real projectTags badge (class + icon), the same pattern Proyectos.astro uses

Next.js Tailwind CSS Java Processing Pure Data Unity Photoshop C# PHP After Effects Aseprite Godot Illustrator InDesign Premiere Pro Python WordPress MySQL Audition Blender Reaper Unreal Engine Gamemaker C C++ Flutter Canva Docker Figma HTML5 CSS3 JavaScript JSON GML OBS Studio Corel Draw Krita GIMP Inkscape Visual Studio Android Studio Android Nativo MongoDB Discord.js Node.js Laravel Prisma p5.js Astro Arduino AutoCAD Word Excel PowerPoint Kotlin Express.js Bootstrap JQuery Bash Angular Sass TypeScript React React Native Expo Firebase NativeWind Git GitHub Vercel VS Code ComfyUI CapCut OpenCode Playwright

Tags & skills

69 project tags · 5 skill groups — rendered from projectTags.ts and skills.ts

Project tags

Next.js Tailwind CSS Java Processing Pure Data Photoshop Illustrator InDesign Premiere Pro After Effects Unity C# WordPress Godot Aseprite Python MySQL Audition Blender Reaper Unreal Engine Gamemaker C C++ Flutter Canva Docker Figma HTML5 CSS3 JavaScript JSON PHP GML OBS Studio Corel Draw Krita GIMP Inkscape Visual Studio Android Studio MongoDB Discord.js Node.js Laravel Prisma p5.js Astro Arduino AutoCAD Word Excel PowerPoint Kotlin Express.js Bootstrap HTML5 CSS3 JQuery Bash Angular Sass TypeScript React React Native Android Nativo Expo Firebase NativeWind

Programming Languages

HTML5 CSS3 Sass JavaScript TypeScript Python PHP Java C C++ C# Kotlin GML MySQL

Frameworks & Libraries

Next.js React React Native Expo Firebase NativeWind Angular Astro Laravel Express.js Flutter Tailwind CSS Bootstrap JQuery Prisma Discord.js p5.js

Design & Editing

Photoshop Illustrator InDesign After Effects Premiere Pro CapCut Audition Reaper Blender Aseprite OBS Studio Figma Canva Corel Draw Krita GIMP Inkscape ComfyUI

Development & Tools

Godot Unreal Engine Unity Gamemaker Visual Studio VS Code OpenCode Git GitHub Vercel Playwright Android Studio Android Nativo MongoDB Node.js Docker Arduino AutoCAD Word Excel PowerPoint WordPress Processing Pure Data Bash

Languages

Español (Nativo) Portugués (Nativo) Inglés (A1)

Backgrounds & effects

Hero radial gradient

Reproduced from Layout.astro — the full-page backdrop behind every section

Site backdrop sample (follows theme)

TitleSection underline

Brand gradient bar under every section title — animates to 80px on reveal

Skill section gradient panel

Achievements panel from Habilidades.astro — purple/blue wash on light, slate base on dark

Achievements panel sample

Badge conic gradient

Spinning conic ring from Badge.astro — #51E4B8 → #21554E → #51E4B8

Available for projects

Category tab active state

Project filter tabs from Proyectos.astro — active uses blue-600

Scroll-progress bar

Fixed top bar in Layout.astro — blue → purple → cyan, 3px tall

Backdrop-blur nav pill

Header.astro desktop nav — white/70 or gray-900/60 with backdrop-blur-md

Components

Live imports from src/components/ui/ where possible

LinkButton.astro

Live import — href="#"

Project link

Badge.astro

Live import — conic-gradient ring + slot content

Open to work

TitleSection.astro with icon slot

Live import — wrapped in .revealed so the underline renders

Sample section

Category tab (static copy)

Static markup copy — Proyectos.astro tabs have no standalone component; classes inlined

Project tag pill

From projectTags data — first entry, same pattern as Proyectos.astro

Next.js