Skip to main content

​
TypeScript Types & Interfaces

Type definitions and interfaces used throughout the portfolio application.

​
Chat & AI Types

Types related to the ChatBox component and AI interactions.

​
Message

Represents a single chat message in the conversation. 
type Message = {
  role: 'user' | 'assistant' | 'system';
  content: string;
};
​
role
'user' | 'assistant' | 'system'
required
The role of the message sender:
  • user - Messages from the end user
  • assistant - Responses from the AI
  • system - System prompts and instructions
​
content
string
required
The text content of the message. Supports markdown formatting for assistant messages.

​
BlogContext

Context information about a blog post for AI summarization. 
type BlogContext = {
  title: string;
  content: string;
  excerpt: string;
};
​
title
string
required
The title of the blog post
​
content
string
required
The full markdown content of the blog post
​
excerpt
string
required
A brief excerpt or description of the blog post

​
ChatBoxProps

Props interface for the ChatBox component. 
type ChatBoxProps = {
  isOpen: boolean;
  onClose: () => void;
  isDarkMode?: boolean;
  initialMessage?: string;
  blogContext?: BlogContext;
};
​
isOpen
boolean
required
Controls visibility of the chat box
​
onClose
() => void
required
Callback function when chat is closed
​
isDarkMode
boolean
Enables dark mode styling (defaults to true)
​
initialMessage
string
Optional initial message to send when chat opens
​
blogContext
BlogContext
Optional blog context for AI summarization

​
Source Location

src/types/types.ts:1

​
Blog Types

Type definitions for blog posts and metadata.

​
BlogPost

Complete blog post with full content. 
interface BlogPost {
  id: string;
  slug: string;
  title: string;
  date: string;
  publishedDate: string;
  excerpt: string;
  content: string;
  category?: string;
  tags?: string[];
  featured?: boolean;
  readingTime?: number;
}
​
id
string
required
Unique identifier for the post (typically same as slug)
​
slug
string
required
URL-friendly identifier used in routes (e.g., “welcome-to-my-blog”)
​
title
string
required
The title of the blog post
​
date
string
required
Publication date in ISO format (e.g., “2024-01-15”)
​
publishedDate
string
required
Alias for date field, same value
​
excerpt
string
required
Brief summary or description of the post
​
content
string
required
Full markdown content of the blog post
​
category
string
Category classification (e.g., “Technology”, “AI”, “Finance”)
​
tags
string[]
Array of tag strings for categorization and filtering
​
featured
boolean
Whether the post should be displayed in the featured section (defaults to false)
​
readingTime
number
Estimated reading time in minutes, calculated automatically

​
BlogPostMetadata

Blog post metadata without full content (used for listings). 
interface BlogPostMetadata {
  id: string;
  slug: string;
  title: string;
  date: string;
  publishedDate: string;
  excerpt: string;
  category?: string;
  tags?: string[];
  featured?: boolean;
  readingTime?: number;
}
BlogPostMetadata is identical to BlogPost except it lacks the content field. This optimizes performance when displaying lists of posts.
All fields have the same definitions as BlogPost above, excluding content.

​
Source Location

src/types/blog.ts:1

​
System Context

The SYSTEM_CONTEXT constant provides comprehensive information about the portfolio owner for the AI assistant.

​
Structure

export const SYSTEM_CONTEXT = {
  context: {
    name: string;
    location: string;
    email: string;
    phone: string;
    linkedin: string;
    education: EducationInfo;
    summary: string;
    experience: Experience[];
    projects: Project[];
    skills: string[];
  },
  instructions: {
    role: string;
    tone: string;
    preferences: string[];
  }
};

​
Context Properties

​
context.name
string
Full name: “Ethan Clinick”
​
context.education
object
Educational background
​
context.experience
Experience[]
Array of work experiences
​
context.projects
Project[]
Array of personal and professional projects
​
context.skills
string[]
Array of skills with acquisition year in parenthesesExamples:
  • “Python (2022)”
  • “AWS (2024)”
  • “React Native (2024)“

​
Instructions Properties

​
instructions.role
string
AI assistant role description and purpose
​
instructions.tone
string
Expected tone of responses (“professional”)
​
instructions.preferences
string[]
Guidelines for response content and focus areas

​
Usage Example

import { SYSTEM_CONTEXT } from '../types/types';

// Access specific information
const skills = SYSTEM_CONTEXT.context.skills;
const experience = SYSTEM_CONTEXT.context.experience;
const tone = SYSTEM_CONTEXT.instructions.tone;

​
Source Location

src/types/types.ts:20

​
Type Guards & Utilities

While not explicitly defined in the codebase, you can create type guards for runtime type checking: 
function isBlogPost(obj: any): obj is BlogPost {
  return (
    typeof obj.id === 'string' &&
    typeof obj.slug === 'string' &&
    typeof obj.content === 'string'
  );
}

function isBlogContext(obj: any): obj is BlogContext {
  return (
    typeof obj.title === 'string' &&
    typeof obj.content === 'string' &&
    typeof obj.excerpt === 'string'
  );
}

​
Best Practices

  1. Use BlogPostMetadata for lists - Avoid loading full content when displaying multiple posts
  2. Validate dates - Ensure date strings are in ISO format for consistent parsing
  3. Type imports - Import types with import type for better tree-shaking
import type { BlogPost, Message, ChatBoxProps } from '../types/types';

Build docs developers (and LLMs) love

Get started for freeTalk to us