What I've Learned from Developing a Portfolio & Utilizing the scrollToSection() Method.

Building my portfolio presented unexpected challenges for me as a developer. Despite the fact that I have experience with more technically complex projects, such as developing full stack applications. Making a website for yourself to market and advertise your experience and knowledge as the product is surprisingly difficult.

My projects, such as Medisense and ClosetSwap, were born from various inspirations and aspirations. Designing and envisioning features for products you're passionate about is relatively straightforward. However, when the product is yourself, and you're tasked with marketing and communicating your value, it becomes a different challenge altogether.

I've always found it surprisingly difficult to craft a simple bio for dating apps or social media websites. Making a portfolio for the first time to express my abilities and talents was on a different level. I felt stuck and tried a few different versions of my portfolio on my own. Eventually I realized I lacked inspiration, and I needed to review other portfolios to get a grasp on what I wanted to design.

In all honesty, I think my design abilities could be improved, and it's clear from looking at other portfolios that mine is actually very basic. The important thing is that I made an effort and I am learning.

In my research of other portfolios I did learn about modern design and I discovered new techniques in development such as, scrollToSection(), which I think will become one of my favorite JavaScript methods for basic navigation! I've used react-Router-Dom before, but it wasn't the best tool for this particular project. Something relatively straightforward with a dash of style.

Introducing: scrollToSection() in ReactJS

scrollToSection is a JavaScript method that allows you to smoothly scroll to a specific section of a webpage with just a single click. This technique not only enhances user experience but also adds a touch of elegance to the overall design. It's surprisingly straightforward to implement it.

Step 1: Importing Components and Rendering

First, we import the necessary components that represent different sections of our webpage. These components will be rendered within the App.js component's return statement. This is a basic setup in ReactJS for web development. You create components and import them into App.JS to be rendered.

import React from "react";
import Navbar from "./components/Navbar/Navbar";
import Hero from "./components/Hero/Hero";
import Skills from "./components/Skills/Skills";
import WorkExperience from "./components/WorkExperience/WorkExperience";
import ContactMe from "./components/ContactMe/ContactMe";
import Projects from "./components/Projects/Projects";
import Footer from "./components/Footer/Footer";

const App = () => {

   return (
      <>
         <Navbar />
         <div className="container">
            <Hero />    
            <Skills />   
            <Projects />      
            <WorkExperience />               
            <ContactMe />
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 2: Using useRef to Target Components

Next, we utilize React's useRef hook to create references for each component. These references will be used later for smooth scrolling navigation.

We will then wrap the corresponding components within the return statement with div tags that reference our useRef variables.

import React, { useRef } from "react";
//component imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

return (
      <>
         <Navbar />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
}

Step 3: Defining scrollToSection() Method for Smooth Scrolling

Now, let's define the scrollToSection() method within the App.js component. This method smoothly scrolls to the specified section when called.

We retain the separation of concerns by implementing scrollToSection() in App.js, keeping global state management and associated logic inside the App component. This keeps the Navbar component's focus on navigation and user interaction.

This function uses switch cases to select which particular section, depending on the specified component, to scroll to. Smooth behavior is enabled, and each case scrolls to the offsetTop point of the appropriate section.

Notice the navigation tag in the return statement: <Navbar scrollToSection={scrollToSection} />. Here, we pass scrollToSection() as a prop to the Navbar component, allowing navigation buttons to trigger smooth scrolling to a specifc component.

\\imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

   const scrollToSection = (section) => {
      switch (section) {
         case "hero":
            window.scrollTo({
               top: homeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "skills":
            window.scrollTo({
               top: skillsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "projects":
            window.scrollTo({
               top: projectsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "work":
            window.scrollTo({
               top: workExperienceRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "contact":
            window.scrollTo({
               top: contactMeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         default:
            break;
      }
   };

   return (
      <>
         <Navbar scrollToSection={scrollToSection} />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 4: Setting up Navbar to Accept and Utilize the scrollToSection() Logic

Lastly, in our Navbar component, we need to pass in the prop {scrollToSection}. This allows us to set up the buttons to interact with the scrollToSection() method located in App.js.

All we have to do is utilize an onClick function to trigger the scrollToSection logic, using the switch case names to determine which exact component each button should be bound to.

import React, { useState } from "react";
import "./Navbar.css";

const Navbar = ({ scrollToSection }) => {

   return (
      <>
         <nav className="nav-wrapper">
            <div className="nav-content">
               <ul>
                  <li
                     onClick={() => scrollToSection("hero")}
                     className="menu-item"
                  >
                     Home
                  </li>
                  <li
                     onClick={() => scrollToSection("skills")}
                     className="menu-item"
                  >
                     Skills
                  </li>
                  <li
                     onClick={() => scrollToSection("projects")}
                     className="menu-item"
                  >
                     Projects
                  </li>
                  <li
                     onClick={() => scrollToSection("work")}
                     className="menu-item"
                  >
                     Work Experience
                  </li>
                  <li
                     onClick={() => scrollToSection("contact")}
                     className="menu-item"
                  >
                     Contact Me
                  </li>          
               </ul>
            </div>
         </nav>
      </>
   );
};

export default Navbar;

And with those steps, I've explained how to implement the scrollToSection() method! It really is amazing how powerful javaScript is, and how you can utilize it in order to add interactivity to your web page. If you have any questions, please feel free to reach out to me on linkedin and check out my portfolio!

https://www.linkedin.com/in/chelsea-snider/
https://chelseasnider.netlify.app/

Thank you for reading, and I hope you learned how to implement the scrollToSection() method to use in your own projects :)

Blog

What I've Learned from Developing a Portfolio & Utilizing the scrollToSection() Method.

Chelsea Snider

Introducing: scrollToSection() in ReactJS

Join Our Newsletter. No Spam, Only the good stuff.

Related