Hi there World, Eloy Benoffi right here (also called ē𝔩๏ȳ̶̮̰̈́b) from Mar del Plata, Argentina — at the moment primarily based in Madrid, Spain. I’m an Experimental UI Designer, Webflow Developer, and typically I prefer to name myself a Glitch Artist. On this case research, I’ll stroll you thru the imaginative and prescient and implementation behind my 2025 Portfolio Website.
All of it started with one immediate: “I actually, actually need to replace my portfolio.”
As a few of you’ll know, this may be one of many hardest duties to land on a inventive’s desk. I’d had the identical quite simple minimalist website on-line since 2022 which, to be trustworthy, actually helped folks discover me, however now not represented my vibes or the kind of inventive work I purpose for. So I requested myself: how can I construct one thing that not solely showcases my initiatives and serves as a connector with potential shoppers, but in addition actually interprets my concepts of pushing boundaries, opposing the norm, and having enjoyable whereas doing it?
The reply didn’t come simply; I went via 16 iterations in Figma, experimenting continuous for nearly a 12 months till I discovered the most important piece of inspo inside my very own earlier work. This in the end helped form the entire visible universe of my new website.
An Unapologetically Glitchy Internet Expertise
Experimenting and discarding concepts wasn’t in useless; a few of them weren’t that good, a few of them had been misplaced gems, and a bunch of them discovered new life and obtained reworked into the ultimate design. On reflection, I now see clearly how every trial and error helped me refine the three key concepts behind my selections for this venture:
Maximalism: Extra is extra. I made a decision I wouldn’t again down, I wouldn’t scale down options or particulars for readability, and I wouldn’t let austerity enter this venture except completely wanted.
Brutalism: Issues will likely be what they are going to be, and so they don’t have to be good or refined. I’ll permit every component to be daring, tough, and in your face. Shapes could be sharp, glitches could be glitchy, and the whole lot ought to attempt to be brutally trustworthy.
Enjoyable: We should always always remember to have enjoyable in our private initiatives. I internalized this like a mantra: “That is for you — you are able to do something you need with it. The one constraints are your personal whims; attempt to launch expectations on the way it’ll be perceived by your friends, and simply construct what you need to construct. If potential shoppers don’t get it, then they’re most likely not a match for you; those who get it’ll carry initiatives the place you possibly can really feel genuine in your work.”
I attempted to maintain these notions in thoughts whereas designing the ultimate iteration of the positioning, which was the one I felt happiest about.
A Tech Stack for Creating Mayhem
As soon as the design was prepared, I needed to carry it to life.
As a Webflow Licensed Accomplice, I knew from the beginning that this might be the pure option to construct the positioning, because it permits me to place collectively advanced HTML and CSS layouts in a simple and complete method.
I like this platform as a result of it helps to construct higher and sooner, however doesn’t get in the way in which if you wish to mess with customized code, and it’s nice at permitting you to take issues a step additional past its core capabilities.
I knew that movement could be a key component — not simply as ornament, however as a approach to information consideration, create rhythm, and reinforce the three concepts behind the visuals. GSAP was the clear alternative for me to animate. Its flexibility allowed me to experiment freely, from creating micro-interactions to giant transitions and sophisticated timelines. GSAP Plugins aided each step of the way in which, and due to them releasing all their premium plugins without spending a dime, I used to be ready to make use of fairly just a few of them:
I’ll be sharing some code snippets under so you possibly can take a peek at how I constructed my animations.
Wow at First Sight: The Loading Animation into the Hero Part
I primarily based the design on my piece Nature is Watching, reusing the eye-flower belongings and ASCII variations of them as ornament. I wished the intro part to really feel like an animated growth of this piece, whereas additionally together with related details about me, what I do, the place I come from, and easy methods to contact me.
The thought behind the loader animation was to start out with a stripped-down model of the complete visuals after which add components because the container expands. The entire part is scaled down whereas a loading bar grows, which later turns into the navbar.
Location Easter Egg
As soon as the content material is loaded, there’s a tiny easter egg within the location component (backside left). I wished to incorporate each my present location (Madrid) and my birthplace (Mar del Plata), so while you hover over it, the textual content switches between these location names, time zones, and coordinates.
This was carried out with very simple JavaScript. First, I created a operate to vary the Madrid location’s textual content to Mar del Plata’s, which incorporates a GSAP timeline and makes use of the Textual content Plugin to deal with the textual content content material modifications. Secondly, I added an occasion listener that triggers the operate on mouseenter:
operate setLocationMardel() {
let LocationToMardel = gsap.timeline();
LocationToMardel.fromTo(
"[location-type-01][type-txt]",
{
textual content: {
worth: ">>>primarily based in madrid, spain",
},
},
{
textual content: {
worth: ">>>born in mar del plata, arg",
velocity: 1,
preserveSpaces: true,
padSpace: true,
kind: "diff",
},
period: 0.3,
ease: "none",
},
0
)
.fromTo(
"[location-type-02][type-txt]",
{
textual content: {
worth: "[timezone:gmt+2]",
},
},
{
textual content: {
worth: "[timezone:gmt-3]",
velocity: 1,
preserveSpaces: true,
padSpace: true,
kind: "diff",
},
period: 0.3,
ease: "none",
},
0
)
.fromTo(
"[location-type-03][type-txt]",
{
textual content: {
worth: "40.416775 // -3.703790",
},
},
{
textual content: {
worth: "-37.979858 // -57.589794",
preserveSpaces: true,
padSpace: true,
velocity: 1,
kind: "diff",
},
period: 0.3,
ease: "none",
},
0
);
}const heroMeta = doc.querySelector(".hero-meta");
heroMeta.addEventListener("mouseenter", () => {
setLocationMardel();
});Plucking an SVG Flower
As you allow the hero by scrolling down, the backdrop ASCII flower begins shedding its characters. This was made potential because of SVG and GSAP ScrollTrigger. I focused the person paths contained in the SVG graphic after which staggered them out as you scroll via the container:
let tlHeroSVG = gsap.timeline({
scrollTrigger: {
set off: '.hero-section',
begin: 'prime backside',
finish: 'bottom-=50% prime',
scrub: 8,
},
});
tlHeroSVG.to('.hero-flower_03 path', {
stagger: {
every: 0.1,
from: 'random',
},
opacity: 0,
period: 2,
ease: 'bounce.inOut',
});
Right here, Take a look at My Work
After the complexity of the Hero part, one may be tempted to sit back out and let the consumer chill out — however that might go in opposition to my extra is extra anthem. When reaching the Work part, you’ll see that it may be probably the most minimalist part of the positioning, within the sense that there are fewer components. Nevertheless, I attempted to make them stand out via motion. I used two major animations to maintain up the eye:
Making a Mesmerizing Title
The heading of this part serves each as a title studying “Chosen Work” and as a transition between the chaos of the hero and the work content material. To craft this animation, I arrange a number of rows of divs with overflow: hidden at three completely different heights. Inside every one, there are at the least three copies of the “Chosen Work” textual content stacked vertically. I created a easy GSAP timeline with ScrollTrigger and staggers to maneuver their yPercent with completely different easings whereas scrolling down, creating this fluid impact.
let tlWorkScroll = gsap.timeline({
scrollTrigger: {
set off: '.work-section',
begin: 'prime backside',
finish: 'bottom-=60% prime',
scrub: 0.6,
},
});
tlWorkScroll.fromTo(
'.work-header .title-row_33 .title-txt',
{
yPercent: 0,
},
{
yPercent: -300,
ease: 'power3.in',
period: 2,
stagger: {
quantity: 2,
from: 'begin',
},
},
0
);
tlWorkScroll.fromTo(
'.work-header .title-row_66 .title-txt',
{
yPercent: 0,
},
{
yPercent: -300,
ease: 'power2.in',
period: 2,
stagger: {
quantity: 2,
from: 'begin',
},
},
0
);
tlWorkScroll.fromTo(
'.work-header .title-row_main .title-txt',
{
yPercent: 0,
},
{
yPercent: -300,
ease: 'power1.in',
period: 2,
stagger: {
quantity: 2,
from: 'begin',
},
},
0
);
A Impolite Introduction to My Work
My chosen initiatives are specified by horizontal sliders made with the Draggable and Inertia plugins. I wished one thing out of the peculiar to disclose their content material, so I created a four-step timeline that units the dimensions of every seen graphic randomly via these scale values: 1.75 → 1.5 → 1.25 → 1, with a tiny 0.15s delay between steps.
So as to add extra chaos to it, I set the transform-origin of every graphic to completely different positions so the scaling impact wouldn’t be homogeneous.
tlWorkCardReveal.fromTo(
wCardItems,
{
scale: 1.75,
},
{
scale: 1.5,
period: 0.25,
ease: 'power3.in',
stagger: {
quantity: 0.2,
from: 'random',
ease: 'power1.out',
},
},
0
);
tlWorkCardReveal.fromTo(
wCardItems,
{
scale: 1.5,
},
{
scale: 1.25,
period: 0.2,
ease: 'power3.inOut',
stagger: {
quantity: 0.15,
from: 'random',
ease: 'power1.inOut',
},
},
'>=-0.15'
);
tlWorkCardReveal.fromTo(
wCardItems,
{
scale: 1.25,
},
{
scale: 1,
period: 0.15,
ease: 'power3.out',
stagger: {
quantity: 0.1,
from: 'random',
ease: 'power1.out',
},
},
'>=-0.15'
);
Ending with a Vital Error
After these intense animations, I couldn’t simply end the positioning with a easy footer. As a substitute, I introduced again the ASCII decorations, pressured the menu to open, and applied a cloning machine linked to the mouse motion.
There’s only one button component — a quite simple div with a background shade and the textual content “CLICK TO CONNECT” inside it. Utilizing JavaScript, I created a operate that duplicates the component twice every time the mouse strikes 200px in any path, as much as a restrict of 200 copies, and positions the clones in random absolute locations. The button div has a CSS blending-mode set to “distinction” to make the overlap extra visually attention-grabbing when the colours collide. Then, when the mouse leaves the footer component, all copies are eliminated.
Every new batch of copies enters and leaves with a staggered GSAP animation and customized backIn easing:
gsap.to(generatedCopies, {
opacity: 0,
scale: 0.6,
period: 0.2,
ease: 'again.in(1.7)',
stagger: {
quantity: 0.4,
from: 'random',
ease: 'power1.out',
},
});Some Ultimate Ideas
Although I attempted to launch exterior expectations with this experiment, I couldn’t assist however be a bit petrified of how it could be obtained. It sparked some conversations on social media about advertising vs. artwork, minimalism vs. maximalism, and the place the road is drawn on usability. There have been just a few detractors who had been very involved with conversion, and likewise just a few individuals who completely obtained it.
The reality is that constructing this portfolio was much less about transport a sophisticated advertising shopfront and extra about creating an area for me to make use of as a playground — a spot the place my design fashion, coding expertise, and idiosyncrasy may collide into the form of additional and glitchy website I wished to see on the internet. Bugs or unintended errors grew to become options, animations ran a bit of too wild, and I did my finest to take the whole lot one step past. It was enjoyable!
After launching, my website was acknowledged with an Awwwards Honorable Point out, GSAP Website of the Day, and CSSDA Finest UI, Finest UX, Finest Innovation, and Particular Kudos.
Ending on a private be aware, I really feel that on this new period of AI-generated content material and sales-optimized templates, we should always present area for human authenticity, intentionality, and even errors — qualities that can seemingly be extra related than ever shifting ahead.
Thanks for studying about my course of. If you happen to depart my website with a spark of intrigue, a smile on the chaos, or the urge to interrupt just a few guidelines in your personal work, then my mission was completed — and also you already know you possibly can all the time Click on to Join.
