Frank Kelechi Oge · frankdotdev · Hackverse Software Solutions
A sharp, minimal, hackerish personal portfolio built with Next.js 14, Tailwind CSS, JetBrains Mono, and Framer Motion concepts. Light/dark mode, AI chatbot, full SEO, responsive across all devices.
| Layer | Tech |
|---|---|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS + CSS Variables |
| Fonts | JetBrains Mono + Space Grotesk |
| Icons | Phosphor Icons |
| Chatbot | Anthropic Claude API |
| Resend (optional) | |
| Deploy | Vercel (recommended) |
npm installcp .env.example .env.localThen open .env.local and fill in your values:
ANTHROPIC_API_KEY=your_anthropic_api_key_here
RESEND_API_KEY=your_resend_api_key_here # optional, for contact form
NEXT_PUBLIC_SITE_URL=https://frankoge.comPlace your photos in public/images/:
public/
images/
frank1.png ← Used on About page hero
frank2.png ← Used on Home page hero + Philosophy
frank3.png
...
frank20.png ← Gallery uses frank1.png → frank20.png
The gallery on the About page will auto-scroll these in two infinite rows.
If an image is missing it falls back to frank1.png or frank2.png.
npm run devOpen http://localhost:3000
| Route | Page |
|---|---|
/ |
Home — hero, tech marquee, Stella AI feature, services, philosophy quote, CTA |
/about |
About — bio, journey timeline, tech stack, experience, education, image gallery |
/solutions |
Solutions — full services grid with features + stack per service |
/builds |
Builds — filterable project grid (featured + full list) |
/blog |
Blog — CMS-ready post listing (shows Medium fallback when empty) |
/philosophy |
Philosophy — Software as a Solution manifesto |
/contact |
Contact — form, availability status, all social links |
The blog page at src/components/BlogClient.tsx is CMS-ready. To add posts:
// In src/components/BlogClient.tsx — replace the empty array:
const CMS_POSTS = [
{
slug: "your-post-slug",
title: "Your Post Title",
excerpt: "A short excerpt...",
date: "2025-12-01",
category: "AI/ML",
readTime: "5 min read",
},
// Add more posts here, or connect to a headless CMS
];For a headless CMS, fetch posts from your CMS in the BlogPage server component (src/app/blog/page.tsx) and pass them down as props.
The floating AI assistant in the bottom-right corner is powered by Claude Haiku via /api/chat.
- Set
ANTHROPIC_API_KEYin.env.local - The chatbot has full context about Frank, his projects, skills, and philosophy
- To update the context, edit
FRANK_CONTEXTinsrc/app/api/chat/route.ts - To integrate an external chatbot widget instead, replace the
<ChatbotWidget />import insrc/app/layout.tsxwith a<script>tag or iframe embed
By default, form submissions are logged to the console. To enable real email delivery:
- Sign up at resend.com (free tier)
- Add
RESEND_API_KEYto.env.local - Uncomment the Resend block in
src/app/api/contact/route.ts - Install Resend:
npm install resend
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel
# Set environment variables on Vercel dashboard or:
vercel env add ANTHROPIC_API_KEY
vercel env add RESEND_API_KEY| What to change | Where |
|---|---|
| Name, bio, philosophy | src/components/PhilosophyClient.tsx, AboutClient.tsx |
| Projects list | src/components/BuildsClient.tsx → PROJECTS array |
| Services | src/components/SolutionsClient.tsx → SERVICES array |
| Social links | src/components/Footer.tsx + ContactClient.tsx |
| Chatbot context | src/app/api/chat/route.ts → FRANK_CONTEXT |
| Blog posts | src/components/BlogClient.tsx → CMS_POSTS array |
| SEO metadata | src/app/layout.tsx + each page's metadata export |
| Colors / theme | src/app/globals.css → CSS variables |
| Tech stack rows | src/components/HomeClient.tsx + AboutClient.tsx → TECH_ROWS |
src/
app/
layout.tsx ← Root layout, SEO metadata, fonts
globals.css ← Design system: CSS variables, animations, utilities
page.tsx ← Home
about/page.tsx
solutions/page.tsx
builds/page.tsx
blog/page.tsx
philosophy/page.tsx
contact/page.tsx
not-found.tsx
sitemap.ts ← Auto-generated sitemap.xml
robots.ts ← robots.txt
api/
chat/route.ts ← AI chatbot endpoint
contact/route.ts ← Contact form endpoint
components/
ThemeProvider.tsx ← Dark/light mode context
Navbar.tsx ← Sticky nav with mobile menu
Footer.tsx ← Full footer with social links
ChatbotWidget.tsx ← Floating AI assistant
Reveal.tsx ← Scroll-triggered fade-in
MarqueeRow.tsx ← Infinite scrolling rows
JsonLd.tsx ← Structured data for SEO
HomeClient.tsx ← Home page (interactive)
AboutClient.tsx ← About page
SolutionsClient.tsx ← Solutions page
BuildsClient.tsx ← Builds/projects page
BlogClient.tsx ← Blog page (CMS-ready)
PhilosophyClient.tsx
ContactClient.tsx
public/
images/ ← Add frank1.png → frank20.png here
site.webmanifest
og-image.jpg ← Add 1200×630 OG image
favicon.ico
Personal portfolio — Frank Kelechi Oge © 2026. All rights reserved.