My portfolio website shares my journey through interactive experiences from horizontal and vertical perspectives—the portfolio was nominated for CSS Design Awards and Web Design Awards.

Awards received:
Special Kudos Award by CSS Design Awards
UI Design Award by CSS Design Awards
UX Design Award by CSS Design Awards
Innovation Design Award by CSS Design Awards

IJBDesign Portfolio

During a interview process Talk Space requested to rebuild their old website with custom JS slider, animated FAQs and improve their current Lighthouse Scores.

Talk Space

Client project.
Collaborative project with A7 Creative Studio. Custom carousel, Javascript controlled tab menu for mobile breakpoint. CMS menu and eCommerce setup

spot-dessert-bar-ijbd

jemz-smiles-ijbd

A rebuild of Antimony Studio's The MekaVerse NFT website. Custom codes, CSS Grid setup, GSAP and Three.JS. Built with Finsweets Client-First Style System and a sprinkle of FS-Attributes. Looking forward to their final product lunch big fan of Japanese Anime.

themekaverse-ijbd

Two infinite carousel sliders without using JavaScript. All setup with Webflow's interactions.

infinite-carousel-ijbd

Hi! 

I created a project for The Webflow Party hosted by Melissa Mendez founder of The Webflow Party. During the Live-Build we covered design tools, resources, design systems and style systems. This project was created with Finsweets Client-First Style Systems. CFSS organization helped developed a well balanced structure in Webflow.

Cheers,

Ivan - ijbdesign

webflow-party-build

Header services infinity cycle using a 3D forward rotation. Social media icons with reverse hover states.

header-rotation

Simple price chart table with a tool popup window on hover for desktop and click for all mobile breakpoints. I used a dropdown to create the tool tip popup.

price-chart-popup

Team profile cards with hover in/hover out for desktop and click open/close for all mobile breakpoints. CSS Grid set-up and interaction set-up

team-profile-cards

Exploring some experimental circular SVG text effects for an intro animation. Inspired by Mary Lou in CodeDrop's Playground.

Three demos with hover-in, hover-out and click/tap interactions. Also, links to CodeDrop project and an Illustrator file I used to create the SVG text. Clone it today and feel free to use for all projects.

circular-svg-effect

Updates to Dropbox are complete and you can clone this project again. Now, you can hear the sound. Thank you for your patients.

Using custom code to control unmuting and muting sound. Video independent of the sound file loading from a cloud server ( Dropbox ). By default all audio URLs end with d1=0, if left with default settings sound wont play change to d1=1.

Custom Code :

<audio src="https://youraudiosource.com" class="audio">

// The audio HTML element
const audio = document.querySelector('audio');

let playing = false;

// Check if document is ready
$(document).ready(function(){
	// Clicking the play_btn
	$('.play_btn').click(function(){
  	if (playing == true) {
    	audio.pause();
      playing = false;
			// Setting the button text
      $(this).html("Play");
    } else {
    	audio.play();
      playing = true;

			// Setting the button text
      $(this).html("Pause");
    }
  });
});

Audio unmute/mute Javascript control

A responsive grid portfolio with hover effects. Style Guide include with layout so you can edit and fit your own brand. Color palette saved to document.

portfolio-responsive-grid

A starter style guide for all your Webflow projects. Every layout needs
a foundation and Initium can help you lay down the main bricks of your project for a smoother no-code development experience. Clone the project today with text styles, color, buttons, links and resources.

Transfer your style guides from your designs in Figma, Sketch, Xd or any other UI design tool. Customize it for all your projects use what you need or add new items to help you develop quicker.

initium-style-guide

A landing page for a fictional fitness program to track diets and exercise. I used Webflow NavBar and built a custom with interactions. CSS grids for features, benefits section a parallax and product download app links. Feel free to clone this project.

fitness-app

CSS Grid built in Webflow that is responsive for all breakpoints Desktop, Tablet, Mobile Landscape and Mobile Portrait. I was testing mosaic grid layouts and CSS Grid applications. Feel free to clone this project.

css-responsive-grid

A fictional touring bands website to sell their music. Is not complete but I wanted to share the complex interactions and hover effects. This is an ongoing project to test my interaction and problem solving skills using Webflow's infinite possibilities of building complex interactions.

Also, the NavBar is a custom, Symbol instance, and fixed quick-access tray and Classes are using BEM naming method. Feel free to use.

Ivan Badia

About

Skills

About

About