Video summary

React Project Tutorial – Build a Portfolio Website w/ Advanced Animations

Main summary

Key takeaways

Technology

Overview

This React tutorial walks through building a portfolio website with advanced UI animations and multiple pages (Home, About, Contact). It focuses on setting up the React project and integrating animation libraries, loaders, icon packs, an animated text system, and a contact flow without a backend server.

Key tutorial goals / features

  • Build a 3-page portfolio using React Router:
    • Home (/)
    • About (/about)
    • Contact (/contact)
  • Add “cool JavaScript animations” using a combination of:
    • GSAP (including SVG drawing animation)
    • animate.css / animate-style classes
    • Custom CSS keyframes
  • Implement a Pac-Man loader shown on page load and route switching.
  • Add a contact form using email.js with no server setup.
  • Embed an interactive map using Leaflet via react-leaflet.

Setup / Dependencies

The course installs packages to support UI and animation:

  • emailjs: Sends contact form messages directly from the browser (no backend).
  • Font Awesome icon stack:
    • free brands SVG icons
    • free solid SVG icons
    • React wrapper: @fortawesome/react-fontawesome
  • animate.css: Reusable CSS-based animations.
  • GSAP (installed as “trial” in the subtitles to avoid account creation).
  • loaders.css + React loader integration:
    • Adds a Pac-Man loader component.
  • react-leaflet: Maps on the Contact page.
  • react-router-dom: Routing and navigation across pages.
  • SCSS (.scss): Styling using variables and nesting-like patterns.

Project Styling & Global Configuration

  • Creates/updates a Prettier config (.prettierrc) with formatting preferences.
  • Switches from CSS to SCSS (App.css → App.scss).
  • Defines global styles and imports fonts from a local assets/fonts folder:
    • helvetica neue, plus two additional custom fonts used for headings/background text.
  • Imports animation CSS libraries and configures baseline typography in index.css:
    • sets body font-size to 62.5%
    • applies default colors/background

Layout and Navigation (Sidebar)

  • Uses a Layout component containing:
    • a left sidebar with icon navigation (Home/About/Contact)
    • additional social links (LinkedIn/GitHub/YouTube/Skype)

Sidebar design details

  • Fixed/dark sidebar background, positioned absolute
  • Uses Font Awesome icons
  • Hover behavior:
    • icons fade
    • text labels appear via CSS ::after
  • Active route styling:
    • uses React Router’s NavLink with an activeClassName to highlight the current page

Background “Code Tag” Text Effect

  • The layout injects custom background HTML/text elements (top and bottom) and styles them with:
    • yellow color + reduced opacity
    • absolute positioning
    • custom fonts to simulate a developer-coding vibe

Animation System for Headings: “Animated Letters”

A reusable component animates text letter-by-letter:

  • AnimatedLetters accepts:
    • a CSS class for letters
    • an array of characters
    • a starting index (used to stagger delays)
  • Each character renders as a <span> to apply individual letter animations.
  • CSS provides:
    • initial opacity 0
    • entrance animations (bounce/rotation)
    • hover animation (rubber band effect + color change)
  • Logic detail:
    • useState + useEffect updates the class after a delay (around 4 seconds), so hover effects activate only after the intro animation completes.

Home Page (Landing Animation)

Home page includes:

  1. Left text zone

    • h1 and h2 animated using AnimatedLetters
    • a “Contact Me” styled button

  2. Right logo animation (in logo/ folder)

    • Uses GSAP with the DrawSVG plugin:
      • container fades in
      • SVG outline is “drawn” over time
      • solid logo fades in after the drawing animation completes
    • Uses useRef to target:
      • background container
      • outline SVG element
      • solid image element

  3. Text animation sync

    • Uses animate.css and custom CSS for:
      • text pop-in and hover
      • timed delays to match the SVG drawing

About Page (Animated Heading + Rotating Skill Cube)

About page includes:

  • Animated heading using AnimatedLetters (e.g., “ABOUT ME”).
  • Three paragraphs with staggered pulse/fade-in timing.
  • A 3D rotating cube of skill icons:
    • Built in CSS using:
      • multiple cube faces (6 divs)
      • transform (rotateX/rotateY + translateZ) to position faces in 3D space
      • @keyframes spinCube to rotate the cube over time
    • Uses Font Awesome brand icons with customized colors per face.
  • Hover/animation class activation logic similar to Home:
    • delayed state change ensures hover effects work after the intro animation.

Page Transition Loader (Pac-Man)

  • Adds a Pac-Man loader via react-loaders / loaders.css.
  • Included in Home, About, and Contact components.
  • Subtitle idea:
    • loader is absolutely positioned and centered
    • it fades out after the page begins rendering

Contact Page (email.js Form + Leaflet Map)

Contact form

  • Form fields:
    • name (text)
    • email (email)
    • subject (text)
    • message (textarea)
    • submit button (styled)
  • Implemented with email.js:
    • useRef captures the form element
    • sendForm(...) runs on submit:
      • service ID (e.g., Gmail)
      • template ID
      • form reference
      • user token
  • Feedback:
    • window.alert / optional reload (window.location.reload(false))
  • Troubleshooting note:
    • a typo in the message field prevented the message content from sending until corrected.

Map + location info

  • Uses react-leaflet:
    • MapContainer with center coordinates and zoom
    • TileLayer from OpenStreetMap
    • Marker + Popup with a visitor message
  • Adds an info overlay box on the right/top of the map section:
    • black background, white text
    • includes email highlighted in yellow
    • fades in on a delay
  • The map container fades in with animation settings.

Wrap-up (What Was Accomplished)

  • Home: animated text + GSAP-drawn SVG logo + entrance animations + Pac-Man loader
  • About: custom CSS 3D rotating cube + animated paragraphs + Pac-Man loader
  • Contact: email.js form without backend + Leaflet map + Pac-Man loader

Main Speakers / Sources (as inferred from subtitles)

  • Slobodan (speaker/instructor mentioned repeatedly as “slobodan”)
  • Libraries referenced as tools/sources:
    • GSAP (and DrawSVG plugin)
    • animate.css / loaders.css
    • email.js
    • react-leaflet / Leaflet
    • Font Awesome
    • React Router DOM

Original video