Building This Portfolio In Public

The Problem

Most portfolios only show the final result. I wanted to show the decision-making process behind building a real website.

Design Decision

How should this project be approached?

Debugging a Real Issue

This navigation menu breaks on mobile due to a missing CSS class. Try to debug it.

Component Playground

Small UI components built with reusable CSS and JavaScript state. Toggle interactions to see how behavior changes.

Accessibility & Performance

This project is built with accessibility and performance in mind, even without frameworks.

• Semantic HTML: Sections, headings, buttons, and labels improve screen reader support.
• Reduced Motion: Animations can be disabled to respect user preferences.
• Performance: Vanilla JS, minimal DOM updates, and IntersectionObserver for animations.
• No Framework Overhead: Faster load times and clearer control over behavior.

Featured Projects

Live projects built with vanilla HTML, CSS, and JavaScript. Click to see them in action.

See My Full Portfolio

Explore more case studies, projects, and detailed breakdowns of my work and process.

Performance & Metrics

This site is built for speed and accessibility. Here are the current metrics:

Code Snippets & Best Practices

Reusable patterns and real-world solutions you can adopt immediately.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll('.lazy').forEach(el => {
  observer.observe(el);
});

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

const handleResize = debounce(() => {
  console.log('Window resized');
}, 300);

function setWithExpiry(key, value, ttl) {
  const item = {
    value: value,
    expiry: Date.now() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry(key) {
  const item = JSON.parse(localStorage.getItem(key));
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

CSS Grid & Flexbox Playground

Interactive demonstrations of modern layout techniques.

Animation Library

Smooth, performant animations using CSS transforms and transitions.

Form Validation & Error Handling

Real-world form patterns with client-side validation.

Loading States & Skeletons

Patterns for better perceived performance during data loading.

Accessibility Checklist

WCAG 2.1 AA compliance patterns demonstrated throughout this site.

Testing Showcase

Unit tests and E2E examples from my projects.

test('debounce delays function execution', (done) => {
  let callCount = 0;
  const fn = debounce(() => callCount++, 100);
  fn();
  fn();
  fn();
  setTimeout(() => {
    expect(callCount).toBe(1);
    done();
  }, 150);
});

describe('Form Validation', () => {
  it('shows error on invalid email', () => {
    cy.get('#emailInput').type('invalid');
    cy.get('button[type="submit"]').click();
    cy.get('#emailError').should('be.visible');
  });
});

Skills & Tech Stack

The technologies and methodologies I specialize in.