Built with Next.js App Router and TypeScript, styled with Tailwind CSS
Next.jsReactPortfolioCorporate Website
Shibaccus-Web — Next.js Portfolio Template
By VoxDroid
A tech website template built with Next.js and TypeScript, including pages for home, services, portfolio, blog, pricing, about, contact, and FAQ, with a rose gold color scheme and glassmorphism style.
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-03View source
What stands out
A quick read of the recorded project description.
Includes complete pages for home, services, portfolio, blog, pricing, about, contact, and FAQ
Rose gold theme with glassmorphism effects, supports dark/light mode switching and saves preferences
Uses Framer Motion for page transitions and scroll-into-view animations
Blog supports article search, and the contact form includes input validation
MIT licensed, with a public repository and online demo available
Template Details
Shibaccus-Web is a tech website template built with Next.js and TypeScript, suitable for both portfolio and corporate website scenarios. The repository uses the MIT license, and the public demo site is deployed on Vercel.
The template provides a fairly complete set of pages: home, services, portfolio, blog, pricing, about, contact, and FAQ, and includes searchable blog posts and a contact form with validation. The interface uses a rose gold theme with glassmorphism effects, supports dark/light mode switching (with preferences saved via local storage), and uses Framer Motion for transition animations. Styling is based on Tailwind CSS, components reference Shadcn UI, icons use Lucide React, and form handling uses React Hook Form.
Content customization is concentrated in the page files under the app directory and the theme variables in tailwind.config.ts and app/globals.css; animation parameters can be adjusted in the animation components under components. The README states accessibility features such as ARIA compliance and keyboard navigability, as well as resource optimization based on Next.js features, but these are the author's own claims and have not been independently verified in this material.
Usage limitations: the code itself is MIT licensed, but third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses; external services such as domains and hosting may incur costs. The repository materials do not state the template's production readiness or performance.
Next.jsPortfolioCorporate website
Is it right for your project?
Use Cases
- Building a corporate website for a tech company or technical team
- Creating a personal or team portfolio to showcase project cases
- Publishing a technical blog with search functionality and article lists
- A business-oriented site displaying service offerings and pricing plans
Suitable For
- Developers familiar with Next.js and TypeScript who want a quick start
- Teams that need a ready-made multi-page structure and then replace copy and visuals
- Frontend developers who prefer Tailwind CSS and component-based development
- Developers who want to reference glassmorphism and dark/light theme implementations
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 18.0 or higher and uses npm to install dependencies
- 2
After cloning the repository, run npm install, then start the local development server with npm run dev
- 3
Create .env.local in the root directory and set NEXT_PUBLIC_SITE_URL
- 4
Common scripts include npm run build, npm run start, npm run lint, and npm run format
- 5
To change theme colors, adjust variables in both tailwind.config.ts and app/globals.css
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code 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
- The donation support (Ko-fi) mentioned in the README is voluntary, does not affect free use under the MIT license, and does not constitute a usage restriction.
- You need to create .env.local in the root directory and set the NEXT_PUBLIC_SITE_URL environment variable; you must configure the site address yourself for local development and deployment.
- The runtime requires Node.js 18.0 or higher and uses npm to install dependencies.
- The README uses Vercel as an example deployment platform; deploying to external hosting services may incur costs, which you must check yourself.
- 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 additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
If you find this project useful, consider supporting its development:
Original README
NEXT_PUBLIC_SITE_URL=http://localhost:3000
Original README
- **Node.js**: Version 18.0 or higher
Original README
https://github.com/VoxDroid/Shibaccus-Web/blob/main/LICENSEhttps://github.com/VoxDroid/Shibaccus-Web/blob/main/README.md[Vercel](https://vercel.com/) - Deployment platform
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. 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 · 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
- 2026-02-20
- Screenshot last checked
- 2026-10-03
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-04
Inspect the recorded source material
SHA-256: cedda31c180f2717b75b5d954ec03a77d188be43e2fc7417b2fd91c0869b3fd9
2026-10-03T08:44:23.084Z
Source file / repository# Shibaccus Web
An innovative, modern website delivering tech solutions. Built with **Next.js** and **TypeScript**.
### **Live Demo**: Checkout the deployed version at [shibaccus-web.vercel.app](https://shibaccus.vercel.app)
---
## Badges
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://tailwindcss.com/)
[](https://www.framer.com/motion/)
[](https://vercel.com/)
[](https://github.com/VoxDroid/Shibaccus-Web/blob/main/LICENSE)
[](https://github.com/VoxDroid/Shibaccus-Web)
[](https://github.com/VoxDroid/Shibaccus-Web/issues)
[](https://shibaccus.vercel.app)
---
## Table of Contents
- [Features](#features)
- [Screenshots](#screenshots)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Customization](#customization)
- [Project Structure](#project-structure)
- [Built With](#built-with)
- [Dependencies](#dependencies)
- [Key Features Explained](#key-features-explained)
- [License](#license)
- [Acknowledgments](#acknowledgments)
- [Contributing](#contributing)
- [Contact](#contact)
---
## Features
- **Modern UI/UX**: Rose gold-themed design with glass morphism effects.
- **Responsive Layout**: Optimized for mobile, tablet, and desktop devices.
- **Interactive Animations**: Smooth transitions powered by Framer Motion.
- **Dark/Light Mode**: Seamless theme switching with local storage support.
- **Comprehensive Pages**: Includes Home, Services, Portfolio, Blog, Pricing, About, Contact, and FAQ.
- **Accessibility**: ARIA-compliant and keyboard-navigable.
- **Performance Optimized**: Fast load times with optimized assets and Next.js features.
- **Blog Functionality**: Articles with search capabilities.
- **Contact Form**: Validated form for user inquiries.
---
## Screenshots
| Feature | Light Mode | Dark Mode |
|--------------------|-------------------------------------|------------------------------------|
| Home Page |||
| Services Section |||
| Portfolio Section |||
---
## Getting Started
Set up Shibaccus Web locally with these steps.
### Prerequisites
- **Node.js**: Version 18.0 or higher
- **Package Manager**: `npm`
### Installation
1. **Clone the Repository**
```bash
git clone https://github.com/VoxDroid/Shibaccus-Web.git
```
2. **Navigate to the Project Directory**
```bash
cd Shibaccus-Web
```
3. **Install Dependencies**
```bash
npm install
```
4. **Start the Development Server**
```bash
npm run dev
```
5. Open **[http://localhost:3000](http://localhost:3000)** in your browser to view the site.
---
## Usage
### Environment Variables
Create a `.env.local` file in the root directory:
```plaintext
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```
### Commands
- **Development**: `npm run dev`
- **Build**: `npm run build`
- **Production**: `npm run start`
- **Lint**: `npm run lint`
- **Format**: `npm run format`
### Key Sections
- **Home**: Edit `app/page.tsx` for hero, services, and testimonials.
- **Services**: Update `app/services/` for offerings and details.
- **Portfolio**: Modify `app/portfolio/` to showcase projects.
- **Blog**: Adjust `app/blog/` for articles and search.
---
## Customization
### Changing Colors
Modify the theme in `tailwind.config.ts`:
```typescript
theme: {
extend: {
colors: {
primary: "#e15e66", // Rose gold
},
},
};
```
Update CSS variables in `app/globals.css`:
```css
:root {
--primary: #e15e66; /* Light mode */
}
.dark {
--primary: #e15e66; /* Dark mode */
}
```
### Updating Content
Edit key components:
- Home: `app/page.tsx`
- Services: `app/services/`
- Portfolio: `app/portfolio/`
- Blog: `app/blog/`
- Contact: `app/contact/`
### Adding Animations
Tweak Framer Motion settings in components like `components/animate-in-view.tsx`.
---
## Project Structure
```plaintext
shibaccus-web/
├── app/ # Next.js app directory
│ ├── about/ # About page
│ ├── blog/ # Blog pages
│ ├── contact/ # Contact page
│ ├── faq/ # FAQ page
│ ├── portfolio/ # Portfolio pages
│ ├── pricing/ # Pricing page
│ ├── services/ # Services pages
│ ├── api/ # API routes
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # Reusable components
│ ├── ui/ # Shadcn UI components
│ ├── animate-in-view.tsx # Animation component
│ ├── hero.tsx # Hero section
├── hooks/ # Custom hooks
├── lib/ # Utility functions
├── public/ # Static assets
│ ├── logo/ # Logo images
├── styles/ # Additional styles
├── tailwind.config.ts # Tailwind configuration
├── next.config.js # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
```
---
## Built With
- [Next.js](https://nextjs.org/) - React framework with App Router
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first styling
- [Framer Motion](https://www.framer.com/motion/) - Animations
- [Shadcn UI](https://ui.shadcn.com/) - Customizable components
- [Vercel](https://vercel.com/) - Deployment platform
- [React Hook Form](https://react-hook-form.com/) - Form handling
- [Lucide React](https://lucide.dev/) - Icon library
---
## Dependencies
Key packages (from `package.json`):
- `next`
- `react`, `react-dom`
- `typescript`
- `tailwindcss`
- `framer-motion`
- `lucide-react`
- `react-hook-form`
Install with:
```bash
npm install
```
---
## Key Features Explained
### Glass Morphism Design
A modern UI effect applied via Tailwind CSS and custom styles in `app/globals.css`.
### Theme Switching
Toggle between dark/light modes with `ThemeToggle` component, persisting via local storage.
### Responsive Design
Mobile-first approach with Tailwind breakpoints for all screen sizes.
### Performance Optimization
Leverages Next.js server components, image optimization, and lazy loading.
---
## License
Licensed under the [MIT License](LICENSE). See the license file for details.
---
## Acknowledgments
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [Shadcn UI](https://ui.shadcn.com/)
- [Lucide Icons](https://lucide.dev/)
- [Vercel](https://vercel.com/)
---
## Contributing
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on how to contribute, and review our [Code of Conduct](CODE_OF_CONDUCT.md) to ensure a positive and inclusive community.
To contribute:
1. Fork the repository: [https://github.com/VoxDroid/Shibaccus-Web](https://github.com/VoxDroid/Shibaccus-Web)
2. Create a feature branch (`git checkout -b feature-name`)
3. Commit your changes (`git commit -m "Add feature"`)
4. Push to the branch (`git push origin feature-name`)
5. Open a pull request
---
## Contact
Questions or feedback? Reach out:
- **GitHub**: [@VoxDroid](https://github.com/VoxDroid)
## Support
For support, please refer to our [Support Guide](SUPPORT.md). If you encounter security issues, please review our [Security Policy](SECURITY.md).
If you find this project useful, consider supporting its development:
- **Ko-fi**: [Buy me a coffee](https://ko-fi.com/izeno)
[](https://ko-fi.com/izeno)
- **Star the Repository**: Give it a star on [GitHub](https://github.com/voxdroid/shibaccus-web)
- **Report Issues**: Submit bugs or suggestions on the [Issues page](https://github.com/voxdroid/shibaccus-web/issues)
---
**Developed by VoxDroid**
[GitHub](https://github.com/VoxDroid) | [Ko-fi](https://ko-fi.com/izeno)Explore similar templates
Compare previews and descriptions within the same stack and category.
SaaS-Boilerplate
SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.
Next.js · SaaS
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
Next-JS-Landing-Page-Starter-Template
A free Next.js landing page starter template written in Tailwind CSS and TypeScript, featuring built-in navbar, hero, features, CTA banner, and footer sections.
Next.js · Corporate Website
next-saas-starter
A free Next.js SaaS marketing landing page template from Blazity, using static generation and styled-components with no extra UI library.
Next.js · SaaS
startup-nextjs
Startup is a free, MIT-licensed Next.js template from NextJSTemplates for SaaS startups and corporate landing pages.
Next.js · SaaS
shadcn-landing-page
A Next.js landing page template built with Shadcn, TypeScript, and Tailwind, converted from a Shadcn-Vue version. It includes sections such as Navbar, mobile Sidebar, Hero, Pricing, FAQ, and Footer, and highlights responsive design, navigation, and dark mode.
Next.js · Corporate Website