ReactHTMLPortfolioCorporate Website

lumina — React Portfolio Template

By t-a-g-o

Lumina is a dark-themed website template built with React and Next.js, aimed at developers and technical professionals to showcase personal portfolios, tech stacks, and team information.

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-12View source

What stands out

A quick read of the recorded project description.

01

Built with Next.js, React, TailwindCSS, and shadcn/ui

02

Dark theme with vivid accent colors; the README says it suits developers and technical professionals

03

Includes sections for project showcase, tech stack display, contact form, and team introduction

04

The README states it is responsive and adapts to desktop, tablet, and mobile devices

05

Released under the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code

Template Details

Lumina is an open-source website template created by @t-a-g-o, with its repository on GitHub and released under the MIT license. The template is positioned as a personal portfolio and landing page for developers and technical professionals. The README describes it as using a dark theme with vivid accent colors, offering a visually striking way to present a digital portfolio.

On the technical side, the README lists a stack that includes Next.js, React, TailwindCSS, JavaScript, and shadcn/ui. In terms of features, the template includes responsive design, dark mode, a project showcase section, a tech stack display, a contact form, and a team introduction section, and notes that it can be modified to fit a personal brand. The repository provides screenshots of the desktop homepage, mobile homepage, and a representative inner page, with the demo site at tago.works.

Regarding usage and limitations, the README's startup process is to clone the repository, enter the directory, run npm install -r to install dependencies, and then run npm run dev to start the development preview. To have the browser display a favicon, you need to add an ico-format icon named favicon.ico to src/app/, with a recommended size of 256x256. The repository does not explain production deployment, content management, or data sources, nor does it cover the actual submission backend for the contact form. As for licensing, MIT covers the code of this version itself; third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses, and external services like domains and hosting may incur separate charges.

ReactHTMLPortfolioCorporate website

Is it right for your project?

Use Cases

  • Developers building a personal portfolio site to showcase projects and tech stack in one place
  • Technical teams creating a landing page to introduce members and team capabilities
  • Using it as a starting point for page structure and styling in React and Next.js projects for further development

Suitable For

  • Front-end developers who need a dark-style personal portfolio
  • Small teams looking to quickly build a technical team introduction page
  • Users familiar with React and Next.js who are willing to adjust code and assets themselves

Getting started & customization

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

  1. 1

    After cloning the repository, enter the lumina directory, run npm install -r to install dependencies, then run npm run dev to start the development preview

  2. 2

    To have the browser display a favicon, add an ico-format favicon.ico to src/app/, with a recommended size of 256x256

  3. 3

    Third-party assets such as demo images, fonts, and icons must be checked under their respective licenses and cannot be judged solely by the code's MIT license

  4. 4

    The repository does not explain production deployment or the contact form's backend handling; you need to confirm these yourself before formal use

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of this 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 of the 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 liability limitations 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 under 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.
  • To display a favicon in the browser, you must add an icon file to src/app/ yourself: the format must be ico, the filename must be favicon.ico, and the recommended size is 256x256; otherwise the browser will not display a site icon.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

To make a favicon show in the browser, add an icon image to `src/app/`. It has to be "ico" format and it has to be named "favicon.ico". Make the icon 256x256 if possible, this is the most visible and detailed icon in the browser.

Original README
https://github.com/t-a-g-o/lumina/blob/main/LICENSEhttps://github.com/t-a-g-o/lumina/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-12. 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
Partly documented · 73 / 100
Technologies
React · HTML
Website type
Portfolio · Corporate Website
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
2024-10-10
Screenshot last checked
2026-10-12

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 React 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: 57f8acf4b063ecf0136689ac3ab55915badd75806167ea158302d326658b5079

2026-10-12T14:05:22.066Z

Source file / repository
# <img src="./readme/icon.png" width="24" height="24" alt="Lumina Logo"> Lumina Website Template
Created by [@t-a-g-o](https://github.com/t-a-g-o)

> Lumina is a sleek, modern website template designed for developers and tech professionals to showcase their skills and projects. With its dark theme and vibrant accents, Lumina offers a visually striking platform for your digital portfolio.
> View it live [_here_](https://tago.works).

## Table of Contents
* [Technologies Used](#technologies-used)
* [Features](#features)
* [Screenshots](#screenshots)
* [Setup](#setup)
* [License and Contact](#license-and-contact)

## Technologies Used
![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![SHADCN](https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcn/ui&logoColor=white)

## Features
- **Responsive Design:** Looks great on desktop, tablet, and mobile devices
- **Dark Mode:** Easy on the eyes with a professional, modern aesthetic
- **Project Showcase:** Dedicated sections to highlight your best work
- **Tech Stack Display:** Visually represent your skills and technologies
- **Contact Form:** Simple and effective way to get in touch with you
- **Team Section:** Introduce yourself or your team members
- **Customizable:** Easy to modify and adapt to your personal brand


## Screenshots
![Showcase 1](./readme/showcase1.png)
![Showcase 3](./readme/showcase3.png)
![Showcase 2](./readme/showcase2.png)


## Setup
1. Clone the repository
    ```sh
    git clone https://github.com/t-a-g-o/lumina.git
    ```

2. Go into the lumina directory
    ```sh
    cd lumina
    ```

3. Install requirements
    ```sh
    npm install -r
    ```

4. Run the live dev preview
    ```sh
    npm run dev
    ```
To make a favicon show in the browser, add an icon image to `src/app/`. It has to be "ico" format and it has to be named "favicon.ico".  Make the icon 256x256 if possible, this is the most visible and detailed icon in the browser.

## License and Contact
This project is published under the [MIT License](./LICENSE)

If you are interested in working together, or want to get in contact with me please email me at [email protected]
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

shadcn-landing-page

shadcn-landing-page

A free React landing page template built with TypeScript, Tailwind and Shadcn/UI, offering 16 ready-to-use sections such as Navbar, Hero, Pricing, FAQ and Footer, with responsive layout, dark mode and meta tags.

React · Corporate Website

react-saas-template

react-saas-template

A React and Material-UI template for SaaS or admin websites, offering dashboard, chart, blog, payment, and file upload components. It uses Create-React-App, React-Router, Recharts, React-Stripe-js, React-Dropzone, and React-Cropper, with theme colors centralized in src/theme.js.

React · Admin dashboard

React-Landing-Page-Template

React-Landing-Page-Template

A React single-page landing page template for startups and service businesses, with copy and image references centralized in data.json, assets in public/img/, styles in public/css/, and a contact form that requires your own EmailJS service ID, template ID, and Public Key.

React · Corporate Website

landy-react-template

landy-react-template

Landy is an open-source React single-page landing page template written in TypeScript, aimed at developers and startup teams.

React · Corporate Website

react-portfolio-template

react-portfolio-template

A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.

React · Portfolio

personal-website-react

personal-website-react

A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.

React · Portfolio