SerisLab — AI Portfolio Generator for Developers

We turn your GitHub or resume into a living portfolio that grows with you. Build once. Sync forever. Edit anytime. Powered by AI — refined by you.

→ Try it free at serislab.com · View Showcase · Contact

What is SerisLab?

SerisLab is an AI-powered portfolio generator and career intelligence platform for tech professionals. It connects to your GitHub or reads your resume and automatically writes professional, impact-driven portfolio content — no blank pages, no stale profiles, no manual updates.

In 3 minutes: Connect GitHub (10 sec) → AI generates content (90 sec) → Publish (20 sec).

The Real Problems We Solve

Most developer portfolios fail not because of talent — but because of three unavoidable human problems:

1. No time

Developers are too busy building to maintain their own story. Portfolios go stale for months — or years. SerisLab removes the maintenance burden entirely with GitHub auto-sync and AI-powered updates.

2. Blank page paralysis

Writing about yourself is hard. Turning raw GitHub code into compelling narratives is even harder. SerisLab's AI reads your project description and does the writing for you.

3. Disconnected stories

GitHub shows code. A resume shows history. Neither alone tells the full picture to a recruiter. SerisLab's Dual-Source feature merges both into one unified portfolio.

Before vs After SerisLab

Before	After
"Built a React app."	"Built a real-time platform for 10,000+ users, reducing deployment time by 60% using WebSockets and Redis."
Portfolio last updated 14 months ago. Skills section missing 6 technologies you now use daily.	Push a commit → portfolio updates automatically. Always current, zero manual effort.
GitHub shows projects. Resume shows old job titles. Recruiters can't connect the dots.	Dual-source portfolio merges both — technical proof and career context, together.

How It Works

Step 1 — Connect (10 seconds)

Connect your GitHub account via OAuth, or upload your resume (PDF or DOCX). SerisLab reads your repositories, contributions, work history, and skills.

Step 2 — AI Generates Content (90 seconds)

AI reads your code, commit messages, README files, or resume and writes:

Professional project descriptions with business impact
Skills summaries with context
Work experience narratives
A compelling bio

Step 3 — Publish (20 seconds)

Pick a template, customize your style, publish instantly. Share your portfolio URL. GitHub portfolios auto-update with new projects — one setup, maintained forever.

Key Features

AI Content Generation

Don't just say "Built a React app." SerisLab's AI reads your repositories description, then generates professional descriptions like: "Built a real-time platform for 10,000+ users, reducing deployment time by 60% using WebSockets and Redis." Same work. A much better story.

GitHub Auto-Sync

Free plan: manual sync once daily (one click). Pro: real-time automatic sync. Push a commit → portfolio updates. No rebuilding required.

Dual-Source Portfolios

Use GitHub for code proof, your resume for career history, or combine both. Perfect for:

Career switchers bridging old experience with new skills
Bootcamp graduates with limited GitHub activity
Senior developers wanting to show both technical depth and leadership
Non-developer tech roles (PM, Designer, DevOps) with hybrid skill sets

Business Impact Translation

AI automatically extracts metrics from your code, READMEs, and resume: users served, revenue impact, time saved. Shows recruiters the value you create — not just the technologies you use.

Templates

Multiple professional templates — all fully responsive, SEO-indexed, and editable without touching code:

Minimal — Clean, typographic, recruiter-friendly
Modern — Bold, contemporary, startup-ready
Editorial — Classic serif, senior dev / academic
Creative — Expressive, unique, design-forward

Portfolio Sections

About · Hero · Skills · Experience · Projects · Education · Certifications · Contact · Achievements · Testimonials · Resume · Blog · Tools · Awards · Publications · Interests

Instant Preview

Enter any GitHub username on the landing page to see a live AI-generated portfolio preview — before signing up.

Full Editorial Control

AI generates a first draft — you can edit every word, reorder sections, add custom projects, or write your own copy anywhere.

Free Hosting + Custom Slug

Every portfolio is hosted at serislab.com/your-name. No server setup, no deployment, no cost.

Portfolio Analytics

See who views your portfolio, which projects get recruiter attention, where traffic comes from, and when companies check you out.

Who It's For

User	Pain Point	How SerisLab Helps
Junior Developers (0–2 yrs)	Resume thin, GitHub sparse	AI writes compelling narratives from limited data
Career Switchers	Old career + new GitHub skills look disconnected	Dual-source merges both into one story
Experienced Devs (3–7 yrs)	Too busy to maintain profiles	Auto-sync + AI handles updates
Bootcamp Grads	Projects don't "sound" professional	AI adds business context to every project
Freelancers	Need both technical proof + professional credibility	GitHub + Resume combined in one place
Senior Devs / Tech Leads	GitHub doesn't show leadership or team skills	Resume work history fills the gap
Non-dev Tech Pros	Don't have GitHub but need a tech portfolio	Resume-only mode works great

Tech Stack

Layer	Technology
Framework	Next.js 16 — App Router, React Server Components
Language	TypeScript 5
Styling	Tailwind CSS 4
Animations	Framer Motion 12
UI Components	Radix UI + shadcn/ui
Client State	Zustand 5
Server State	TanStack Query 5
Forms	React Hook Form 7 + Zod 4
Smooth Scroll	Lenis
HTTP Client	Axios
Carousel	Embla Carousel
Theming	next-themes

