Build a portfolio with React.JS

Learn to set up a React app, remove boilerplate, and implement bootstrap navigation with a navigation bar and links, including importing the bootstrap stylesheet.

Learn to add links to a responsive navbar by mapping link data to link components, assigning keys, and rendering them inside a collapsible navigation that expands on smaller screens.

Learn how to use CSS variables to manage a color palette, apply them to a navigation container, and set a bluish background with white text for a React.js portfolio.

Overwrite bootstrap with css classes by inspecting elements, targeting ids and classes, and using css variables to change font color and hover backgrounds for links, via hue-saturation-lightness adjustments.

overwrite bootstrap with inline css by applying inline style objects to logo, name, and links; adjust margins, justify content with flex, and test responsiveness by toggling screen size.

Push your code to GitHub every time you get something to work, creating a repository and pushing to the remote origin so your portfolio files stay safely saved.

Switch to a non-deprecated particles package to implement updated particle animations in a React portfolio. Compare manual, original, and updated options, and use a minimal import and responsive configuration.

Add a particle animation to your React portfolio by installing and importing react-particle-animation, then tune height, speed, radius, and color to create a darker, engaging background.

Explore a manual custom particle system as a fallback to a failing package, including dust particles, color customization, and adjustable speed and background styles.

Add a type animation to your portfolio by creating a Heather component and using the react-typed library, rendering text from an array with pauses for a polished effect.

Center content with display flex and absolute positioning, import a font from Google Fonts (Nido) with weights, and apply global styles by importing the stylesheet in a React project.

Fix the navbar dropdown in react.js portfolio by updating the navigation bar, adding an inline stylesheet, and enabling collapse, ensuring the navbar stays fixed to the top as you scroll.

Create an about me screen in a React app, importing a local image and organizing two containers in a responsive layout with media queries to adapt across sizes.

Learn to style a React.js portfolio component with a responsive container, a flex layout, centered and evenly spaced items, and a circular image using border-radius and object-fit.

Learn to use media queries to adapt a React portfolio layout, switching a container to column on small screens and fine-tuning breakpoints at 900px and 700px.

learn to add icons to technology cards using a library, create a technologies folder with a text.js data file of name and icon, then import and render icons.

Generate cards by mapping through technologies to render icons and names inside the cards container, then apply CSS styling with class names, inline styles, and color variables.

Explore the advantages of using variables in css by previewing three components, adjusting colors in developer tools, and copying values into a stylesheet for easy theming.

Set up the portfolio section by creating a projects container, adding images, titles, descriptions, links, and technologies, and exporting a portfolio data array; import images and render with bootstrap-driven UI.

Learn to set up a React portfolio page using useState to manage a card gallery and modal details, including a header, a paragraph, and Bootstrap styling.

See how tempData enables rendering the model and mapping titles within the portfolio component, and why a temporary hack is used to stabilize the first title while building the site.

Finish a modal card generator in a React portfolio project by wiring show/hide state, binding title, body, image, and link data, and applying inline styles and secure link attributes.

Overwrite bootstrap with six css styles to set a 600px breakpoint and switch from two columns to one, then verify buttons and navigation before pushing to GitHub.

Generate navigation links dynamically in a React portfolio by mapping items to anchor tags with section IDs, demonstrating dynamic hrefs, keys, and a current year footer without bootstrap.

Implement responsive css with media queries in under 30 lines, ensuring the layout collapses to a single line on small screens, then push and commit changes in the kitab terminal.

Rename the app title in public/index.html, generate a 16 by 16 icon with an icon generator, replace the icon in the public folder, reload, and push changes to GitHub.

Learn how to deploy your React.JS portfolio to Netlify by linking your GitHub account, configuring repository access, deploying the site, and customizing the site name and mobile-friendly preview.