Skip to main content

​
Overview

The site configuration is managed through the src/config.ts file, which exports a siteConfig object containing all the essential information about your portfolio site.

​
SiteConfig Interface

The configuration object follows the SiteConfig interface with the following structure:
src/config.ts
export interface SiteConfig {
  name: string;
  title: string;
  description: string;
  tagline: string;
  authorDescription: string;
  avatar: ImageMetadata;
  profileImage: ImageMetadata;
  url: string;
  location: string;
  email: string;
  phone: string;
}

​
Configuration Fields

​
name
string
required
Your name or brand name displayed throughout the siteExample: 'Lewis Kori'
​
title
string
required
The main page title used for SEO and browser tabsExample: 'Lewis Kori – Building Products, Systems, and Leverage'
​
description
string
required
A brief description of your site used for SEO meta tagsExample: 'Entrepreneur and product builder working at the intersection of technology, capital, and trust.'
​
tagline
string
required
A short tagline that appears on your homepageExample: 'Building Products, Systems and Companies That Endure'
​
authorDescription
string
required
A longer description about yourself used in structured data and author sectionsExample: 'I am an entrepreneur and technologist focused on building scalable digital products...'
​
avatar
ImageMetadata
required
The avatar image displayed in the About sectionImport from assets: import aboutImage from '@/assets/about-image.webp'
​
profileImage
ImageMetadata
required
The profile image used in various sections of the siteImport from assets: import profileImage from '@/assets/lewis-profile-no-bg.webp'
​
url
string
required
Your site’s primary URL used for canonical links and structured dataExample: 'https://lewiskori.com'
​
location
string
required
Your location displayed in contact informationExample: 'Kenya'
​
email
string
required
Your contact email addressExample: '[email protected]'
​
phone
string
required
Your contact phone numberExample: '+254 712 345678'

​
Example Configuration

Here’s the complete example from the source code:
src/config.ts
import aboutImage from '@/assets/about-image.webp';
import profileImage from '@/assets/lewis-profile-no-bg.webp';

export const siteConfig: SiteConfig = {
  name: 'Lewis Kori',
  title: 'Lewis Kori – Building Products, Systems, and Leverage',
  url: 'https://lewiskori.com',
  description:
    'Entrepreneur and product builder working at the intersection of technology, capital, and trust. Building platforms, advising institutions, and exploring how systems scale.',
  tagline: 'Building Products, Systems and Companies That Endure',
  authorDescription:
    'I am an entrepreneur and technologist focused on building scalable digital products, trusted platforms and businesses designed for long-term impact. My work spans product development, venture building and advisory across technology-driven markets.',
  avatar: aboutImage,
  location: 'Kenya',
  email: '[email protected]',
  phone: '+254 712 345678',
  profileImage: profileImage,
};

​
How to Customize

1

Open the config file

Navigate to src/config.ts in your project
2

Update your information

Modify the siteConfig object with your personal information
3

Add your images

Place your avatar and profile images in the src/assets/ directory and update the imports
4

Save and restart

Save the file and restart your dev server to see the changes
Make sure to use optimized image formats like WebP for better performance. The recommended size for avatar images is 800x800px.

​
Using Config Values

The siteConfig object is imported and used throughout the site. Here’s how it’s typically used: 
---
import { siteConfig } from '@/config';
---

<h1>{siteConfig.name}</h1>
<p>{siteConfig.tagline}</p>
Changing the url field after deployment may affect SEO. Make sure it matches your production domain.

Build docs developers (and LLMs) love

Get started for freeTalk to us