📚 Documentation Hub

Complete Guide to Your Minimal Portfolio v2.0

Everything you need to configure, customize, and extend your portfolio website with the latest TOML-first architecture, @mention system, and enhanced URL support.

💡 Shortcuts: Ctrl+K Search • S Toggle sidebar • T Toggle theme • Esc Clear

🚀 Quick Start Guide

Get your minimal portfolio up and running in minutes with this step-by-step guide.

1. Setup & Installation

Clone the repository and set up your development environment.

Terminal Commands
# Clone the repository from GitHub
git clone https://github.com/NishikantaRay/renderer.git

# Navigate to the project directory
cd renderer

# Install development dependencies (optional)
npm install

# Start a local development server
npm run dev
# OR use Python's built-in server
python -m http.server 8000
# OR use any other local server
💡 Why these commands?

git clone: Downloads the complete portfolio template to your local machine.
npm install: Installs development tools like live-server for auto-refresh during development.
Local server: Required because TOML files need to be served over HTTP, not opened directly in browser.

2. Essential Configuration Files

Update these key files with your personal information to get started quickly.

🏠 Home Page Configuration

Edit config/home.toml to customize your hero section and main content:

config/home.toml
# Hero section - the first thing visitors see
[hero]
name = "Your Full Name"                    # Your actual name
title = "Your Professional Title"          # e.g., "Full-Stack Developer"
intro = [
    "Brief introduction about what you do.", # Keep it engaging and concise
    "Mention your key skills and passions."  # 1-2 sentences max
]

# Call-to-action buttons in hero section
[hero.actions]
primary_text = "View My Work"              # Main button text
primary_link = "projects.html"             # Where it links to
secondary_text = "Get In Touch"            # Secondary button text  
secondary_link = "contact.html"            # Contact page or email

# Configure which sections to show on home page
[sections]
enabled_sections = ["freelance-clients", "latest-products", "dashboard"]
🎯 Configuration Explained

Hero section: The main banner area that immediately captures visitor attention.
intro array: Each string becomes a separate paragraph for better readability.
enabled_sections: Controls which content blocks appear on your home page - you can reorder or remove items.

📄 Resume Configuration

Edit config/resume.toml to add your professional experience:

config/resume.toml - Personal Info
# Personal information section
[personal]
name = "Your Full Name"
title = "Your Job Title"                   # Current or desired position
email = "[email protected]"            # Professional email
phone = "+1-555-123-4567"                  # Optional: include if you want calls
website = "https://renderer.nishikanta.in"        # Your portfolio URL
github = "https://github.com/NishikantaRay" # GitHub profile
linkedin = "https://linkedin.com/in/you"   # LinkedIn profile
location = "City, State/Country"           # Current location

# Professional summary
[summary]
text = """
Write a compelling 2-3 sentence summary of your experience.
Focus on your key achievements and what value you bring.
Make it specific to your target role or industry.
"""

🔗 Social Links Setup

Edit config/social.toml to connect your social profiles:

config/social.toml
# Social media configuration
[social]
enabled = true                             # Show social links section
title = "Connect With Me"                  # Section title
subtitle = "Find me on these platforms"    # Optional description

# Display settings
[display] 
show_icons = true                          # Show platform icons
show_labels = true                         # Show platform names
open_in_new_tab = true                     # Open links in new window

# Individual social platform links
[[links]]
platform = "github"                       # Platform identifier
url = "https://github.com/NishikantaRay"    # Your profile URL
username = "NishikantaRay"                  # Display name
show = true                                # Whether to show this link

[[links]]
platform = "linkedin"
url = "https://linkedin.com/in/yourprofile"
username = "Nishikanta Ray"
show = true

[[links]]
platform = "twitter"
url = "https://twitter.com/yourhandle"
username = "@NishikantaRay"
show = true
🔗 Social Links Explained

Double brackets [[links]]: Creates an array of social links - add as many as needed.
platform field: Used for styling and icon selection (github, linkedin, twitter, etc.).
show field: Easy way to temporarily hide links without deleting the configuration.

3. Content Creation

Add your actual content using Markdown files for easy editing.

content/
├── about.md # Your about page content ├── projects.md # Projects showcase ├── contact.md # Contact information └── blog-posts/ # Individual blog articles

📝 About Page Content

Edit content/about.md with your story:

content/about.md
# About Me

## Who I Am

Write a compelling introduction about yourself. This should be more detailed 
than your hero section intro. Share your background, what drives you, and 
what makes you unique in your field.

## My Journey

Describe your professional journey:
- How you got started in your field
- Key milestones and learning experiences  
- What you're currently focused on
- Where you're heading next

## What I Do

Explain your expertise and approach:
- Your core skills and specialties
- How you approach problems
- What types of projects you work on
- Your preferred tools and technologies

## Beyond Work

Share some personality:
- Hobbies and interests
- Values that guide you
- Fun facts about yourself
- What you do in your free time
📝 Markdown Tips

