Whats up World, Eloy Benoffi right here (often known as ē𝔩๏ȳ̶̮̰̈́b) from Mar del Plata, Argentina — at the moment primarily based in Madrid, Spain. I’m an Experimental UI Designer, Webflow Developer, and generally I prefer to name myself a Glitch Artist. On this case examine, 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 is likely to be one of many hardest duties to land on a inventive’s desk. I’d had the identical quite simple minimalist web site on-line since 2022 which, to be trustworthy, actually helped individuals 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 tasks and serves as a connector with potential purchasers, but additionally really interprets my concepts of pushing boundaries, opposing the norm, and having enjoyable whereas doing it?
The reply didn’t come simply; I went by means of 16 iterations in Figma, experimenting continuous for nearly a yr till I discovered the most important piece of inspo inside my very own earlier work. This finally helped form the entire visible universe of my new web site.
An Unapologetically Glitchy Net Expertise
Experimenting and discarding concepts wasn’t in useless; a few of them weren’t that good, a few of them have been misplaced gems, and a bunch of them discovered new life and bought 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 undertaking:
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 undertaking except completely wanted.
Brutalism: Issues shall be what they are going to be, they usually don’t should be good or refined. I’ll enable every ingredient to be daring, tough, and in your face. Shapes could be sharp, glitches could be glitchy, and every part ought to attempt to be brutally trustworthy.
Enjoyable: We must always always remember to have enjoyable in our private tasks. 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 wish to construct. If potential purchasers don’t get it, then they’re most likely not a match for you; those who get it’ll carry tasks 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 Companion, I knew from the beginning that this may 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 manner.
I really like this platform as a result of it helps to construct higher and quicker, 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 ingredient — not simply as ornament, however as a method to information consideration, create rhythm, and reinforce the three concepts behind the visuals. GSAP was the clear selection for me to animate. Its flexibility allowed me to experiment freely, from creating micro-interactions to massive transitions and complicated timelines. GSAP Plugins aided each step of the way in which, and because of them releasing all their premium plugins free of charge, I used to be ready to make use of fairly a number of of them:
I’ll be sharing some code snippets beneath 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 property and ASCII variations of them as ornament. I needed 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 the way to contact me.
The concept behind the loader animation was to start out with a stripped-down model of the total 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 ingredient (backside left). I needed to incorporate each my present location (Madrid) and my birthplace (Mar del Plata), so once you hover over it, the textual content switches between these location names, time zones, and coordinates.
This was finished with very easy JavaScript. First, I created a operate to alter 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 adjustments. 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",
pace: 1,
preserveSpaces: true,
padSpace: true,
sort: "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]",
pace: 1,
preserveSpaces: true,
padSpace: true,
sort: "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,
pace: 1,
sort: "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 doable due to SVG and GSAP ScrollTrigger. I focused the person paths contained in the SVG graphic after which staggered them out as you scroll by means of the container:
let tlHeroSVG = gsap.timeline({
scrollTrigger: {
set off: '.hero-section',
begin: 'high backside',
finish: 'bottom-=50% high',
scrub: 8,
},
});
tlHeroSVG.to('.hero-flower_03 path', {
stagger: {
every: 0.1,
from: 'random',
},
opacity: 0,
period: 2,
ease: 'bounce.inOut',
});
Right here, Have a look at My Work
After the complexity of the Hero part, one is likely to be tempted to sit back out and let the consumer loosen up — however that might go towards my extra is extra anthem. When reaching the Work part, you’ll see that it is likely to be essentially the most minimalist part of the positioning, within the sense that there are fewer components. Nevertheless, I attempted to make them stand out by means of motion. I used two fundamental 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 each, there are a minimum of 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: 'high backside',
finish: 'bottom-=60% high',
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 tasks are specified by horizontal sliders made with the Draggable and Inertia plugins. I needed one thing out of the abnormal to disclose their content material, so I created a four-step timeline that units the size of every seen graphic randomly by means of 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 Important Error
After these intense animations, I couldn’t simply end the positioning with a easy footer. As an alternative, 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 ingredient — a quite simple div with a background coloration and the textual content “CLICK TO CONNECT” inside it. Utilizing JavaScript, I created a operate that duplicates the ingredient twice every time the mouse strikes 200px in any route, 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 ingredient, 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 frightened of how it could be acquired. 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 a number of detractors who have been very involved with conversion, and in addition a number of individuals who completely bought it.
The reality is that constructing this portfolio was much less about transport a refined advertising shopfront and extra about creating an area for me to make use of as a playground — a spot the place my design type, coding abilities, and idiosyncrasy may collide into the form of additional and glitchy web site I needed to see on the net. Bugs or unintentional errors grew to become options, animations ran somewhat too wild, and I did my finest to take every part one step past. It was enjoyable!
After launching, my web site 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 must always present house for human authenticity, intentionality, and even errors — qualities that may doubtless be extra related than ever shifting ahead.
Thanks for studying about my course of. For those who depart my web site with a spark of intrigue, a smile on the chaos, or the urge to interrupt a number of guidelines in your personal work, then my mission was achieved — and also you already know you possibly can all the time Click on to Join.
