Portfolio Website

A modern, responsive portfolio website built with Next.js, featuring interactive components, dark/light mode, and content-rich sections. The latest version includes AWS Amplify backend integration, Three.js 3D visualizations, and enhanced Tailwind CSS v4.1.4 styling.

Overview
Technology Stack
Project Structure
Key Features
Pages
- Home
- About
- Projects/Resources
- Resume
- Contact
- Showcase
Components
Custom JavaScript Functionality
Styling
Deployment
Customization Guide
Troubleshooting

Overview

This portfolio website serves as a professional showcase for Siddharth Patel, highlighting expertise in cloud engineering, DevOps, and security implementation. The site combines modern design elements with interactive features for an engaging user experience.

Technology Stack

Framework: Next.js
Backend:
- AWS Amplify v6.14.2
- Serverless authentication and data services
Styling:
- Tailwind CSS v4.1.4 (zero-config)
- CSS Modules
- Inline styling for component-specific designs
3D Visualization:
- Three.js v0.176.0
- Custom network visualization components
Animation Libraries:
- AOS (Animate On Scroll)
- GSAP for advanced animations
Icons: Font Awesome
Interaction: interact.js for mobile touch interactions
CI/CD: Configured for AWS Amplify deployment

Project Structure

portfolio/
├── amplify/              # AWS Amplify configuration
│   ├── auth/             # Authentication resources
│   ├── data/             # Data API resources
│   ├── backend.ts        # TypeScript backend configuration
│   └── tsconfig.json     # TypeScript configuration
├── components/           # Reusable UI components
│   ├── Layout.js         # Main layout wrapper
│   ├── backgrounds/      # Background components
│   │   └── SpaceNetwork.js  # Three.js network visualization
│   └── studyguide/       # Study guide components
│       └── StudyGuideContent.js  # AWS study guide component
├── lib/                  # Library functions
│   └── cache-handler.js  # Caching utilities
├── old-website/          # Previous version of the website (legacy)
│   ├── css/              # CSS styles for old website
│   ├── images/           # Image assets for old website
│   ├── js/               # JavaScript files for old website
│   ├── projects/         # Project files for old website
│   └── views/            # View templates for old website
├── pages/                # Next.js pages
│   ├── _app.js           # Next.js application entry
│   ├── _document.js      # Custom document component
│   ├── index.js          # Home page
│   ├── about.js          # About page with skills visualization
│   ├── aws-study-guide.js # AWS study guide page
│   ├── contact.js        # Contact page
│   ├── linter-checkov.js # Checkov linter documentation
│   ├── portfolio-details.js # Project details page
│   ├── projects.js       # Projects/resources page
│   ├── resume.js         # Resume page
│   ├── showcase.js       # Tailwind CSS showcase page
│   └── api/              # API routes
│       └── contact.js    # Contact form handler
├── public/               # Static assets
│   ├── content/          # Markdown content
│   │   ├── aws-study-guide.md  # AWS study guide content
│   │   └── linter-checkov.md   # Checkov linter documentation
│   ├── css/              # CSS files
│   │   └── global.css    # Global CSS styles
│   ├── images/           # Image assets
│   │   ├── articles/     # Blog article images
│   │   ├── profile/      # Profile images
│   │   ├── projects/     # Project screenshots and logos
│   │   └── svgs/         # SVG graphics
│   ├── js/               # Client-side JavaScript
│   │   ├── background-animation.js  # Background animation
│   │   └── main.js       # Main JavaScript functionality
│   └── Siddharth Patel Resume.pdf  # Downloadable resume
├── styles/               # Global styles
│   ├── global.css        # Global CSS with Tailwind directives
│   └── components/       # Component-specific styles
│       └── About.module.css  # About page styles
├── utils/                # Utility functions
│   └── markdown.js       # Markdown processing utilities
├── views/                # EJS templates (legacy)
│   ├── layout.ejs        # Main layout template
│   └── resume.ejs        # Resume template
├── .gitattributes        # Git attributes file
├── .gitignore            # Git ignore file
├── .nvmrc                # Node Version Manager configuration
├── next.config.js        # Next.js configuration
├── amplify.yml           # AWS Amplify configuration
├── amplify-custom-build.yml  # Custom Amplify build instructions
└── package.json          # Project dependencies

