Portfolio-Landing-Page-9-NextJS-Frontend GitHub Details, Stars and Alternatives | OpenRepoFinder
arnobt78 / repository
Portfolio-Landing-Page-9-NextJS-Frontend
A modern, single-page portfolio template built with the Next.js App Router, TypeScript, and Styled Components. Use it to showcase your projects, skills, timeline, accomplishments with a clean, responsive layout and SEO-friendly metadata. Ideal for developers & learners who want a production-ready portfolio with clear structure and reusable componen
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
52
Community adoption25% weight
5
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 the Next.js App Router and TypeScript. Sections use inline styles and shared CSS for a consistent max-width (1280px) layout. Scroll-triggered CSS animations (fade-up, fade-left, scale-in, etc.) reveal content smoothly as you scroll. Ideal for developers who want a production-ready portfolio with clear structure and no flash of unstyled content.
A modern, single-page portfolio template built with Next.js 16, React 19, TypeScript, and Tailwind CSS. It showcases a developer profile with hero, experience timeline, tech stack, featured projects, and a contact form—ideal for learning App Router, client components, SEO metadata, and reusable UI patterns
A modern, single-page developer portfolio website built with React.js, TypeScript, TailwindCSS, and Shadcn UI, featuring a futuristic dark theme and smooth scroll-based navigation. The website is fully responsive, optimized for recruiters and hiring managers, and built for easy deployment on Vercel.
app/layout.tsx – Root layout: <html>, <body>, Space Grotesk font, <Providers>, and import './globals.css'. Metadata and viewport are exported for SEO.
API Endpoints
GET /api/hello
Sample API route for server/deployment checks.
Response:{ "name": "John Doe" }
Example:curl http://localhost:3000/api/hello
File:src/app/api/hello/route.ts
Components & Functionality
How the home page is built
app/page.tsx (server) renders <Home />.
Home (components/Home/Home.tsx, client) renders: Layout → hero section (grid: Hero + BackgroundAnimation), then Projects, Technologies, Timeline, Accomplishments.
Layout (src/layout/Layout.tsx)
Single wrapper: max-width 1280px, padding, centered. Renders Header, main (children), and Footer. All sections share this container for aligned left/right edges.
Hero (src/components/Hero/Hero.tsx)
Title (“Welcome To My Personal Portfolio”), description paragraph, and “Learn More” button. Uses useScrollReveal and class anim-fade-left so the block slides in from the left when it enters the viewport.
Projects (src/components/Projects/Projects.tsx)
Grid of project cards from constants.projects. Each card: image, title, description, tags, Code/Source links. Section uses anim-fade-up; the grid has stagger-children so cards animate in sequence.
Decorative SVG with motion paths. Uses anim-fade-right for scroll-in from the right.
NavDropDown
Dropdown panel (e.g. contact links). Used where a nav item opens a menu; styling is self-contained.
Scroll Animations
Animations are CSS-only (no Framer Motion for visibility). A small hook and global CSS drive them:
src/hooks/useScrollReveal.ts – Uses IntersectionObserver; when an element is in view (default 10–15% visible), it adds the class visible to that element. One-shot (observer disconnects after reveal).
Classes:.anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right, .anim-scale-in, .anim-fade-rotate — each starts with opacity: 0 and, when .visible is added, runs the matching animation (forwards).
Stagger:.stagger-children.visible > * — children run fadeUp with increasing animation-delay (e.g. 0.05s, 0.12s, …).
app/globals.css – @tailwind base/components/utilities; base styles for html/body/links/lists; scroll animation keyframes and classes; .site-header grid and media queries.
Components – Inline style objects for layout and visuals (max-width 1280px, spacing, colors, gradients). This keeps sections visible and aligned even if Tailwind or class names change.
Copy the component folder (e.g. Hero/, Projects/) and, if you use scroll animations, copy hooks/useScrollReveal.ts and the animation keyframes + classes from globals.css.
Install deps: next, react, react-icons; for Tailwind, tailwindcss, postcss, autoprefixer.
Ensure path alias @/* in tsconfig.json if you keep @/ imports.
Use the same data shapes (Project, TimelineItem) or adapt props. Projects data lives in constants/constants.ts; edit there or pass as props after a small refactor.
