PortfolioSathi

PortfolioSathi is a Next.js 14 portfolio generator that turns two inputs into a polished, animated developer portfolio:

• a GitHub username
• a LinkedIn PDF export

It uses only free public data sources and server-side parsing:

• GitHub Public REST API v3
• pdf-parse on the server
• no paid API keys
• no AI service calls

The app ships with three theme systems:

• Cosmic
• Minimal Pro
• Terminal

It is built for Vercel deployment and keeps the generated portfolio data in local storage so the preview survives navigation and refreshes.

What the app does

1. The user opens /generate
2. The app validates the GitHub username in real time
3. The user uploads a LinkedIn PDF
4. The app fetches GitHub profile/repository data
5. The app parses the PDF server-side into structured profile data
6. The user edits the extracted fields
7. The user selects a theme
8. The final portfolio renders in /preview

Tech Stack

• Next.js 14 App Router
• TypeScript
• Tailwind CSS
• shadcn-style UI primitives
• Framer Motion
• Three.js
• @react-three/fiber
• @react-three/drei
• Zustand
• pdf-parse
• GitHub public REST API v3

Project Structure

app/
  layout.tsx
  page.tsx
  generate/page.tsx
  preview/page.tsx
  api/github/route.ts
  api/parse-linkedin/route.ts
components/
  generator/
  portfolio/
  three/
  ui/
lib/
  types.ts
  github.ts
  parseLinkedin.ts
  portfolioStore.ts
public/
  fonts/

Main Flow

1. Input screen

File: app/generate/page.tsx

• GitHub username field with live validation
• LinkedIn PDF drag-and-drop upload
• loading state while fetching/parsing
• error states for invalid GitHub usernames and failed PDF parsing

2. GitHub fetch

File: app/api/github/route.ts

Returns:

• profile name
• bio
• avatar URL
• location
• blog
• followers
• top repositories
• aggregated languages

3. LinkedIn parse

File: app/api/parse-linkedin/route.ts

Parses the uploaded PDF on the server and extracts:

• full name
• headline / current role
• location
• work experience
• education
• skills

If parsing is incomplete, the user can still edit the form manually.

4. Editable data form

File: components/generator/EditableForm.tsx

The extracted data is editable before generation:

• name
• headline
• bio
• email
• LinkedIn URL
• skills
• projects
• experience
• education

5. Theme selection

File: components/generator/ThemeSelector.tsx

Themes:

• Cosmic: dark space background, star field, wireframe globe
• Minimal Pro: editorial layout, soft neutral palette, floating geometry
• Terminal: GitHub-dark style, code-heavy green aesthetic, matrix motion

6. Final portfolio

File: app/preview/page.tsx

The portfolio sections are:

1. Hero
2. About
3. Skills
4. Projects
5. Experience
6. Education
7. Contact

Data Model

Defined in lib/types.ts.

interface PortfolioData {
  name: string;
  avatar: string;
  githubBio: string;
  location: string;
  githubUrl: string;
  followers: number;
  projects: {
    name: string;
    description: string;
    stars: number;
    language: string;
    repoUrl: string;
    liveUrl: string;
    show: boolean;
  }[];
  headline: string;
  linkedinUrl: string;
  skills: string[];
  experience: {
    company: string;
    role: string;
    duration: string;
    description: string;
  }[];
  education: {
    institution: string;
    degree: string;
    year: string;
  }[];
  customBio: string;
  email: string;
  selectedTheme: "cosmic" | "minimal" | "terminal";
}

API Routes

GET /api/github?username=xxx

Fetches GitHub profile and repository data from the public API.

POST /api/parse-linkedin

Accepts a multipart PDF upload and returns parsed JSON.

State Persistence

Portfolio data is stored in Zustand and persisted in browser local storage.

This means:

• preview still works after navigation
• refresh does not wipe the generated portfolio
• the user can continue editing after returning to the app

Run Locally

npm install
npm run dev

Open:

• http://localhost:3000

Scripts

• npm run dev - start development server
• npm run build - build production bundle
• npm run start - run production server
• npm run typecheck - run TypeScript strict check
• npm run lint - run Next lint

Verification

This app has been checked with:

• npm run typecheck
• npm run build

Notes

• Three.js components are client-only and loaded with dynamic imports.
• PDF parsing runs only on the server route.
• Framer Motion respects reduced-motion preferences through the shared motion wrapper.
• The app is responsive and should work on mobile and desktop.

Deployment

This project is Vercel-ready.

Make sure the following remain true in production:

• Node 18+ or Node 20+
• npm install runs successfully
• the app can reach api.github.com