Key Features

AWS Amplify Backend Integration

The portfolio now leverages AWS Amplify for enhanced backend functionality:

Authentication Services: Secure user authentication flow with multiple providers
Data Services: Managed API with GraphQL interface for dynamic content
Serverless Architecture: Fully serverless backend with automatic scaling
TypeScript Support: Strongly-typed backend configuration using Amplify's TypeScript interface
Secure API Access: Role-based access control for backend resources

Implementation details:

Backend configuration in amplify/backend.ts
Authentication resources in amplify/auth/resource.ts
Data models and schema in amplify/data/resource.ts
Custom build configuration in amplify-custom-build.yml

Three.js 3D Network Visualization

A sophisticated 3D network visualization using Three.js that creates an immersive, interactive representation of cloud environments and services:

Interactive 3D Environment: Real-time rendered network visualization with animated camera rotation
Dynamic Cloud Architecture: Visualization of cloud services across different providers (AWS, Azure) and environments (dev, prod, stage)
Animated Data Flow: Particle animations showing real-time data transfer between connected services
Auto-Expanding Network: Network that grows organically over time, simulating a dynamic cloud infrastructure
Environment Labeling: Text labels for each node showing provider, service, and environment
Responsive Design: Canvas that automatically adapts to viewport size across all devices
Performant Rendering: Optimized WebGL rendering for smooth performance even with hundreds of nodes
Visual Grouping: Color coding by provider, environment, or service type for intuitive visualization

Implementation Details

The SpaceNetwork.js component features an advanced implementation with:

// Dynamic Three.js loading compatible with Next.js
const [THREE, setTHREE] = useState(null);
useEffect(() => {
  import('three').then(setTHREE);
}, []);

// Extensive configuration options with sensible defaults
const {
  starCount = 150,              // Maximum number of nodes in the network
  initialNodeCount = 5,         // Number of nodes to start with before expansion
  connectionDistance = 200,     // Maximum distance for nodes to form connections
  dataTransferRate = 0.5,       // Chance per frame to spawn new data transfer particles
  particleSize = 5,             // Base size of data transfer particles
  // ... many more configuration options
} = config || {};

// Smart node generation with realistic cloud service naming
const generateNodeLabel = () => {
  // Pick a random provider (AWS, Azure, etc.)
  const provider = providers[Math.floor(Math.random() * providers.length)];
  
  // Pick a random service for the selected provider
  const service = cloudServices[provider][Math.floor(Math.random() * cloudServices[provider].length)];
  
  // Pick a random environment
  const environment = environmentNames[Math.floor(Math.random() * environmentNames.length)];
  
  return {
    provider,
    service,
    environment,
    label: `${provider}-${service}-${environment}`
  };
};

Visual Features

The visualization includes several sophisticated visual elements:

Custom Shader Materials: Custom shader implementations for glowing nodes and particle effects
Dynamic Textures: Procedurally generated textures for optimal rendering performance
Particle Systems: Advanced particle systems for data transfer visualization
Arc Trajectories: Curved arc paths for particle movement between nodes
Color Schemes: Intelligent color schemes based on node properties

Performance Optimizations

To ensure smooth performance across devices, the component implements:

Raycasting Throttling: Optimized raycasting for interaction with frame limiting
Object Pooling: Reuse of particle objects to reduce garbage collection
Level-of-Detail System: Simplified rendering for distant objects
Frustum Culling: Rendering only objects visible to the camera
Texture Atlasing: Combined textures for reduced draw calls

This implementation serves as both a visually engaging background and a technical demonstration of advanced Three.js knowledge, cloud architecture understanding, and optimization techniques.

Tailwind CSS v4 Integration

The portfolio now uses Tailwind CSS v4.1.4 with zero-config setup:

Zero Configuration: Simplified setup with automatic detection of Tailwind directives
Modern Utility Classes: Access to the latest utility-first CSS framework
Responsive Design: Built-in responsive utility classes for all screen sizes
Custom Components: Tailwind-styled UI components throughout the site
CSS Variables Integration: Works seamlessly with custom CSS variables for theming

Implementation details:

Tailwind directives in styles/global.css
Showcase page demonstrating key Tailwind features at /showcase
Consistent styling system using Tailwind's utility classes

