Personal portfolio website built with Next.js 15, featuring fullpage scrolling, Framer Motion animations, and Tailwind CSS. The site showcases projects from a JSON data source and includes Spotify integration, real-time chat, and structured SEO.
- Fullpage Scrolling — Section-based navigation on the home page with sidebar active indicator
- Smooth Page Transitions — Fade + scale animation between routes via Framer Motion
- Scroll Animations — Staggered entrance animations on skills, experience, and project sections
- Dynamic Project Data — Projects loaded from a JSON file with category filtering and detail pages
- Skeleton & Blur Loading — Project images load with blur placeholder and skeleton overlay
- Spotify Widget — Real-time "now playing" display on the About page
- Chat Widget — Intelliticks integration with deferred loading for performance
- SEO — Per-page metadata, OpenGraph tags, and JSON-LD Person structured data
- Responsive — Scales smoothly across browser zoom levels (100%–150%)
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Scrolling: @alvalens/react-fullpage-snap
- Fonts: Poppins, Jost (self-hosted via next/font)
- Analytics: Vercel Analytics
- Deployment: Vercel
git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git
cd Alvalens-porto-2-nextJs
pnpm installCopy .env.example to .env.local and fill in the values:
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=
NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET=
NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN=
For Spotify API setup, see leerob.io/blog/spotify-api-nextjs.
pnpm devpnpm build
pnpm startapp/
├── layout.jsx # Root layout (Navbar, Chat, Analytics, JSON-LD)
├── globals.css # Global styles and Tailwind
├── (root)/ # Home page with fullpage sections
│ ├── layout.jsx # FullPageProvider + Sidebar
│ └── page.jsx # Hero, About, Projects, Contact sections
├── about/ # About page
│ └── components/ # Skills, Experience, Education, Quote, Spotify
├── projects/ # Projects listing with filtering
│ ├── [slug]/ # Dynamic project detail pages
│ └── archive/ # Full project archive
components/ # Shared UI (Navbar, Sidebar, Footer, Button, etc.)
json/data.json # Project data source
public/image/ # Static images
Introduction with fullpage scroll sections — Hero, About preview, Projects preview, and Contact with social links. Includes a scroll indicator on first load.
Detailed bio, skills with category filtering, work experience timeline, education, and Spotify widget.
Filterable project grid (Web, AI/ML, Other). Each project links to a detail page with full description, tech stack, links, and image gallery.
Email and social links (GitHub, Instagram, LinkedIn, Discord).
Update the Intelliticks script in components/Chat.jsx with your own widget code.
Edit json/data.json to add or modify projects. See CLAUDE.md for the data schema.
Contributions are welcome! If you find any issues or have suggestions, feel free to open an issue or submit a pull request.
This project is licensed under the GPL-3.0 License — see the LICENSE file for details.
Copyright (C) 2025 Alvalen Shafelbilyunazra