https://github.com/knotzerio/portfolio
🚀 Modern interactive portfolio website built with Next.js 15
https://github.com/knotzerio/portfolio
dark-theme javascript nextjs nextjs-portfolio portfolio portfolio-website react react-portfolio
Last synced: about 2 months ago
JSON representation
🚀 Modern interactive portfolio website built with Next.js 15
- Host: GitHub
- URL: https://github.com/knotzerio/portfolio
- Owner: KnotzerIO
- License: mit
- Created: 2025-10-03T20:11:13.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-03-24T00:55:54.000Z (3 months ago)
- Last Synced: 2026-03-25T00:20:13.801Z (3 months ago)
- Topics: dark-theme, javascript, nextjs, nextjs-portfolio, portfolio, portfolio-website, react, react-portfolio
- Language: JavaScript
- Homepage: https://www.knotzer.io
- Size: 3.07 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 My personal Portfolio Website
A stunning, interactive portfolio website built with Next.js 15. Designed to showcase professional skills and experience with modern web technologies.
## ✨ Features
### 🎨 **Interactive Design**
- **Dynamic Background**: Mouse-following gradients with animated blur effects
- **3D Globe Visualization**: Interactive globe with location markers using Cobe
- **Smooth Animations**: Powered by Framer Motion for seamless transitions
- **Responsive Design**: Perfect display across all devices and screen sizes
### 💻 **Interactive Terminal**
- **Live Command Interface**: Fully functional terminal with multiple commands
- **Command History**: Navigate through previous commands with arrow keys
- **Auto-completion**: Smart suggestions and tab completion
- **Expandable UI**: Resizable terminal window for better user experience
- **Custom Commands**:
- `help` - Show available commands
- `about` - Display personal information
- `skills` - List technical skills
- `contact` - Show contact details
- `neofetch` - System information display
- And more!
### 🌟 **Modern UI Elements**
- **Glass Morphism**: Beautiful frosted glass effects throughout
- **Dark Theme**: Sleek dark design with purple/blue accents
## 🛠️ Tech Stack
- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
- **Frontend**: [React 19](https://reactjs.org/) with Hooks
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) for rapid UI development
- **Animations**: [Framer Motion](https://www.framer.com/motion/) for smooth transitions
- **Icons**: [Lucide React](https://lucide.dev/) for beautiful icons
- **Font**: [Inter](https://fonts.google.com/specimen/Inter) for clean typography
## 🚀 Quick Start
### Prerequisites
- Node.js 18+
- npm or yarn package manager
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/KnotzerIO/portfolio.git
cd portfolio
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Run the development server**
```bash
npm run dev
# or
yarn dev
```
4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)
## 🎨 Customization
### **Personal Information**
Update your personal details in the following components:
- `src/components/Hero.js` - Name and title
- `src/components/AboutMe.js` - About text and quotes
- `src/components/InteractiveTerminal.js` - Command responses
### **Styling**
- Modify colors in `tailwind.config.js`
- Adjust animations in component files
- Customize the globe markers in `Globe.js`
### **Terminal Commands**
Add new commands in `InteractiveTerminal.js`:
```javascript
{
name: "your-command",
description: "Command description",
execute: (args) => {
return "Command output";
},
}
```
## 🌐 Deployment
### Vercel
1. Push your code to GitHub
2. Connect your repository to [Vercel](https://vercel.com)
3. Deploy automatically with every push
### Other Platforms
- **GitHub Pages**: Use `npm run export` for static export
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
⭐ **If you found this project helpful, please consider giving it a star!** ⭐