Freelancers using Barba.js

Freelancers using Barba.jsFreelancers using Barba.js

Projects People

Gonçalo Valério

Ponta Delgada, Portugal

Sound Designer & Creative Audio Engineer

43: Followers

Sound Designer & Creative Audio Engineer

Cover image for Hello community 👋 I’m really excited to share my new person...

Hello community 👋 I’m really excited to share my new personal website, valeriosound.com (http://valeriosound.com) - a space where I showcase my work as a sound designer. What makes this one special for me is that I designed and coded the entire site myself. I’m not a full-time front-end developer, so learning and building everything from scratch was both challenging and super rewarding. I know a lot of you here use amazing tools like Framer or Webflow, but this project was about pushing myself to understand the craft a bit deeper, and honestly, I’m just proud that it came together the way it did. If you’d like to check it out, here’s the link again: valeriosound.com (http://valeriosound.com)Would love to hear what you think; any feedback is welcome! 🙌

2

16

347

Cover image for I made the sound design for this new Manfrotto tripod advert...

I made the sound design for this new Manfrotto tripod advert. It's an amazing feeling to give any production the next level it deserves. All you hear here is "fake", made in Post-Prod, and my job is to create those sounds and make them sound "real", as if all audio was recorded by the camera. 😊

1

15

359

Cover image for Throwback to a commercial I handled Sound Design and Mix for...

Throwback to a commercial I handled Sound Design and Mix for the Replit App. A dynamic piece celebrating creativity, coding, and collaboration without limits. It’s been a while since this one, but I’ve set out to revisit and share past projects for a portfolio for the rest of the year. Client: Replit (https://www.linkedin.com/company/repl-it/)Production Agency: Chalk Content Director: Chris Neal (https://www.linkedin.com/in/christopherneal1/)Sound Design & Mix: Gonçalo Valério 🙋‍♂️ The Replit app offers unmatched flexibility, enabling seamless coding and collaboration from anywhere, at any time. Designed to streamline workflows and foster creativity, it adapts to your needs wherever you are.

0

272

Cover image for Sound Designing for BMW X RedBull Campaign 🚀

Sound Designing for BMW X RedBull Campaign 🚀

6

52

520

Bearplus Fullstack Agency

Sydney NSW, Australia

Award-winning agency specializing in design and development.

5.0: Rating

37: Followers

Award-winning agency specializing in design and development.

Cover image for Page transitions on Heron are

Page transitions on Heron are treated as view changes rather than document loads. Motion exits one page and continues into the next, with no hard reset and no white flash between states. The reasoning is product-led. Heron runs inside Revit, Rhino, ArchiCAD and SketchUp, where switching context means panels updating around a drawing that stays put. A site built to sell that experience shouldn't behave like a set of separate files. The transition also gives us somewhere to hide load time, which keeps the heavier interactive sections feeling immediate on slower connections.

1

1

139

Cover image for The Heron chat widget is

The Heron chat widget is the product's main touchpoint. It floats over the architect's design software, answers questions about the model, and executes changes once approved. Designing UI that lives inside another application changes the constraints. It has to hold legibility over dense linework, keep a small footprint, stay clearly branded without competing with the host software, and dismiss cleanly. The product page demonstrates rather than describes. The widget is shown over a real floor plan, mid-conversation about an HVAC clearance issue, with the affected room highlighted in the drawing behind it. The surrounding layout is kept deliberately quiet so the widget holds the visual weight.

8

14

1.3K

Cover image for Heron runs inside Revit, Rhino,

Heron runs inside Revit, Rhino, ArchiCAD and SketchUp, so the site had to read as an instrument rather than a brochure from the first frame. The preloader replaces the progress bar with a drawing in progress. A red datum line moves up an architectural elevation carrying the percentage value, and the building is drawn in line by line as loading completes. Supporting information sits in the margins in the same register: live cursor coordinates, a project spec card covering type, founding year, focus and location, and a numbered system boot sequence. Functionally it covers asset loading for the interactive hero, so the drag-to-reveal behaviour responds immediately once the page lands. Editorially it sets the frame before a single line of marketing copy appears.

8

13

700

Cover image for The category default for AI

The category default for AI products is dark backgrounds and gradient glow. Heron's audience is architects, so we built the visual system out of their working material instead. Everything on the site is drawn as architectural line work. Plans, elevations, dimension strings, and annotation boxes styled like redline mark-ups, each one holding a genuine code reference rather than lorem text. The system does two jobs. It reads as native to someone who spends their day inside Revit, and it supports the product story, because Heron works inside the drawing rather than beside it.

7

18

755

proBarcelona, Spain

Quality Web & Product Design 🚀

$10k+: Earned

6x: Hired

5.0: Rating

130: Followers

expert

Certified Partner

Quality Web & Product Design 🚀

Cover image for Blackteq — Full-Site Design & Development

Blackteq — Full-Site Design & Development

1

18

BreuerBauer — Brand Storytelling, Web Design & Development

2

36

Cover image for Teknosfere — Web Design & Development

Teknosfere — Web Design & Development

2

48

Cover image for Auras Residences

Auras Residences

1

29

Mechelen, Belgium

Co-founder Osmo Supply

$1k+: Earned

2x: Hired

5.0: Rating

45: Followers

Certified Partner

Co-founder Osmo Supply

Cover image for Accordion

2

45

Docusign Brand website

39

448

Cover image for VRTL WRLD Website

VRTL WRLD Website

1

33

Placeholder project card media

View more →

Abbottabad, Pakistan

Webflow & Framer Developer | Smooth Website Animations

5.0: Rating

10: Followers

Webflow & Framer Developer | Smooth Website Animations

Cover image for I recently built a custom

I recently built a custom SVG page transition inspired by the attention to detail found in many Awwwards-winning websites. Instead of relying on a simple fade or slide, I wanted the transition to feel like part of the experience. I designed a hand-drawn scribble animation that flows between pages, with the stroke color changing based on the destination. It gives each page its own personality while keeping the overall experience connected. The interaction was built with GSAP, Barba.js, and custom SVG path animations. I spent a lot of time fine-tuning the timing, easing, and typography animations to make everything feel smooth, natural, and intentional. This isn't a full website, just a small interaction experiment. It was a chance to explore creative page transitions, refine animation techniques, and push my front-end motion skills a little further. I'd love to hear your thoughts or feedback.

2

118

Cover image for One of my projects.
The Fingo

One of my projects. The Fingo team worked with me on the Fifty Brook Green website. I got to create some interactive parts. Here are the things I did: • A hero section with an animation that changes shape. • Two custom sliders that you can play with. • Animations that show images in a way making the site feel more lively. The hero starts as a visual that takes up the whole screen. As you load the page it moves a bit. When you scroll down for the time it changes into a rounded shape making a smooth transition that pulls you into the site. I like making animations that feel smooth and nice. That make the site better, without being too much. I built it with GSAP.

1

235

Cover image for Rushinek Interactive Landing Page, GSAP Animation

Rushinek Interactive Landing Page, GSAP Animation

1

12

Cover image for D:eveloped a portfolio website for

D:eveloped a portfolio website for Daniel Cantero, a multidisciplinary sonologist, audiovisual engineer, and inventor. The goal was to create an experience that reflects his innovative work through refined visuals, thoughtful interactions, and smooth animations. Every detail was crafted to make the website feel immersive while keeping the content clear and engaging. A project I'm proud to have brought to life.

1

203

Ho Chi Minh City, Vietnam

Creative Developer — WebGL, Three.js & GSAP

11: Followers

Creative Developer — WebGL, Three.js & GSAP

Cover image for Crafting Creativity into Reality - Bison Studio

Crafting Creativity into Reality - Bison Studio

1

4

Cover image for A dynamic 3D portfolio - Hoang.moe

A dynamic 3D portfolio - Hoang.moe

0

13

Cover image for SHE KINGS - The Legendary Story

SHE KINGS - The Legendary Story

0

14

Cover image for Pushing Front-End Boundaries with Next.js & GSAP - ONiO

Pushing Front-End Boundaries with Next.js & GSAP - ONiO

1

6

Olga Travnikova

Szczecin, Poland

Webflow Developer | Figma to Webflow, CMS, GSAP animations

New to Contra

Webflow Developer | Figma to Webflow, CMS, GSAP animations

Cover image for Figma to Webflow with seamless page transitions

Figma to Webflow with seamless page transitions

0

7

Cover image for Fit Before You Fly.
The problem:

Fit Before You Fly. The problem: Travelers in Hoi An often have limited time for tailoring, making it difficult to fit multiple appointments in before their flight. The solution: A Hoi An tailor that plans three fittings backwards from the customer's departure time, letting them book the entire fitting schedule in under a minute. Owner dashboard: https://pixel-perfect-view-3886.lovable.app/owner (https://pixel-perfect-view-3886.lovable.app/owner»)

2

103

Cover image for Frishmann — Webflow development and animations

Frishmann — Webflow development and animations

0

5

Cover image for Royal Casino & Hotel — design and Webflow build

Royal Casino & Hotel — design and Webflow build

0

6

Coimbatore, India

Building Extraordinary Websites for B2B Startups / Scaleups.

New to Contra

Building Extraordinary Websites for B2B Startups / Scaleups.

Cover image for Frames from the Direct Design

Frames from the Direct Design web experience. Direct Design is a digital-first creative agency built around a simple idea: there’s always a clearer, more direct way forward. For the website, I worked on translating that identity into a complete digital experience, from interface design through Webflow development. The visual language carries across the layouts, navigation, interactions, motion, and responsive behavior while keeping the experience clear and easy to explore. Custom interactions and animations were used throughout the site to reinforce the idea of movement and direction. Page transitions, scroll-based motion, hover interactions, and smaller interface details help connect each part of the experience without overwhelming the content. The website was developed in Webflow with additional custom development where needed to create more tailored animations, transitions, and interaction behavior across the experience. A lot of attention went into the details, from responsive behavior and interaction states to the timing and movement between pages.

2

3

185

Cover image for Frames from the BoomID web

Frames from the BoomID web experience. BoomID is an identity authorization platform built around palm-based verification, using real-time risk intelligence to create a stronger connection between identity and access. For the website, the focus was turning a security-heavy product into an experience that feels clear, confident, and trustworthy without relying on the usual visual language of surveillance or fear. I worked on translating the brand identity into the digital experience through structured layouts, bold typography, a focused blue palette, motion, and a system of isometric 3D illustrations. Direct Design Agency led the strategy, creative direction, and visual identity, while we at CosmoFlow Agency led the brand expression across the 3D assets and web design, carrying the system consistently into the digital experience.

2

3

177

Cover image for Frames from the Nexterra web

Frames from the Nexterra web experience. Nexterra develops and operates clean energy systems across solar, wind, hydroelectric, energy storage, and nuclear, including small modular reactors. For the website, the challenge was presenting a technically diverse energy company through an experience that feels confident, energetic, and easy to navigate without falling into the familiar visual language of the renewable energy category. I worked on translating the brand system into the digital experience, bringing together bold typography, a dark visual foundation, energetic accent colors, structured layouts, and expressive 2.5D illustrations. The different energy categories are carried through the interface using distinct color cues, while the overall system stays visually consistent across the site. Motion, composition, and illustration help communicate complex infrastructure in a way that feels clear and approachable.

2

3

190

Cover image for Frames from the RippleLabs web

Frames from the RippleLabs web experience. RippleLabs is a voice AI infrastructure company bringing speech generation, real-time conversation, interaction analytics, and developer tools into one connected platform. For the website, the focus was translating a complex AI product into an experience that feels simple, fluid, and intuitive. I worked on translating the brand system into the digital experience, balancing expressive moments with clear product communication. Minimal layouts, structured typography, dotted ripple elements, shifting color treatments, and motion come together to make the technology feel approachable without losing its technical depth. Ripple concept carry through the layouts and interactions, giving the experience a consistent sense of movement and flow.

2

3

210