Skip to content

iamthesaint/ripple-shader-portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Personal Portfolio

Description

My web portfolio coded with custom shader background in GLSL to mimic water manipulation as the user guides the cursor. The page goes on to highlight projects that I have completed/contributed to/worked on in both an educational and personal setting. This portfolio intends to showcase unique and challenging techniques I have studied in a clean, professional way.

Tech Stack

  • Three.js — WebGL renderer for visual effects
  • Custom GLSL Shaders — Ripple/water effects using render-to-texture and fragment shaders
  • GSAP + ScrollTrigger — Scroll-based effects, smooth transitions, and sound control
  • Vanilla JavaScript — Clean framework, functional programming
  • HTML & CSS — Responsive layout and animation, custom text effects
  • Audio Integration — Ethereal sounds and UI sfx (desktop only)

Features

  • Overlay screen to initiate audio
  • Custom ripple shader responsive to cursor as constant background
  • Smooth scroll transitions between sections
  • Sound FX - on hover, click, and ambient background with mute option
  • Mobile optimization in progress

Inspiration

Visual style draws from interactive, moody storytelling using glitch art and ambient sound design - Individual elements are inspired by game theory and nature - specifically textural elements

License

This project is open-source and is only being used to test and display current techniques I am interested in

Please reach out to me with any insight or comments

About

a personal portfolio using a custom shader ripple background responsive to cursor location and pressure.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published