โ 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
๐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.localwhich 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
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.
node --version. You should see v18 or higher.Clone the repo
git clone https://github.com/PHANI465/CLONE-PORTFOLIO cd phaneendra-portfolio
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.
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
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
Fill in your personal content
Index content into Pinecone
npm run index-content
Preview locally
npm run dev
Open localhost:3000. Content file changes auto-reload โ no restart needed.
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
๐ค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.
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
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
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.
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.
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
.env.local and content/portfolio.json should NOT appear. Only *.example.json files should be included.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
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.
Verify on GitHub
- Go to
github.com/YOUR-USERNAME/my-portfolio - Confirm content/portfolio.json does NOT appear โ only
portfolio.example.jsonshould be there - Confirm .env.local does NOT appear
- The repo header should show a ๐ Private label
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
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
โ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:
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.
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.
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