A modern, responsive portfolio website built with Next.js 14, TypeScript, and Tailwind CSS. This project showcases a clean design with reusable UI components and optimized performance.
- Modern Stack: Built with Next.js 14, TypeScript, and Tailwind CSS
- Responsive Design: Mobile-first approach with responsive layouts
- Custom UI Components: Reusable components including buttons, cards, inputs, and textareas
- Optimized Performance: Leverages Next.js optimization features
- Type Safety: Full TypeScript support for better development experience
- Styling: Utility-first CSS with Tailwind and custom global styles
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── main.css # Main stylesheet
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Home page
│ └── favicon.ico # App favicon
├── components/ # Reusable UI components
│ ├── button.tsx # Button component
│ ├── card.tsx # Card component
│ ├── input.tsx # Input component
│ └── textarea.tsx # Textarea component
├── lib/ # Utility functions
│ └── utils.ts # Helper utilities
├── public/ # Static assets
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ └── vercel.svg
└── screenshots/ # Project screenshots
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Geist Font - Modern font family optimized for interfaces
Make sure you have Node.js installed on your machine (version 18 or higher recommended).
- Clone the repository:
git clone https://github.com/cyrixninja/cyberpunk-portfolio.git
cd cyberpunk-portfolio- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 with your browser to see the result.
- Start editing by modifying
app/page.tsx- the page auto-updates as you edit - Add new components in the
components/directory - Customize styles in
app/globals.cssandapp/main.css - Utility functions go in
lib/utils.ts
This project includes several custom UI components:
- Button - Customizable button component
- Card - Flexible card container
- Input - Form input field
- Textarea - Multi-line text input
The project uses a combination of:
- Tailwind CSS for utility-first styling
- Global CSS in
app/globals.cssfor base styles - Component-specific styles in
app/main.css
The portfolio is built with a mobile-first approach and includes responsive breakpoints for:
- Mobile devices (< 768px)
- Tablets (768px - 1024px)
- Desktops (> 1024px)
The easiest way to deploy this Next.js app is using the Vercel Platform:
- Push your code to a Git repository
- Import your project on Vercel
- Vercel will automatically deploy your app
- Netlify: Connect your Git repository and deploy
- Railway: Simple deployment with Git integration
- Digital Ocean: Use App Platform for containerized deployment
For more deployment options, check out the Next.js deployment documentation.
To learn more about the technologies used in this project:
- Next.js Documentation - Learn about Next.js features and API
- TypeScript Documentation - TypeScript handbook
- Tailwind CSS Documentation - Utility-first CSS framework
- Learn Next.js - Interactive Next.js tutorial
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Harsh Kumar - [email protected]
⭐ Star this repository if you found it helpful!