React JS Portfolio Website with Theme Customization

Deploy your React portfolio by selecting premium hosting and claiming a free domain. Apply a 10% coupon for discounts, enjoy 100 websites and 100 GB SSD, with a free email.

Install node to get npm and set up your React development environment, then configure VS Code with extensions and use Chrome to test your project.

Create a React app with npx create-react-app, run the development server on localhost 3000, and install extensions: material sequence, S7+ React Redux, React Native snippets, auto imports.

Delete and recreate the project folder structure for a responsive React portfolio with theme customization, setting up index.html, root div, and modular sections like header, about, contact, portfolio, and services.

Learn to set up general css3 variables, reset browser defaults, import the monserrate font, and implement a responsive container with smooth scrolling in a React portfolio.

Create responsive css for a react js portfolio website using media queries for phones and tablets at 600px and 1024px, then start building components.

Build a responsive navbar for a React js portfolio site with semantic tags and BEM naming, importing a logo, rendering data-driven nav links, and a theme toggle icon.

Explains styling the navbar with CSS, creating a fixed, full-width 80px bar using flex and a primary hsla color, and notes hiding the nav menu below 1024px.

Build a header React component with a header image, name Hajia Bintu, bio, CTAs to contact and portfolio, and socials rendered from a data array with icons.

Build and style a fixed header for a React portfolio site, using calc(100vh - 5rem) for height, centered content, and absolute-positioned social icons with hover effects.

Learn to implement responsive design with tablet and phone media queries, adjusting header margins, height, and element sizing to optimize the header and cta layout across devices.

Explore building the about section with a left image and right content, including a reusable card component and a downloadable CV button using assets and JSX.

Learn to build a reusable card component in React, rendering children inside an article tag, with dynamic class names and an onClick handler.

Apply css to the card component with a white background, hover transition, and variable border radius. Build light variants and phone support for a React portfolio site with theme customization.

Learn to render an about section by mapping a data array to a reusable card component in a React portfolio, with icons, titles, and descriptions.

Build a responsive two-column layout with CSS grid, set 35% left and 53% right columns with a 12% gap, and apply hover effects to the about portrait and cards.

Leverage media queries for tablets and phones to create a responsive React JS portfolio layout, adjusting the about section with grid templates, centered headings, and optimized card spacing.

Render a data array of services as reusable cards in a React JS portfolio, mapping items to service cards with icons, titles, and descriptions inside a services container.

Learn to build a responsive services container in a React portfolio with a grid of service cards, flex layouts, and interactive icons, including hover effects and typography spacing.

Apply media queries for tablets and phones to a React JS portfolio, adjusting the services container gaps and icon-text spacing for responsive design.

Build a React portfolio with theme customization by modeling projects as an array and filtering by category using the useState hook, and structure category and project components.

Render the portfolio by mapping the projects array to a project component, passing each project object as a prop and assigning a unique key for all nine items.

Import and render a reusable card component to display portfolio projects, including image, title, description, and a two-link call-to-action for demo and GitHub.

Style the portfolio projects section with a three-column grid and gaps. Set project images to full width with controlled height and add hover effects for the CTA.

Map the projects data array to extract categories, compute unique categories with a set, spread them, render an all button plus category buttons, and pass unique categories as a prop.

Learn to build portfolio categories with JSX by mapping unique categories, using each as a key, and rendering a category button component that receives the category as a prop.

Create a category button component in React that accepts className and category props, uses a template literal to assign classes, and toggles an active class with state for portfolio filtering.

Master CSS for project categories in a React portfolio by centering a flex row with wrap and a 1.5rem gap, capitalizing text, and refining transitions, while enabling click-based project filtering.

Filter portfolio projects by category with a filter handler, manage active category state, and render filtered results (including all). Add a fade-in animation to project cards.

Implement responsive media queries for tablets and phones, set tablet gaps and templates, ensure phones use full width, and enable portfolio category filtering for ui ux and backend projects.

Define a data array of testimonials (id, code, avatar, name, profession) and render it in a section with id testimonials, including a header and a swipe-enabled container.

Create a React carousel using Swiper JS by installing Swiper, importing components, and mapping testimonial data to slides, rendering each testimonial as a slide.

Render reusable cloud components and a testimonial JSX structure in React portfolio site, wiring avatar, quote, date, name, and profession through props, with light styling for a polished look.

Explore how to style testimonial cards in a React portfolio with a swiper, including avatar sizing, flex alignment, hover lift, and primary color accents for pagination and background.

Implement responsive breakpoints in Swiper JS for a mobile-first React portfolio site, with one slide per view on mobile, two on tablets, three on desktops, and autoplay enabled.

Map through the array of frequently asked questions in a React JSX context to render a dynamic FAQ for a portfolio website, importing data.

Learn to build a reusable faq component in a React portfolio with jsx, passing question data via props, and toggle answers with an icon button and styled classes.

Learn to build and style a FAQs section in a React portfolio site using CSS, with responsive grid layouts, hover effects, and a show/hide toggle for answers.

Learn to implement a FAQs toggle using the useState hook, showing or hiding answers with a click, switching between plus and minus icons, and adding a brief opacity animation.

Add and customize contact details in your React JS portfolio website, including email, Facebook messenger ID, and phone number, pairing each with the proper icon and links to receive messages.

Create a contact section in a React portfolio by mapping a contacts array to icon links, using keys and hrefs, and applying security attributes and container styling.

Style a responsive contact section in a React JS portfolio, using a contacts container with flex and grid, white text on the primary color, hover effects, and email links.