Managing Projects

Overview

Projects are displayed on your portfolio to showcase your work. Each project can include a title, description, image, technologies used, GitHub link, and optional website URL.

Project Interface

Projects are defined using the Project TypeScript interface:

src/types/index.ts

export interface Project {
  title: string;
  description: string;
  image?: ImageMetadata;
  technologies?: string[];
  githubLink: string;
  website?: string;
}

Field Reference

title

string

required

The name of your project. This will be displayed as the project heading.

description

string

required

A brief description of what the project does. Keep it concise and informative.

image

ImageMetadata

An optional image to display for the project. Import images from your assets directory.

technologies

string[]

An optional array of technology names or tools used in the project (e.g., ["JavaScript", "Node.js", "React"]).

githubLink

string

required

The URL to your project’s GitHub repository. This is a required field.

website

string

An optional URL to the project’s live website or demo.

Adding a New Project

To add a new project, edit the src/data/projects.ts file:

import type { Project } from "../types";

export const projects: Project[] = [
  {
    title: "mdast-util-slice-markdown",
    description: "A powerful, highly configurable TypeScript library for slicing markdown Abstract Syntax Trees (AST) by character position.",
    githubLink: "https://github.com/avivkeller/mdast-util-slice-markdown",
  },
  // ... other projects
];

Working with Images

Project images should be imported at the top of the projects.ts file and then referenced in the project object.

Steps to add an image:

Place your image file in src/assets/images/

Import it at the top of projects.ts:

import myProjectLogo from "../assets/images/my-project-logo.png";

Reference it in your project:

{
  title: "My Project",
  image: myProjectLogo,
  // ... other fields
}

Real-World Examples

Here are actual projects from the portfolio:

Library Project
Web Project
Full-Featured Project

{
  title: "unicode-case-folding",
  description: "Unicode case folding utilities based on the official Unicode Character Database",
  githubLink: "https://github.com/avivkeller/unicode-case-folding",
}

{
  title: "Terminal Tools",
  description: "A diverse assortment of utilities designed for the terminal.",
  technologies: ["JavaScript", "Node.js"],
  githubLink: "https://github.com/avivkeller/terminaltools",
  website: "https://tt.js.org",
}

{
  title: "Apache Gora Website",
  description: "The official website dedicated to the Apache Gora Project.",
  image: goraLogo,
  technologies: ["Bootstrap", "HTML"],
  githubLink: "https://github.com/apache/gora-site",
  website: "https://gora.apache.org",
}

Best Practices

Keep descriptions concise (1-2 sentences)
Use clear, descriptive project titles
List only the most important technologies (3-5 max)
Ensure all URLs are valid and accessible
Use high-quality images with transparent backgrounds when possible
Order projects by importance or recency (most important/recent first)

Getting Started

Content Management

Customization

Components

Deployment

Reference

Overview

Project Interface

Field Reference

Adding a New Project

Working with Images

Real-World Examples

Best Practices

Build docs developers (and LLMs) love

Getting Started

Content Management

Customization

Components

Deployment

Reference

​Overview

​Project Interface

​Field Reference

​Adding a New Project

​Working with Images

​Real-World Examples

​Best Practices

Build docs developers (and LLMs) love

Overview

Project Interface

Field Reference

Adding a New Project

Working with Images

Real-World Examples

Best Practices