https://github.com/andrejkoller/businesscard-andrejkoller-next
🪪 Interactive digital business card for Andrej Koller - Freelance UI/UX & Frontend Developer.
https://github.com/andrejkoller/businesscard-andrejkoller-next
css gsap html javascript nextjs react
Last synced: 19 days ago
JSON representation
🪪 Interactive digital business card for Andrej Koller - Freelance UI/UX & Frontend Developer.
- Host: GitHub
- URL: https://github.com/andrejkoller/businesscard-andrejkoller-next
- Owner: andrejkoller
- License: mit
- Created: 2025-05-16T07:01:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-29T16:59:50.000Z (21 days ago)
- Last Synced: 2026-05-29T17:12:59.353Z (21 days ago)
- Topics: css, gsap, html, javascript, nextjs, react
- Language: JavaScript
- Homepage: https://businesscard-andrejkoller-next.vercel.app
- Size: 888 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# businesscard-andrejkoller-next
Interactive digital business card for **Andrej Koller** — Freelance UI/UX & Frontend Developer. Built with Next.js, featuring scramble text animations, dark/light theme switching, and a minimal navigation-first layout.
## Features
- **Scramble Text Effects** - GSAP ScrambleTextPlugin animations on initial load and on hover
- **Theme Switching** - Dark/Light mode with context-based state management
- **Loading Screen** - Custom animated loading screen with percentage counter
- **Smooth Scrolling** - Powered by Lenis (`@studio-freight/lenis`)
- **Responsive Design** - Fully responsive layout across all devices
- **CSS Modules** - Scoped, kebab-case styles per component
- **Turbopack** - Fast development builds via Next.js Turbopack
## Tech Stack
- **Framework**: [Next.js 16](https://nextjs.org) (App Router)
- **Library**: React 19
- **Animations**: GSAP 3.15 + ScrambleTextPlugin
- **Smooth Scroll**: Lenis (`@studio-freight/lenis`)
- **Styling**: CSS Modules
## Prerequisites
- Node.js 18.x or higher
- npm, yarn, pnpm, or bun
## Installation
1. Clone the repository
```bash
git clone https://github.com/andrejkoller/businesscard-andrejkoller-next.git
cd businesscard-andrejkoller-next
```
2. Install dependencies
```bash
npm install
```
3. Run the development server
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Project Structure
```
businesscard-andrejkoller-next/
├── app/
│ ├── about/
│ │ ├── page.jsx # About / Info page
│ │ └── page.module.css
│ ├── contact/
│ │ ├── page.jsx # Contact page
│ │ └── page.module.css
│ ├── styles/
│ │ └── globals.css # Global styles & CSS variables
│ ├── layout-client.jsx # Client-side layout wrapper
│ ├── layout.jsx # Root layout
│ ├── page.jsx # Home / Business card navigation
│ └── page.module.css
├── components/
│ ├── loading-screen/
│ │ ├── loading-context.js # Loading state context
│ │ ├── loading-screen.jsx # Animated loading screen
│ │ └── loading-screen.module.css
│ ├── scramble-text-initial/
│ │ ├── scramble-text-initial.jsx # Scramble animation on page load
│ │ └── scramble-text-initial.module.css
│ ├── scramble-text-on-hover/
│ │ ├── scramble-text-on-hover.jsx # Scramble animation on hover
│ │ └── scramble-text-on-hover.module.css
│ └── theme/
│ ├── theme-context.js # Theme context (dark/light)
│ ├── theme-provider.jsx # Theme context provider
│ ├── theme-switcher.jsx # Theme toggle button
│ ├── theme-switcher.module.css
│ └── use-theme.js # useTheme hook
├── public/
│ └── images/
├── eslint.config.mjs
├── jsconfig.json
├── LICENSE
├── next.config.mjs
├── package.json
├── README.md
└── SECURITY.md
```
## Screenshots
## License
This project is licensed under the [MIT License](LICENSE).