rebecca-shoptaw / rebecca-shoptaw.github.io

Responsive portfolio site with on-scroll animations and other fun stylistic touches. 📂🌹

Portfolio 📂🌹

A responsive portfolio site with on-scroll animations and other fun stylistic touches.

Live Site

Built With

UI Walkthrough

The UI for the portfolio is quite straightforward and intuitive -- it's a single page site composed of a sticky nav bar (the Nav component), a welcome section, and three main info sections, each of which has its own componenet: About, Projects, and Contact.

The idea here was to make the site as seamless to navigate as possible: to have all the information readily available to the user via a quick scroll through, and to make jumping around easy by keeping the nav bar always in view.

Implementation

Component Structure

The site is designed using a nested component structure, so that each component is responsible for rendering only a single part of the site's UI.

The current organization of the components and sub-components is as follows:

Homepage
  -- Nav
  -- About
     -- BioSnippet
  -- Projects
     -- ProjectTile
  -- Contact
    -- SocialLink

The nested components (BioSnippet, ProjectTile, SocialLink) are each rendered via their parent components mapping over a separately-stored data array.

For example, the Projects component maps over the projects array of objects, of which each looks something like this:

 {
    id: `open-editions`,
    title: `Open Editions`,
    img_alt: `Audiobook playlist with romantic painting in the background.`,
    description: `A minimalist and aesthetically pleasing audiobook player, which combines public domain audiobook recordings of classic novels with customized cover images . Built with Typescript, React and the Librivox API.`,
    wip: true,
  },

As it does so, it passes each project object as a component to the ProjectTile sub-component, which then handles all the rendering:

{projects.map((project) => (
  <ProjectTile key={project.id} project={project} />
))}

Custom Hooks

The site also uses a few custom hooks to avoid unnecessary repetitions in the code:

• useReset makes the simple URL reset function available to any component that needs it (such as to prevent anchor tags like "#about" from appearing in the URL)
• useAnimation handles all the GSAP imports and returns the intro animation function for easy use by the Homepage component

Next Steps

• Redo styling using SASS
• Use meta and Schema.org tags to improve SEO
• Reorganize app using custom hooks and sub-components
• Use GSAP to create a fun intro animation
• Shift scroll animations from react-awesome-reveal to GSAP
• Add a test suite via Jest

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Rebecca Shoptaw - email | linkedin