Interactive Skills Architecture Map

One of the standout features is the interactive skills architecture visualization on the About page:

Central Hub: A pulsating central element representing "DevOps Central"
Skills Nodes: Multiple category nodes positioned in a circle around the central hub
Dynamic Connections: Animated SVG paths with data packet animations flowing between nodes
Expandable Panels: Hover-based expanded panels showing detailed skills for each category
Mobile-Friendly: Touch interactions with pinch-to-zoom and draggable container

Implementation details:

Located in pages/about.js
Uses custom JavaScript for positioning nodes in a circle
SVG-based connection lines with animation
interact.js for mobile touch interactions

Dynamic Theme Switching

The website supports both dark and light modes with smooth transitions:

Default dark theme with option to toggle
Theme preference saved in localStorage
Consistent styling across both themes
Automatic detection of system preferences

Implementation:

Theme toggle in components/Layout.js
CSS variables for theme colors
Media queries for system preference detection

Responsive Design

Fully responsive design that adapts to all screen sizes:

Mobile-first approach
Breakpoints for mobile, tablet, and desktop views
Optimized layout adjustments for different screen sizes
Special mobile interactions for touch devices

Animated UI Elements

Rich animations throughout the site enhance user experience:

Scroll-triggered animations using AOS library
Interactive hover effects
Page transition animations
Particle animations in the background

Components

Layout

The main layout component (components/Layout.js) provides:

Consistent page structure
Navigation header
Footer
Theme switching functionality
Mobile menu handling

Implementation details:

Uses React hooks for state management
Handles scroll events for header styling
Controls theme switching logic
Manages mobile menu state

Navigation components include:

Desktop navigation with horizontal links
Mobile navigation with hamburger menu
Active link highlighting
Smooth scrolling to sections

The footer component includes:

Copyright information
Social media links
AWS hosting information
Quick links

Content Panels

Reusable content panel components:

Project panels for project cards
Service panels for expertise areas
Skill panels in the architecture visualization

Custom JavaScript Functionality

Skills Visualization

The skills architecture visualization uses several custom functions:

// Position the category nodes in a circle
const positionNodesInCircle = () => {
  // Calculate container dimensions
  // Determine radius based on container size
  // Position each node based on angle and radius
  // Add transitions for smooth positioning
};

// Draw connection lines between nodes and central hub
const drawConnectionLines = () => {
  // Find positions of central hub and nodes
  // Create SVG paths between points
  // Apply styling to paths
};

// Animate data packets flowing through connections
const animateDataPacket = (path, onComplete) => {
  // Create SVG circle element
  // Set random size and color
  // Animate position along path
  // Add pulse effect
  // Remove when animation completes
};

Background Animations

Background animations include:

Particle animations in the background
Subtle floating elements
Code block animations for visual interest

Interactive Elements

Interactive elements throughout the site:

Hover effects on service cards
Expandable skill panels
Click-to-expand mobile interactions
Touch-based dragging and zooming for mobile

3D Network Visualization

The SpaceNetwork component implements a sophisticated 3D network visualization:

// Main initialization function
const initThreeJs = async () => {
  // Dynamic import Three.js modules
  // Setup scene, camera, and renderer
  // Create node network with configurable parameters
  // Implement data transfer particles
  // Add interactive camera controls
};

// Generate network nodes
const createNetworkNodes = () => {
  // Create geometry for nodes
  // Apply custom shaders and materials
  // Position nodes in 3D space
  // Assign environment labels
  // Add to scene
};

// Simulate data transfer between nodes
const simulateDataTransfer = () => {
  // Generate particle systems
  // Animate particles along connection paths
  // Apply glow and pulse effects
  // Handle particle lifecycle
};

Styling

Tailwind CSS v4

Tailwind CSS v4 implementation details:

Zero-config setup with automatic detection of Tailwind directives

Core directives in styles/global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Custom component styles using @layer components for better organization
Utility classes for consistent spacing, colors, and typography
Extended theme configuration with custom color palette

Benefits of the Tailwind CSS v4 implementation:

Faster development with utility-first approach
Consistent design system across all components
Better performance with optimized CSS output
Easier responsive design with built-in breakpoint utilities

