Terminal/CRT visual theme with neon fluorescent colors and glowing shadows
Next.jsReactPortfolio
portfolio-web-template — Next.js Portfolio Template
By wrujel
A terminal-style personal portfolio website template built on the Next.js App Router, featuring six pages and multiple animation effects.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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.
GSAP dot-grid background generates inertial shockwaves as the cursor approaches
CSS keyframes for scanlines, flicker, cursor blink, and marquee effects
Framer Motion page transitions and scroll reveal animations, typewriter hero title
Six App Router pages: Home, About, Services, Projects, Clients, Contact
Project hover cards, Swiper testimonial carousel, React CountUp statistic counters, and contact form
Template Details
This is a terminal/CRT visual-themed personal portfolio website template built with the Next.js App Router, comprising six pages: Home, About, Services, Projects, Clients, and Contact. Visually, it uses neon fluorescent color schemes with glowing shadows, a GSAP-driven dot-grid background (which generates inertial shockwaves as the cursor approaches), CSS keyframe-based scanlines, flicker and marquee effects, a typewriter-style hero title, and Framer Motion page transitions and scroll reveal animations.
In terms of page content: the Projects page offers expandable hover cards, with scroll-driven card selection on mobile; the Services page is a responsive grid with staggered per-card animations; the Clients page uses a Swiper carousel to display testimonials, including pagination and navigation; the About page is tabbed sections covering skills, experience, education, and awards; there are also React CountUp-driven statistic counters and a contact form with name, email, and message fields. Navigation is a fixed sidebar with a `$ cd` command prompt and current route highlighting.
The README does not explain the backend handling of form submissions, data sources, or content management mechanisms, nor does it provide information on accessibility, browser compatibility, or performance. The repository is released under the MIT license, and the README welcomes contributions via issues or pull requests.
Next.jsReactPortfolio
Is it right for your project?
Use Cases
- Building a personal portfolio website for a developer or designer
- As a reference project for learning the Next.js App Router multi-page structure
- Demonstrating the combined use of animation and interaction libraries such as GSAP, Framer Motion, and Swiper
- Showcase sites that require a terminal/CRT retro visual style
Suitable For
- Front-end developers familiar with Next.js and React who want to quickly start a portfolio
- Individuals who need a multi-page portfolio structure (projects, services, client testimonials, about, contact)
- Learners who want to reference animation and interaction implementation approaches
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 20.9+ and npm
- 2
After cloning the repository, run npm install, then use npm run dev to run locally at http://localhost:3000
- 3
Build with npm run build, then serve the production build with npm run start
- 4
Lint with npm run lint
- 5
The README states that no environment variables are required for basic usage
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that 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 additional charges.
View Original Text Basis
https://github.com/wrujel/portfolio-web-template/blob/master/LICENSEhttps://github.com/wrujel/portfolio-web-template/blob/master/README.mdPermission is hereby granted, free of charge
Original License Text
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 · 88 / 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
- 2026-09-05
- 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: codex-user-requested-batch-review-20261015 · 2026-10-15
Inspect the recorded source material
SHA-256: b024813a2dae844bc4a572be4b08f812df72cce16c8bec588c2978f061d1be71
2026-10-13T23:11:38.450Z
Source file / repository<div align='center'>
[![demo][demo]][demo-link]
[![status][status]][status-link]
[![deploy][deploy]][deploy-link]
[![test][tests]][tests-link]
</div>
<div align='center'>
<a href='/'>
<img
src='screenshot.webp'
alt='Terminal-themed portfolio with a green dot-grid background, a zsh window reading Imagine it, then code it, and an avatar marked Status: Online.'
width='100%'
/>
</a>
</div>
<div align='center'>
<h1>Portfolio Web with Next.js</h1>
</div>
<div align='center'>
[![Next.js][nextjs]][nextjs-link]
[![TypeScript][typescript]][typescript-link]
[![Tailwind CSS][tailwindcss]][tailwindcss-link]
[![React][react]][react-link]
[![Framer Motion][framer-motion]][framer-motion-link]
[![GSAP][gsap]][gsap-link]
[![Swiper][swiper]][swiper-link]
[![React CountUp][react-countup]][react-countup-link]
[![React Icons][react-icons]][react-icons-link]
[![Vercel][vercel]][vercel-link]
</div>
<div align='center'>
A terminal-themed portfolio website built with Next.js 16, React 19, TypeScript and Tailwind CSS. A GSAP dot-grid background reacts to cursor proximity with inertia-driven shockwaves behind CRT scanline, flicker and marquee effects, a typewriter hero and Framer Motion page transitions. Six App Router pages cover projects with expandable hover cards, a staggered services grid, a Swiper testimonials carousel, animated stat counters and a contact form.
[Demo][demo-link] · [Report issue](/issues) · [Suggest something](/issues)
</div>
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running locally](#running-locally)
- [Build](#build)
- [Linting](#linting)
- [Environment Variables](#environment-variables)
- [Project Structure](#project-structure)
- [Demo](#demo)
- [Contributing](#contributing)
- [License](#license)
## Features
- [x] Terminal/CRT visual theme with a neon phosphor palette and glow shadows
- [x] Interactive GSAP dot grid background that reacts to cursor proximity with inertia-driven shockwaves
- [x] CSS keyframe effects for scanline, flicker, blink, and marquee animations
- [x] Smooth page transitions and scroll-reveal animations with Framer Motion
- [x] Typewriter hero headline with a looping marquee word strip
- [x] Multi-page App Router navigation (home, about, services, projects, customers, contacts)
- [x] Fixed side rail navigation with `$ cd` command tooltips and active-route highlighting
- [x] Project gallery with expandable hover cards and scroll-driven card selection on mobile
- [x] Responsive services grid with staggered per-card animations
- [x] Customer testimonials carousel powered by Swiper with pagination and navigation
- [x] Animated stat counters (experience, customers, projects, awards) with React CountUp
- [x] Tabbed about section covering skills, experience, education, and awards
- [x] Contact form with name, email, and message fields
- [x] Monospace typography with JetBrains Mono and VT323 loaded through `next/font`
- [x] Responsive design with Tailwind CSS, deployed on Vercel
## Tech Stack
- [Next.js 16](https://nextjs.org/)
- [React 19](https://react.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://motion.dev/)
- [GSAP](https://gsap.com/)
- [Swiper](https://swiperjs.com/)
- [React CountUp](https://www.npmjs.com/package/react-countup)
- [React Icons](https://react-icons.github.io/react-icons/)
- [Vercel](https://vercel.com/)
## Getting Started
### Prerequisites
- Node.js 20.9+
- npm
### Installation
```bash
git clone https://github.com/wrujel/portfolio-web-template.git
cd portfolio-web-template
npm install
```
### Running locally
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Build
```bash
npm run build
```
Then serve the production build with:
```bash
npm run start
```
### Linting
```bash
npm run lint
```
## Environment Variables
This project does not require any environment variables for basic usage.
## Project Structure
```
/
├── public/
│ ├── assets/
│ │ ├── avatar.png
│ │ ├── about.png
│ │ ├── avatar_with_tablet.png
│ │ ├── project-1.png ... project-5.png
│ │ └── review-1.jpg ... review-5.jpg
│ ├── next.svg
│ ├── screenshot.png
│ └── vercel.svg
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── globals.css
│ │ ├── favicon.ico
│ │ ├── about/
│ │ ├── contacts/
│ │ ├── customers/
│ │ ├── projects/
│ │ └── services/
│ ├── components/
│ │ ├── About/
│ │ ├── Avatar/
│ │ ├── Contact/
│ │ ├── Cover/
│ │ ├── Customers/
│ │ ├── Header/
│ │ ├── ImageContainer/
│ │ ├── Introduction/
│ │ ├── Navbar/
│ │ ├── Projects/
│ │ ├── Services/
│ │ ├── Transition/
│ │ └── ui/
│ │ └── DotGrid.tsx
│ └── utils/
│ └── motionTransition.ts
├── eslint.config.mjs
├── next.config.js
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── package.json
```
## Demo
You can check out the demo:
[![Demo][demo]][demo-link]
## Contributing
Contributions are welcome! If you have suggestions or find bugs, please open an issue or submit a pull request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the [MIT License](LICENSE).
---
<!-- Badges -->
[nextjs]: https://img.shields.io/badge/Next.js-black?style=for-the-badge&logo=next.js
[typescript]: https://img.shields.io/badge/Typescript-007ACC?style=for-the-badge&logo=typescript&logoColor=white&color=blue
[tailwindcss]: https://img.shields.io/badge/Tailwind%20CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white
[react]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[framer-motion]: https://img.shields.io/badge/Framer%20Motion-2A2A2A?style=for-the-badge&logo=npm&logoColor=white
[gsap]: https://img.shields.io/badge/GSAP-88CE02?style=for-the-badge&logo=greensock&logoColor=white
[swiper]: https://img.shields.io/badge/Swiper-6332D2?style=for-the-badge&logo=swiper&logoColor=white
[react-countup]: https://img.shields.io/badge/React%20Countup-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[react-icons]: https://img.shields.io/badge/React--Icons-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[vercel]: https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white
<!-- Badge links -->
[nextjs-link]: https://nextjs.org/
[typescript-link]: https://www.typescriptlang.org/
[tailwindcss-link]: https://tailwindcss.com/
[react-link]: https://react.dev/
[framer-motion-link]: https://motion.dev/
[gsap-link]: https://gsap.com/
[swiper-link]: https://swiperjs.com/
[react-countup-link]: https://www.npmjs.com/package/react-countup
[react-icons-link]: https://react-icons.github.io/react-icons/
[vercel-link]: https://vercel.com/
<!-- Status badges -->
[demo]: https://img.shields.io/badge/🚀%20Live%20Demo-black?style=for-the-badge
[demo-link]: https://portfolio-web-eight-tau.vercel.app
[status]: https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fwrujel%2Fmonitor-repos%2Fmain%2Fdata%2Fportfolio-web-template.json&style=for-the-badge
[status-link]: https://github.com/wrujel/monitor-repos
[deploy]: https://img.shields.io/github/deployments/wrujel/portfolio-web-template/production?style=for-the-badge&label=Deploy
[deploy-link]: https://github.com/wrujel/portfolio-web-template/deployments
[tests]: https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fwrujel%2Fmonitor-tests%2Fmain%2Fdata%2Fportfolio-web-template.json&style=for-the-badge
[tests-link]: https://github.com/wrujel/monitor-tests
Explore similar templates
Compare previews and descriptions within the same stack and category.
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 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 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
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
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
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