Next.jsReactPortfolio

ide-portfolio-template — Next.js Portfolio Template

By salik03

A resume portfolio template built with Next.js that mimics the Visual Studio Code interface, letting you browse resume sections as files in the sidebar, open them in tabs, and view content by entering commands in the terminal.

Open Source SiteDownload Source ZIP

Explore the design

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

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-14View source

What stands out

A quick read of the recorded project description.

01

Resume content is centralized in lib/resume-data.ts; editing one file updates all sections

02

The sidebar lists resume sections and social links as a file explorer

03

The workspace opens each section in tabs, and the terminal supports commands such as about, skills, projects, and clear

04

Desktop shows the full IDE view and terminal; mobile uses a slide-out sidebar and hides the terminal

05

Uses Next.js App Router, TypeScript, React, Tailwind CSS, and ShadCN UI

06

Basic metadata is added in app/layout.tsx

Template Details

This template packages a personal resume into a Visual Studio Code-style interface: the sidebar lists resume sections and social links as a file explorer, the workspace displays each section in tabs, and the terminal supports commands such as about, skills, projects, and clear. All resume content (about, education, experience, skills, projects, certifications, leadership experience, awards) is stored centrally in lib/resume-data.ts; editing that file updates the content.

The responsive behavior described in the README is: desktop shows the full IDE view and keeps the terminal, while mobile uses a slide-out sidebar, hides the terminal, and adjusts touch targets. The tech stack is Next.js (App Router), TypeScript, React, Tailwind CSS, and ShadCN UI (for the responsive sidebar/sheet). The README does not provide specific framework version numbers, performance data, or production deployment instructions.

Next.jsReactPortfolio

Is it right for your project?

Use Cases

  • Individual developers or students creating an online resume portfolio with a VS Code visual theme
  • Needing to maintain resume data such as education, experience, skills, and projects centrally in a single file
  • A portfolio page that aims to present resume content through terminal command-style interaction
  • As an interface practice project for Next.js App Router and Tailwind CSS

Suitable For

  • Developers familiar with or willing to use Next.js and TypeScript
  • Individuals who want to manage resume content with a single data file
  • Presentation needs that prefer an editor-style interface over a traditional single-page resume

Getting started & customization

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

  1. 1

    Steps given in the README: clone the repository, enter the directory, and install dependencies with pnpm install or yarn

  2. 2

    Run pnpm run dev or yarn dev to start development mode, then visit http://localhost:3000

  3. 3

    The clone URL in the README is https://github.com/salik03/portfolio.git, which differs from the template repository address; refer to the actual repository

  4. 4

    To update content, edit lib/resume-data.ts; you can modify the personal statement, add or remove education/experience/skills/projects entries, and update sidebar social links

  5. 5

    The README does not describe production builds, deployment processes, or environment variable configuration

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • 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 separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/salik03/ide-portfolio-template/blob/main/LICENSEhttps://github.com/salik03/ide-portfolio-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-14. 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 · 79 / 100
Technologies
Next.js · React
Website type
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
2025-07-28
Screenshot last checked
2026-10-14

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: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: 2a0af7fd3438bc4c0b89fed18e1065f702354b6ba4a1c989fc8a3a240ef4b7bb

2026-10-14T11:27:22.705Z

Source file / repository
# Portfolio IDE

A portfolio website built with Next.js that looks and feels like Visual Studio Code. Browse your resume as “files” in a sidebar, open sections in tabs, and even run commands in a live terminal. All your resume data lives in one editable file, so updating your content is as simple as changing a few values.

## Features

- **Structured Data**  
  All resume content (about, education, experience, skills, projects, certifications, leadership, awards) lives in `lib/resume-data.ts`.  
- **VS Code‑Style Layout**  
  - **Sidebar** (file‑explorer view of your resume sections + social links)  
  - **Workspace** (tabbed interface for each section)  
  - **Terminal** (type commands like `about`, `skills`, `projects`, `clear`, etc.)  
- **Responsive Design**  
  - Desktop: full IDE view with terminal  
  - Mobile: slide‑out sidebar, hidden terminal, optimized touch targets  
- **SEO‑Friendly**  
  Basic metadata added in `app/layout.tsx`  

## Tech Stack

- Next.js (App Router)  
- TypeScript  
- React  
- Tailwind CSS  
- ShadCN UI (for responsive sidebar/sheet)  

## Getting Started

1. **Clone the repo**  
   ```bash
   git clone https://github.com/salik03/portfolio.git
   cd portfolio

2. **Install dependencies**

   ```bash
   pnpm install
   # or
   yarn
   ```

3. **Run in development mode**

   ```bash
   pnpm run dev
   # or
   yarn dev
   ```

4. **Open your browser**
   Visit [http://localhost:3000](http://localhost:3000) to explore your VS Code‑style portfolio.

## Project Structure

```
portfolio/
├─ app/
│  ├─ layout.tsx
│  └─ page.tsx
├─ components/
│  ├─ ide-sidebar.tsx
│  ├─ ide-workspace.tsx
│  ├─ ide-terminal.tsx
│  └─ content/
├─ lib/
│  ├─ resume-data.ts
│  └─ utils.ts
├─ hooks/
├─ public/
├─ styles/
├─ package.json
└─ tsconfig.json
```

## Customize Your Content

All text and links are in `lib/resume-data.ts`. Update that file to:

* Change your personal statement
* Add or remove items in education, experience, skills, projects, etc.
* Update social links or icons in the sidebar

Every change appears instantly in your IDE‑style portfolio. Enjoy!
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

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

nxt-lnk

nxt-lnk

nxt-lnk is a Next.js-based bio link page template that manages personal information and links via BioData.js and LinksData.js, positioned as a self-hosted alternative to Linktree. It groups links by type, supports enabling/disabling individual links, and offers hexagonal or oval avatars.

Next.js · Portfolio

sylph

sylph

Sylph is a minimal portfolio and blog template built on Next.js, supporting MDX/Markdown writing, light/dark themes, and automatic OG image generation. It includes sitemap, robots.txt, metadata, and syntax highlighting, with automatic blog timestamps.

Next.js · Portfolio

sleek-portfolio

sleek-portfolio

A modern, responsive portfolio template built with Next.js 15, TypeScript, Tailwind CSS, and Shadcn UI. It includes an MDX blog, project showcase, work experience timeline, and a contact form that receives messages via Telegram Bot.

Next.js · Portfolio

research-website-template

research-website-template

A React + Next.js template for research personal websites, aimed at PhD students and researchers. It centralizes publications, projects, and other content in src/data as arrays of objects, with optional fields automatically generating UI components.

Next.js · Portfolio

shadcn-portfolio

shadcn-portfolio

A developer portfolio template built with Next.js 15, shadcn/ui, Tailwind CSS, and Framer Motion, featuring an MDX blog, light and dark modes, responsive design, and SEO meta tags.

Next.js · Portfolio