Build a portfolio with React, No external framework/library

Create a portfolio React app in a new folder and clean the starter template. Customize the public index.html title and favicon, remove the header, and tidy the app CSS.

Overwrite element styles with a CSS reset, set margins to zero for p and h1–h5, and define a four-color palette using CSS variables for light, main, accent, and dark.

Create a navigation bar component inside the screen folder, export it via an index file, and link to home, about, about me, technologies, portfolio, and contact using a flexbox layout.

Build a responsive layout with a flex container and space-between alignment, using a reusable page pattern and rem-based sizing, then style navigation with color variables, hover animation, and media queries.

Import a downloaded SVG into your project, render it with an image tag, and style it with fill color, size, and a pointer cursor for a hamburger menu.

Use useState and useEffect to detect screen size, add a resize listener, and toggle the navigation links and button for a responsive menu with a rotate animation.

Create a landing screen component for a React portfolio by organizing folders, importing css, integrating svg icons, and wiring an animated background into the app.

Explain how css frameworks and libraries work by using props and children to style a container and its animated background, illustrating common library patterns such as Bootstrap or Polaris.

Learn to integrate SVG assets in a React project without external libraries by importing SVG files as React components, enabling dynamic color changes and easier customization.

Create a full-screen animated background by looping svg icons with a quantity, center them with flex, and style the svg using a main brand color, drop shadow, and hover transitions.

Create an infinite animated background by defining keyframes that translate two animals from 0% to -100% (and back) in opposite rows, using two containers and staggered delays.

Learn to create and integrate a typewriter component in a React landing page, passing a messages array to drive the typing effect and styling with CSS.

Build a React typewriter effect by iterating a message array with a default speed of 100 and a 200ms delay, using useEffect and a typing buffer.

Build an about me screen in a React portfolio by adding an image, a title, and a bio, organizing components and styles, implementing smooth-scroll anchors, and ensuring a responsive layout.

Create a technologies screen by rendering a main container of tech cards from an imported array of name and image, mapping to display each card with a tech container.

Style a responsive technologies grid in a React portfolio using flex and grid, with padding, borders, square 150x150 images, a gradient background animation, and auto-fit minmax columns for fluid layouts.

Build a portfolio screen in React by rendering a main container with a header and an array of projects, plus a modal showing each project's title, description, image, and URL.

Build a responsive portfolio grid in React with a grid layout, minmax 300px columns, hover brightness effects, and a modal showing image, description, and link.

Discover how clicking a project selects its index from the projects array, stores it as current index with the use state hook, and derives the current project.

Create a modal to display the current project details by passing title, description, image, and URL into a fixed overlay with a two-column grid.

Document a reusable modal with title, description, image, and URL props, wire close with an onClick callback from the parent, and improve responsiveness via a media query and width adjustments.

Create a responsive contact screen in a React portfolio, displaying name, city, phone, and email, with a flat layout on large screens and a column layout on small screens.

Apply flex layouts and color variables in css, adjust padding and letter spacing, and implement a media query to switch the contact container to a column at larger breakpoints.

Resolve an eslint warning by removing an unnecessary dependency at line 55, then save the file. Confirm no warnings remain before pushing to net Defi or any other server.

Upload your portfolio online by creating a free GitHub repo, pushing your project, then linking Netlify for a live site and sharing the final URL.