Portfolio

A minimalist, section-based portfolio with context-driven architecture featuring themed areas for sections with smooth transitions and interactive elements. Built with React, TypeScript, Framer Motion and Styled Components the application follows accessibility best practices while implementing responsive design patterns. The project demonstrates clean state management with Zustand, performance optimisation techniques and comprehensive testing standards to ensure reliability.

ReactTypeScriptFramer MotionStyled ComponentsZustandJestReact Testing LibraryContext APILazy LoadingIntersection Observer

Liminal Portfolio is a sophisticated single-page application built with React and TypeScript that showcases my projects and blog content through distinctly themed sections with smooth transitions. The application features a consistent architectural pattern across different sections while providing unique visual identities for each area.

Project Highlights

Architecture & Design

The portfolio employs a modular, context-driven architecture with these key features:

Distinct Themed Sections: Each section (Home, Projects, Blog) has a unique visual identity with custom animations and styling while maintaining cohesive design language
Context-Based State Management: Custom state management implementation with React Context API and reducers, supplemented by Zustand for global state
Performance-Optimized Animations: Custom animation components with automatic performance adjustments based on device capabilities
Responsive & Accessible Design: Fully responsive layouts with accessibility considerations including reduced motion preferences

Technical Implementation

State Management

The application follows a pattern of separation between different types of state:

// Multiple specialized stores for different concerns
export const useBlogDataStore = create<BlogDataState>((set) => ({
  blogPosts: [],
  setBlogPosts: (posts) => set({ blogPosts: posts }),
  selectedPost: null,
  // Additional state and actions...
}));

export const useBlogFilterStore = create<BlogFilterState>((set) => ({
  selectedTag: null,
  setSelectedTag: (tag) => set({ selectedTag: tag }),
  // Additional filter state...
}));

Transitions & Animations

The application features a custom transition system for moving between sections:

// TransitionZone component creates smooth visual transitions
<TransitionZone 
  id="transition-home-projects"
  ref={(el) => observeSection(el)}
  fromTheme={theme.home} 
  toTheme={theme.projects}
  reduceMotion={prefersReducedMotion}
/>

Blog System

The blog implementation features:

Markdown content with frontmatter for metadata
Category and tag organization with visual styling
Series support for multi-part content
Table of contents generation
Search functionality across all fields

Projects Showcase

The projects section includes:

Featured project highlighting
Interactive timeline for chronological exploration
Tech stack display with categorization
Filtering by technologies and categories

Development Insights

Performance Considerations

The portfolio implements several strategies to ensure smooth performance:

Lazy Loading: Sections are loaded only when needed
Memoization: React.memo and useMemo for expensive components
Performance Monitoring: Custom utilities for measuring and tracking render counts
Responsive Animation: Animations automatically adjust based on device capabilities