Personal portfolio site

A portfolio is the best first project: small enough to finish in an afternoon, real enough to put your name on, and a clean excuse to learn the deploy pipeline you will reuse for everything else.

Overview

You will build a single-page personal site — hero, about, projects, contact — and deploy it to a live URL. The focus is on shipping something that looks intentional and loads fast, not on a heavy framework. By the end you own a repository and a public link you can keep updating.

The problem

Most starter portfolios look like the same template with a different name. The goal here is a site that loads in under a second, reads as deliberately designed, and is trivial to update when you finish a new project. Generic template output undersells you; a sharp, fast page does the opposite.

Architecture

A statically generated Next.js site. Content lives in typed data, pages render at build time, and Vercel serves the output from its edge network. No database, no server runtime — just fast static files.

Browser  -->  Vercel edge (static HTML/CSS/JS)
                   ^
                   |  build time
              Next.js  <--  content data (projects, bio)

Tech stack

• Next.js (App Router) for routing and static generation
• Tailwind CSS for styling without leaving your markup
• Vercel for zero-config deploys and previews

Build steps

1. Scaffold the project.

npx create-next-app@latest portfolio --tailwind --app --ts
cd portfolio
npm run dev

2. Define your content as typed data so the page stays clean.

// data/projects.ts
export type Project = { title: string; blurb: string; href: string };
 
export const projects: Project[] = [
  { title: "WhatsApp catalog bot", blurb: "Orders straight into a sheet.", href: "#" },
  { title: "Telugu voice AI", blurb: "Prepaid, per-second billing.", href: "#" },
];

3. Render a hero and a projects grid with real hierarchy.

// app/page.tsx
import { projects } from "@/data/projects";
 
export default function Home() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-24">
      <h1 className="text-5xl font-semibold tracking-tight">Sandeep Naredla</h1>
      <p className="mt-4 text-lg text-neutral-600">I build AI products in Telugu.</p>
 
      <section className="mt-16 grid gap-4">
        {projects.map((p) => (
          <a key={p.title} href={p.href}
             className="rounded-xl border p-5 transition hover:border-neutral-900">
            <h2 className="font-medium">{p.title}</h2>
            <p className="text-sm text-neutral-600">{p.blurb}</p>
          </a>
        ))}
      </section>
    </main>
  );
}

4. Add real metadata so links preview well when shared.

// app/layout.tsx
export const metadata = {
  title: "Sandeep Naredla — AI builder",
  description: "AI products, taught and built in Telugu.",
};

Source code

Starter repository: AnythingWithSandy/portfolio-starter. Fork it, replace the content in data/, and you have your own.

Demo

No hosted demo for the starter — your deploy in the next section is the demo. Share the Vercel URL once it is live.

Deployment

git init && git add . && git commit -m "feat: portfolio"
# push to a new GitHub repo, then:
npx vercel --prod

Vercel detects Next.js, builds, and gives you a live URL. Every future push to the main branch redeploys automatically, and pull requests get preview URLs.

Bonus challenge

Add a /projects/[slug] route backed by MDX so each project gets its own case-study page — the same MDX pattern this learning site uses. Then add a dark theme that feels deliberate, not just inverted colours.