Back to Projects
Creative Tech
Completed

Creative Portfolio Website

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

January 2025
Creative Portfolio Website
Live DemoSource Code

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. It serves as a living laboratory for experimenting with cutting-edge frontend technologies while maintaing strict accessibility and SEO standards.

Tech Stack

Next.js
TypeScript
Tailwind CSS
Three.js
Framer Motion
GSAP

Tools Used

VS Code
Figma
GitHub

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.

Professional Insights

  • ▸Real-time Coding Stats: Integrated WakaTime cards showing your top languages and coding activity.
  • ▸Dynamic GitHub Metrics: Live cards displaying repository stats and contributions.
  • ▸Interactive Timeline: A visual journey of your career at CPS Lab, HUMIC, and more.

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.
  • ▸Responsive Architecture: Pixel-perfect layouts for mobile, tablet, and desktop.

Scalable Ecosystem

  • ▸Modular Components: Atomic design architecture for maximum reusability.
  • ▸Type Safety: Full TypeScript implementation for robust code reliability.
  • ▸SEO Optimized: Semantic HTML and meta tags for maximum visibility.

Highlights

3D animations
Scroll effects
Bilingual EN/ID

Installation

Clone the Repository

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

Install Dependencies

npm install

Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_GITHUB_USERNAME=Arfazrll
WAKATIME_API_KEY=your_wakatime_key

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% while maintaining a consistent 60 FPS on mobile devices through dynamic quality scaling.

Challenge

Seamless State Synchronization

Solution

Implemented a robust global state management system using Zustand to orchestrate complex interactions between the React UI layer and the 3D Canvas, ensuring perfectly synchronized animations without prop-drilling overhead.

Challenge

Cross-Browser Shader Compatibility

Solution

Developed fallback materials and uniform-based capability detection to ensure the custom GLSL shaders render correctly across inconsistent WebGL implementations on Safari and older Android browsers.

Previous
Swarm AI Blog Writer
Next
SNBTIn - Platform Persiapan SNBT 2025
LinkedIn