Content Customization

Overview

All portfolio content is centralized in src/constants/index.js, making it easy to update your personal information, services, projects, and tech stack without diving into component code.

Constants Structure

The constants file exports all customizable content:

src/constants/index.js

import { Prompt, Software, Competitive, Computational } from "@/assets";

export {
  socialsData,
  words,
  navLinks,
  services,
  techStack,
  home_page_text,
  about_page_text,
  Work_page_text,
  Email
};

Personal Information

Hero Section Words

The rotating text in the hero section:

src/constants/index.js

const words = [
  "Software Developer",
  "Problem Solver",
  "MERN Stack Developer",
  "Context-Prompt Engineer",
];

Update Your Titles

Replace with your own professional titles:

const words = [
  "Full-Stack Developer",
  "UI/UX Designer",
  "Cloud Architect",
  "DevOps Engineer",
];

Add More Titles

The array accepts any number of items:

const words = [
  "Frontend Developer",
  "React Specialist",
  "TypeScript Expert",
  "Open Source Contributor",
  "Tech Writer",
  "Community Builder",
];

Contact Email

Set your contact email address:

src/constants/index.js

const Email = "[email protected]";

Update to your email:

const Email = "[email protected]";

Define your social media profiles:

src/constants/index.js

const socialsData = [
  {
    name: "LinkedIn",
    url: "https://www.linkedin.com/in/ritamsaha137",
    icon: "bx bxl-linkedin"
  },
  {
    name: "GitHub",
    url: "https://github.com/Ritam369",
    icon: "bx bxl-github"
  },
  {
    name: "Twitter",
    url: "https://x.com/saharitam963",
    icon: "bx bxl-twitter"
  },
];

const socialsData = [
  {
    name: "LinkedIn",
    url: "https://linkedin.com/in/yourprofile",
    icon: "bx bxl-linkedin"
  },
  {
    name: "GitHub",
    url: "https://github.com/yourusername",
    icon: "bx bxl-github"
  },
  {
    name: "Twitter",
    url: "https://twitter.com/yourhandle",
    icon: "bx bxl-twitter"
  },
  {
    name: "Instagram",
    url: "https://instagram.com/yourhandle",
    icon: "bx bxl-instagram"
  },
  {
    name: "YouTube",
    url: "https://youtube.com/@yourchannel",
    icon: "bx bxl-youtube"
  },
  {
    name: "Dev.to",
    url: "https://dev.to/yourusername",
    icon: "bx bxl-dev-to"
  },
];

The portfolio uses Boxicons. Browse the site to find icon class names for any platform. The format is always bx bxl-{platform}.

Customize the navigation menu:

src/constants/index.js

const navLinks = [
  {
    id: "skills",
    title: "Skills",
  },
  {
    id: "education",
    title: "Education",
  },
  {
    id: "projects",
    title: "Projects",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

Add or Remove Sections

const navLinks = [
  {
    id: "about",           // Section ID (must match section)
    title: "About",        // Display text
  },
  {
    id: "skills",
    title: "Skills",
  },
  {
    id: "experience",      // New section
    title: "Experience",
  },
  {
    id: "projects",
    title: "Projects",
  },
  {
    id: "blog",            // New section
    title: "Blog",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

The id field must match the id attribute of the corresponding section in your component for smooth scrolling to work correctly.

Services Section

Define your expertise and services:

src/constants/index.js

const services = [
  {
    title: "Problem Solving & Algorithms",
    icon: Computational,
    description: "Expert in data structures, algorithms, and computational problem-solving with strong analytical thinking."
  },
  {
    title: "Competitive Programming",
    icon: Competitive,
    description: "Active competitive programmer with experience in coding contests and algorithmic challenges."
  },
  {
    title: "AI & Prompt Engineering",
    icon: Prompt,
    description: "Skilled in AI prompt design, optimization, and working with large language models and AI tools."
  },
  {
    title: "Full-Stack Development",
    icon: Software,
    description: "Proficient in modern web technologies including MERN stack, responsive design, and scalable applications."
  },
];

Customizing Services

Import Your Icons

First, add your custom icons to the src/assets folder and import them:

import { 
  MyIcon1, 
  MyIcon2, 
  MyIcon3 
} from "@/assets";

Update Service Cards

Modify the services array with your offerings:

const services = [
  {
    title: "Frontend Development",
    icon: MyIcon1,
    description: "Building responsive, accessible, and performant user interfaces with modern frameworks."
  },
  {
    title: "Backend Development",
    icon: MyIcon2,
    description: "Creating scalable APIs and server-side applications with Node.js, Python, or Go."
  },
  {
    title: "Cloud Architecture",
    icon: MyIcon3,
    description: "Designing and deploying cloud-native applications on AWS, Azure, or GCP."
  },
];

Adjust Number of Services

You can have any number of services (2-6 works best visually):

const services = [
  {
    title: "Service 1",
    icon: Icon1,
    description: "Description for service 1"
  },
  {
    title: "Service 2",
    icon: Icon2,
    description: "Description for service 2"
  },
  // Add as many as needed
];

Tech Stack

Display your technical skills with icon badges:

src/constants/index.js

const techStack = [
  "C", 
  "Java", 
  "html", 
  "css", 
  "js", 
  "nodejs", 
  "Expressjs", 
  "React", 
  "Tailwind", 
  "Mysql", 
  "Mongodb", 
  "VScode", 
  "Vim", 
  "Helix", 
  "Git", 
  "Nix", 
  "Ubuntu"
].map(name => ({
  name,
  imageUrl: `https://go-skill-icons.vercel.app/api/icons?i=${name.toLowerCase()}`
}));

Updating Your Tech Stack

const techStack = [
  "React",
  "TypeScript",
  "Next.js",
  "Tailwind",
  "Vue",
  "Sass",
  "Webpack",
  "Vite",
  "Jest",
  "Figma",
].map(name => ({
  name,
  imageUrl: `https://go-skill-icons.vercel.app/api/icons?i=${name.toLowerCase()}`
}));

The tech stack uses Skill Icons API. Check their repository for the full list of supported technologies.

Text Content

Home Page Introduction

src/constants/index.js

const home_page_text = "A 3rd-year Computer Science Engineering student at Techno Bengal Institute of Technology with a strong passion for problem-solving, algorithms, and emerging technologies...";

Customize your introduction:

const home_page_text = "I'm a passionate full-stack developer with 5 years of experience building modern web applications. I specialize in React, Node.js, and cloud technologies, helping businesses transform their ideas into scalable digital solutions.";

About Page Content

src/constants/index.js

const about_page_text = "I am a dedicated Computer Science Engineering student with a strong foundation in software development, problem-solving, and modern web technologies...";

Update with your background:

const about_page_text = "I'm a self-taught developer who transitioned from graphic design to software engineering. My unique perspective helps me create applications that are not only functional but also beautiful and user-friendly. I believe in writing clean, maintainable code and continuous learning.";

Work/Experience Page

src/constants/index.js

const Work_page_text = "As a fresher in the field, I have yet to gain industrial experience but am actively working on personal and academic projects...";

Describe your experience:

const Work_page_text = "I currently work as a Senior Frontend Developer at Tech Corp, where I lead a team of 5 developers building enterprise SaaS applications. Previously, I spent 3 years at StartupXYZ developing their core product from scratch, which now serves over 100,000 users.";

Complete Example

Here’s a complete before/after example:

import { Prompt, Software, Competitive, Computational } from "@/assets";

const words = [
  "Software Developer",
  "Problem Solver",
];

const Email = "[email protected]";

const socialsData = [
  {
    name: "LinkedIn",
    url: "https://www.linkedin.com/in/ritamsaha137",
    icon: "bx bxl-linkedin"
  },
  {
    name: "GitHub",
    url: "https://github.com/Ritam369",
    icon: "bx bxl-github"
  },
];

const techStack = [
  "React",
  "Node.js",
  "MongoDB",
].map(name => ({
  name,
  imageUrl: `https://go-skill-icons.vercel.app/api/icons?i=${name.toLowerCase()}`
}));

Best Practices

Content Writing Tips:

Keep descriptions concise and impactful
Use active voice (“I build” instead of “I have built”)
Focus on achievements and outcomes
Include specific technologies and metrics when possible
Update content regularly as you grow

Common Mistakes:

Don’t use special characters that might break JSON parsing
Ensure all URLs are complete and valid
Test all social media links after updating
Keep icon imports consistent with usage
Don’t forget to export new constants

Exporting Constants

Always export your constants at the end of the file:

src/constants/index.js

export {
  socialsData,
  words,
  navLinks,
  services,
  techStack,
  home_page_text,
  about_page_text,
  Work_page_text,
  Email
};

If you add new constants, include them in the export:

export {
  // ... existing exports
  myNewConstant,
  anotherConstant,
};

Get Started

Components

Customization

Integrations

Deployment

Overview

Constants Structure

Personal Information

Hero Section Words

Contact Email

Navigation Links

Modifying Navigation

Services Section

Customizing Services

Tech Stack

Updating Your Tech Stack

Text Content

Home Page Introduction

About Page Content

Work/Experience Page

Complete Example

Best Practices

Exporting Constants

Next Steps

Theme Customization

Styling Guide

Build docs developers (and LLMs) love

Get Started

Components

Customization

Integrations

Deployment

​Overview

​Constants Structure

​Personal Information

​Hero Section Words

​Contact Email

​Social Media Links

​Customizing Social Links

​Navigation Links

​Modifying Navigation

​Services Section

​Customizing Services

​Tech Stack

​Updating Your Tech Stack

​Text Content

​Home Page Introduction

​About Page Content

​Work/Experience Page

​Complete Example

​Best Practices

​Exporting Constants

​Next Steps

Theme Customization

Styling Guide

Build docs developers (and LLMs) love

Overview

Constants Structure

Personal Information

Hero Section Words

Contact Email

Social Media Links

Customizing Social Links

Navigation Links

Modifying Navigation

Services Section

Customizing Services

Tech Stack

Updating Your Tech Stack

Text Content

Home Page Introduction

About Page Content

Work/Experience Page

Complete Example

Best Practices

Exporting Constants

Next Steps