Cyberpunk Developer Portfolio Template for Next.js – Devstarter

Devstarter is a responsive, cyberpunk-inspired, one-page developer portfolio template built with Next.js, shadcn/ui, Tailwind CSS, React, and TypeScript.

It features neon green accents on dark backgrounds, monospace typography, corner bracket card decorations, and animated ping indicators throughout.

The template organizes content into five pre-built sections (Hero, Projects, Skills, Blog, and Contact) on a single scrollable page.

CSS Grid with Subgrid handles the complex layout geometry, CSS custom properties manage the color theme, and the CSS View Transitions API drives navigation animations.

Features

How to Use It

1. Clone or download the repository from GitHub, and then install dependencies.

pnpm install

Or

npm install

2. Start the Development Server and open http://localhost:3000 in your browser.

pnpm dev

3. Devstarter follows a standard Next.js App Router layout. The main page lives in app/page.tsx, and each portfolio section maps to a dedicated component under components/.

devstarter/
├── app/
│   ├── layout.tsx        # Root layout: fonts, ThemeProvider, metadata
│   ├── page.tsx          # Single-page entry point — imports all section components
│   └── globals.css       # Global styles and CSS custom properties
├── components/
│   ├── hero.tsx
│   ├── projects.tsx
│   ├── skills.tsx
│   ├── blog.tsx
│   └── contact.tsx
├── public/
│   └── projects/         # Project screenshot images
└── tailwind.config.ts

4. Each section component holds its own data array. Open app/page.tsx and edit the array to reflect your own work.

const projects = [
  {
    title: "Nebula Dashboard",
    description:
      "Real-time analytics platform for distributed systems. Built with React, WebSocket, and Go.",
    tags: ["React", "Go", "WebSocket", "D3.js"],
    image: "/project-placeholder-1.jpg",
    link: "#",
    repo: "#",
  },
  {
    title: "Void Chain",
    description:
      "Decentralized identity verification protocol. Smart contracts written in Solidity.",
    tags: ["Solidity", "Ethereum", "Web3.js", "Node.js"],
    image: "/project-placeholder-2.jpg",
    link: "#",
    repo: "#",
  },
  {
    title: "Cyber Construct",
    description:
      "3D architectural visualization tool running in the browser using WebGL.",
    tags: ["Three.js", "WebGL", "Vue", "Python"],
    image: "/project-placeholder-3.jpg",
    link: "#",
    repo: "#",
  },
];
const skills = [
  {
    category: "Frontend",
    items: ["React", "TypeScript", "Tailwind CSS", "Three.js", "Next.js"],
  },
  {
    category: "Backend",
    items: ["Node.js", "Go", "PostgreSQL", "Redis", "Docker"],
  },
  {
    category: "Tools",
    items: ["Git", "Linux", "AWS", "Kubernetes", "Figma"],
  },
];
const blogPosts = [
  {
    title: "Optimizing React Render Cycles in High-Frequency Data Apps",
    date: "Oct 12, 2024",
    readTime: "5 min read",
    excerpt:
      "Deep dive into memoization strategies and custom hooks for handling 100+ updates per second.",
  },
  {
    title: "The State of WebAssembly in 2024",
    date: "Sep 28, 2024",
    readTime: "8 min read",
    excerpt:
      "Is WASM ready to replace JavaScript for heavy compute tasks? A performance benchmark.",
  },
  {
    title: "Building a Custom Kubernetes Operator with Go",
    date: "Aug 15, 2024",
    readTime: "12 min read",
    excerpt:
      "Automating stateful application management using the Operator pattern.",
  },
];

5. Change the Theme Color in globals.css.

