Neeraj Parekh

How to Edit Your Portfolio

Quick Start

  1. Edit content → Modify JSON files in /data/ folder
  2. Preview → Run npm run dev and open http://localhost:3001
  3. Deploy → Push to GitHub (auto-deploys if connected to Vercel/Netlify)

Data Files Reference

All your content is stored in the /data/ folder as JSON files:

personal.json

Your personal information displayed on the home page.

{
  "name": "Your Name",
  "slogan": "Your tagline",
  "email": "your@email.com",
  "location": "City, Country",
  "profession": "Your Job Title",
  "rotatingTexts": ["Text 1", "Text 2", "Text 3"],
  "profileImage": "/assets/images/your-photo.jpg",
  "bio": "Your bio paragraph...",
  "values": "Your values...",
  "hobbies": "Your hobbies...",
  "dreamJob": "Your dream job...",
  "accomplishments": "Your accomplishments...",
  "education": "Your education..."
}

skills.json

Skills displayed on the Skills page.

[
  {
    "title": "Category Name",
    "icon": "/assets/icons/icon.svg",
    "skills": [
      { 
        "name": "Skill Name", 
        "icon": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/...", 
        "iconType": "svg" 
      }
    ]
  }
]

Icon sources:

projects.json

Projects displayed on the Projects page.

[
  {
    "id": "unique-id",
    "title": "Project Title",
    "subtitle": "Short subtitle",
    "description": "Brief description",
    "details": [
      "Detail point 1",
      "Detail point 2"
    ],
    "link": "https://project-url.com",
    "tags": ["Tag1", "Tag2"]
  }
]

links.json

Social links displayed on the Links page.

[
  {
    "name": "Platform Name",
    "url": "https://your-profile-url",
    "icon": "icon-name",
    "description": "Short description"
  }
]

Available icons: mail, linkedin, github, stack-overflow, file-text

certifications.json

Certifications displayed on the Skills page. Supports double-click certificate viewing!

[
  {
    "id": "cpp",
    "column": "A1",
    "title": "CPP",
    "backgroundImage": "/assets/images/cpp.png",
    "color": "#ffffff",
    "height": "120px",
    "wide": false,
    "hasCertificate": true,
    "certificate": "/assets/certificates/cpp-certificate.pdf",
    "certificateImage": "/assets/certificates/cpp-certificate.png"
  }
]

Certificate Fields:

Column Layout:

journey.json (NEW)

Timeline/journey section on the home page. Collapsible sections!

{
  "title": "My Journey",
  "subtitle": "Timeline of my experiences and milestones",
  "defaultExpanded": true,
  "items": [
    {
      "id": "about-me",
      "title": "About Me",
      "color": "#f21717",
      "icon": "user",
      "content": {
        "type": "about",
        "showPersonalInfo": true,
        "fields": ["name", "location", "email", "profession"],
        "showBio": true
      }
    }
  ]
}

Content Types:

Each item has:

blogs.json

Blog posts displayed on the Blog page.

[
  {
    "id": "unique-id",
    "title": "Blog Post Title",
    "excerpt": "Short description of the post",
    "platform": "Medium",
    "url": "https://link-to-full-post",
    "embedUrl": "https://embed-url-if-available",
    "date": "2025-01-15",
    "readTime": "5 min",
    "tags": ["tag1", "tag2"],
    "image": "/assets/images/blog-image.jpg"
  }
]

Platform options: Medium, Dev.to, Hashnode, LinkedIn, Personal

photos.json

Photo gallery on the Projects page (hex grid).

[
  "photos/photo1.jpg",
  "photos/photo2.png"
]

Photos should be placed in /public/assets/photos/

shots.json

“My Clicks” photography gallery on the home page.

[
  "1.jpg",
  "r1.jpg",
  "l2.jpg"
]

Adding New Images

  1. Profile/Project images → Add to /public/assets/images/
  2. Icons → Add to /public/assets/icons/
  3. Gallery photos → Add to /public/assets/photos/
  4. Update the corresponding JSON file with the path (e.g., /assets/images/new-image.jpg)

Adjusting Skills Page Layout

The skills page layout can be customized by editing CSS variables in /app/globals.css:

CSS Variables (find them around line 850)

:root {
  /* Skills Section - Left side */
  --skills-max-width: 320px;        /* Width of skills card column */
  --skills-card-min-width: 280px;   /* Minimum width of each skill card */
  --skills-gap: 1.5rem;             /* Space between skill cards */
  
  /* Certifications Section - Right side */
  --cert-column-width: 200px;       /* Width of certification columns */
  --cert-column-wide-width: 400px;  /* Width of wide certification columns */
  --cert-card-gap: 0.75rem;         /* Space between cards in a column */
  --cert-row-gap: 1rem;             /* Space between rows */
  --cert-card-min-height: 120px;    /* Minimum height of cert cards */
}

To Reorganize Certifications

Edit /data/certifications.json and change the column property:

Layout Reference

See /data/skills-layout.json for a reference guide to the layout structure.

Commands

Command Description
npm run dev Start development server
npm run build Build for production
npm run start Run production build

Tips

Interactive Features

Certificate Viewing (Skills Page)

Collapsible Journey (Home Page)