โ€” Open Source

Create Your Own Portfolio

Fork โ†’ fill in your details โ†’ deploy free in under an hour. No React knowledge needed.

๐Ÿš€Overview

๐Ÿ’ก

What is this?

This portfolio is open-source โ€” anyone can clone it from GitHub, replace the content with their own info, and have a live AI-powered portfolio. When you clone it, you get placeholder files ("Your Name", fake projects). You replace those, add API keys, and deploy.

This guide walks you through every step, including how to keep your repo private on GitHub until you're ready to share it.

๐Ÿ“‚ GitHub Repository

Link will be updated soon

GitHub

๐Ÿ”’Privacy & Safety

  • The repo contains placeholder files with fake data โ€” "Your Name", fake projects, sample resume. That's all anyone who clones sees.
  • Your real files (portfolio.json, resume.json, projects.json) are in .gitignore โ€” they are never uploaded to GitHub.
  • Your API keys live in .env.local which is also gitignored โ€” never committed, ever.
  • After npm install, a setup script auto-copies the example files into your real files. You edit those โ€” your data never touches GitHub.

โš™๏ธSetup Guide

1

Install the tools (one-time)

  • Node.js โ€” nodejs.org โ†’ click "LTS" โ†’ install. Runs JavaScript on your computer.
  • Git โ€” git-scm.com โ†’ download and install. Needed to clone the code.
  • VS Code (editor) โ€” code.visualstudio.com โ€” free, beginner friendly.
๐Ÿ’กCheck Node is installed: open a terminal and type node --version. You should see v18 or higher.
2

Clone the repo

git clone https://github.com/PHANI465/CLONE-PORTFOLIO
cd phaneendra-portfolio
๐Ÿ’กIn VS Code: File โ†’ Open Folder โ†’ select the phaneendra-portfolio folder.
3

Install and auto-setup content files

npm install

This installs all libraries AND runs a setup script that copies the example files to real files:

  • portfolio.example.json โ†’ portfolio.json
  • resume.example.json โ†’ resume.json
  • projects.example.json โ†’ projects.json

These real files are what the site reads. They are gitignored โ€” your data never goes to GitHub.

โš ๏ธErrors? Make sure you're inside the project folder in the terminal, and Node.js is installed.
4

Get your API keys (all free tiers available)

  • Go to platform.openai.com/api-keys โ†’ sign up
  • Click "Create new secret key" โ†’ copy it (starts with sk-)
  • Add $5 minimum credit to your account โ€” GPT-4o is very cheap, lasts months
โš ๏ธYou can only see the key once. Copy it before closing the window.
5

Set up environment variables

cp .env.local.example .env.local

Open .env.local and fill in:

OPENAI_API_KEY=sk-your-key-here
PINECONE_API_KEY=your-pinecone-key
PINECONE_INDEX=portfolio
RESEND_API_KEY=re_your-key-here
CONTACT_TO_EMAIL=your.email@gmail.com
โš ๏ธ.env.local is in .gitignore โ€” it will NEVER go to GitHub. Windows: use `copy` instead of `cp`.
6

Fill in your personal content

7

Index content into Pinecone

npm run index-content
๐Ÿ’กRe-run this every time you update your content files to keep the AI up to date.
8

Preview locally

npm run dev

Open localhost:3000. Content file changes auto-reload โ€” no restart needed.

9

Deploy to Vercel

See the "Upload to GitHub" section below first โ€” then come back here.

  • Go to vercel.com โ†’ sign in with GitHub โ†’ Add New Project โ†’ select your repo โ†’ Deploy
  • Go to Project โ†’ Settings โ†’ Environment Variables โ†’ add all keys from .env.local
  • Click Redeploy โ€” AI chat and email now work on your live site
โš ๏ธAdd env variables on Vercel or the AI chat and contact form won't work on the live site.
๐Ÿ’กYour live URL: your-project.vercel.app โ€” you can set a custom domain for free in Vercel settings.

๐Ÿ“คUpload to GitHub (Private First)

โญ Keep it private until you're ready

GitHub lets you create private repositories โ€” only you can see them. You can make it public at any time with one click. This is the recommended approach while you're still building and customizing.

1