Global Styles

Global styles (styles/global.css) include:

Typography settings
Color variables for theming
Utility classes
Animation keyframes
Theme switching variables

Component-Specific Styles

Component styling approaches:

Inline styles for dynamic values
CSS Modules for component isolation
Tailwind utility classes for layout
Custom CSS for specialized animations

Responsive Breakpoints

Key breakpoints for responsive design:

/* Mobile (default) */
/* Base styles here */

/* Tablet */
@media (min-width: 768px) {
  /* Tablet styles */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Desktop styles */
}

/* Large Desktop */
@media (min-width: 1280px) {
  /* Large desktop styles */
}

Deployment

The website is configured for deployment on AWS:

AWS Amplify Deployment

Connected to GitHub repository
Configured with amplify.yml for build settings
Set up with CloudFront distribution for global CDN
Node.js version 18+ specified for compatibility with modern dependencies
Backend services auto-deployed with frontend changes
Continuous integration with automatic preview deployments for pull requests

Amplify configuration (amplify.yml):

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm ci
    build:
      commands:
        - npm run build
        - npm run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

Backend configuration overview:

TypeScript-based Amplify configuration
Auth resources with multiple authentication providers
Data services with GraphQL schema
Custom build scripts for backend resources
Environment-specific configuration for different deployment stages

Customization Guide

To customize this portfolio for your own use:

Personal Information

Update personal details in page components
Replace profile images in /public/images/profile/
Modify skill categories in the skillCategories array in about.js

Projects

Update project information in projects.js
Add new project images to /public/images/projects/

Styling

Modify color scheme in styles/global.css
Adjust animations and transitions as needed
Customize responsive breakpoints for your content

Content

Update text content in each page component
Modify markdown content in /public/content/ directory
Update resume PDF in the public directory

Styling with Tailwind

Use Tailwind utility classes directly in your JSX/HTML
Customize theme in a tailwind.config.js file if needed
Extend Tailwind's default classes with custom utilities
Use @apply in CSS for reusable component styles

Troubleshooting

Common Issues

Skills visualization not rendering properly:

Check browser console for errors
Ensure container has proper dimensions
Verify that all nodes have correct data attributes

Dark/light mode toggle not working:

Check localStorage access in your browser
Verify CSS variables are being applied correctly
Check for JS errors in the theme switching function

Mobile touch interactions not working:

Ensure interact.js is properly loaded
Check touch event handlers are registered
Verify mobile-specific CSS is applied correctly

Animation issues:

Make sure AOS library is properly initialized
Check for conflicting animations or transitions
Ensure elements have correct positioning for animations

Tailwind CSS Issues:

Check that Tailwind directives are properly included in your CSS
Verify Node.js version is 18+ for compatibility with Tailwind v4
Ensure PostCSS is properly configured
Check for conflicting CSS that might override Tailwind classes

Layout/styling issues:

Use browser developer tools to inspect and debug CSS issues
Check for conflicting styles or specificity problems
Verify media queries are functioning correctly

Getting Help

If you need assistance with this codebase:

Check Next.js documentation for framework-specific issues
Review Tailwind CSS documentation for styling questions
Consult animation library docs (AOS, GSAP) for animation concerns
For deployment issues, refer to AWS Amplify documentation

Portfolio / Details /

Portfolio Website

Table of Contents

Overview

Technology Stack

Project Structure

Key Features

AWS Amplify Backend Integration

Three.js 3D Network Visualization

Implementation Details

Visual Features

Performance Optimizations

Tailwind CSS v4 Integration

Interactive Skills Architecture Map

Dynamic Theme Switching

Responsive Design

Animated UI Elements

Pages

Home

About

Projects/Resources

Resume

Contact

Showcase

Components

Layout

Navigation

Footer

Content Panels

Custom JavaScript Functionality

Skills Visualization

Background Animations

Interactive Elements

3D Network Visualization

Styling

Tailwind CSS v4

Global Styles

Component-Specific Styles

Responsive Breakpoints

Deployment

AWS Amplify Deployment

Customization Guide

Personal Information

Projects

Styling

Content

Styling with Tailwind

Troubleshooting

Common Issues

Tailwind CSS Issues:

Layout/styling issues:

Getting Help