AlexJSully-Portfolio

Projects Documentation

Overview

This document explains how the projects grid is displayed and how to add new projects to the codebase.

Projects Grid Display

The projects grid is displayed using the ProjectsGrid component located in ProjectsGrid.tsx. This component creates a grid layout to showcase the projects.

Key Elements

• State Management: Uses React useState and local component state to manage view toggles and UI interactions.
• Grid Layout: Responsive grid via MUI Grid/Stack and CSS-in-JS styles.
• Project Cards: Thumbnail, name, title, employer, resource links. The component imports the project data from src/data/projects.ts.
• Analytics: The component calls logAnalyticsEvent for user interactions (e.g., clicking a project link or viewing details).
• Network-Aware: Uses isNetworkFast() utility to conditionally enable video autoplay.
• Hover Delay: Uses DELAYS.PROJECT_HOVER_VIDEO (1000ms) before showing videos on hover.
• Memory Management: Cleans up timeout on component unmount to prevent memory leaks.

Flowchart

flowchart LR
    A[ProjectsGrid Component] -->|Fetches| B[Projects Data]
    B --> C[Maps Projects to Grid Items]
    C --> D[Displays Project Cards]
    D --> E[Project Thumbnail]
    D --> F[Project Name]
    D --> G[Project Title - Employer]
    D --> I[Links]
    E --> J[Thumbnail Image]
    I --> K[Link Buttons]
    D --> L[YouTube Video]

// Example project object (see src/data/projects.ts)
const example = {
	id: 'my-project',
	name: 'My Project',
	title: 'Lead Developer',
	employer: 'Example Co',
	employerURL: 'https://example.com',
	url: 'https://example.com/my-project',
	urls: [{ text: 'GitHub', tooltip: 'Source', icon: /* Svg icon */ () => null, url: 'https://github.com/example' }],
	color: '#047a6b',
	dates: { startDate: '2023-01', endDate: '2023-12' },
	showcase: true,
	objectFit: 'contain',
	youtubeURL: 'https://www.youtube.com/embed/VIDEO_ID?mute=1',
};

Related Docs

• Component Overview
• System Architecture

{
	"name": "Project Name",
	"id": "project-id", // unique identifier for the project (associated with the image file name or publication)
	"description": "Project description", // optional
	"employer": "Employer Name", // optional
	"employerURL": "https://employer-website.com", // required if employer is provided
	"title": "Job Title",
	"publication": "https://publication-url.com", // optional
	"type": "Employment", // or 'Personal Project', 'School (MSc)', etc.
	"url": "https://project-url.com", // optional
	"urls": [
		// this is used to create a series of buttons with links
		{
			"text": "Link Text",
			"tooltip": "Tooltip description",
			"icon": "IconComponent", // this is a JSX component
			"url": "https://link-url.com"
		}
	],
	"color": "#colorCode",
	"dates": {
		"startDate": "YYYY-MM",
		"endDate": "YYYY-MM" // or current if ongoing
	},
	"showcase": true, // or false
	"objectFit": "contain", // optional, cover is used if nothing is provided
	"youtubeURL": "https://www.youtube.com/embed/{videoID}?autoplay=1&mute=1&cc_load_policy=1&controls=1" // optional: displays a YouTube video to play in the card if mouse hovered over
}

Adding Thumbnail Images

To add a thumbnail image for a new project, place the image in the appropriate directory:

1. Navigate to the images directory: Go to the public/images/projects directory.
2. Create a new directory: Create a new directory with the project ID (e.g., new-project).
3. Add the thumbnail image: Place the thumbnail image in the new directory and name it thumbnail.webp. Recommended to use .webp format for better performance.

By following these steps, you can successfully add new projects to the projects grid.

This site is open source. Improve this page.