:root {
  --primary: oklch(0.6 0.2 120);
  --primary-foreground: oklch(0.98 0 0);
  --sidebar-primary: oklch(0.6 0.2 120);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --chart-1: oklch(0.6 0.2 120);
  --chart-2: oklch(0.5 0.15 120);
  --chart-3: oklch(0.45 0.1 120);
  --chart-4: oklch(0.4 0.05 120);
  --chart-5: oklch(0.35 0.02 120);
  --radius: 0.5rem;
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.1 0.01 286);
  --card: oklch(0.96 0.005 286);
  --card-foreground: oklch(0.1 0.01 286);
  --popover: oklch(0.98 0 0);
  --popover-foreground: oklch(0.1 0.01 286);
  --secondary: oklch(0.92 0.01 286);
  --secondary-foreground: oklch(0.1 0.01 286);
  --muted: oklch(0.92 0.01 286);
  --muted-foreground: oklch(0.45 0.01 286);
  --accent: oklch(0.92 0.01 286);
  --accent-foreground: oklch(0.6 0.2 120);
  --destructive: oklch(0.55 0.2 20);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.88 0.01 286);
  --input: oklch(0.88 0.01 286);
  --ring: oklch(0.6 0.2 120);
  --sidebar: oklch(0.96 0.005 286);
  --sidebar-foreground: oklch(0.1 0.01 286);
  --sidebar-accent: oklch(0.92 0.01 286);
  --sidebar-accent-foreground: oklch(0.1 0.01 286);
  --sidebar-border: oklch(0.88 0.01 286);
  --sidebar-ring: oklch(0.6 0.2 120);
}
.dark {
  --primary: oklch(0.88 0.2 120);
  --primary-foreground: oklch(0.1 0.02 286);
  --sidebar-primary: oklch(0.2 0.02 286);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --chart-1: oklch(0.88 0.2 120);
  --chart-2: oklch(0.7 0.15 120);
  --chart-3: oklch(0.6 0.1 120);
  --chart-4: oklch(0.5 0.05 120);
  --chart-5: oklch(0.4 0.02 120);
  --background: oklch(0.1 0.01 286);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.12 0.01 286);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.12 0.01 286);
  --popover-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.2 0.02 286);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.2 0.02 286);
  --muted-foreground: oklch(0.6 0.01 286);
  --accent: oklch(0.25 0.02 286);
  --accent-foreground: oklch(0.88 0.2 120);
  --destructive: oklch(0.6 0.2 20);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0.02 286);
  --input: oklch(0.25 0.02 286);
  --ring: oklch(0.88 0.2 120);
  --sidebar: oklch(0.1 0.01 286);
  --sidebar-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.2 0.02 286);
  --sidebar-accent-foreground: oklch(0.98 0 0);
  --sidebar-border: oklch(0.25 0.02 286);
  --sidebar-ring: oklch(0.88 0.2 120);
}

6. Next.js’s next/font system controls the monospace font in app/layout.tsx. Replace the import with any Google Font to update typography site-wide.

import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
const spaceGrotesk = Space_Grotesk({
  variable: "--font-space-grotesk",
  subsets: ["latin"],
});
const jetBrainsMono = JetBrains_Mono({
  variable: "--font-jetbrains-mono",
  subsets: ["latin"],
});

7. Devstarter’s light/dark toggle runs through shadcn/ui’s ThemeProvider. Force a default mode by setting the defaultTheme prop in app/layout.tsx.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning className="scroll-smooth shadcn">
      <body
        className={`font-body antialiased ${spaceGrotesk.variable} ${jetBrainsMono.variable}`}
      >
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Related Resources

• Tailwind CSS: A utility-first CSS framework where styles apply in markup through composable class names.
• shadcn/ui: A component collection built on Radix UI primitives and styled with Tailwind CSS.
• Next.js: A React framework with App Router, server components, and built-in optimizations for fonts, images, and routing.

FAQs

Q: Does the template support additional pages beyond the one-page layout?
A: The default setup is a single scrollable page. Add new routes by creating additional files under the app/ directory. Follow standard Next.js App Router conventions for file naming and layout nesting.

Q: How do I deploy Devstarter to Vercel?
A: Push the repository to GitHub, then import it in the Vercel dashboard. Vercel detects Next.js automatically and sets up the build pipeline. Run pnpm build locally first to catch any TypeScript or compilation errors before the deploy.

Q: Can I replace shadcn/ui components with a different UI library?
A: Yes. shadcn/ui installs components as editable files in components/ui/, so no external package lock exists on those files after installation. Rewrite individual components in place or swap them for Radix UI primitives directly.

FAQs

Q: Does the template support additional pages beyond the one-page layout?
A: The default setup is a single scrollable page. Add new routes by creating additional files under the app/ directory. Follow standard Next.js App Router conventions for file naming and layout nesting.

Q: How do I deploy Devstarter to Vercel?
A: Push the repository to GitHub, then import it in the Vercel dashboard. Vercel detects Next.js automatically and sets up the build pipeline. Run pnpm build locally first to catch any TypeScript or compilation errors before the deploy.

Q: Can I replace shadcn/ui components with a different UI library?
A: Yes. shadcn/ui installs components as editable files in components/ui/, so no external package lock exists on those files after installation. Rewrite individual components in place or swap them for Radix UI primitives directly.

Q: Why do the project thumbnails look gray instead of full color?
A: components/project-image.tsx applies grayscale, mix-blend-luminosity, and dark:mix-blend-darken classes to the image element. Remove those classes if you want screenshots to keep their original colors.