Design System

Typography

H1, H2: Playfair Display — elegant serif, editorial, trustworthy
H3–H6: DM Sans — clean sans-serif, modern, readable
Body: Lora — readable serif, long-form content

Color Palette — Sage Green

--color-primary:     hsl(150, 45%, 28%);  /* Deep emerald green */
--color-sage:        hsl(150, 25%, 48%);  /* Sage accent */
--color-sage-light:  hsl(150, 20%, 92%);  /* Sage background tint */

Full token set in src/styles/app/landing.css.

Animation Approach

Framer Motion with fadeInUp, staggerContainer, fadeInScale variants
Smooth easing: [0.22, 1, 0.36, 1] (custom cubic-bezier)
Lenis for momentum-based smooth scroll
All animations respect prefers-reduced-motion

Project Structure

serislab/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Landing page (main entry)
│   │   ├── layout.tsx            # Root layout (fonts, providers, SEO)
│   │   └── showcase/             # Community portfolio gallery
│   │
│   ├── components/
│   │   ├── landing-page/         # All landing page sections
│   │   │   ├── Navbar.tsx
│   │   │   ├── HeroSection.tsx       # GitHub/resume input + instant preview
│   │   │   ├── HowItWorksSection.tsx
│   │   │   ├── FeaturesSection.tsx   # Bento grid feature cards
│   │   │   ├── ShowcaseSection.tsx   # Live community portfolios
│   │   │   ├── BetaPricingSection.tsx
│   │   │   ├── FAQSection.tsx
│   │   │   ├── ContactSection.tsx
│   │   │   ├── FinalCTASection.tsx
│   │   │   ├── Footer.tsx
│   │   │   └── instant-preview/      # Live preview components
│   │   │       ├── MacBookMockup.tsx
│   │   │       ├── PortfolioContent.tsx
│   │   │       ├── PreviewLoadingState.tsx
│   │   │       └── PreviewErrorState.tsx
│   │   ├── shared/               # Reusable cross-page components
│   │   └── ui/                   # shadcn/ui components
│   │
│   ├── hooks/                    # TanStack Query data fetching hooks
│   │   ├── useShowcase.ts        # Showcase portfolio infinite scroll
│   │   ├── usePortfolios.ts      # Portfolio preview (instant preview)
│   │   ├── useTemplates.ts       # Template metadata
│   │   └── useContact.ts         # Contact form submission
│   │
│   ├── services/                 # Axios API service layer
│   │   ├── common.service.ts     # Waitlist, general endpoints
│   │   └── contact.service.ts    # Contact form
│   │
│   ├── stores/
│   │   └── waitlist.store.ts     # Zustand store for waitlist modal
│   │
│   ├── providers/
│   │   ├── ThemeProvider.tsx     # Dark/light mode
│   │   └── ReactQueryProvider.tsx
│   │
│   ├── data/
│   │   ├── landing-content.ts    # All landing page copy and config
│   │   └── beta-pricing-data.ts  # Pricing plans config
│   │
│   ├── styles/
│   │   ├── globals.css           # Base CSS + Tailwind setup
│   │   └── app/landing.css       # Sage palette + typography tokens
│   │
│   └── types/                    # TypeScript type definitions
│
├── public/
│   ├── landing/                  # Landing page images
│   ├── og/                       # Open Graph images
│   └── logo.svg
│
├── .env.example                  # Environment variable template
└── README.md

Getting Started

Prerequisites

Node.js 20+
npm, pnpm, or yarn

Run locally

git clone https://github.com/serislab/serislab.git
cd serislab
cp .env.example .env.local
npm install
npm run dev

Open http://localhost:3000.

Environment Variables

# .env.example
NEXT_PUBLIC_APP_URL=https://serislab.com

The live API powers the instant preview and portfolio showcase. Everything works out of the box pointing to the production API.

Build

npm run build
npm run start

FAQ

How do I create a portfolio from my GitHub profile? Connect via GitHub OAuth (10 seconds). SerisLab pulls your repos, contributions, and READMEs — AI generates professional descriptions. Pick a template, publish. Done in under 3 minutes.

Does it work without a GitHub account? Yes. Upload your resume (PDF or DOCX). SerisLab parses your work history, skills, and achievements and generates portfolio content from that. GitHub is optional.

Can I use both GitHub and my resume together? Yes — this is SerisLab's core Dual-Source feature. GitHub provides code proof; your resume provides career history. AI merges both into a unified portfolio.

Can I edit the AI-generated content? Full control. AI generates a first draft — you can edit every word, reorder sections, add custom projects, or write your own copy anywhere.

Is my GitHub data safe? Yes. OAuth only — we never see your password. Read-only access to public repo data. Revoke access anytime from GitHub settings.

How does auto-sync work? Free plan: manual sync once daily (one click). Pro: real-time sync — push a commit, portfolio updates automatically. No rebuilding required.

Contributing

Found a bug or have a UI improvement? PRs are welcome.

Fork the repo
Create a branch: git checkout -b fix/your-fix
Push and open a PR

For product feedback or feature requests, use serislab.com/contact.

Try SerisLab Free →

AI-powered portfolio generator · GitHub + Resume · No coding required

Build once. Sync forever. Edit anytime.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation