Overview
The site configuration is managed through thesrc/config.ts file, which exports a siteConfig object containing all the essential information about your portfolio site.
SiteConfig Interface
The configuration object follows theSiteConfig interface with the following structure:
src/config.ts
Configuration Fields
string
required
Your name or brand name displayed throughout the siteExample:
'Lewis Kori'string
required
The main page title used for SEO and browser tabsExample:
'Lewis Kori – Building Products, Systems, and Leverage'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.'string
required
A short tagline that appears on your homepageExample:
'Building Products, Systems and Companies That Endure'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...'ImageMetadata
required
The avatar image displayed in the About sectionImport from assets:
import aboutImage from '@/assets/about-image.webp'ImageMetadata
required
The profile image used in various sections of the siteImport from assets:
import profileImage from '@/assets/lewis-profile-no-bg.webp'string
required
Your site’s primary URL used for canonical links and structured dataExample:
'https://lewiskori.com'string
required
Your location displayed in contact informationExample:
'Kenya'string
required
Your contact email addressExample:
'[email protected]'string
required
Your contact phone numberExample:
'+254 712 345678'Example Configuration
Here’s the complete example from the source code:src/config.ts
How to Customize
1
Open the config file
Navigate to
src/config.ts in your project2
Update your information
Modify the
siteConfig object with your personal information3
Add your images
Place your avatar and profile images in the
src/assets/ directory and update the imports4
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
ThesiteConfig object is imported and used throughout the site. Here’s how it’s typically used: