Introduction: The Era of Software-Driven Identity

TheProFile isn’t just a website template; it’s a high-fidelity engine designed to represent you as a top-tier engineer. By moving away from brittle HTML structures to a Portfolio-as-Code model, you ensure your professional identity is version-controlled, scalable, and effortlessly beautiful.

In this master guide, we will dissect every single configuration block within _data/profile.json.

1. The Aesthetic Brain: theme_config

This block controls the visual “soul” of your portfolio. It manages WebGL backgrounds, the dynamic color system, and cinematic audio.

Global Colors

The colors object defines the trio that permeates the site.

• primary: The foundation background.
• secondary: The glassmorphic panel and card background.
• accent: The “brand” color used for buttons, underlines, timeline dots, and highlights.

"colors": {
  "primary": "#0a0a0c",
  "secondary": "#121216",
  "accent": "#C084FC"
}

Cinematic Audio

Enable a tiered volume ramp that breathes life into your site on entry.

• enabled: Toggle audio on/off.
• file: Path to your audio asset (e.g., ./assets/music/interstellar.mp3).
• max_volume: The peak volume (0.0 to 1.0).

"music": {
  "enabled": true,
  "file": "./assets/music/interstellar.mp3",
  "max_volume": 1.0
}

2. Personal Branding & SEO

The root-level fields define who you are to both humans and search engines.

"name": "Sri Satya Lokesh",
"headline": "Lead Engineer & AI Architect",
"email": "srisatyalokesh@duck.com",
"profile_image_url": "assets/img/profile.png",
"resume_url": "assets/resume.pdf",
"bio": "Lead Engineer with 7+ years of expertise in architecting scalable platforms..."

• email: Crucial for the contact section. It maps directly to a one-click copy-to-clipboard button.
• bio: Supports multi-paragraph text. This is your primary “About” content.

3. Social Connectivity

The social array populates your floating nav and contact section. It uses Simple Icons for a clean, professional look.

"social": [
  { 
    "platform": "GitHub", 
    "url": "https://github.com/SriSatyaLokesh", 
    "logo": "github", 
    "color": "181717" 
  },
  { 
    "platform": "LinkedIn", 
    "url": "https://linkedin.com/in/srisatyalokesh", 
    "logo": "linkedin", 
    "color": "0A66C2" 
  }
]

• logo: The slug name from SimpleIcons.org.
• color: The hex value (without #) used for the Shields.io badge highlights.

4. The Career Timeline: experience & education

These sections utilize a structured timeline layout. Each entry creates a “Glass Panel” that lifts on hover.

"experience": [
  {
    "role": "Lead Engineer",
    "company": "Dhan AI",
    "company_url": "https://dhan.ai",
    "duration": "2024 – Present",
    "description": [
      "Architected a multi-tenant chatbot automation platform supporting 350K+ customers.",
      "Mentored a team of 18+ engineers across two technical verticals.",
      "Optimized event-driven notification systems using Kafka and Redis."
    ]
  }
]

• description: An array of strings. Each string becomes a bullet point in the list.

5. The Tech Bento: skills

Your skills are organized into categories, rendering as a “Bento” style grid.

"skills": [
  {
    "category": "Architectural Brain",
    "items": ["System Design", "Kafka", "Redis", "Kafka"],
    "logos": ["googlesheets", "apachekafka", "redis", "apachekafka"]
  }
]

• items: The text labels for your skills.
• logos: Matching Simple Icon slugs. Note: The icons will subtly take on your accent color on hover.

6. The 6-Project Showcase

The projects array is the highlight of your craftsmanship. Note: The template is design-optimized for exactly 6 projects.

{
  "title": "TheProFile",
  "description": "A high-fidelity Portfolio-as-Code template for developers...",
  "image_url": "./assets/img/theprofile.png",
  "stack": ["Jekyll", "SCSS", "GSAP"],
  "stack_colors": ["CC0000", "1572B6", "88CE02"],
  "stack_logos": ["jekyll", "css3", "greensock"],
  "code_url": "https://github.com/SriSatyaLokesh/theprofile",
  "live_url": "https://srisatyalokesh.github.io/theprofile/"
}

• stack_colors: HEX values (no #) that will be used to generate the tech badges at the bottom of the card.

7. Elite Design Presets: 10 Curated Palettes

Don’t spend hours guessing. Use these tested combinations to achieve instant “Elite” status:

Conclusion: Final Checklist

Before you deploy your new high-fidelity profile:

1. Validate your JSON: Ensure every brace and comma is correct.
2. Toggle vanta_magic: Double-click your “Available for work” badge to see the shockwave.
3. Check Socials: Ensure your Simple Icon slugs match their official naming.

Happy building, Lead Engineer.