Duncan Law - Portfolio Website

Welcome to my portfolio website! This project showcases my work and skills as a Computing for Digital Media and Games student. The website features modern web technologies and interactive elements to create an engaging user experience.

Live Demo

Visit my portfolio at: https://dundd2.github.io/Portfolio-Website/

Overview

This portfolio website serves as a digital representation of my capabilities and experiences in the field of computing. It highlights my passion for technology, game development, and multimedia production.

Features

Visual Elements & Animations

• Particle.js background animation for dynamic visual effects
• Custom loading animation with triple-layered spinning loader
• Smooth fade-in animations for project cards using Intersection Observer
• 3D card transformation effects with perspective and hover animations
• Custom scrollbar styling for enhanced user experience
• Dynamic skill progress bars with animated fill effects

Interactive Components

• Dark/Light theme toggle with smooth transition effects
• Responsive navbar with smooth scroll functionality
• Interactive project cards with 3D hover effects
• Floating scroll-to-top button
• Mouse-tracking card rotations for project displays

Layout & Structure

• Responsive grid layouts for projects and skills sections
• Timeline-based education section with animated entries
• Skills tree visualization with categorized technical abilities
• Language proficiency cards with animated progress bars
• Achievement cards with highlight animations
• Project gallery with hover effects and image scaling

Technical Implementation

• CSS3 features:
  • Custom animations and keyframes
  • CSS Grid and Flexbox layouts
  • CSS Variables for theme switching
  • Transform and transition effects
  • Backdrop filters and blur effects
• JavaScript functionality:
  • Intersection Observer for scroll animations
  • Dynamic theme switching with local storage
  • Particle.js integration: Created custom particle effects for the background
  • Mouse movement tracking for 3D effects
• Responsive Design:
  • Mobile-first approach
  • Breakpoint-based media queries
  • Fluid typography and spacing

Sections

1. About Me - Professional introduction with animated text
2. GitHub Projects - Showcase of development work with interactive cards
3. Awards & Achievements - Highlighting professional accomplishments
4. Education Timeline - Animated progression of academic history
5. Technical Skills - Categorized display of programming abilities
6. Language Proficiency - Visual representation of language skills
7. Contact Section - Professional communication channels

Technologies Used

• HTML5
• CSS3 (Advanced animations and layouts)
• JavaScript (ES6+)
• Particle.js
• Intersection Observer API
• LocalStorage API
• CSS Custom Properties
• CSS Grid/Flexbox

Performance Optimizations

• Lazy loading for images
• Optimized animations using transform properties
• Efficient DOM manipulation with Intersection Observer
• Smooth scrolling implementation
• Resource preloading for critical assets

Contact

• Email: dunddatuk@gmail.com
• LinkedIn: https://www.linkedin.com/in/duncan-l400
• GitHub: https://github.com/dundd2

Credits

• Particle.js by Vincent Garreau: GitHub Repository

particles.js

• Author: Vincent Garreau
• Repository: VincentGarreau/particles.js
• Version: 2.0.0
• License: MIT
• Description: A lightweight JavaScript library for creating particles
• Official Demo: https://vincentgarreau.com/particles.js/
• Generator: http://vincentgarreau.com/particles.js/

Detailed Features

Animation System

• Customized particle system background using Particle.js
  • Configurable particle density and movement
  • Responsive to viewport size
  • Optimized performance

Interactive Project Cards

• 3D transformation effects
  • Perspective rotation based on mouse position
  • Depth-based shadow effects
  • Smooth transition animations
• Dynamic content loading
  • Progressive image loading
  • Lazy-loaded project details
  • Animated entry effects

Skill Visualization

• Dynamic progress bars
  • Animated fill effects
  • Custom color schemes
  • Responsive to viewport
• Interactive skill tree
  • Hierarchical skill representation
  • Hover effects
  • Category-based organization

Education Timeline

• Animated timeline elements
  • Progressive reveal on scroll
  • Custom connector lines
  • Highlight effects
• Responsive layout
  • Mobile-friendly view
  • Collapsible sections
  • Touch-friendly interaction

Language Proficiency Display

• Visual progress indicators
  • Animated percentage bars
  • Color-coded proficiency levels
  • Interactive tooltips
• Dynamic updates
  • Real-time animation
  • Smooth transitions
  • Responsive scaling

Development Practices

Code Organization

• Modular CSS structure
  • Component-based styling
  • BEM methodology
  • Custom properties for theming
• JavaScript architecture
  • Event delegation
  • Performance optimization
  • Clean code practices

Responsive Design

• Mobile-first approach
  • Fluid typography
  • Flexible layouts
  • Touch-optimized interactions
• Progressive enhancement
  • Core functionality first
  • Enhanced features for modern browsers
  • Graceful degradation

Performance Optimization

• Resource loading
  • Critical CSS inlining
  • Deferred script loading
  • Image optimization
• Runtime performance
  • Debounced event handlers
  • RAF for animations
  • Memory management

Accessibility Features

• ARIA landmarks
• Keyboard navigation
• Screen reader support
• High contrast modes
• Focus management

📜 License

This project is licensed under the MIT LICENSE.