SteveHan.dev Portfolio website

This project uses Typescript, React.js, Framer Motion, and Tailwind CSS (v3.0), and is integrated with Google Analytics 4 and Google Tag Manager.

Live Site

🌐 www.stevehan.dev

Features

• Dark / light Mode
  • Dark / light mode switch animation
  • Linear gradient background animation
• Desktop/tablet (>= 768 pixels)
  • Skills
    • Expand/collapse to see all or less skills
    • Reorder and animate selected buttons to the front
  • Carousel to scroll through projects and certificates
    • Drag with momentum to scroll
    • Right/left buttons to go to next set
    • Fade out on left and/or right to show there's more
  • Navigation
    • Chevron button on bottom of page to go to next page
• Mobile (< 768 pixels)
  • Setting
    • Drawer drag close
  • Skills
    • Carousel to select skills
    • Filter sidebar to see all skills
  • Navigation
• Image Optimization
  • Cloudinary image transformation delivery URL
• Miscellaneous
  • 404 Page not found
    • SVG Animation

Screenshots

Desktop

Mobile (captured on iPhone X)

Technology Used

Typescript

React

Framer Motion

Tailwind CSS

Visual Studio Code

JavaScript

HTML5

CSS3

SASS

Git

Github

Jira

Google Analytics

Google Tag Manager

Project Folder Structure

├── .vscode
│   └── settings.json # VS Code settings
├── backend - AWS CDK, AWS Lambda, AWS DynamoDB, Amazon API Gateway.  Details coming soon...
├── public
│   ├── _redirects # Configures Netlify so that routing is handled on the client side by React Router
│   ├── manifest.json # Not modified.
│   └── index.html # Main HTML file, contains the code for Google Tag Manager and Hotjar.
├── src
│   ├── components
│   │   ├── AnimationPageTransition.tsx # .
│   │   ├── Buttons.tsx # Contains all the buttons used in the project.
│   │   ├── CardComponent.tsx #
│   │   ├── DarkModeSwitch.tsx # Dark/light mode switch
│   │   ├── Drawer.tsx #
│   │   ├── Header.tsx #
│   │   ├── LogoGlow.tsx #
│   │   ├── MainCarousel.tsx #
│   │   ├── MainComponent.tsx #
│   │   ├── Menu.tsx #
│   │   ├── MobileCardsComponent.tsx #
│   │   ├── MobileMenu.tsx #
│   │   ├── MobileSkillsComponent.tsx #
│   │   ├── MobileSkillsSideBar.tsx #
│   │   ├── ResumeIcon.tsx #
│   │   ├── Settings.tsx #
│   │   ├── SettingsDrawer.tsx #
│   │   └── SkillsComponent.tsx #
│   ├── constants
│   │   ├── MenuItems.ts
│   │   └── misc.ts #
│   ├── context
│   │   ├── AppContext.ts #
│   │   └── AppContextProvider.tsx # Contains the global states
│   ├── fonts
│   │   └──  global.scss # Global styles
│   ├── pages
│   │   ├── About.tsx # About me and about the website page
│   │   ├── Certificates.tsx # Certificates page
│   │   ├── Contact.tsx # Contact form page
│   │   ├── Home.tsx # Home / Hero page
│   │   ├── NotFound.tsx # 404 page not found
│   │   └── Projects.tsx # Projects page
│   ├── styles
│   │   └──  global.scss # Global styles
│   ├── App.test.tsx # .
│   ├── App.tsx # This is the root of the app.
│   ├── index.css # Global styles.
│   ├── index.tsx # Used for DOM rendering only.
│   ├── react-app-env.d.ts # .
│   ├── reportWebVitals.ts # .
│   ├── setupTests.ts # .
│   └── types.ts # Typescript types definitions for the project.
├── .gitignore # Files ignored by Git.
├── README.md # This file.
├── package.json # npm package manager file.
├── package-lock.json # Contains the dependencies used in the project.
├── postcss-config.json # .
├── tailwind.config.js # Tailwind CSS configuration file.
└── tsconfig.json # Typescript configuration file.

Known Issues

• Make setting drawer menu's drag close only on a handle and make the setting drawer scrollable if there's vertical overflow
• Main component cards does not animate unless 100% of the card container is in view. Change it to something like 40% in view.

Future Todos

• Add integration with Mixpanel for user analytics
• Add backend on AWS using CDK and AWS Lambda
• Add set focus and keyboard accessibility
• Improve 404 page animation
• Add additional units tests with Jest and React Testing Library
• Add PWA homescreen installation for mobile
• Improve on the styling of main component's buttons

Resources

Javascript / React.js

• Find single or array of values in JavaScript array using includes (blog)

• Handle mouse hover events over a mapped array in React (StackOverFlow)

• How to check if an array contains all elements of another array (StackOverFlow) - I used this resources for the Skills component.

• react typescript issue on add EventListener (StackOverFlow) - I had trouble figuring out the type of event touchmove is. I thought it would be React.TouchEvent<HTMLElement> but it is just Event.

• React/typescript forwardRef cheatsheet

• How to change light / dark mode based on system settings

