Portfolio-Landing-Page-1-NextJS-Frontend GitHub Details, Stars and Alternatives | OpenRepoFinder
arnobt78 / repository
Portfolio-Landing-Page-1-NextJS-Frontend
A modern, single-page portfolio template built with Next.js 14, React 18, and TypeScript. It showcases a full landing experience with a hero, bento grid, projects, testimonials, experience, approach, contact—with smooth animations, a 3D globe, & reusable UI components. Ideal for learning Next.js App Router, Framer Motion, Three.js/React Three Fiber
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
100
Community adoption25% weight
10
Maintenance state20% weight
100
License clarity10% weight
0
Project information10% weight
100
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A modern, single-page portfolio template built with Next.js 14, React 18, and TypeScript. It showcases a full landing experience with a hero, bento grid, projects, testimonials, experience, approach, and contact—with smooth animations, a 3D globe, and reusable UI components. Ideal for learning Next.js App Router, Framer Motion, Three.js/React Three Fiber, and Tailwind CSS.
This repository is a frontend-only portfolio template. It has no custom backend or API—all content is driven by static data in data/index.ts. The app is a single scrollable page with section IDs for in-page navigation (#about, #projects, #testimonials, #contact). It uses the Next.js App Router (app/), client components where interactivity is needed, and server-rendered layout and metadata for SEO. The UI is built from modular components (Hero, Bento Grid, Projects, Testimonials, Experience, Approach, Footer) that you can reuse or remove in your own projects.
Features & Functionalities
Feature
Description
Hero
Spotlight backgrounds, grid overlay, animated headline (word-by-word), tagline, and CTA button linking to #about.
Floating Nav
Fixed top navigation that hides on scroll-down and reappears on scroll-up or near top; links to #about, #projects, #testimonials, #contact.
Bento Grid (About)
Responsive grid of cards: images, 3D globe (Three.js), tech stack labels, and a “Copy email” cell with Lottie confetti.
Recent Projects
Project cards with 3D tilt on hover (Pin component), cover image, title, description, tech icons, and “Check Live Site” link.
Testimonials
Horizontally scrolling infinite carousel of client quotes plus a row of company logos.
Experience
Grid of work experience cards with animated gradient borders (MovingBorders).
Approach
Three phase cards; on hover, a canvas dot-matrix effect (WebGL shader) reveals and shows phase title + description.
Footer
CTA heading, email button, copyright, and social icons.
Theme
Dark/light/system via next-themes (ThemeProvider in app/provider.tsx).
SEO
Metadata (title, description, Open Graph, Twitter, keywords, favicon) in app/layout.tsx.
Auth token: Settings → Account → API → Auth Tokens → Create. Use for SENTRY_AUTH_TOKEN.
Org & project: From the URL https://sentry.io/organizations/[org]/projects/[project]/ copy org and project into SENTRY_ORG and SENTRY_PROJECT.
DSN: Project → Settings → Client Keys (DSN). Copy into NEXT_PUBLIC_SENTRY_DSN if you want client-side reporting.
Example .env.local (minimal – app works without these):
# Optional: Sentry (only if you integrate Sentry in the app)
# SENTRY_AUTH_TOKEN=your-token
# SENTRY_ORG=your-org
# SENTRY_PROJECT=your-project
# NEXT_PUBLIC_SENTRY_DSN=https://xxx@sentry.io/xxx
Available Scripts
Script
Command
Purpose
dev
npm run dev
Start Next.js dev server (default port 3000).
build
npm run build
Production build.
start
npm run start
Run production server (after build).
lint
npm run lint
Run ESLint.
deploy
npm run deploy
Deploy to Vercel production (vercel --prod).
Routes & Pages
This app has one route: the root / (home). There are no /api/* or other route segments.
