Ultimate Next.js 14 Portfolio Website (Zero To Hero) 2024

Discover how Next.js differs from React.js by comparing a React.js library for building user interfaces with Next.js as a full-stack framework that handles routing and http calls.

Install the latest stable Node.js release as a prerequisite for Next.js. Verify the installation with node -v and prepare for the next lecture by installing VSCode.

Install Visual Studio Code, the preferred code editor, and follow along as you download from code.visualstudio.com for Mac, Windows, or Ubuntu; next we will install essential extensions.

Install essential VS Code extensions for a Next.js portfolio: Es7 React Redux snippet, JavaScript and TypeScript nightly, and Tailwind IntelliSense to quickly generate components and preview Tailwind utilities.

Set up your first Next.js application in a dedicated folder, selecting TypeScript, ESLint, Tailwind CSS, SRC, and import alias, then run npm run dev to view it at localhost:3000.

Explore the Next.js 14 project boilerplate by inspecting package.json, scripts, dependencies, config files, and the public and src folders, understanding how layouts and global styles render as children.

Clean up the boilerplate by wiping out the default code, preserving the tailwind configuration, and starting from scratch to prepare a Next.js 14 portfolio, as the next lecture covers routing.

Learn Next.js 14 app router and file system routing, where app directory folders become url roots like /contact and /profile, and pages are created with page.tsx or page.js.

Learn how to implement nested routes in Next.js 14 by creating a users folder with first-user and second-user pages, demonstrating the /users/first-user and /users/second-user paths using page.tsx and simple styling.

Master dynamic routing in a Next.js portfolio by using a square-bracket dynamic route to read an id from the URL and render the corresponding data.

Learn to implement nested dynamic routes in next.js by building a post detail page with a comments subroute, using postId and commentId to fetch and display a post's comments.

Shows how Next.js 14 renders a default 404 not found page for undefined routes and guides creating a custom not found page via app/not-found.tsx with styled h1 messages.

Master file co-location in next.js by organizing pages in a dashboard, creating routable page.tsx files, and centralizing UI in src/components.

Learn how private folders in Next.js 14 keep files out of routing by prefixing a folder name with an underscore, making the folder and its subfolders non routable.

Discover how root groups in Next.js 14 organize routes without changing the URL path, by wrapping folders in parentheses and grouping auth files like register, login, and forgot password.

Create a shared user interface across pages by implementing a layout that renders a header and footer as persistent components, with a root layout exporting a component that passes children.

Explore creating a per-page layout with a users route group, reuse a root layout for the first two users, and abstract layout from the url for a unique third user.

Explore metadata routing in Next.js 14, using the metadata API to improve SEO with static metadata objects or dynamic generate metadata functions, applied to pages and posts.

Learn to implement title metadata in Next.js 14 using string and object title fields, with absolute, default, and template properties to create dynamic, route-specific titles.

Explore links and navigations in Next.js 14 by using next/link to route between home and blog, implement dynamic routes like /blog/[id], and observe how replace behavior affects back navigation.

Learn to conditionally style navigation links in a Next.js 14 portfolio site by using usePathname to highlight the active route and map over a nav links array.

Demonstrates how to handle errors in a Next.js 14 app by creating a custom error boundary, displaying user-friendly messages, and preventing the app from breaking.

Explore how templates differ from layouts in Next.js 14 by creating a new instance for each child on navigation and observing state destruction.

Build a loading UI using a loading.tsx component to show a full-screen, yellow loading screen while a blog post fetches, then swap in content automatically when rendering completes.

Install the latest stable Node.js, set up VS Code, install essential extensions (React Native snippets, React Redux snippets, and Prettier), and choose the Ayu-dag theme to prepare for Next.js installation.

Install next.js in a portfolio folder after restarting VS Code, run npx create-next-app with eslint, tailwind, source, app router, and alias, then run npm run dev on localhost:3000.

Create a Next.js and Reactjs portfolio using a component-based architecture with dynamic routing for a portfolio details page and two pages, featuring header, home, about me, testimonials, and footer components.

Align fonts, images, and styles by importing assets from portfolio resources, updating global CSS, and integrating google fonts (switching to poppins) in a Next.js 14 portfolio setup.

Design the home component and render it in the parent page using a React fragment and a div id 'home' with a 62-degree rotated linear-gradient background and full height.

Demonstrate implementing a 65/35 left–right home layout, ensuring full width, removing the slant, applying white to the left 65% and right 35% portions, and previewing in the browser.

Designs the home item of a Next.js 14 portfolio, importing the hint font, setting up Tailwind styles, responsive grids, hover buttons, and a downloadable resume link.

Design a skew box carousel by installing and configuring slick with react-slick, importing slider styles, setting responsive breakpoints, and rendering skill images.

Learn to implement a header component with client-side rendering, track the page y offset using useEffect and useState, and apply a dynamic class as users scroll.

Implement a fixed header at the top that toggles a white background and blue shadow when the page Y offset is greater than zero, using a fragment and conditional styling.

Implement and style header navigation links for a next.js portfolio site, including responsive visibility, a flex menu for home, portfolio, about me, and hire me, with active highlighting.