Create a GitHub account (if you don't have one)

  • Go to github.com โ†’ click Sign up
  • Enter your email, create a password, and choose a username โ€” this appears in your repo URL, so pick something clean (e.g. your-name)
  • Verify your email address before continuing
2

Create a new PRIVATE repository

  • Click the + icon (top-right) โ†’ New repository
  • Repository name: my-portfolio (or any name you like)
  • Set visibility to Private โ† this is the important one
  • Leave all three checkboxes unchecked โ€” no README, no .gitignore, no license. The project already has these; adding them here causes a conflict.
  • Click Create repository
๐Ÿ’กYou'll land on a setup page with commands. Keep it open โ€” you need the repo URL in Step 4.
3

Open a terminal in your project folder

In VS Code, press Ctrl + ` (backtick) to open the integrated terminal. Make sure you're inside the portfolio folder โ€” you should see files like package.json when you type ls.

4

Initialize git and connect to GitHub

Run these commands one at a time:

git init

This initializes git tracking in your project folder (only needed once).

git remote add origin https://github.com/YOUR-USERNAME/my-portfolio.git

Replace YOUR-USERNAME and my-portfolio with your GitHub username and repo name. Copy the exact URL from the GitHub page you left open.

5

Verify your personal files are protected

Before pushing anything, confirm what's gitignored:

cat .gitignore

You should see these entries โ€” these files will never go to GitHub:

content/portfolio.json
content/resume.json
content/projects.json
.env.local
data/

Now check exactly what will be uploaded:

git status
๐Ÿ’กScan the list โ€” .env.local and content/portfolio.json should NOT appear. Only *.example.json files should be included.
6

Generate a Personal Access Token (GitHub password won't work)

GitHub no longer accepts regular passwords for git operations. You need a token:

  • Go to GitHub โ†’ your profile photo (top-right) โ†’ Settings
  • Scroll the left sidebar all the way down โ†’ Developer settings
  • Click Personal access tokens โ†’ Tokens (classic)
  • Click Generate new token (classic)
  • Give it a name (e.g. "portfolio push"), set expiration (90 days or No expiration)
  • Check only the repo checkbox
  • Click Generate token at the bottom
  • Copy the token immediately โ€” GitHub won't show it again
โš ๏ธWhen git asks for your password during the next step, paste this token โ€” not your GitHub password.
7

Stage, commit, and push

git add .
git commit -m "Initial portfolio setup"
git push -u origin main

If you get an error about "main" not existing, try:

git push -u origin master

When git prompts for login, enter your GitHub username and paste your token as the password.

8

Verify on GitHub

  • Go to github.com/YOUR-USERNAME/my-portfolio
  • Confirm content/portfolio.json does NOT appear โ€” only portfolio.example.json should be there
  • Confirm .env.local does NOT appear
  • The repo header should show a ๐Ÿ”’ Private label
9

Push future changes

Every time you make updates and want to save them to GitHub:

git add .
git commit -m "describe what you changed"
git push
๐Ÿ’กWrite a clear commit message each time. Example: "Add new project โ€” Industrial AI Copilot" or "Update bio and contact info".
10

Make the repo public when you're ready

  • Go to your repo โ†’ Settings tab (top-right of repo page)
  • Scroll all the way down to the Danger Zone section
  • Click "Change repository visibility" โ†’ select Public โ†’ confirm
  • Your portfolio source code is now public, but your personal data is still safe โ€” those JSON files are gitignored and won't appear
๐Ÿ’กYou can switch back to private at any time from the same settings page.

โ“Common Questions

Q: I changed portfolio.json but the site didn't update โ€” why?

Make sure npm run dev is still running. If not, restart it. Also press Ctrl+S to save the file. The browser auto-refreshes within a second of saving.

Q: The AI chat says "Make sure OPENAI_API_KEY is set" โ€” what do I do?

Open .env.local and verify OPENAI_API_KEY starts with sk-. After editing .env.local, restart the dev server (Ctrl+C to stop, then npm run dev). Env variable changes always require a restart.

Q: How do I change the default theme?

Open lib/context/ThemeContext.tsx, find useState('cyberpunk-ai'), and change the value to: glassmorphism, minimal-professional, terminal-hacker, dark-professional, bright-neon, futuristic-space, anime-gaming, or retro-pixel.

Q: How do I add a blog post?

Create a .md file in content/blog/. Add frontmatter at the top between --- lines: title, date, tags (array), category, excerpt. Everything below the second --- is the post body. It appears on the Blog page automatically.

Q: How do I update the resume PDF?

Replace the file at public/resume/Phaneendra_G_Resume.pdf with your own PDF. Keep the same filename, or update the download links in the Experience page and One Page view.

Q: Git is asking for a password but my GitHub password doesn't work?

GitHub no longer accepts passwords for git operations. Go to github.com โ†’ Settings โ†’ Developer Settings โ†’ Personal Access Tokens โ†’ Tokens (classic) โ†’ Generate new token โ†’ check the repo checkbox โ†’ generate โ†’ use this token as your password when git asks.

๐Ÿค–Don't Need the AI Chat?

The AI assistant uses OpenAI which costs a small amount per query. If you'd rather skip it, two steps remove it completely:

1

Remove it from the layout

Open components/shared/ThemedLayout.tsx and delete these two lines:

import AIAssistant from '@/components/assistant/AIAssistant'
<AIAssistant />

The chat button disappears from every page.

2

Clean up (optional)

Delete the app/api/assistant/ folder. Skip OPENAI_API_KEY and PINECONE_API_KEY in .env.local. Everything else works perfectly without them.

๐Ÿ’กWant the AI but lower costs? In app/api/assistant/route.ts, reduce max_tokens from 500 to 200. Typical portfolio usage is pennies per month.

๐Ÿ”ฎWhat You Can Do Next

๐ŸŒ

Buy your own domain

Get yourname.com or yourname.dev from Namecheap (~$10/year). In Vercel โ†’ Project โ†’ Settings โ†’ Domains, add it and follow the DNS instructions. Takes 10 minutes.

โœ‰๏ธ

Email from your own domain

Once you have a domain, in Resend go to Domains โ†’ Add Domain, verify DNS, then update the 'from' field in app/api/contact/route.ts to hello@yourdomain.com.

๐Ÿ“Š

Add visitor analytics

Run: npm install @vercel/analytics, then import and render the Analytics component in app/layout.tsx. Free. Shows page views, locations, and which pages people visit.

๐Ÿ“

Write blog posts

Drop .md files in content/blog/. Blog is fully built โ€” you just need content. Writing about projects gets you noticed by recruiters.

๐ŸŽจ

Make your own theme

Duplicate a theme in lib/themes.ts, change the color variables, add it to the switcher. No React needed for color changes.

๐Ÿ”’

Make the repo public

When you're happy with it: GitHub โ†’ repo โ†’ Settings โ†’ scroll to Danger Zone โ†’ Change visibility โ†’ Public. Your personal files are still safe.

Still stuck? Open the AI chat (bottom right corner) and ask โ€” it knows this entire guide.

Built by Phaneendra Gavara ยท phaneendragavara436@gmail.com