Personal Portfolio (HariWorks)

Role:Frontend Designer

Year:2026

Overview

Built with Next.js 16, TypeScript, and Tailwind CSS v4. Features a strictly typed content layer separating data and copy from presentation components, running on React Server Components.

Problem Statement

Personal developer portfolios often look generic, lack proper accessibility, and suffer from poor performance due to heavy client-side JavaScript libraries.

Proposed Solution

Built a customized brand platform using Next.js 16 App Router, isolating Client Components to achieve a lightweight client bundle.

System Architecture

React Server Components handle layout and content data mappings, while client-side scripts are isolated to visual rendering nodes.

API Client Request

FastAPI routing

SQLAlchemy ORM

MySQL Relational DB

Key Features

Zero client hydration cost for content wrappers
Standard CSS relative colors syntax
prefers-reduced-motion animation bounds
Statically pre-rendered dynamic project case study pages

Challenges Faced

Ensuring all interactive UI features work seamlessly under strict TypeScript compiler rules.

What I Learned

Gained expertise in Next.js Server Components, Tailwind v4 configurations, and advanced accessibilities.

Gallery & Mock Previews

Mock System Frame

Active Database log

Technology Stack

Next.js 16

TypeScript

Tailwind CSS v4

Framer Motion

Development StatusCompleted

Source Code Live Demo

Related Projects

Backend Development

Lead Management System API

Completed

A secure RESTful API for tracking sales leads. Implements JWT token-based authentication and role-based permissions.

Python

FastAPI

SQLAlchemy

MySQL

+1 more

View Case Study

IoT & Automation

Smart Home Automation (MQTT + ESP32)

In Progress

An IoT controller connecting local sensors and relays to an MQTT broker, offering low-latency web triggers.

Python

C++

ESP32

MQTT

+1 more

View Case Study