Through my internships and collaborations, I’ve developed visual materials, branding, and communication tools for nonprofit and creative organizations.
Projects
ParaCloak - Camouflage Design, Color Quantization, UX/UI, Color Theory
Strike//DB - Data Visualization, UX/UI, p5.js, Information Architecture
Arbolit0 - Creative Coding, Generative Systems, UX/UI, p5.js, Algorithm Design
MycoField - Interaction Design, UX/UI, HTML, p5.js, Algorithm Design
The Plastipan - Industrial Design, Graphic Design, Product Design
Metanoia - Graphic Design, Advertising
Keep Austin Fed - Graphic Design, Civic Service Design
PathMate - Industrial Design, Product Design
Parametric Art - Parametric 3D Modeling, Graphic Design
ParaCloak
Camouflage GeneratorPersonal Project
Year: 2026
Tools used: HTML, CSS, JavaScript, Canvas 2D, Perlin Noise, Median Cut, DeepSeek AI
ParaCloak is a browser-based camouflage pattern generator built in vanilla JavaScript on Canvas 2D, made to close the gap between real military camouflage design and what a single person can produce at home. The reference patterns exist (MultiCam, MARPAT, Flecktarn, DPM, CADPAT), but the tools to make your own are locked inside Adobe plugins, buried in abandoned PHP scripts from 2009, or wrapped in proprietary software no hobbyist can audit. I wanted something that let me take a real photograph of a forest, extract its palette, and see what that palette looked like as a functional pattern in under a minute, in a browser tab.
The generator runs in two modes. Noise mode builds a fractal field and quantizes it into colour bands using a palette with adjustable coverage weights, so each colour occupies a precise proportion of the canvas. Polygon mode is the more interesting one: it draws on the camogen algorithm by Ulf Åström, recursively subdividing a rectangle into thousands of smaller polygons, then colouring them with a neighbour-aware bleed pass so adjacent cells clump into larger same-coloured regions. Three additional shape algorithms (weighted Voronoi, cellular automata, and rectangular blocks) extend the range from organic MultiCam-style blobs to digital MARPAT-style grids. Every parameter has a slider: blob size, warp, contrast, gamma, dither, edge enhancement, worn fabric. The palette system holds 53 real-world camouflage patterns from M81 Woodland to PenCott Sandstorm, each with documented hex values and coverage weights, plus a photo uploader that runs median-cut quantization on any image under 5 MB to extract its dominant six colours as a custom palette.
The design draws on a specific body of work. The polygon subdivision and colour bleed come directly from Åström's original camogen, ported to Python by Gaël Lederrey and extended here. The shape variants echo the pattern types in gocamo. The colour palettes were assembled from official pattern specifications, historical references, and the Camopedia archive. The disruptive edge enhancement effect comes from the scientific literature on animal camouflage, specifically the observation that light patches in effective patterns are lighter at their borders and dark patches darker, creating false edges that break up the observer's ability to read the object underneath. The result is a generator that produces patterns matching principles from real camouflage research, not just aesthetically pleasing noise.
The layout is deliberately plain: a fixed control panel on the left, a live preview canvas on the right, a small HUD showing dimensions and status. Every modifier is exposed, nothing hidden behind presets you cannot see into. The SVG export produces pixelated rectangular geometry rather than smooth paths, because the effect pipeline operates on a quantized grid and pretending otherwise would misrepresent what the tool actually does. The result is a camo generator that feels closer to a scientific instrument than a design app.
Experience ParaCloak
Back to Top
Strike//DB
Technique ArchivePersonal Project
Year: 2026
Tools used: p5.js (WEBGL), HTML, JavaScript, DeepSeek AI, Adobe Illustrator
Strike//DB is a browser-based reference tool for boxing, kickboxing, and Muay Thai, built in p5.js to archive what I learn about fighting. I started it because there is much more to fighting than the mechanics of a punch or kick. There is footwork, timing, the clinch, the philosophy of training, the strategy behind why a combination works and why it fails. I wanted somewhere to put all of it, in a form I could actually study from. Every entry follows the same structure: name, discipline, category, the fighter who made it famous, a short summary, numbered execution steps, key points, counters and responses, and a list of sources.
The system is organized around two axes. Discipline tabs (Boxing, Kickboxing, Muay Thai) narrow the field horizontally; category chips (Punch, Kick, Knee, Elbow, Clinch, Defense, Footwork, Combo, Strategy, Philosophy, Signature) narrow it vertically. Picking one of each produces a live index of the entries that match, with each row color-coded by discipline and each entry's detail panel anchored to a section-colored accent bar. Every word of every entry is searchable, so if I remember a fighter's name, a punch, or a source but not which entry it lives in, I can find it regardless of the filter I have active.
The content draws from the classical boxing canon (Dempsey, Louis, Frazier, Fleischer, O'Neill) alongside peer-reviewed research on training load, crowd noise, home advantage, and return-to-sport after injury, and technique breakdowns from across the kicking disciplines. The "signature" category collects named techniques from fighters like Tommy Hearns, Salvador Sánchez, Benny Urquidez, Peter Cunningham, Serkan Yılmaz, Naoya Inoue, and Canelo Álvarez. The "philosophy" category goes past technique into the ideas that govern practice: Krishnamurti on attention and fear, Nietzsche on amor fati, Heraclitus on the unity of opposites, Musashi on perception, Sartre on the freedom that precedes essence.
The layout adapts to the viewport. On desktop it is a two-panel split with a scrollable index on the left and a scrollable detail view on the right. On mobile the detail becomes a full-screen overlay with a back button and the index becomes the whole page. Input is handled through raw DOM touch, mouse, and wheel events rather than p5's built-in handlers, which lets the canvas suppress the browser's scroll pipeline and respond to drag gestures directly. Search is a real HTML input positioned over the canvas, so it uses the native mobile keyboard and does not have to be reimplemented in p5. The result is a study tool that feels like a reference system rather than a website, one that stays out of the way of the reading.
Experience Strike//DB
Back to Top
Arbolit0
Tree Growth SystemPersonal Project
Year: 2026
Tools used: p5.js (WEBGL), HTML, JavaScript, GLSL-free WebGL rendering, OBJ/JSON export pipeline
Arbolit0 is a browser-based generative art website that grows 3D L-systems and renders them as flat ribbon geometry instead of the usual lines or tubes. Developed in p5.js, the project explores how a handful of rewriting rules, evaluated freshly on every iteration, can produce an endlessly varied family of organic, three-dimensional structures that never repeat themselves twice.
The system is built around a turtle interpretation of a parametric L-system, extended with a custom B (branch) symbol that rotates the turtle's heading around a random axis perpendicular to its current direction. This is the core departure from classical plant L-systems (Prusinkiewicz and Lindenmayer), which typically branch within a fixed plane or a rigid hexagonal pattern. Because the axis is resampled at every branch, the structure escapes 2D entirely and expands into genuinely volumetric space, reaching in directions that no fixed rule set could produce, yet still reading as a coherent, plant-like form.
Designed as both a creative coding study and a generative-art tool, Arbolit0 lets users author sculptural forms by dialing in biological-sounding parameters: branch probability, angular jitter, per-level length and width falloff, and the chance that a stem continues past a branch point. A seed field makes every result reproducible, and the full geometry can be exported as OBJ (for Blender, Maya, C4D, or 3D printing) or JSON (for further processing in other creative coding environments). Because the exported mesh is the rendered mesh, the project collapses the usual gap between preview and asset. The tool is the asset pipeline.
Experience Arbolit0
Back to Top
MycoField
Fungal Growth SimulationPersonal Project
Year: 2026
Tools used: p5.js, HTML, JavaScript
MycoField is an interactive browser-based simulation that recreates the growth and behavior of fungal mycelium through a set of procedural rules inspired by real biological processes. Developed with p5.js, the project investigates how simple local interactions can produce complex, lifelike structures, demonstrating principles of emergence, self-organization, and network formation.
The simulation models fungal hyphae as autonomous agents that explore their environment in search of oat sources. Once nutrients are discovered, the hyphae colonize them while reinforcing frequently traveled routes into thicker transport veins that resemble mature mycelial networks. As nutrients become exhausted, colonized oats gradually wither and disappear, forcing the colony to continually adapt and reorganize its growth. Empty regions remain largely inactive, resulting in branching patterns that closely resemble the behavior of fungal colonies observed in nature.
Designed as both a creative coding project and an educational tool, MycoField allows users to experiment with the environmental conditions that influence network growth. The simulation opens paused with slow, realistic parameters, encouraging close observation of the colony as it develops. Through a futuristic control panel, users can introduce new nutrient sources, seed additional spores, pause or resume the simulation, adjust growth conditions, and export the generated network as an SVG for further exploration or fabrication.
Experience MycoField
Back to Top
Plastipan
Recycled Modular 3D Printed WatchClass: Capstone Design Project
Year: 2025
Professor: Keila Z. Pérez
Tools used: Rhino 3D, Adobe Illustrator, Bambu Lab P1P, Epilog Laser Cutter.
For my Capstone Design Project I designed and prototyped The Plastipan, a modular, 3D-printed watch built for easy personalization and sustainability.
The watch pairs a Miyota 8205 automatic movement with a layered construction: laser-cut acrylic disks serve as both crystal and backplate, while removable paper dials slip beneath the hands for instant graphic swaps. The case and strap are entirely 3D-printed, requiring no expensive tooling, and can be produced with recycled or biodegradable filaments so makers can minimize environmental impact. After prototyping, I noticed the watch’s small domed form resembled my favorite Mexican candy, the mazapán, which inspired the name: Plastipan (Plastic + Mazapán).
All design files, dial templates, and assembly instructions are released open source, allowing anyone to download, modify, and build their own version of the watch. Makers can 3D print the case and strap on a standard desktop printer, cut the acrylic disks with a laser cutter or simple tools, and customize their own dial graphics using the provided templates. The project is designed to be accessible to hobbyists, students, and independent designers who want to experiment with watchmaking without the barrier of expensive manufacturing processes.
By sharing the files openly, the project encourages a community of users to remix and improve the design, experimenting with new materials, dial artwork, strap styles, or case variations. In this way, Plastipan functions not only as a watch but also as a platform for creative exploration, sustainability, and collaborative design.
Download on MakerLab
Back to Top
Metanoia
Graphic Design InternshipCompany: Bloodbath Studio
Year: 2024
Collaborator: Alfredo Chavairra
Tools used: Adobe Photoshop, Adobe Illustrator, Slack, Canva, Adobe InDesign.
As a graphic designer for METANOIA, I helped develop the visual identity and promotional campaign for a multidisciplinary fashion event celebrating LGBTQ+ artists, designers, performers, and musicians. Centered on the theme of transformation, the event explored identity, self-expression, and personal growth through fashion, film, and live performance. The project required a cohesive visual language capable of communicating the event's experimental spirit while remaining adaptable across a wide range of physical and digital media.
Working alongside designer Alfredo Chavarria, I contributed to the design of the event's primary promotional materials, including the official poster, social media graphics, printed marketing assets, and supporting visual content used throughout the campaign. In addition to audience-facing materials, I assisted in developing a sponsor deck and company logo that were used to communicate the project's vision to potential partners and sponsors, helping establish a professional visual identity beyond the event itself.
The collaborative nature of the project provided valuable experience working within a creative team while responding to evolving design feedback, production schedules, and communication needs. Beyond creating individual graphics, I contributed to building a unified visual language that supported event promotion, sponsor outreach, and audience engagement from the early planning stages through the final production.
METANOIA strengthened my experience in branding, editorial layout, event promotion, and multidisciplinary design. It reinforced the importance of developing visual systems that can scale across different media while communicating a clear and memorable identity for a live cultural event.
Back to Top