|

Overview

I designed and built this portfolio as a professional platform to present my work as an Automation Developer.

The goal was not only to create a personal website, but to build a structured case study system that explains projects clearly: what problem was solved, what my role was, how the system was designed, which technologies were used, and what proof can be shown publicly without exposing private company or customer data.

The portfolio separates automation systems from frontend and product builds, so visitors can quickly understand the difference between operational workflow systems, internal tools, and web/product prototypes.

The challenge

My work includes many automation workflows, internal tools, Slack apps, document workflows, frontend prototypes, and Microsoft 365 integrations.

The challenge was to present this experience in a way that is professional, readable, and trustworthy without overwhelming the visitor with too much technical detail on the homepage.

The website needed to show enough proof to be credible, but also keep sensitive company data, customer data, workflow exports, credentials, internal URLs, and private operational details protected.

What I did

I designed, wrote, structured, and built the portfolio platform myself.

My work covered the full platform: the portfolio structure, writing and refining the project case studies, separating automation systems from frontend/product builds, and designing the project cards and detail pages.

I added the proof/evidence sections across the case studies, improved positioning and professional messaging, and built the responsive layouts.

For deployment, I used Git for version control and Vercel for auto-deploy on push, tested production pages after each update, and fixed build and routing issues along the way.

Platform structure

Core modules

Technical decisions

The outcome

The portfolio became a structured professional platform instead of only a personal webpage.

It now explains my experience through selected, proof-backed case studies and shows both automation architecture and frontend/product thinking.

The main impact is clarity: visitors can quickly understand my role, the type of systems I build, the technologies I use, and the difference between operational automation systems and frontend/product builds.

Tech stack

Proof / Evidence

This case study is based on the live portfolio platform itself.

What this case study demonstrates

Public code & documentation

Code excerpt: useScrollReveal hook

Every section on this page fades and slides up as it enters the viewport. That specific reveal is driven by a custom IntersectionObserver hook (about 25 lines of TypeScript), not Framer Motion. The observer self-disconnects after the first hit, so scrolling up and back down doesn't replay the animation. The broader portfolio runs four other custom systems alongside it: a WebGL hero shader, the View Transitions API for project-to-case-study navigation, a per-letter name reveal, and the brand-logo tech-stack marquee.

// useScrollReveal: IntersectionObserver hook
//
// Returns a ref and a boolean. Attach the ref to any element;
// the boolean flips to true the first time the element scrolls
// into view, then stays true forever. The observer
// self-disconnects after the first hit.
//
// Use case: trigger CSS transitions when content enters the
// viewport, without pulling in Framer Motion (~30kB gzipped)
// for what is fundamentally one boolean and a transition.

"use client";
import { useEffect, useRef, useState } from "react";

export function useScrollReveal(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          // Fire once, then stop observing. Never replay.
          observer.unobserve(el);
        }
      },
      { threshold },
    );

    observer.observe(el);

    return () => observer.disconnect();
  }, [threshold]);

  return { ref, isVisible };
}

Full hook in snippets/use-scroll-reveal.ts. The repository also covers the typewriter state machine used in the hero, the SVG architecture diagram component used across all case studies, and the consistent 9-section case study layout pattern. The full portfolio source is not republished. The live site is the demo; the repository documents the patterns behind it.