• ReactJS: How to determine if the application is being viewed on mobile or desktop browser (StackOverFlow)

Styling - Tailwind CSS / SASS / CSS

• Tailwind CSS Dark Mode | React App Theme Switcher (Youtube)

• How do I detect dark mode using Javascript (StackOverFlow)

• Making dark and light more gradients with 'background-image' in Tailwind CSS (StackOverFlow)

• Examples of black & blue gradients - I referenced this in coming up with my color scheme.

• Dark Mode Animation (CodePen) - I used this as inspiration in coming up with my dark mode switch.

• Scroll Animations (Youtube) - I considered using scroll animation and looked at a number of resources including this one.

• Creating Glow Effects with CSS

• Glow animation from behind using after pseudo selector, box-shadow and scale transform (Youtube)

• Vertically align icon and text (StackOverFlow)

• React tailwind + sass build error - resolve-url-loader: error processing CSS (StackOverFlow) - Helped me resolve the SASS related build error.

• Wrapping text around an image or shape (Youtube)

• 15 ways to center vertically (blog)

• Creating custom scrollbars using CSS (Youtube)

• For the carousel we have to hide the scrollbars in the x direction but keep the functionality (W3School)

• Browser scrollbars can cause annoying layout shifts. I had this issue that is particularly noticeable on my home page where I'm animating in the text from below the screen, so that at the start of the animation the scroll shows and by the time it finishes it is removed when the content fits into a single page resulting in the small layout shift. The solution I went with is to always show the scrollbar.

Animation - Framer Motion

• Animating React with Framer Motion course (Level UP Tutorials) - Excellent course. This was my first course on Framer Motion.

• Framer Motion carousel slider (Youtube) - My main carousel used on the Projects and Certificates pages was originally based on this tutorial.

• Why is my scrollWidth showing wrong number? (StackOverFlow) - I used this resource for my main carousel.

• Portfolio that uses React, Framer Motion, and Tailwind CSS (Youtube) - This project started out loosely based on this tutorial.

• Tip on getting Framer Motion to remount on state change (StackOverFlow). I used this tip to get skills component to re-render every time a skill is selected or deselected.

• Framer motion color animation (official site)

• React Tooltip - Warning: Prop dangerouslySetInnerHTML did not match (Github)

• Image fade out effect using CSS image mask (Youtube) - I used for this effect on my main carousel.

• Framer Motion - event clientX / clientY does not work. Use of info delta.x / delta.y instead

• Using nested tertiary conditional operator - I used it for deciding which linear gradient to use for fading left, right, or both left and right carousel.

• Fade Out Overflow Effect

• Menu Button using Framer Motion (CodeSandBox)

• How to use React-router-dom and Framer Motion AnimatePresence (StackOverFlow)

• Shared layout animations - deprecated with Frame Motion 5

• Stop scrolling from interfering with dragging (Framer Motion issue on Github) - This issue took some time for me to resolve. The issue was with my mobile skills component where drag movement is supposed to be constrained in the x direction, but it doesn't and it's possible to drag the component off below the bottom of the screen. The solution was to use an event listener and disregard the touch movement when a touchmove event is detected and delta y is greater than delta x.

SVG

• Work around for color styling issue with Grommet Icons (Github)

• More on work around for color styling issue with Grommet Icons (Github)

• How to change icon size (StackOverFlow)

• Adding icon to submit button (StackOverFlow)

Fonts

• How to self host Google fonts

• Google webfonts helper

Testing - React Testing Library, Jest

• React js: Error: useLocation() may be used only in the context of a component. App component has to be wrapped with Router in App.test.tsx.

Performance - React Profiler, Core Web Vitals, Lighthouse, Memo

• Optimize Performance for React (Pluralsight). Course on using React Profiler, React PureComponents, memo, useMemo, and reducing bundle size to improve performance

• Profile a React App for Performance (blog) - Tips on using React Profiler on production build

• Tech Talk: Performance & React: Measuring and Fixing Common Bottlenecks - Clear explaination on why the choice of keys used in rendering lists makes a big difference in performance

• Lighthouse error: "Buttons do not have an accessible name" (StackOverFlow). Add aria-label to buttons.

Deployment / Build - Netlify, AWS

• Next js typescript build error. This project started out as a Next.js 13 project.

• Fix Page Not Found on Netlify by adding a _directs file in the public folder (FreeCodeCamp)

• Configure Cloudflare DNS to work with Netlify

• How to prevent Netlify from treating warnings as errors because process.env.CI = true?. I had to set the CI Environment variable to false to build on Netlify.

• Amplify pull error (Github issues). When setting up Amplify Studio and running amplify pull receive the message ".config\local-env-info.json does not exist". The solution was to delete the amplify folder and rerun amplify pull

Traffic Analytics - Google Analytics, Google Tag Manager, Hotjar

• Ultimate Google Analytics (4) course + 50 practical examples (Udemy)

• Advanced Google Analytics 4 Implementation with Tag Manager

• Filtering out internal traffic for Google Tag Manager and GA4 (Youtube)

• Getting Started with Mixpanel: Implementation 101

• Mixpanel Implementation (Course)