Designs a header component that toggles a diagonal draw drawer with is open and set is open, handling open and passing probes to draw component, aligning home link with navigation.

Fix the home link visibility by applying width 100% (w-full), highlight the home on click, and render the home component multiple times to test scroll and responsive header styling.

Implement open and close navigation in a Next.js 14 portfolio site using use router and use path name to toggle a top drawer with icons and CSS transitions.

Build a fixed header with a full-width, animated navigation drawer. Use pathname-based conditions to highlight active links—home, portfolio, and about—and close the menu on selection.

Fix the navigation drawer height by setting the header to display flex in a column and using h-screen to map to 100vh, ensuring proper alignment.

Create a responsive navigation drawer section featuring social media icons for twitter, git, dribbble, linkedin, and instagram. Apply flex layouts and hover effects for mobile and desktop.

Designs the portfolio screen layout with a two-tone split background, full-height view, and overflow handling, preparing for slider cards in the next lesson.

Render a dynamic portfolio slider in Next.js 14 by importing a data array, mapping items to a slider card, and preparing for a portfolio details page with dynamic routing.

Implement a responsive portfolio card slider in a Next.js project with React Slick, configuring center mode, padding, dots, and breakpoints, and resolve name conflicts and spacing for mobile view.

Implement a dynamic route in Next.js 14 to render a portfolio detail page by passing each post id with client-side navigation using useRouter and router.push to /portfolio-detail/[id].

Master dynamic routing in Next.js 14 by passing each item's id to a new page using params, then render the portfolio detail design with the id on the client side.

Design a portfolio detail page with a 12-column grid layout, gradient backgrounds, and dynamic image galleries, showing project name, descriptions, and skill tags using data-driven content.

Fix the spacing by adjusting the parent div margins from zero to two and verify across devices, with a blue background highlight, and prep for the next and preview button.

Implement next and previous navigation in a Next.js 14 portfolio site, using state and router to cycle through projects with dynamic portfolio detail routes.

Design the about me component for a Next.js portfolio using Tailwind CSS, with a #e0f3fd background and a three-column layout on large devices.

Set up client-side state and functions for an about page, importing about data, managing flipped, faded, and selected index states, and implementing next, previous, and click-to-fade card interactions.

Build a responsive grid of interactive buttons by mapping data to cards with images and titles, with hover reveals counts and click highlighting for feedback.

Display and switch between front-end and back-end skill data by clicking titles, revealing related tools such as Node.js and MongoDB. Map data from data.js into responsive skill cards.

Create a new top-right card with absolute positioning and a flip state. Display the map data count inside a stylized inner card and prepare next/previous bulletin controls for mobile.

Implement previous and next navigation within the About Me card of the button flip lecture using absolute-positioned, mobile-friendly controls with SVG icons and Tailwind styling.

Implement a flip animation for the card using perspective and 3d transforms, rotating the inner card on the y axis, and import about me.css to style the component.

Design and integrate a testimonial component in a Next.js 14 portfolio site, implementing a slider with infinite autoplay, three visible slides, center mode, padding, and responsive breakpoints.

Design a testimonial section for a portfolio website with a responsive slider using React slick, featuring a centered heading, description, profile images, and client quotes within a two-tone card layout.

Design the filter component and persistent footer in a Next.js portfolio by creating a functional footer and accordion components, rendering the footer in the layout, and applying responsive styling.

Render footer items in a Next.js 14 portfolio site by mapping service links from arrays into sections like company policy and helpful links, with mobile accordion behavior.

Display a responsive row of social media icons using flex wrap, paste SVGs for Twitter, Instagram, Dribbble, LinkedIn, and Gmail, and open links in new tabs.

Implement a mobile footer menu using a reusable accordion in a Next.js 14 project, pass item arrays as props, manage open state, and add interactive icons that rotate on click.

Implement a mobile footer dropdown in a Next.js 14 portfolio by installing headless ui, rendering transitions with the show property, mapping content items, and styling with color classes.

Design and implement a contact page header for a Next.js portfolio site, creating the contact me page, routing via the pages directory, and styling with tailwind and layered background effects.

Explore building a responsive contact page with card-based layouts, icons, and interactive hover effects, including location, phone, and email panels, designed with flexbox and accessible styling.

Learn to build a responsive contact form layout in a Next.js 14 portfolio, using flex sections, smooth scroll to the contact section, and a gradient overlay background.

Finalize the contact form in Next.js 14 portfolio page by adding name, email, phone number, subject, and message fields, with consistent fonts and colors, responsive layout, and quick client-side validation.

Turn the contact form into a controlled input using useState and client-side rendering, handling name, email, phone, subject, and message. Validate numbers, manage loading, and reset fields on submit.

Create a Next.js 13 api route under app/api/contact/roots.js to receive form data, configure nodemailer with Gmail, and send an HTML email using a template.

Learn how to consume the api on the contact page by posting form data to /api/contacts, handling loading state, and showing toast notifications for success or error.

Display a loading progress bar when the user clicks send to indicate API processing and awaiting the outcome. A call-to-action button performs a smooth scroll to the home component.