![Natalia aka kolonatalie — Creative Developer](src/assets/demo-liquid-glass.gif)

# Liquid Glass Experience — [Live Demo](https://liquid-glass-experience.vercel.app)

![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.dot.js&logoColor=white)
![GSAP](https://img.shields.io/badge/GSAP-88CE02?style=for-the-badge&logo=greensock&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Sass (SCSS)](https://img.shields.io/badge/Sass(SCSS)-hotpink?style=for-the-badge&logo=sass&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

## Key Features

- **Real-time Liquid Physics**: Powered by `@dimforge/rapier3d-compat` (WASM) for high-performance particle interaction.
- **Dynamic Metaballs**: Utilizing `MarchingCubes` algorithm to create organic, fluid-like "liquid glass" surfaces.
- **Glassmorphism & PBR**: Advanced `MeshPhysicalMaterial` with transmission, thickness, and IOR for realistic glass refraction.
- **Interactive Explosions**: Raycaster-based interaction that allows users to "scatter" the liquid drops with a click.
- **Optimized Rendering**: Smooth 60 FPS experience achieved through dynamic code splitting and lazy loading of heavy modules.


## Tech Stack

- **Three.js**
- **GSAP**
- **Vite**
- **Sass (Modern API)**: Using `@use` and `@forward` for modularity.
- **Stylelint**: Enforcing BEM methodology and property order.
- **OKLCH**: Modern color space for superior web visuals.

## Installation
```Bash
# Clone the repository
git clone https://github.com/kolonatalie/portfolio

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev
```
> ***Note:** `--legacy-peer-deps` is required for ESLint 9 compatibility with some plugins.*

## Available Scripts

|  |  |
| :--- | :--- |
|`npm run dev`| Starts Vite dev server at `http://localhost:3000` |
|`npm run build`| Builds the project.|
|`npm run preview`| Locally previews the production build|
|`npm run lint`| Audits JS/TS and SCSS for errors.|
|`npm run lint:fix` | Automatically fixes linting and styling issues.|

---

## Connect with Me

I'm always open to discussing creative technology, motion design, or potential collaborations.

[![LinkedIn Badge](https://img.shields.io/badge/LinkedIn-563D6F?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kolonatalie/)
[![X Badge](https://img.shields.io/badge/X-8A62B3?style=for-the-badge&logo=x&logoColor=white)](https://x.com/dev_kolonatalie)
[![Bluesky Badge](https://img.shields.io/badge/Bluesky-A575D4?style=for-the-badge&logo=bluesky&logoColor=white)](https://bsky.app/profile/kolonatalie.bsky.social)
[![Mastodon Badge](https://img.shields.io/badge/Mastodon-704F91?style=for-the-badge&logo=mastodon&logoColor=white)](https://mastodon.social/@kolonatalie)
[![GitHub Badge](https://img.shields.io/badge/GitHub-3D2B4F?style=for-the-badge&logo=github&logoColor=white)](https://github.com/kolonatalie)