Next.jsCompleted

Creative Portfolio Website

Modern, animated portfolio with 3D elements and smooth animations.

January 2025

About this project

A production-grade creative portfolio engineered to demonstrate high-level proficiency in Artificial Intelligence, Blockchain, and Modern Web Architectures. This platform transcends traditional static websites by offering a high-performance interactive experience powered by advanced WebGL shaders, physics-based simulations, and real-time data integration.

Tech Stack

Next.jsTypeScriptTailwind CSSThree.jsFramer MotionGSAP

Key Features

Immersive 3D Experience

▸Interactive 3D Lanyard: A physics-simulated 3D ID Card in the hero section that reacts to mouse movements.
▸Hyperspeed Backgrounds: Custom shader-based warp effects for a futuristic Web3 aesthetic.
▸Particle Systems: Dynamic background particles that enhance depth and interactivity.

Performance & UX

▸Bilingual (EN/ID): Complete internationalization support.
▸Smooth Scroll: Lenis-based smooth scrolling for a premium feel.
▸Theme Engine: System-preferred dark/light mode with a custom 'Click Spark' effect.

Highlights

3D animationsScroll effectsBilingual EN/ID

Installation

Clone the Repository

git clone https://github.com/Arfazrll/PersonalBlog.git
cd PersonalBlog

Install Dependencies

npm install

Launch Development Server

npm run dev

Challenges & Solutions

Challenge

Performance Bottlenecks with Heavy 3D Assets

Solution

Engineered a custom rendering pipeline using Instanced Meshes and aggressive DRaco compression, reducing initial load time by 60%.

Swarm AI Blog Writer