Bridging 6+ years of 3D/AR expertise with modern Frontend Engineering
Welcome to the central entry point of my development journey. This repository serves as a showcase of my transition from AR/Visual Design to Frontend Architecture, with a heavy focus on Three.js, TypeScript, React, and GSAP.
- Featured Projects
- Creative Labs | Three.js • GSAP
- Standalone Applications
- Frontend Foundations
- Connect with me
liquid-glass-experience |
Interactive 3D experience |    Rapier physics (WASM) |
Live |
portfolio |
A high-performance, motion-driven portfolio platform. 97 Performance score on PageSpeed Insights. |  |
Live |
3d-sofa-configurator |
High-performance product customizer. Features: Draco compression, PBR materials, and custom Scene Management. | |
Live |
Creative Labs | Three.js • GSAP
Experiments in WebGL, procedural animation, and interactive sequences.
| Source | Project Title | Description & Key Tech | Live Demo |
|---|---|---|---|
primitive-3D-shape |
Three.js PBR & GSAP Interaction Lab | A focused experiment on physically-based rendering (PBR) and smooth animations using Three.js and GSAP. | Live |
particle-button-effect |
Interactive Particle Explosion Button | UI component that deconstructs a standard HTML button into thousands of interactive particles using WebGL. | Live |
parallax-canvas |
Interactive Parallax Canvas $InProgress$ | An immersive, multi-layered parallax experience built with modern JavaScript and GSAP. | Live |
3D-image-slider |
3D Interactive Carousel | Image Carousel. GSAP & CSS Variables | Codepen |
bunny-jumper |
Bunny Jumper Animation (GSAP3) | A dynamic web animation showcasing a bunny jumping in and out of a hole. | Codepen |
interactive-header-sequence-gsap3 |
Interactive Header Sequence (GSAP3) | Sequenced entry animation on page load, performance use of transform. GSAP, HTML/CSS |
Codepen |
Larger-scale projects maintained in dedicated repositories.
| Repository Link | Project Title | Description & Key Tech | Live Demo |
|---|---|---|---|
react-ts-gsap-starter-kit |
React + GSAP + TS Starter Kit | Developer Tool • A professional-grade boilerplate for high-end creative development. Features ESLint 9, SASS 7-1 architecture, OKLCH color system, and optimized GSAP animation lifecycles. React • TS • GSAP | |
sass-vanilla-js-ecommerce-site |
Modular Sass & Vanilla JS E-commerce Site | Responsive site featuring dynamic product rendering & Shopping Cart logic via Local Storage. | Live |
snake |
Snake Game | Classic Snake game built to practice core JavaScript game loop mechanics. | Play Online |
quote-of-the-day |
Quote of the Day Web App | Fetches and displays a new quote daily. | Live |
gradient-generator |
Pastel Gradient Generator | Tool for generating smooth 2 & 3 color CSS backgrounds. Focus on CSS/JS input handling. | Play Online |
A collection of practice components and JavaScript logic exercises built during my core learning phase. Explore the /Projects folder for this full list.
| Folder Name | Project Title | Key Learning Focus | Live Demo |
|---|---|---|---|
tabs |
Tabs Project | Job experience dashboard. Vite + TypeScript + GSAP | Live |
menu |
Menu Project | Responsive restaurant menu app upgraded by refactoring to TypeScript and integrating GSAP. | Live |
accordion |
Advanced Accordion (TypeScript & GSAP Animation) | An interactive FAQ component upgraded by refactoring to TypeScript and integrating GSAP. | |
tours-react |
Tours React App | (Refactored to TypeScript). A functional app for viewing and managing a list of travel tours. | |
birthday-reminder-react-app |
Birthday Reminder App | A small React app designed to remind users of upcoming birthdays. (TypeScript Refactor) | |
multiple-color-themes |
Multiple color themes project |
A responsive page with toggle between Light, Dark, and a special "Custom" theme. | |
Image-hover-effect-CSS |
Image Hover Effect | CSS Transitions & Transforms, Pseudo-elements (::after), Blend Modes. |
Codepen |
...view more projects
Happy-Birthday-Piano-Player |
Piano Player | Event Handling (Mouse), DOM State Updates, UI flow management. | |
Reviews |
Reviews Carousel | DOM Manipulation, State Management (UI), Array of Objects data structure. | Codepen |
Challenge-Project-Credit-Card-Checker |
Credit Card Checker | Luhn Algorithm, Functional Composition, Array & String methods. | |
Team-Stats-JS |
Team Stats | Data Encapsulation (Getters), OOP Fundamentals, Object State Management. | |
Whale-Talk-Translator-JS |
Whale Talk Translator | String Manipulation, Loops, Array construction. | |
Sleep-Debt-Calculator |
Sleep Debt Calculator | Switch Statements, Input Validation & Control Flow. | |
Rock-Paper-or-Scissors-JS |
Rock, Paper, Scissors | User input handling, Random number generation, Game logic. |
(This section will be dynamically updated as I add projects).
# 1. Clone the repository
git clone https://github.com/kolonatalie/frontend-practice-projects
# 2. Navigate to the desired project folder
cd frontend-practice-projects/Projects/Project-Folder-Name
# 3. Run the code
# For UI Components (HTML/CSS/JS) Live Server recommended
Open the index.html file in your browser
# For JavaScript Snippets (e.g., Credit Card Checker):
node <filename>.js
These projects are maintained purely for educational and portfolio purposes. They represent my work-in-progress and evolving understanding of web development best practices. Feel free to explore, fork, and adapt the code for your own learning!
I'm always open to feedback, collaboration, and connecting with fellow developers.
Keywords & Topics
frontend development, portfolio project, HTML, CSS, JavaScript, beginner web development, Codecademy, DOM manipulation, interactive components, coding challenges, responsive design, creative coding, learning frontend, React, TypeScript, GSAP, Three.js, 3D