A production-ready personal portfolio showcasing expertise in frontend architecture, animations, and full-stack development. Built with Next.js 16, Sanity CMS, and deployed to Cloudflare Workers.
This portfolio features a sophisticated monochromatic design system with smooth scrolling, GSAP animations, and a headless CMS for content management. It supports multiple languages, is fully responsive, and optimized for performance.
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS v4 |
| Animations | GSAP + Lenis (smooth scroll) |
| CMS | Sanity Cloud |
| Hosting | Cloudflare Workers (OpenNext) |
| i18n | next-intl |
| Forms | EmailJS |
- Smooth Scrolling — Lenis-powered scroll experience
- GSAP Animations — Scroll-triggered animations and micro-interactions
- Multi-language — English and Spanish support via next-intl
- Content Management — Sanity Studio for blog, projects, and services
- Contact Forms — Newsletter and contact forms via EmailJS
- Analytics — Google Analytics 4 integration
- PWA Ready — Offline page and installable manifest
- Dark Mode — System preference detection with next-themes
# Clone the repository
git clone https://github.com/500byte/diegonr-next.git
cd diegonr-next
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 to view the site.
Copy the example environment file and configure your values:
cp .env.example .env.local# Sanity CMS (Required)
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your-api-token# Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
# Forms (EmailJS)
NEXT_PUBLIC_EMAILJS_SERVICE_ID=service_xxx
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=template_xxx
NEXT_PUBLIC_EMAILJS_CONTACT_TEMPLATE_ID=template_xxx
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=xxxNote
Get your Sanity credentials from sanity.io/manage. The SANITY_API_TOKEN is only needed for draft previews.
| Command | Description |
|---|---|
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 lint:fix |
Fix lint errors |
npm run type-check |
Run TypeScript check |
npm run preview |
Preview Cloudflare build |
diegonr-next/
├── src/
│ ├── app/ # Next.js App Router
│ │ └── [locale]/ # Internationalized routes
│ │ ├── (website)/ # Main pages (_sections colocalized)
│ │ └── api/ # API routes
│ ├── components/ # Shared components
│ │ ├── ui/ # Atomic UI components
│ │ ├── animations/ # GSAP wrappers
│ │ └── providers/ # Context providers
│ ├── lib/ # Utilities (sanity, lenis, utils)
│ └── types/ # TypeScript types
├── sanity/ # Sanity Studio (standalone)
├── docs/ # Architecture & coding standards
└── public/ # Static assets
The project deploys automatically via GitHub Actions on every push to master.
Required GitHub Secrets:
CLOUDFLARE_API_TOKENCLOUDFLARE_ACCOUNT_IDNEXT_PUBLIC_SANITY_PROJECT_IDNEXT_PUBLIC_SANITY_DATASET
Manual Deployment:
npm run deployImportant
The SANITY_API_TOKEN must be added as a Cloudflare Secret:
wrangler secret put SANITY_API_TOKENDeploy the admin panel:
cd sanity
npx sanity deployFor detailed architecture and coding standards, see the /docs directory:
- Architecture — System design and patterns
- Coding Standards — Code conventions
- Deployment — Cloudflare setup guide
- Sanity CMS — Content schema and usage
- i18n — Internationalization details
MIT — see the LICENSE file for details.