https://github.com/gazdagb/blzs-website
A portfolio website project for my friend Balázs – an awesome Graphic Designer 🎨 and Digital Artist. Custom-crafted page transitions and smooth animations make the site feel as dynamic and creative as his work. ✨
https://github.com/gazdagb/blzs-website
emailjs framer-motion graphic-design nextjs portfolio-website responsive-design tailwindcss web-animation
Last synced: 6 months ago
JSON representation
A portfolio website project for my friend Balázs – an awesome Graphic Designer 🎨 and Digital Artist. Custom-crafted page transitions and smooth animations make the site feel as dynamic and creative as his work. ✨
- Host: GitHub
- URL: https://github.com/gazdagb/blzs-website
- Owner: GazdagB
- Created: 2025-03-23T21:10:48.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T17:53:52.000Z (6 months ago)
- Last Synced: 2025-04-06T18:35:17.108Z (6 months ago)
- Topics: emailjs, framer-motion, graphic-design, nextjs, portfolio-website, responsive-design, tailwindcss, web-animation
- Language: TypeScript
- Homepage: https://blzs-website.vercel.app
- Size: 16 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 BLZS Website
This project is a portfolio website for my friend **Balázs**, an awesome Graphic Designer and Digital Artist.
Built with **Next.js**, **Tailwind CSS**, and **Framer Motion**, the site features **custom-crafted page transitions** and smooth animations to give visitors a premium browsing experience. The language of the site is Hungarian.
## ✨ Features
- 🖼️ Responsive unique animated gallery of design works
- ⚡ Smooth animations using Framer Motion
- 🎬 Smooth Page Transitions
- 📱 Fully responsive across all devices
## 🌐 Live Demo
Check it out here 👉 [blzs-website.vercel.app](https://blzs-website.vercel.app/)
## 🎥 Page Transitions in Action
## Preloader Logo Animation
This animation only loads once per session. It saves a variable to the sessionStorage and only triggers once. Close the tab and reopen it to trigger it.
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## 📦 Installation
```bash
git clone https://github.com/yourusername/blzs-website.git
cd balazs-portfolio
npm install
npm run dev
```
## 🛠️ Tech Stack & Libraries
**Frameworks & Tools:**
- [Next.js](https://nextjs.org/) – React framework for SSR and routing
- [Tailwind CSS](https://tailwindcss.com/) – Utility-first styling
- [Framer Motion](https://www.framer.com/motion/) – Animations and transitions
- [next-view-transitions](https://github.com/argyleink/next-view-transitions) – Native-like page transitions for Next.js
**UI & UX Enhancements:**
- [react-icons](https://react-icons.github.io/react-icons/) – Icon packs
- [hamburger-react](https://github.com/luukdv/hamburger-react) – Animated hamburger menu
- [sweetalert2](https://sweetalert2.github.io/) – Beautiful alert modals
**Forms & Interactions:**
- [react-hook-form](https://react-hook-form.com/) – Lightweight form validation
- [@emailjs/browser](https://www.emailjs.com/docs/sdk/send-form/) – Email sending from the browser
**Dev Experience:**
- [TypeScript](https://www.typescriptlang.org/) – Type-safe JavaScript
- [ESLint](https://eslint.org/) – Linting
- [Tailwind CSS PostCSS Plugin](https://tailwindcss.com/docs/using-with-preprocessors) – Build processing
## 🙌 Credits
- 🎨 Design: [Kovács Balázs](https://yourfriendlink.com)
- 🧑💻 Development: [Gazdag Balázs](https://github.com/yourusername)