Link to the video is here, the GitHub repo is here, and the site was live here but the link is broken. JS Mastery site is here.
React, Next.js, and Styled Components. Other dependencies include “styled-normalize” and “react-icons.”
Hostinger (sponsor) for hosting and domain name.
Your portfolio is your business card.
He starts the project by downloading starter folder to your hard drive unzipping and dragging on the VS code. Access the starter code by switching the branch from “main” to “starter.”
The author says this is his first video where he’s using styled components. He says that there’s many different ways to use CSS with React and Not one of these ways is necessarily the best so it’s good to be familiar with multiple ways.
His build script in the package.json file has next build && next export.
I like how the author sets up his starter themes. Inside a components folder, each component has a folder and inside of that there’s both a WhatEvs.js file and a WhatEvsStyles.js file.
It’s obviously saves us a lot of time and even on the first “npm run dev” you see the components listed out and he just works down the list
9m: We get a quick tour of the header.js file and when she brings in link from next link imports react imports some icons from react-icons/ai and from react-icons/di. He also shows how he imports the components from the style sheet file using styled components.
You can see how you can import a style component or write inline styled CSS. Inline styles can get messy quick.
I will say at first glance it seems like the components built with style components gets intermingled with other custom components
In the project root folder he has a themes folder with the default.js file. This is where he allows you to change global fonts and global colors. He also has break points for responsive design in this file. He does the benefits of modular code. I obviously agree with this I just don’t know how it does it.
14m: should say you can increase the size of the site logo which is wrapped in a span tag. So he goes to the header styles.js file and creates export const Span equals styled.span and then in back ticks rights all of the CSS.
One thing I just learned about styled components versus CSS modules is that you don’t need to camo case your CSS so it’s literally just copy and paste CSS which I think is a huge plus.
Styled component components that you want to use across your entire application (things like section, sectionText, and sectionTitle). These go in the root folder > styles folder > global components folder > index.js file.
Go to the pages folder and inside of the “index.js” file uncomment out the “<Section grid> as well as the <Bg Animation /> to get the nice SVG background animation.
In this file is importing some project styles some global components and some constants which is where he pulls in the data for his projects that lives in an external file and then maps over them to display them on the page.
import {projects} from "../../constants/constants"Need to separate content from the logic and you can put under the top of the file but it’s better to go in the external file. In the root folder he has a constant folder with a constant.js file. There he has an exported array named projects that contains a bunch of objects with keys like title, description, image, tags source, visit, ID number.
<GridContainer>
{projects.map(({id, image, title, description, tags, source, visit}) => (
<BlogCard key={id}>
<Img src={image}
<TitleContent><HeaderThree title>{title}</HeaderThree></TitleContent>
<BlogCard>
))}
</GridContainer>He also uses a map within a map for the tags of technologies used for the project.
Note: In the map function in the code above, see that the function block is not using curly braces but is using parentheses.
Another note: Upon closer look there is no “render” keyword in his main component. Not sure why.
Another Note: JS Mastery has a couple of good projects that are titled MERN memories, e-commerce, WebRTC app, and unichat.
Inside of a Section and under a Section Divider, SectionTitle, Add a blurb inside of a SectionText component. “Front end experience with a react back and experience with node and databases and UI UX experience with tools like figma.” His was “I’ve worked with a range of technologies in the web development world. From Back-end to Design.”
List technologies inside of a List Component. Uses DiFirebase, DiReact, DiZend icons.
Front-End, Back-End, UI/UX
The timeline section is the most difficult section.
Uses “useRef” hook to get a hold of DOM element.
Also leverage the “constants/constants.js” file to hold external “timelineData” data that gets mapped over.
Leverages a constant “TOTAL_CAROUSEL_COUNT” variable set to “TimeLineData.length”
Has an “onClick” prop that triggers a “handleClick” function which takes in the event parameter and an index.
There’s a lot of commented out code. This includes the “handleClick” function.
Pastes in SVG code into the “CarouselItem” that represents the line of the timeline.
Again maps over the timeline data to display a button for each timeline item.
To make this responsive we need to add an “onScroll” prop that triggers a “handleScroll” function.
Snap back to the beginning of scroll when the window is resized by adding a “resize” listener in a “useEffect” that can trigger a “handleResize” function. No teardown function in this “useEffect”
Used width of 320px and 375px in Chrome dev tools to test this carousel on mobile. Looks good.
Adds a section divider
Uncomments out a “scroll” function that allows smooth scroll using “.scrollTo”
Quick. Mentions you could move the data to the constants but kept in the “Accomplishments” component for now. Map over and display in “box.”
Leverages mailto:
Add social icons by copying from the “Header.js” file.
Take a look at desktop and mobile. Fully responsive.
Run “npm run build” which has been customized to use the “next export.”
Inside of hostinger dashboard, uses the file manager to drag and drop all the contents of the “out” folder.
Love that everything is in an “src” folder
I like the use of react-icons
I love the BG animation in the Hero
The “BackgroundAnimation” component is 365 lines of code, mostly svg code, (paths, ellipses, etc.). There are “animateMotion, radialGradient, and linearGradient” tags.
I like the mapped portfolio projects with mapped tags
I like how the “divider” styled-comp has a gradient color
I liked the carousel feature in the Timeline component. This includes the window-resize logic since this is a crucial concept to understand.
Happy to see styled-components being used, (GlobalComps, Theme, etc.)
In the “src” folder is a “themes” folder with “default.js” file.
For global comps we have a “styles” folder inside of the “src” folder. Inside of the “Styles” folder we have “GlobalComponents” folder next to a “globals.js” file and a “theme.js” file.
In the “GlobalComponents” folder we have a “Button.js” file and an “index.js” file.
In the “src/styles/globals.js” file we import {createGlobalStyle} from “s-c”
The “src/styles/theme.js” file imports { ThemeProvider } from “s-c” is this file itself imported into the “_app.js” file.
IN the “_document.js” file we import {} from “s-c” and this is where we import Google Fonts.
Also like the use of hsl for the colors
hsl(204, 23.8%, 95.9%)I like that he uses Next.js but leverages “next export” for full static build, (No GSP, or GSSP necessary for a project this simple)