NibalAn

Hello, my name is Annibal

And this is my website.

View my corporate history in LinkedIn LinkedIn, follow me on Instagram, star my repositories on Github and make good use of my Gists.

On Codepen, I create these mini-projects that can be shared - they present the Result, the HTML, the CSS, and the Javascript sources, all in a single page.

Fork any of the prototypes and components I published in my Figma community profile, feel free to print out my Currículo Curriculum and give it to several companies, or play some of the Games that I developed.

pt-BR | en-US |

Portfolio

Layouts:

Platform for finding Jobs (or for Hiring, if you create an Company account) that i developed alone: app.tryevo.com.br/
Dashboard Template: flowuxteam-dashboard.surge.sh/
Example of Sidebar with Dashboards (Vue): codepen.io/nibalAn/pen/jxNZpL
Example of Advanced Search (Vue): codepen.io/nibalAn/pen/JjWLwxE
Prototype for a Landing Page (vanilla JS): codepen.io/nibalAn/pen/XWXJKqe
Prototype of an App (angular.js) for taking Driving Classes: codepen.io/nibalAn/pen/ZyRPpP
Prototype of an App (React) to Train AI Models: codepen.io/nibalAn/pen/pqEvLp
Prototype of an App (Vue) to show Data from an client wallet: codepen.io/nibalAn/pen/odeaxx
Prototype of an App (React) to Train AI Models (v6): amt6.surge.sh/bases

Components:

POC Tabs with diagonal borders (SCSS + vanilla JS): codepen.io/nibalAn/pen/MRgEyP
POC Tabs animated underline (HTML + SCSS): codepen.io/nibalAn/pen/QZdLRR
Interactive wheel of options (angular.js): annibal.github.io/Wheelzator/event-demo.html
Mini Chart (ES5 + SVG) - min,med,max,avg: codepen.io/nibalAn/pen/ExrjGMz (ES5 is that old JS from explorer 6)
Mini Chart (ES5 + SVG) - Area: codepen.io/nibalAn/pen/abRmOPj
Mini Chart (ES5 + SVG) - Donut: codepen.io/nibalAn/pen/WNamNdR
Mini Chart (ES5 + SVG) - Spider: codepen.io/nibalAn/pen/YzJWvPJ
Mini Chart (ES5 + SVG) - Bars %: codepen.io/nibalAn/pen/ZEqxMGR
Mini Chart (ES5 + SVG) - Lines with Semi-Candlestick: codepen.io/nibalAn/pen/QWZPWVd
HUD-style chart made in Vega: codepen.io/nibalAn/pen/JzLwpE
Custom Heatmap Chart (React + D3): codepen.io/nibalAn/pen/YvGbGN

Loadings:

12 point loader (CSS + HTML): codepen.io/nibalAn/pen/NWOEwBM
Poker Chips loader (CSS + HTML): codepen.io/nibalAn/pen/QWMpGPG
3D Poker Chips loader (CSS + HTML): codepen.io/nibalAn/pen/eYRVzxj (has click)
Loader styled based on the concept of the Model Training App (SCSS + HTML): codepen.io/nibalAn/pen/aMrOaV (has click)
Loader Ripples (CSS + HTML): codepen.io/nibalAn/pen/MprZjx

Games:

Mix of Plants_vs_Zombies with Dance_Dance_Revolution (the Game Jam's theme was "ritual"): annibal.github.io/ShadowRhythm/index-br.html
Space Invaders with squares (vanilla JS): codepen.io/nibalAn/pen/PpOJYg
Astro's game (made for a freelance project) he has to answer one of each educative question to unlock the maze exit: astro-desafia.surge.sh/

Artistic:

Elevator in JS: codepen.io/nibalAn/pen/prWdjq
The office i was working in, at the time, in VR: vrzator2.surge.sh/
An kinetic sculpture that i saw and wanted to do in HTML + CSS: codepen.io/nibalAn/pen/ZexQXw
Mana Manipulator (click and move the mouse to aggregate pixels of power, then swing and release to throw them into a wall): codepen.io/nibalAn/pen/JMdOwe
DVD screen saver (some times it hits the corner): codepen.io/nibalAn/pen/vYpXPLZ (has controls)
Daruma that i bought in a chinese store and replicated in CSS: codepen.io/nibalAn/pen/PpdEQM
Trackball mouse that I liked, and did in CSS (reacts to scroll and mouse movement): codepen.io/nibalAn/pen/EvKmpJ
Square-ish screen saver: codepen.io/nibalAn/pen/GWjPmM
Thing that generates either a glass or a tree of life, depending on inputs: codepen.io/nibalAn/pen/NgqRpK
Balls that move linearly, but don't look like they move linearly: codepen.io/nibalAn/pen/KmaVRp
Bingo of phrases commonly uttered in remote calls (the url saves the random seed and the checked items): codepen.io/nibalAn/pen/OJVEbBG

Figma:

Prototype of a Quiz that finds the Clinical Trial that best matches your profile: figma.com/.../1238544300704706798
Prototype of TryEvo: figma.com/.../1238534746967447768
Prototype of an app that helps nutritionists create the diet for their patients: figma.com/.../1238521098196408502