🚀 Stackbyte.dev Website

Modern, performant portfolio website built with Next.js, React, and Framer Motion. Featuring smooth animations, real-time status tracking, and a beautiful gradient-based design.

🎨 100% Vibe Coded 🎨

This entire project was crafted using AI-assisted development (vibe coding)

✨ Features

🎨 Modern UI/UX - Beautiful gradient-based design with smooth animations
🎭 Framer Motion - Advanced 3D animations and transitions
📱 Fully Responsive - Optimized for all devices (mobile, tablet, desktop)
⚡ Performance Optimized - Built with Next.js 16 for optimal speed
🎯 Real-time Status - Live status tracking (Online/Offline/Holidays)
📧 Contact Form - Integrated contact form with Cloudflare Turnstile
🌐 SEO Optimized - Complete SEO setup with sitemap generation
🎨 Custom Scrollbar - Beautiful gradient scrollbars throughout

🛠️ Tech Stack

Core

Next.js 16 - React framework for production
React 19 - UI library
TypeScript - Type safety
Tailwind CSS 4 - Utility-first CSS

Animation & UI

Framer Motion - Production-ready motion library
Lenis - Smooth scroll library
Lucide React - Beautiful icon toolkit

Forms & Validation

React Hook Form - Performant forms
React Turnstile - Cloudflare Turnstile integration

Other

Axios - HTTP client
Nodemailer - Email sending
Next Sitemap - Sitemap generation

📋 Prerequisites

Node.js 18+
npm, yarn, or pnpm
Git

🚀 Getting Started

Installation

Clone the repository

git clone https://github.com/fbrzlarosa/stackbyte-website.git
cd stackbyte-website

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables

Create a .env.local file in the root directory:

# Status Tracker
STATUS_API_SECRET=your_secure_secret_here
TRACKER_API_URL=http://localhost:3000/api/status

# Contact Form (Brevo/SendGrid)
SMTP_HOST=smtp-relay.brevo.com
SMTP_PORT=587
SMTP_USER=your_email@example.com
SMTP_PASS=your_password
SMTP_FROM=your_email@example.com
SMTP_TO=recipient@example.com

# Cloudflare Turnstile
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key

# Social Links
NEXT_PUBLIC_SOCIAL_GITHUB=https://github.com/yourusername
NEXT_PUBLIC_SOCIAL_LINKEDIN=https://linkedin.com/in/yourprofile
NEXT_PUBLIC_SOCIAL_DEVTO=https://dev.to/yourusername

# Privacy Policy (Iubenda)
NEXT_PUBLIC_IUBENDA_POLICY_ID=your_policy_id

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open http://localhost:3000 in your browser.

📊 Status Tracker

The website features a real-time status system that displays your availability (Online/Offline/Holidays) on the homepage.

How It Works

Status Store (src/lib/statusStore.ts)
- In-memory store for status data
- ⚠️ Note: In Vercel Serverless, this resets on cold boot
- For production, consider using Vercel KV, Redis, or a database
API Endpoint (src/app/api/status/route.ts)
- GET /api/status - Retrieves current status
- POST /api/status - Updates status (requires secret)
Tracker Script (scripts/tracker.js)
- Monitors desktop idle time
- Automatically updates status based on activity
- Runs every 30 seconds

Running the Status Tracker

Manual Execution

npm run tracker
# or
node scripts/tracker.js

Automatic Execution (Windows)

Use the provided PowerShell scripts:

# Setup autostart
.\scripts\setup-windows-autostart.ps1

# Or run hidden
.\scripts\run-tracker-hidden.ps1

For more details, see scripts/README-WINDOWS.md

Automatic Execution (Linux/Mac)

Use PM2 or systemd:

# With PM2
pm2 start scripts/tracker.js --name status-tracker
pm2 save
pm2 startup

Status Values

online - User is active (idle time < 60 seconds)
offline - User is away (idle time ≥ 60 seconds)
holidays - Manual status for holidays/vacation

🏗️ Project Structure

stackbyte-website/
├── public/                 # Static assets
│   ├── favicon.ico
│   ├── og-image.jpg
│   └── sitemap.xml
├── scripts/               # Utility scripts
│   ├── tracker.js         # Status tracker script
│   └── setup-windows-autostart.ps1
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── api/          # API routes
│   │   │   ├── contact/  # Contact form endpoint
│   │   │   └── status/   # Status API
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/       # React components
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── SkillsShowcase.tsx
│   │   ├── Contact.tsx
│   │   ├── Footer.tsx
│   │   └── ...
│   ├── lib/              # Utilities
│   │   ├── statusStore.ts
│   │   └── utils.ts
│   └── types/            # TypeScript types
└── package.json

🎨 Key Components

Hero - Animated hero section with 3D effects
About - Story section with timeline
SkillsShowcase - Interactive skill cards with parallax
Process - How I work section
Contact - Contact form with validation
ReadyToStart - Call-to-action section
Footer - Footer with open source modal
StatusBadge - Real-time status indicator

🚀 Deployment

Environment Variables for Production

Make sure to set all environment variables in your deployment platform:

STATUS_API_SECRET - Secure secret for status API
SMTP_* - Email configuration
NEXT_PUBLIC_TURNSTILE_SITE_KEY - Cloudflare Turnstile
TURNSTILE_SECRET_KEY - Cloudflare Turnstile secret
NEXT_PUBLIC_SOCIAL_* - Social media links
NEXT_PUBLIC_IUBENDA_POLICY_ID - Privacy policy ID

📝 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run start - Start production server
npm run lint - Run ESLint
npm run tracker - Start status tracker

🔧 Configuration

Email Setup (Brevo)

See BREVO-SMTP-SETUP.md for detailed email configuration instructions.

Sitemap

The sitemap is automatically generated on build using next-sitemap. Configuration is in next-sitemap.config.js.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
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

📄 License

This project is open source and available under the MIT License.

🔗 Links

Live Site: stackbyte.dev
Repository: GitHub

🙏 Acknowledgments

Built with amazing open source technologies
Icons by Lucide
Animations powered by Framer Motion

🎯 Development Approach

✨ Vibe Coding ✨

This project was entirely developed using AI-assisted coding (vibe coding). Every component, animation, and feature was crafted through iterative AI collaboration, demonstrating the power of modern AI development tools.

From concept to deployment, 100% vibe coded! 🚀

Made with ❤️ by Fabrizio La Rosa

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
public		public
scripts		scripts
src		src
.browserslistrc		.browserslistrc
.env.example		.env.example
.gitignore		.gitignore
BREVO-SMTP-SETUP.md		BREVO-SMTP-SETUP.md
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next-sitemap.config.js		next-sitemap.config.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

fbrzlarosa/stackbyte-website

Folders and files

Latest commit

History

Repository files navigation