Configuration
Complete guide to customizing your portfolio through config.js
📍 Configuration File Location
All customization is done in a single file:
config.js
This is the ONLY file you need to edit. Everything else is automatically populated!
General Settings
Basic site information that appears across your portfolio
title
Browser tab title
title: "Your Portfolio"
name
Your full name (used in general references)
name: "John Doe"
brandName
Your brand/company name (appears in navbar)
brandName: "JD Studios"
favicon
Path to your favicon image
favicon: "assets/images/favicon.png"
Display Settings
Control which features are visible on your portfolio
showHeroCV
Show/hide CV download button in Hero section
showHeroCV: true
Set to false to hide
showAboutCV
Show/hide CV download button in About section
showAboutCV: true
showHeroSocial
Show/hide social media icons in Hero section
showHeroSocial: true
showContactSocial
Show/hide social media icons in Contact section
showContactSocial: true
showBackToTop
Show/hide back to top button
showBackToTop: true
Hero Section
The first section visitors see - make it count!
name
Your name displayed in the hero heading
name: "John Doe"
profileImage
Path to your profile photo
profileImage: "assets/images/profile.jpg"
description
Brief introduction about yourself
description: "I'm a passionate developer..."
cv (Hero Section)
CV file for Hero section download button
file: "assets/documents/my_cv.pdf"
fileName: "John_Doe_CV.pdf"
typingTitles
Array of titles for typing animation
typingTitles: ["Full Stack Developer", "Web Designer", ...]
Add or remove titles as needed
About Section
Tell your story and showcase your background
aboutMe
Array of paragraphs about yourself (supports HTML for bold text)
💡 Tip: Use HTML for bold text:
<span class='text-white font-bold'>Bold Text</span>
personalInfo
Personal details displayed in grid format
- • name - Your name/brand
- • age - Your age
- • email - Contact email
- • location - Where you're from
- • currentCity - Current location
- • freelanceStatus - Availability status
- • phone - Contact number
Services Section
Showcase your skills and services
description
Section introduction text
items
Array of service cards. Each service has:
- • icon - Font Awesome icon class
- • title - Service name
- • description - Service description
- • technologies - Array of tech/tools
Adding/Removing Services:
Copy entire service block or comment it out with //
Portfolio Section
Display your projects with filtering
filtersScrollable
Filter button layout
- • true - Horizontal scroll
- • false - Wrap to multiple rows
filters
Filter buttons array. Each filter has:
- • label - Button text
- • value - Category (must match project category)
projects
Array of portfolio projects. Each project has:
- • title - Project name
- • category - Filter category
- • image - Screenshot path
- • description - Full description
- • link - Project URL
Contact Section
Make it easy for people to reach you
Contact Information
- • address - Physical address
- • email - Contact email
- • phone - Phone number
form.method
Contact form submission method
- • "email" - Opens email client
- • "whatsapp" - Opens WhatsApp
SEO Settings
Optimize your portfolio for search engines and social media sharing
metaDescription
Brief description for search results (150-160 characters)
metaDescription: "Full-stack developer specializing in..."
metaKeywords
Comma-separated keywords for SEO
metaKeywords: "web developer, portfolio, JavaScript, React"
author
Your name (for meta author tag)
author: "John Doe"
siteUrl
Your portfolio's full URL (for Open Graph tags)
siteUrl: "https://johndoe.com"
ogImage
Image for social media previews (1200x630px recommended)
ogImage: "assets/images/og-image.jpg"
twitterHandle
Your Twitter/X username (with @)
twitterHandle: "@johndoe"
💡 SEO Benefits
- • Better search engine rankings
- • Rich previews when sharing on social media
- • Professional appearance in search results
- • Improved click-through rates
Social Media
Connect your social profiles
Array of social media links. Each has:
- • name - Platform name
- • icon - Font Awesome icon
- • url - Profile URL
To remove: delete line or comment with //
✅ Configuration Complete!
You now know all configuration options. Check out customization tips for advanced techniques.
Customization Tips →