Headers (#, ##, ###): Create different heading levels for structure.
Lists (-): Use for bullet points and easy scanning.
Emphasis (**bold**, *italic*): Highlight important information.
Links [text](url): Reference your work, articles, or other resources.

4. Testing Your Setup

Verify everything works correctly before going live.

  • Open your local server URL (usually http://localhost:3000 or http://localhost:8000)
  • Navigate through all pages to check for errors
  • Test the theme toggle (dark/light mode)
  • Verify all configuration changes appear correctly
  • Test on mobile devices for responsiveness
  • Check browser console for any JavaScript errors
🔍 Debug Console Tips

Press F12 to open browser developer tools. Check the Console tab for errors. Common issues include missing TOML files or syntax errors in configuration.

5. Going Live

Deploy your portfolio to make it accessible to the world.

🌐 GitHub Pages (Free)

GitHub Pages Deployment
# Push your changes to GitHub
git add .
git commit -m "Initial portfolio setup"
git push origin main

# Enable GitHub Pages in repository settings
# Go to Settings > Pages > Source: Deploy from branch
# Select: main branch / root folder
# Your site will be available at: https://NishikantaRay.github.io/renderer

⚡ Netlify (Free with extras)

Netlify Deployment
# Option 1: Drag and drop your project folder to netlify.com/drop

# Option 2: Connect your GitHub repository
# 1. Sign up at netlify.com
# 2. Click "New site from Git"
# 3. Connect your GitHub repository
# 4. Deploy settings: 
#    - Build command: (leave empty)
#    - Publish directory: (leave empty or ".")
# 5. Click "Deploy site"
🚀 Deployment Comparison

GitHub Pages: Free, simple, perfect for static sites. URL: NishikantaRay.github.io
Netlify: Free tier includes forms, custom domains, faster global CDN. URL: random-name.netlify.app (customizable)

✨ Version 2.0 Features

Major enhancements and new capabilities in your portfolio system v2.0.

🎯 TOML-First Architecture

Complete configuration control through TOML files with no JavaScript hardcoding.

Enhanced Manual TOML Parser

  • No External Dependencies: Built-in TOML parser with full specification support
  • Error Handling: Graceful fallbacks when configuration fails
  • Performance Optimized: Single-pass parsing algorithm
  • Complete Control: Every aspect of your portfolio configurable via TOML
Enhanced TOML Parser Features
# Advanced TOML parsing now supports:

# Nested sections
[skills.frontend]
technologies = ["React", "TypeScript"]

# Array tables for multiple entries
[[experience]]
company = "Tech Corp"
position = "Developer"

[[projects]]
name = "My Project"
live_url = "https://project.com"
github_url = "https://github.com/user/project"

# Company URL mappings for @mentions
[companies]
letsflo = "https://letsflo.com"
teceads = "https://teceads.com"

# Multi-line strings and complex data structures
[summary]
text = """
Professional summary with @letsflo experience.
Automatically converts to clickable company links.
"""
🔧 Parser Improvements

Manual Implementation: No external dependencies for better performance and control.
Error Recovery: Continues parsing even when encountering minor syntax issues.
Type Safety: Proper handling of strings, numbers, booleans, and arrays.
Nested Support: Full support for complex nested configurations.

🔗 @Mention Company System

Smart text processing that converts company mentions to clickable links.

How @Mentions Work

Company Mention Configuration
# config/resume.toml - Company URL Mapping
[companies]
letsflo = "https://letsflo.com"
teceads = "https://teceads.com"
microsoft = "https://microsoft.com"
google = "https://google.com"

# Professional summary with @mentions
[summary]
text = """
Experienced Full Stack Developer with 5+ years at @letsflo and @teceads.
Previously collaborated with @microsoft teams on enterprise solutions.
Passionate about @google's developer ecosystem and modern web technologies.
"""

# The system automatically converts:
# @letsflo → clickable "Lets Flo" link
# @teceads → clickable "Teceads" link
# @microsoft → clickable "Microsoft" link
# @google → clickable "Google" link

Smart Name Formatting

  • Automatic Formatting: @letsflo becomes "Lets Flo" with proper spacing
  • Fallback Support: Unknown @mentions remain as plain text
  • Professional Styling: Consistent link appearance with hover effects
  • External Links: All company links open in new tabs
💼 Business Benefits

Professional Presentation: Easy way to reference companies with proper branding.
SEO Friendly: Creates proper links to company websites.
Maintainable: Update company URLs in one place, affects all mentions.
Scalable: Add new companies anytime without code changes.

🌐 Enhanced URL Support System

Comprehensive URL linking across all portfolio sections.

Project URL System

Dual Project URLs
# config/resume.toml - Projects with URLs
[[projects]]
name = "Live Server Lite"
description = "VS Code extension with 2000+ installations"
technologies = ["JavaScript", "Node.js", "VS Code API"]
start_date = "2023"
end_date = "2024"

# Dual URL support
live_url = "https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-server-lite"
github_url = "https://github.com/NishikantaRay/live-server-lite"

highlights = [
    "2000+ installations on VS Code Marketplace",
    "Hot reload functionality for rapid development",
    "Cross-platform compatibility and easy setup"
]

# Both URLs render as styled buttons:
# [🌐 Live Demo] [📱 GitHub]

Work Experience URLs

Company Links in Experience
# Work experience with clickable company names
[[experience]]
position = "Senior Full Stack Developer"
company = "Lets Flo"
company_url = "https://letsflo.com"  # Makes company name clickable
location = "Bengaluru, KA"
start_date = "2022-01"
end_date = "Present"
achievements = [
    "Led development of scalable web applications",
    "Increased application performance by 40%",
    "Mentored team of 5 developers"
]

Education Institution URLs

Educational Institution Links
# Education with institution URLs and marks display
[[education]]
degree = "XII (Science)"
institution = "D.A.V. Public School"
institution_url = "https://davpublicschool.com"  # Clickable institution
location = "Bhubaneswar, Odisha"
graduation_year = "2019"
notes = "79.67%"  # Displays marks for XII/X education

[[education]]
degree = "Bachelor of Technology in Computer Science"
institution = "Indian Institute of Technology"
institution_url = "https://iit.ac.in"
location = "Delhi, India"
graduation_year = "2021"
gpa = "8.5"       # Shows CGPA for university
🎨 Professional Styling

Consistent Design: All URLs use consistent styling across the portfolio.
Dark Theme Support: Proper color schemes for both light and dark modes.
Hover Effects: Interactive feedback with smooth transitions.
External Indicators: Clear visual cues for external links.

📊 Education System Improvements

Enhanced education display with flexible date handling and marks display.

Smart Marks Display

XII/X Marks vs University GPA
# School education with percentage marks
[[education]]
degree = "XII (Science)"
institution = "D.A.V. Public School"
graduation_year = "2019"
notes = "79.67%"      # Shows as: "Marks: 79.67%"

[[education]]
degree = "X"
institution = "D.A.V. Public School"
graduation_year = "2017"
notes = "77.5%"       # Shows as: "Marks: 77.5%"

# University education with CGPA
[[education]]
degree = "Bachelor of Technology"
institution = "Indian Institute of Technology"
graduation_year = "2021"
gpa = "8.5"           # Shows as: "CGPA: 8.5"
notes = "Dean's List"  # Additional notes

Flexible Date Ranges

  • Various Formats: Support for year-only, month-year, or full dates
  • Date Ranges: Proper handling of start and end dates
  • Current Status: Special handling for ongoing education
  • Graduation Years: Consistent display across all education levels
📚 Display Logic

Smart Detection: Automatically determines whether to show marks or GPA.
Contextual Display: Different formatting for school vs university education.
Flexible Notes: Support for additional information like honors or achievements.
Consistent Formatting: Uniform appearance across all education entries.

🚀 Production Ready Features

Clean, optimized code ready for professional deployment.

Console Cleanup System

Production Code Quality
# Automated console cleanup for production
# All debugging statements removed:

# ❌ Removed from production:
# console.log('Debug info')
# console.warn('Warning message')  
# console.error('Error details')

# ✅ Kept for production:
# Critical error handling
# User-facing notifications
# Performance monitoring

# Result: Clean console output suitable for professional use

Error Handling System

  • Graceful Fallbacks: Site works even when configuration fails
  • Network Resilience: Handles TOML loading failures gracefully
  • User Notifications: Friendly error messages for debugging
  • Validation: Input validation for all configuration fields
⚡ Performance Benefits

Reduced Overhead: No console logging in production improves performance.
Memory Optimization: Efficient parsing and rendering algorithms.
Fast Loading: Optimized code structure for quick initialization.
Browser Compatibility: Works across all modern browsers.

🎨 CSS Architecture

Professional styling system for all new features.

New CSS Classes for v2.0 Features
/* Company mention styling */
.company-mention {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted var(--accent-color);
  transition: all 0.3s ease;
}

.company-mention:hover {
  border-bottom-style: solid;
  background: rgba(var(--accent-color-rgb), 0.1);
}

/* Institution link styling */
.institution-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Project URL buttons */
.project-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--accent-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin: 0.25rem;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.project-link:hover {
  background: var(--accent-color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Dark theme support for all new elements */
[data-theme="dark"] .company-mention,
[data-theme="dark"] .institution-link {
  color: var(--accent-color-dark);
  border-color: var(--accent-color-dark);
}

� Portfolio Overview

Understanding the structure and capabilities of your minimal portfolio system.

�️ Architecture & Design Philosophy

This portfolio is built with simplicity, performance, and customization in mind.

Core Principles

  • No Framework Dependencies: Pure HTML, CSS, and JavaScript for maximum performance
  • Configuration-Driven: TOML files control all content and features
  • Markdown Content: Write content in Markdown for easy editing
  • Responsive Design: Works seamlessly on desktop, tablet, and mobile
  • Dark/Light Themes: Automatic OS detection with manual toggle
  • SEO Optimized: Proper semantic HTML and meta tags

Project Structure

renderer/ ├── 📄 HTML Pages │ ├── index.html # Home page with hero section │ ├── about.html # About page │ ├── projects.html # Projects showcase │ ├── blog.html # Blog with dynamic content │ ├── resume.html # Interactive resume │ └── contact.html # Contact information │ ├── ⚙️ Configuration (TOML) │ ├── home.toml # Hero, clients, products, dashboard │ ├── projects.toml # Projects features & analytics │ ├── blog.toml # Blog posts & settings │ ├── resume.toml # Experience, skills, education │ └── social.toml # Social links & display │ ├── 📝 Content (Markdown) │ ├── about.md # About page content │ ├── projects.md # Projects descriptions │ ├── contact.md # Contact page content │ └── [blog-posts].md # Individual blog articles │ ├── 🎨 Styling │ ├── home.css # Home page styles │ ├── projects.css # Projects page styles │ ├── blog.css # Blog system styles │ └── resume.css # Resume page styles │ └── 🔧 JavaScript ├── home.js # Home page functionality ├── projects.js # Projects page logic ├── blog-system.js # Blog content loading └── [page]-config.js # Configuration loaders
📁 Directory Explained

HTML Pages: Each page is self-contained with its own CSS and JavaScript.
TOML Config: All customization happens here - no code editing required.
Markdown Content: Write content in familiar Markdown syntax.
Modular Assets: Each page has its own styles and scripts for optimal loading.

🔧 How Configuration Works

Understanding the TOML configuration system that powers your portfolio.

TOML Configuration Flow

Configuration Loading Process
1. Page loads HTML structure
2. JavaScript fetches corresponding TOML file (e.g., home.toml)
3. TOML parser converts configuration to JavaScript object
4. Configuration object populates page content dynamically
5. Fallback content loads if TOML file is missing or invalid
6. Theme system applies saved preferences
7. Page renders with configured content and styling

Configuration Hierarchy

Each page follows this configuration priority:

  1. TOML Configuration: Primary source of content and settings
  2. JavaScript Fallback: Backup configuration in JavaScript files
  3. HTML Defaults: Basic structure and minimal content
  4. Markdown Content: Rich content loaded dynamically
⚡ Performance Benefits

Lazy Loading: Content loads only when needed.
Caching: Configuration files are cached by the browser.
Fallbacks: Site works even if some files fail to load.
No Build Step: Changes are immediately visible.

🎨 Theme System

How the dark/light theme system works and how to customize it.

Theme Detection & Persistence

Theme System Logic
// Theme initialization process
1. Check localStorage for saved theme preference
2. If no saved preference, detect OS preference using:
   window.matchMedia('(prefers-color-scheme: dark)')
3. Apply theme by setting data-theme attribute on document
4. Update CSS custom properties based on theme
5. Save user's manual theme changes to localStorage
6. Provide smooth transitions between theme switches

CSS Custom Properties

The theme system uses CSS custom properties for consistent styling:

CSS Theme Variables
/* Light theme (default) */
:root {
  --bg-color: #ffffff;           /* Background color */
  --text-color: #1e293b;         /* Primary text */
  --text-muted: #64748b;         /* Secondary text */
  --primary-color: #6366f1;      /* Brand/accent color */
  --border-color: #e2e8f0;       /* Borders and dividers */
  --code-bg: #f1f5f9;           /* Code block background */
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg-color: #0f172a;           /* Dark background */
  --text-color: #f1f5f9;         /* Light text */
  --text-muted: #94a3b8;         /* Muted light text */
  --primary-color: #818cf8;      /* Adjusted brand color */
  --border-color: #334155;       /* Dark borders */
  --code-bg: #1e293b;           /* Dark code background */
}
🎨 Customizing Colors

Modify CSS variables: Change colors by updating the custom properties.
Consistent theming: All components automatically use the theme colors.
Easy maintenance: One place to change colors across the entire site.

📋 Portfolio Overview

Understanding the architecture and components of your minimal portfolio system.

🏗️ System Architecture

Your portfolio is built with a modern, modular architecture that separates content from presentation.

renderer/
├── *.html # Main pages (index, projects, blog, etc.)
├── config/ # TOML configuration files
│ ├── home.toml # Homepage settings
│ ├── projects.toml # Projects configuration
│ ├── blog.toml # Blog settings
│ ├── resume.toml # Resume data
│ └── social.toml # Social media links
├── content/ # Markdown content files
│ ├── about.md # About page content
│ ├── projects.md # Project descriptions
│ └── blog/ # Individual blog posts
├── css/ # Stylesheets for each page
├── js/ # JavaScript functionality
└── assets/ # Images and media files
🔄 How It Works

Configuration-driven: Update TOML files to change content without touching code.
Markdown content: Write in simple Markdown format for easy editing.
Modular design: Each page has its own CSS and JS for fast loading.
No build process: Pure HTML/CSS/JS - works immediately without compilation.

🎯 Key Features

What makes this portfolio system powerful and flexible.

⚡ Performance First

  • Minimal JavaScript footprint
  • Optimized CSS with modern techniques
  • Lazy loading for images
  • Fast load times on all devices

🎨 Design System

  • Dark/light theme support
  • CSS custom properties for theming
  • Responsive design patterns
  • Clean, minimal aesthetic

🔧 Easy Configuration

  • TOML files for settings
  • Markdown for content
  • No code editing required
  • Version control friendly

📱 Modern Web Standards

  • Semantic HTML structure
  • Accessibility features built-in
  • SEO optimized
  • Progressive web app ready

🏠 Home Page Configuration

Complete guide to configuring your homepage with hero sections, featured projects, and dashboard widgets.

👤 Hero Section Setup

The hero section is the first thing visitors see - make it count!

config/home.toml - Hero Configuration
# Hero section - the main banner area
[hero]
name = "Your Full Name"                    # Your display name
title = "Your Professional Title"          # Job title or tagline
intro = [
    "First paragraph introducing yourself.", # Keep it engaging
    "Second paragraph about your expertise."  # Focus on value you provide
]

# Profile image settings
[hero.image]
enabled = true                             # Show profile picture
src = "assets/images/profile.jpg"          # Image path
alt = "Nishikanta Ray - Professional Photo"     # Alt text for accessibility
width = 300                                # Image width in pixels
height = 300                               # Image height in pixels

# Call-to-action buttons
[hero.actions]
primary_text = "View My Work"              # Main button text
primary_link = "projects.html"             # Where it links
secondary_text = "Download Resume"         # Second button text  
secondary_link = "assets/resume.pdf"       # Resume file path
tertiary_text = "Get In Touch"             # Third button (optional)
tertiary_link = "contact.html"             # Contact page
💡 Hero Section Best Practices

Name & Title: Use your professional name and a clear, specific title.
Intro Array: Each string becomes a paragraph - keep them concise and impactful.
Action Buttons: Order by importance - primary for main goal, secondary for alternatives.
Profile Image: Use a professional photo at 300x300px minimum for crisp display.

📊 Dashboard Configuration

Display key metrics and achievements with an interactive dashboard.

config/home.toml - Dashboard Setup
# Dashboard widget - show your key stats
[dashboard]
enabled = true                             # Enable dashboard section
title = "Professional Stats"               # Section title
subtitle = "My journey in numbers"         # Optional description

# Key statistics to display
[dashboard.stats]
total_projects = 25                        # Number of completed projects
years_experience = 3                       # Years of professional experience
github_repos = 40                          # Public repositories
contributions = 1200                       # GitHub contributions this year
clients_served = 15                        # Number of clients worked with
lines_of_code = 50000                      # Total lines of code written

# Dashboard styling options
[dashboard.display]
show_icons = true                          # Show icons next to stats
animate_numbers = true                     # Animate number counting
grid_columns = 3                           # Number of columns (1-4)
background_gradient = true                 # Use gradient background

💼 Projects Configuration

Comprehensive guide to showcasing your portfolio projects with categories, filtering, and detailed displays.

📂 Project Structure

How to organize and configure your portfolio projects.

config/projects.toml - Basic Project Setup
# Projects page configuration
[page]
title = "My Projects"                      # Page title
subtitle = "A showcase of my work"         # Page subtitle
description = "Explore my portfolio of web development projects" # SEO description

# Portfolio display settings
[display]
layout = "grid"                            # Layout: "grid", "list", "masonry"
items_per_page = 12                        # Projects per page
show_pagination = true                     # Enable pagination
enable_search = true                       # Enable project search
enable_filtering = true                    # Enable category filtering
sort_by = "date"                          # Sort: "date", "title", "category"
sort_order = "desc"                       # Order: "asc", "desc"

# Individual project definitions
[[projects]]
id = "ecommerce-platform"                 # Unique identifier
title = "E-commerce Platform"             # Project title
description = "Full-stack e-commerce solution with payment integration" # Brief description
long_description = """                    # Detailed description
Built a complete e-commerce platform from scratch using modern web technologies.
Features include user authentication, product catalog, shopping cart, payment
processing, order management, and admin dashboard.
"""
category = ["web-development", "fullstack"] # Project categories
status = "completed"                       # Status: "completed", "in-progress", "planned"
featured = true                           # Show in featured projects
priority = 1                             # Display priority (lower = higher priority)

📝 Blog Configuration

Set up a powerful blog system with posts, categories, and content management.

📰 Blog Setup

Configure your blog for optimal content presentation and discovery.

config/blog.toml - Blog Configuration
# Blog page settings
[blog]
title = "Tech Insights Blog"              # Blog title
subtitle = "Thoughts on web development and design" # Blog tagline
description = "Articles about modern web development, design patterns, and industry insights" # SEO description
author = "Nishikanta Ray"                      # Default author
email = "[email protected]"           # Author email
posts_per_page = 5                        # Posts per page
show_author = true                        # Show author info
show_reading_time = true                  # Estimate reading time
show_tags = true                          # Display post tags
enable_comments = false                   # Enable comment system
enable_search = true                      # Enable blog search
enable_rss = true                         # Generate RSS feed

# Individual blog post definitions
[[posts]]
id = "modern-web-development"             # Unique post identifier
title = "Modern Web Development in 2024" # Post title
slug = "modern-web-development-2024"     # URL-friendly slug
excerpt = "Exploring the latest trends and technologies shaping web development" # Brief summary
content_file = "content/modern-web-development.md" # Markdown content file
author = "Nishikanta Ray"                     # Post author (overrides default)
date = "2024-10-20"                      # Publication date (YYYY-MM-DD)
status = "published"                     # Status: "published", "draft", "scheduled"
featured = true                          # Mark as featured post
reading_time = 8                         # Estimated reading time in minutes
category = "web-development"             # Primary category
tags = ["JavaScript", "React", "Performance", "Best Practices"]

📄 Resume Configuration

Create a comprehensive digital resume with the latest v2.0 features including @mentions, enhanced URLs, and smart education display.

🆕 v2.0 Enhanced Features

New capabilities that make your resume more interactive and professional.

✨ Key v2.0 Enhancements

  • @Mention System: Convert company mentions to clickable links automatically
  • Dual Project URLs: Support for both live demo and GitHub repository links
  • Institution URLs: Clickable educational institution names
  • Smart Marks Display: Proper handling of XII/X marks vs university GPA
  • Company URLs: Make work experience company names clickable
  • TOML-First: Complete configuration control without JavaScript hardcoding

👤 Personal Information

Professional contact information and personal branding.

config/resume.toml - Personal Info
# Personal information section
[personal]
name = "Your Full Name"                   # Full professional name
title = "Senior Software Engineer"        # Current or target position
email = "[email protected]"           # Professional email address
phone = "+1 (555) 123-4567"              # Phone number (optional)
website = "https://yourportfolio.com"     # Portfolio website
location = "Bengaluru, KA"               # Current location
linkedin = "https://linkedin.com/in/yourprofile" # LinkedIn profile
github = "https://github.com/NishikantaRay" # GitHub profile

🔗 Company URL Mapping (NEW)

Define company URLs for automatic @mention linking.

Company URL Configuration
# Company URL mappings for @mention system
[companies]
letsflo = "https://letsflo.com"           # Maps @letsflo to "Lets Flo" link
teceads = "https://teceads.com"           # Maps @teceads to "Teceads" link
microsoft = "https://microsoft.com"       # Maps @microsoft to "Microsoft" link
google = "https://google.com"             # Maps @google to "Google" link
# Add any company you mention in your resume
🏢 How Company Mapping Works

Automatic Detection: System scans text for @company patterns.
Smart Formatting: @letsflo becomes "Lets Flo" with proper spacing.
Professional Links: All company mentions become clickable external links.
Fallback Safe: Unknown @mentions remain as plain text.

📝 Professional Summary with @Mentions

Enhanced summary section with automatic company link generation.

Summary with @Mention Support
# Professional summary with @mentions
[summary]
text = """
Experienced Full Stack Developer with 5+ years at @letsflo and @teceads.
Passionate about creating scalable applications and leading development teams.
Previously collaborated with @microsoft teams on enterprise solutions.
"""

# The system automatically converts:
# @letsflo → clickable "Lets Flo" link (https://letsflo.com)
# @teceads → clickable "Teceads" link (https://teceads.com) 
# @microsoft → clickable "Microsoft" link (https://microsoft.com)
💡 @Mention Best Practices

Use sparingly: Only mention companies that add value to your story.
Keep it natural: Write normally, @mentions work within flowing text.
Define all companies: Add URL mappings for any company you @mention.
Professional tone: Maintain professional language throughout.

💼 Work Experience with Company URLs

Enhanced work experience with clickable company names.

Enhanced Work Experience
# Work experience section with company URLs
[[experience]]
company = "Lets Flo"                      # Company name
company_url = "https://letsflo.com"       # Makes company name clickable
position = "Senior Software Engineer"     # Job title
location = "Bengaluru, KA"               # Work location
start_date = "2022-01"                   # Start date (YYYY-MM)
end_date = "Present"                     # End date or "Present"
description = """
Lead a team of 4 developers building scalable web applications.
Architected microservices using Node.js and React, improving performance by 40%.
Mentored junior developers and established coding standards and best practices.
"""
achievements = [
    "Reduced application load time by 40% through performance optimization",
    "Led migration from monolithic to microservices architecture",
    "Mentored 3 junior developers, 2 received promotions"
]
technologies = ["JavaScript", "React", "Node.js", "MongoDB", "AWS"]

🎓 Enhanced Education System

Smart education display with institution URLs and proper marks handling.

Education with Institution URLs and Marks
# School education with marks display
[[education]]
degree = "XII (Science)"
institution = "D.A.V. Public School"
institution_url = "https://davpublicschool.com"  # Clickable institution name
location = "Bhubaneswar, Odisha"
graduation_year = "2019"
notes = "79.67%"                         # Displays as "Marks: 79.67%"

[[education]]
degree = "X"
institution = "D.A.V. Public School"
institution_url = "https://davpublicschool.com"
location = "Bhubaneswar, Odisha" 
graduation_year = "2017"
notes = "77.5%"                          # Displays as "Marks: 77.5%"

# University education with CGPA
[[education]]
degree = "Bachelor of Technology in Computer Science"
institution = "Indian Institute of Technology"
institution_url = "https://iit.ac.in"
location = "Delhi, India"
graduation_year = "2021"
gpa = "8.5"                              # Displays as "CGPA: 8.5"
relevant_coursework = [
    "Data Structures and Algorithms",
    "Software Engineering", 
    "Database Systems"
]
honors = ["Dean's List", "Merit Scholarship"]
🎯 Smart Education Display

Marks vs GPA: System automatically shows "Marks: X%" for XII/X and "CGPA: X" for university.
Institution Links: All institution names become clickable with professional styling.
Flexible Notes: Support additional information like honors, coursework, or achievements.
Date Handling: Supports various date formats and graduation year display.

🚀 Projects with Dual URL Support

Enhanced project showcase with live demo and repository links.

Projects with Live and GitHub URLs
# Projects with enhanced URL support
[[projects]]
name = "Live Server Lite"
description = "A lightweight live server extension for VS Code development"
technologies = ["JavaScript", "Node.js", "VS Code API"]
start_date = "2023"
end_date = "2024"

# Dual URL support - both are optional
live_url = "https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-server-lite"
github_url = "https://github.com/NishikantaRay/live-server-lite"

highlights = [
    "2000+ installations on VS Code Marketplace",
    "Hot reload functionality for rapid development", 
    "Cross-platform compatibility and easy setup",
    "Lightweight alternative to traditional live servers"
]

[[projects]]
name = "Bootstrap 5 Extension Pack"
description = "Comprehensive VS Code extension pack for Bootstrap 5 development"
technologies = ["Bootstrap 5", "CSS", "HTML", "VS Code Extensions"]
start_date = "2023"
end_date = "2024"
live_url = "https://marketplace.visualstudio.com/items?itemName=NishikantaRay.bootstrap5-snippets"
github_url = "https://github.com/NishikantaRay/bootstrap5-extension-pack"
highlights = [
    "Complete Bootstrap 5 snippet collection",
    "IntelliSense support for faster development",
    "Comprehensive component library integration"
]
🌐 Project URL Features

Dual Support: Both live_url and github_url are optional but recommended.
Professional Buttons: URLs render as styled buttons with icons.
External Links: All project links open in new tabs.
Mobile Friendly: Responsive button layout for all screen sizes.

🛠️ Technical Skills

Organize skills by categories with proficiency levels.

Skills Organization
# Technical skills organized by category
[skills.frontend]
category = "Frontend Development"
technologies = ["React", "Vue.js", "Angular", "TypeScript", "Sass"]
proficiency = "Expert"

[skills.backend]
category = "Backend Development"  
technologies = ["Node.js", "Python", "Java", "PostgreSQL", "MongoDB"]
proficiency = "Advanced"

[skills.tools]
category = "Tools & Technologies"
technologies = ["Docker", "AWS", "Git", "Jenkins", "Kubernetes"]
proficiency = "Intermediate"

[skills.mobile]
category = "Mobile Development"
technologies = ["React Native", "Flutter", "iOS", "Android"]
proficiency = "Intermediate"

🔗 Social Media Configuration

Connect all your social profiles and online presence for maximum visibility.

📱 Social Links Setup

Configure your social media presence across all platforms.

config/social.toml - Social Configuration
# Social media configuration
[social]
enabled = true                            # Enable social links section
title = "Connect With Me"                 # Section title
subtitle = "Follow my journey across platforms" # Optional description
show_in_footer = true                    # Show links in footer
show_in_header = true                    # Show links in header

# Professional platforms
[[platforms]]
name = "GitHub"                          # Platform name
type = "professional"                    # Category: "professional", "social", "creative"
url = "https://github.com/NishikantaRay"  # Your profile URL
username = "NishikantaRay"                # Display username
icon = "github"                          # Icon identifier
show = true                             # Whether to display this link
order = 1                               # Display order (lower = first)
description = "Open source projects and code repositories" # Tooltip description

[[platforms]]
name = "LinkedIn"
type = "professional"
url = "https://linkedin.com/in/yourprofile"
username = "Nishikanta Ray"
icon = "linkedin"
show = true
order = 2
description = "Professional network and career updates"

[[platforms]]
name = "Twitter"
type = "social"
url = "https://twitter.com/yourhandle"
username = "@NishikantaRay"
icon = "twitter"
show = true
order = 3
description = "Tech thoughts and industry insights"

🎨 Customization Guide

Learn how to customize the design, themes, and appearance of your portfolio.

🎭 Theme System Customization

Modify colors, fonts, and visual elements to match your brand.

CSS Customization - Custom Properties
/* Custom CSS Variables for Theming */
:root {
  /* Primary Brand Colors */
  --primary-color: #6366f1;           /* Your brand color */
  --primary-dark: #4f46e5;            /* Darker variant */
  --primary-light: #a5b4fc;           /* Lighter variant */
  
  /* Background Colors */
  --bg-primary: #ffffff;              /* Main background */
  --bg-secondary: #f8fafc;            /* Card/section backgrounds */
  --bg-tertiary: #e2e8f0;             /* Subtle accents */
  
  /* Text Colors */
  --text-primary: #1e293b;            /* Main text */
  --text-secondary: #475569;          /* Secondary text */
  --text-muted: #64748b;              /* Muted text */
  
  /* Typography */
  --font-family-primary: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'Fira Code', 'Monaco', monospace;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
}

🛠️ Development Guide

Advanced customization, extending functionality, and contributing to the portfolio system.

🚀 Development Setup

Set up your development environment for advanced customization.

Development Environment Setup
# Clone and setup development environment
git clone https://github.com/NishikantaRay/renderer.git
cd renderer

# Install Node.js dependencies (optional but recommended)
npm install

# Available npm scripts
npm run dev          # Start development server with live reload
npm run build        # Build for production (if using build tools)
npm run lint         # Check code quality
npm run format       # Format code with Prettier
npm run validate     # Validate TOML configuration files

# Development tools included:
# - Live Server for auto-refresh
# - Prettier for code formatting
# - ESLint for JavaScript linting
# - TOML validator for config files
🔧 Development Tools Explained

Live Server: Automatically refreshes browser when files change.
Code Quality: ESLint and Prettier maintain consistent code style.
TOML Validation: Catches configuration errors before deployment.
Optional Build: No build process required - works with pure HTML/CSS/JS.

🚀 Deployment Guide

Deploy your portfolio to various hosting platforms with step-by-step instructions.

🌐 GitHub Pages Deployment

Free hosting with GitHub Pages - perfect for portfolios.

GitHub Pages Setup
# Step 1: Prepare your repository
# Ensure your main page is named index.html
# All assets should use relative paths

# Step 2: Push to GitHub
git add .
git commit -m "Deploy portfolio to GitHub Pages"
git push origin main

# Step 3: Enable GitHub Pages
# 1. Go to your repository on GitHub
# 2. Click "Settings" tab
# 3. Scroll to "Pages" section
# 4. Select "Deploy from a branch"
# 5. Choose "main" branch and "/ (root)" folder
# 6. Click "Save"

# Your site will be available at:
# https://NishikantaRay.github.io/renderer

# Step 4: Custom domain (optional)
# 1. Add CNAME file to root directory:
echo "yourdomain.com" > CNAME

# 2. Configure DNS with your domain provider
📝 GitHub Pages Tips

Free Hosting: Perfect for static portfolios with no server-side requirements.
Automatic Updates: Every push to main branch automatically updates your site.
Custom Domains: Use your own domain name for professional branding.
HTTPS Support: Automatic SSL certificates for secure connections.

⚡ Netlify Deployment

Modern hosting with advanced features and easy deployment.

Netlify Deployment Steps
# Method 1: Git-based deployment (Recommended)
# 1. Push your code to GitHub/GitLab/Bitbucket
# 2. Connect repository to Netlify:
#    - Sign up at netlify.com
#    - Click "New site from Git"
#    - Connect your Git provider
#    - Select your repository

# Method 2: Netlify CLI
npm install -g netlify-cli
netlify login
netlify init
netlify deploy --prod

# Features available on Netlify:
# - Custom domains with SSL
# - Form handling
# - Serverless functions
# - Branch previews
# - Deploy previews for pull requests
# - Analytics and performance monitoring

🎯 Real-World Examples

🎨 Designer Portfolio

Perfect for UI/UX designers and visual artists

Visual Focus
Hover Effects
Portfolio Showcase
[hero]
name = "Alex Designer"
title = "UI/UX Designer"

[featured_projects]
show_categories = true
enable_hover_effects = true
View Full Example

💻 Developer Portfolio

Ideal for software developers and engineers

GitHub Stats
Tech Stack
Open Source
[dashboard]
enabled = true

[opensource]
show_github_stats = true
github_username = "NishikantaRay"
View Full Example

📝 Content Creator

Great for bloggers and content creators

Blog Focus
Social Sharing
SEO Optimized
[blog]
title = "Tech Insights"

[settings]
enable_search = true
enable_social_sharing = true
View Full Example

🚀 Startup Founder

Perfect for entrepreneurs and business leaders

Product Focus
Client Testimonials
Business Metrics
[freelance_clients]
enabled = true

[latest_products]
enabled = true
title = "Products & Ventures"
View Full Example

⚙️ Configuration Reference

📋 TOML Syntax Guide

Understanding the configuration file format

Basic TOML Syntax
# Comments start with #
title = "My Portfolio"              # Strings in quotes
enabled = true                      # Boolean values
posts_per_page = 6                  # Numbers without quotes
tags = ["React", "TypeScript"]      # Arrays with square brackets

# Objects use [brackets]
[hero]
name = "Nishikanta Ray"
title = "Your Title"

# Arrays of objects use [[double brackets]]
[[experience]]
position = "Developer"
company = "Tech Corp"

🎛️ Common Patterns

Enable/Disable Features
[feature_name]
enabled = true
title = "Custom Title"

[another_feature]
enabled = false

🔗 Social Links

Social Configuration
[[links]]
platform = "github"
url = "https://github.com/username"
username = "username"
show = true

📝 Content Posts

Blog Posts
[[posts]]
id = "post-id"
title = "Post Title"
date = "2024-10-23"
tags = ["tag1", "tag2"]
content_file = "post.md"

🔧 Troubleshooting

❌ Configuration Not Loading

Debug TOML configuration issues

Debug Script
// Check in browser console
fetch('./config/home.toml')
  .then(r => r.text())
  .then(text => console.log('TOML:', text))
  .catch(err => console.error('Failed:', err));
Test Configuration

🔍 Content Not Showing

Debug content display issues

Debug DOM
// Check configuration and DOM
console.log('Config:', window.homeConfig?.config);
console.log('Element found:', 
  document.querySelector('[data-section="hero"]'));

📱 Mobile Issues

Fix responsive design problems

CSS Debug
/* Add temporary debug borders */
* { border: 1px solid red !important; }

/* Check viewport meta tag */
<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

⚡ Performance Issues

Measure and optimize loading performance

Performance Check
// Measure page load time
window.addEventListener('load', () => {
  const nav = performance.getEntriesByType('navigation')[0];
  console.log('Load time:', nav.loadEventEnd, 'ms');
});
Check Performance