Build modern portfolio with react js and next js

Create a Next.js app, set up TypeScript and Tailwind, and explore the app structure (app folder, global CSS, layout, page) while running the dev server.

Update your portfolio’s metadata and favicon to improve search visibility and branding; customize the title and description, then replace the browser tab icon with a generated favicon from fiveicon.io.

Master a function to conditionally construct class names and resolve tailwind conflicts by combining a lightweight utility with tailwind-merge, boosting clean, scalable styling in React and Next.js.

Learn to add Google Fonts and local fonts to a Next.js 14 app with Tailwind, and apply a variable font via CSS variables.

Create a reusable green noisy background component using a provided image, Tailwind CSS, and a full-screen fixed overlay. Implement a before-element animation with keyframes to achieve a living grain background.

Create a custom cursor using react animated cursor, selecting the donut variant, and configure inner and outer sizes, color, and blend mode, then apply hover effects to links and buttons.

Create a water wave visual effect in a React and Next.js 14 project using the React Water Reef package. Install, wrap content, and tweak image URL, drop radius, and resolution.

Create a reusable card component and related UI elements in a React project, defining title, children, and optional className props, organized under a UI folder with Tailwind styling.

Develop a reusable React button component in Next.js 14, detailing button props with children, optional link and icon support, including hover styling and responsive layout.

Build the inputs and textarea components in React, adding icon support, placeholders, and type variants (text, email, password), and style with primary background and focus outlines.

Create a reusable profile component for a React and Next.js 14 project, styled with Tailwind, including a circular image, online dot, and configurable data across the application.

Develop a reusable fancy button component in React with customizable text and icon props, featuring a gradient background, rounded styling, hover translate animation, and a TSX implementation.

Create a live clock component in React TypeScript that accepts a city prop and displays its current time using moment timezone, updating every second on the client side.

Create a reusable magnetic wrapper that uses framer motion to make content follow the cursor on x and y axes with a half-distance spring animation.

Build a responsive landing section for a modern portfolio with React and Next.js 14, featuring a centered profile, a magnetic fancy button, and a live Casablanca clock.

Design the slogan section with absolute centered text and responsive typography using viewport units. Implement a magnetic scroll down component to guide users across breakpoints.

Learn to build a featured heading component with a backdrop number, animated SVG curve, and hover-enabled SVG interactivity, using a hidden component architecture in React TSX.

Create a data-driven featured card component for a modern portfolio using React and Next.js 14, with a main video card, hover effects, a header, and TypeScript interfaces.

Build a featured card with two video components, control an external active state to play or pause via useRef, and apply grayscale when inactive.

Build expandable cards for a portfolio with a featured card and hover-driven expansion using a hovered index, collapsing to one column on small screens and three on large screens.

Build the about section of a modern portfolio by assembling multiple cards (me, resume, background, stack, experience, education) in a responsive grid with gallery visibility rules.

Build a me card for a React and Next.js portfolio by importing gallery images from a data file, and rendering a responsive, image-backed card with absolute positioning and styled tags.

Create a responsive resume card for a modern portfolio, featuring a text section, signature image, social links, and a download button arranged for medium and large screens.

Create the background card in the cards component, with the title my background, and style the text in white, underlined, and italic using nbsp for spacing.

Create a responsive gallery swiper in React using the popular Swiper library, with clickable pagination and autoplay every 2.5 seconds; build a reusable gallery component and map images into slides.

Build a reusable timeline component for a React and Next.js 14 portfolio app, featuring date, title, subtitle, optional link and tag with responsive layouts.

Learn to build and render experience, education, certifications, and instructor cards for a modern React and Next.js portfolio, including data-driven timelines, optional links and tags, and component wiring.

Create a stack card component by organizing assets and data, mapping stack items, and implementing a tooltip with hover effects for a responsive, polished portfolio user interface.

Create a responsive contact section with two contact cards, name and email inputs, a subject field, and a multi-select services picker, finishing with a send function.

Build a responsive contact form in a react and next js 14 app with a two-column layout, name, email, subject, budget, message, and a send button, storing values in state.

Build a reusable select input in React that supports multi-select and single selections. Map service and budget options, manage state with useState, and toggle choices with checkbox or radio inputs.

Discover how to send emails from a Next.js frontend using EmailJS, set up a Gmail service and template, and wire form fields for name, email, subject, and message.

Learn to set up a full screen menu in a React/Next.js portfolio, including header integration, a toggle button, and a boolean open state, with basic motion animations.

Explore building a responsive full-screen menu with a profile card and animated navigation links using Framer Motion in a React and Next.js 14 project.

Learn to build a navlink dot scale effect with framer motion by creating a white circular dot, animating open and close states via variants, hover, and state management.

Learn to implement footer links in a modern React and Next.js portfolio, using filtered links, absolute positioning, left middle right sections, LinkedIn, Udemy, YouTube, Instagram, and Twitter.

Develop a split-layout menu card for a React and Next.js 14 portfolio, with a 500-pixel pane, header and links, animated text, and a blended background shade image.

Implement a show/hide toggle button that appears after scrolling a threshold, using useState and useEffect to listen to window scroll and toggle visibility on the y axis.

Learn to deploy a modern portfolio by configuring Next.js and TypeScript to ignore build errors, ensure client-side rendering for a water wave effect, and publish via GitHub and Vercel.