|

Modern UI/UX Responsive Website

Hoobank was based on a Figma design project. I used this course project to improve my work with responsive design concepts and how to integrate into a React.js - Tailwind app. The assets used can easily be interchanged with whatever design you are looking to create. What i really love about this design is using a combination of layering gradients behind the assets to make them pop with this 3d floating effect. All the styling is basically out of the box from Tailwindcss, even the custom thin scrollbar to match up with the app's bright cyan palette. A fully responsive app that looks great on any screen-size or device.

Ecommerce Site

A super clean e-commerce project using Next.js, React.js and Stripe to handle payments, and sanity.io as the Headless CMS to handle all of the content allowing teams to access the studio to edit as well. Much like I built this portfolio with all the latest tech to build amazing, fast and powerful applications, it's used here to show how clean and simple your site can look. Updating assets, content, prices or literally anything on this site can easily be accessed through Sanity's desktop studio manager and drag/drop new photos, cut and paste a new paragraph, increase/decrease a price in a split second. Using these technologies to handle the important work like the user experience and back-end logic, allows more time to focus on the design and layout to bring a dream to life.

Next UI Landing Page

Not all projects you are looking to build need to be complicated. This Nextjs app using the NextUI library was extremely fun to build. Built-in components are next level. Here I utilized the the Navbar, Toggle, and Dark Theme components for this single page app. Although I didn't route the links to anywhere they are still interactive. Fully responsive for all screen sizes and super smooth scrolling. Using CSS classes are very intuitive inline. The library itself and documentation is clean and very well organized to just jump in and start playing around and building. I want to point out these styles are directly out of the box without any customization. I'm definitely looking forward to building the follow-up site for this page. Check it out soon @ViolentLightLabs.

Light-Dark Theme

A smaller idea but packs a punch. I know we all have the option these days to go into our browsers and find a theme for just about anything. That inspiration is a simple "toggle click" for me. The illustration in this app is quite simple to see how it works but, this is just the beginning. You can customize exactly the themes you want. Local-storage with React hooks, It's just a component at the the end of the day that tells your application to keep the data preserved even on refresh. The toggle itself is all that's needed to select your modes. You can go absolutely crazy with never ending options if you choose. What's also great is that this component can easily drop into an existing code base.

3D Animated Background

I have always been interested in landing pages with an animation. Here I used interesting art to animate as a background using Three.js. Three.js is an amazing 3D JavaScript library that is powered straight from the browser. The ability for any responsive website to sit on top of the background is entirely possible. Rotating through different colors would also be a cool addition without the need for hard-coding in a color property. You can easily drop in a 3d design from Blender or whatever 3D modeler you like as well. Animation provides huge potential top make a website unique and create an edge over other websites. I'll be uploading some new images and animations so check back to check them out!

Rock Candy Music

Rock Candy was inspired by my interest in Spotify and how it all worked, collectively and responsively for all device size screens. A few months before this project i built a Spotify clone to see how it all connected using their developer mode API which was quite the learning experience. This project I changed it up significantly and simplified the UI. Simply search a song or select from pre-configured lists for genres. I Changed the color palette to something more vibrant and playful allowing the colorful song or album tiles sit upfront with easy to read fonts. Whats also unique is the ability to to pull up the lyrics while the singing along to your favorite track. Now this particular build deploys genres that are requested from Top Charts. The next revision I will build a 100% "Rock" app with all the sub-genres I can think of to make it a rockin' rollers dream. Check back soon!

SuPeR MooN

The Super Moon Agency is a cutting-edge web design concept developed by my firm Violent Light Labs that specializes in creating stunning, visually-rich websites for clients across a variety of industries. We combine our expertise in ReactJS and Tailwind CSS to create websites that are not only visually stunning, but also highly functional and user-friendly. Our approach to web design and development is rooted in a deep appreciation for the beauty and power of the natural world. That's why we've chosen to build our website around the theme of the super moon – a celestial event that captures the imagination of people around the world.