Next.jsReactAdmin dashboardPortfolio

mhaitana.dev — Next.js Admin dashboard Template

By mhaitana

A Next.js-based personal portfolio and GitHub dashboard site template with a multi-page architecture, light/dark theme switching, and refreshable GitHub data displays.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Multi-page structure: Home, About, GitHub, Contact, Resume

02

Home page integrates GitHub contribution graph and top languages summary

03

Standalone GitHub dashboard showing public repositories, languages, and activity

04

About page provides an expandable experience timeline

05

Supports light/dark theme switching and static site generation

06

Includes SEO metadata, OpenGraph, JSON-LD, and sitemap/robots generation

Template Details

This template is Matt Haitana's personal portfolio website, built with the Next.js App Router using React and TypeScript, styled with Tailwind CSS, and incorporating shadcn/ui, Framer Motion, Lucide icons, and next-themes. The site has a multi-page structure including Home, About, GitHub, Contact, and Resume pages. The home page integrates a GitHub activity summary, displaying a contribution graph and top languages; the GitHub page provides public repositories, languages, and activity information. The About page includes an expandable experience timeline, and the Contact page is a direct contact link layout rather than a form. On the data side, the repository provides a scripts/fetch-github.mjs script to refresh lib/github-data.json, which can fetch only public data or include private contributions via the GITHUB_TOKEN environment variable; the README states that private repository names are not written to the file or displayed on the site. The site supports static generation and includes SEO metadata, OpenGraph, Twitter cards, JSON-LD structured data, and sitemap and robots.txt generation. The template is MIT licensed and can be used, modified, commercially used, and distributed for free, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services such as domains and hosting may incur costs.

Next.jsReactDashboardPortfolio

Is it right for your project?

Use Cases

  • Building a personal portfolio website and showcasing GitHub activity
  • Serving as a developer's personal homepage to centrally present experience and public repositories
  • Personal sites requiring light/dark themes and responsive layouts
  • Projects that want to deploy via static generation and include basic SEO configuration

Suitable For

  • Developers who want to quickly build a personal portfolio and GitHub showcase page
  • Front-end projects using the Next.js and Tailwind CSS stack
  • Users who need a multi-page personal site including resume and contact pages

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Run npm install to install dependencies, and npm run dev to start the development environment

  2. 2

    Use node scripts/fetch-github.mjs to refresh public GitHub data

  3. 3

    To include private contributions, set the GITHUB_TOKEN environment variable and run the script, and also enable Include private contributions on my profile in GitHub personal settings

  4. 4

    Copy .env.example to .env.local to store the token during local development

  5. 5

    Build with npm run build, lint with npm run lint, and see Deployment.md for deployment instructions

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • The code of this version may be used, modified, commercially used, and distributed for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • To display languages and contribution graphs for private contributions, set the GITHUB_TOKEN environment variable and run the fetch script; a token is not required for public data only.
  • To show private activity in the contribution graph, you must also enable "Include private contributions on my profile" in your GitHub profile settings.
  • To store the GitHub token during local development, copy .env.example to .env.local.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

# Include private contributions (languages + contribution graph) GITHUB_TOKEN=ghp_xxx node scripts/fetch-github.mjs

Original README

To see private activity in the contribution graph, also enable **"Include private contributions on my profile"** in your GitHub profile settings.

Original README

Copy `.env.example` to `.env.local` if you want to store the token locally during development.

Original README
https://github.com/mhaitana/mhaitana.dev/blob/main/LICENSEhttps://github.com/mhaitana/mhaitana.dev/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
Next.js · React
Website type
Admin dashboard · Portfolio
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-09-10
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: 0b52b910fa05a9365e789737c9c8584fb9d3a86af33f767fb9015eaa3d3da545

2026-10-13T09:36:28.531Z

Source file / repository
# Matt Haitana — Portfolio

A world-class personal portfolio website for Matt Haitana, a senior software engineer based in Melbourne, Australia.

## Tech stack

- **Next.js 15** with App Router
- **React 19** + **TypeScript**
- **Tailwind CSS v4**
- **shadcn/ui** (base-nova style)
- **Framer Motion** for subtle animations
- **Lucide Icons**
- **next-themes** for light/dark mode

## Features

- Responsive, accessible design with WCAG AA target
- Light/dark theme toggle
- Static site generation for performance
- SEO metadata, OpenGraph, Twitter cards, JSON-LD structured data
- Sitemap and robots.txt generation
- Multi-page architecture: Home, About, GitHub, Contact, Resume
- Expandable experience timeline on the About page
- Integrated GitHub Activity summary on the Home page (contribution graph + top languages)
- Dedicated GitHub dashboard with public repos, languages, and activity
- Direct contact links layout (no form) on the Contact page

## Getting started

```bash
npm install
npm run dev
```

## GitHub dashboard refresh

```bash
# Public data only
node scripts/fetch-github.mjs

# Include private contributions (languages + contribution graph)
GITHUB_TOKEN=ghp_xxx node scripts/fetch-github.mjs
```

This updates `lib/github-data.json`. Private repository names are never written to the file or shown on the site. To see private activity in the contribution graph, also enable **"Include private contributions on my profile"** in your GitHub profile settings.

Copy `.env.example` to `.env.local` if you want to store the token locally during development.


## Build

```bash
npm run build
```

## Lint

```bash
npm run lint
```

## Deployment

See [Deployment.md](./Deployment.md).

## Structure

- `app/` — Next.js App Router pages
- `components/` — Reusable UI components and sections
- `lib/` — Data, utilities, and helper functions
- `public/` — Static assets

## Author

Matt Haitana — [GitHub](https://github.com/mhaitana) · [LinkedIn](https://www.linkedin.com/in/mhaitana)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

next-shadcn-dashboard-starter

next-shadcn-dashboard-starter

An MIT-licensed admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript.

Next.js · Admin dashboard

Studio Admin · Radix UI

Studio Admin · Radix UI

Studio Admin is an admin dashboard template built with Next.js 16, TypeScript, Tailwind CSS v4, and Shadcn UI.

Next.js · Admin dashboard

free-nextjs-admin-dashboard

free-nextjs-admin-dashboard

A free, open-source admin dashboard template built on Next.js 16, React 19, TypeScript, and Tailwind CSS v4. It provides a collapsible sidebar, charts, tables, authentication forms, modals, dropdowns, and dark mode, with internationalization and RTL support since version 2.4.0.

Next.js · Admin dashboard

react-resume-template

react-resume-template

A personal resume website template for software developers, built with Next.js, React, and TypeScript and styled with Tailwind CSS. Site content is driven by a single data file at /src/data/data.tsx, with types in dataDef.ts and images in src/images/.

Next.js · Portfolio

materio-mui-nextjs-admin-template-free

materio-mui-nextjs-admin-template-free

Materio Free is a Next.js admin dashboard template based on App Router and MUI, integrating Tailwind CSS and available in TypeScript and JavaScript versions.

Next.js · Admin dashboard

nextjs-postgres-nextauth-tailwindcss-template

nextjs-postgres-nextauth-tailwindcss-template

A Vercel-maintained Next.js App Router admin dashboard starter with Auth.js GitHub OAuth, Postgres, Tailwind CSS, and Shadcn UI, plus a sample products table, seed endpoint, and CRUD interface.

Next.js · Admin dashboard