Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gdscwm/react-portfolio
Fall 2024 Workshop: Creating a website portfolio with React and Tailwind CSS.
https://github.com/gdscwm/react-portfolio
portfolio-website react tailwind
Last synced: about 1 month ago
JSON representation
Fall 2024 Workshop: Creating a website portfolio with React and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/gdscwm/react-portfolio
- Owner: gdscwm
- License: mit
- Created: 2024-09-13T04:45:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-01T23:56:45.000Z (4 months ago)
- Last Synced: 2024-11-06T20:13:53.042Z (3 months ago)
- Topics: portfolio-website, react, tailwind
- Language: TypeScript
- Homepage:
- Size: 11.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GDSC Fall 2024 Workshop Series: Building a Portfolio Website
In this workshop, we will be using the following technologies to build a portfolio web application:
- **React**: A UI library that provides APIs for attaching UI components to the Document Object Model (DOM) and utilizing features like state management and rendering algorithms.
- **Next.js**: A React framework that allows you to build React apps by providing the features that React is missing out of the box, such as a router, data fetching, server-side rendering, and bundling.
- **Tailwind CSS**: A CSS framework with a "utility-first" approach, designed for fast development and easy maintenance, that integrates well with component-based UI frameworks like React.
For a more thorough breakdown of these technologies, watch the following brief videos:
- [React in 100 seconds](https://www.youtube.com/watch?v=mr15Xzb1Ook)
- [Tailwind in 100 seconds](https://www.youtube.com/watch?v=Tn6-PIqc4UM)
## Prerequisites
### Install npm
#### Checking your version of npm and Node.js
To see if you already have Node.js (and by extension, Next.js) and npm installed and to check the installed version, run the following commands:
```bash
node -v
npm -v
npx next --version
```
#### Using a Node package manager to install Node.js and npm
If you don't have Node.js adn npm installed, you can use a Node installer to install both Node.js and npm on your system.
- [Node.js installer](https://nodejs.org/en/download/package-manager)
- [NodeSource installer](https://github.com/nodesource/distributions)
If you use Linux, we recommend that you use a NodeSource installer.
##### OS X or Windows Node installers
If you're using OS X or Windows, use one of the installers from the [Node.js download page](https://nodejs.org/en/download/). Make sure to install the version labeled LTS.
##### Linux or other operating systems Node installers
If you're using Linux or another operating system, use one of the following installers:
- [NodeSource installer](https://github.com/nodesource/distributions) (recommended)
- One of the installers on the [Node.js download page](https://nodejs.org/en/download/)
- Or see [this page](https://nodejs.org/en/download/package-manager/) to install npm for Linux in the way many Linux developers prefer.
Make sure you have Node.js (and by extension, Next.js) installed. Check your versions with the following commands:
#### Using a prebuilt installer to install Node.js and npm
If you're unable or uncomfortable with installing Node.js and npm from the command line, feel free to use the prebuilt to download Node.js to your laptop [here](https://nodejs.org/en/download/prebuilt-installer).
### Check that you can use Node.js and npm from the command line
After installation, verify that `/usr/local/bin` is in your `$PATH`:
```bash
echo $PATH
```
If `/usr/local/bin` is missing from the output, add it to your `$PATH` by editing your `~/.zprofile` file and adding the following line:
```bash
export PATH=/usr/local/bin:$PATH
```
### Start Next.js app
If you have a directory for workshops, navigate there using the command `cd`. If not, then create a new directory for your workshops:
```bash
mkdir gdsc-workshops
```
Navigate to that directory, then start a new Next.js app by running:
```bash
npx create-next-app@latest
```
On installation, you'll see the following prompts. Respond to all (we recommend you choose the default values):
```bash
What is your project named? portfolio
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a src/ directory? No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No
```
After the prompts, `create-next-app` will create a new folder with your project name and install the necessary dependencies.
> **Tip:** For a faster process, simply run `npx create-next-app@latest portfolio --typescript --eslint --tailwind` and answer the following prompts with the recommended default values:
> ```bash
> Would you like your code inside a src/ directory? No
> Would you like to use App Router? (recommended) Yes
> Would you like to customize the import alias (@/* by default)? No
> ```
### Install Tailwind CSS
Since we're using Tailwind with Next.js, reference [this documentation](https://tailwindcss.com/docs/guides/nextjs).
#### Install via `npm` and create the configuration file.
Here, we install Tailwind CSS and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
We will create our own configuration file in case we want to customize our media query breakpoints, add custom colors or fonts, or otherwise fine-tune our Tailwind CSS configuration later.
#### Configure your template paths
Add the paths to all of your template files in your `tailwind.config.js` file.
```js
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
Configuring the paths to all your content files tells Tailwind about every single file in your project that contains any Tailwind class names so that it can scan all your files for class names and generate all of the corresponding CSS for those styles.
### Grab images (optional)
Ensure you are not within the `react-portfolio` project directory. Once you have, to clone the images you need for this project, go to the GitHub repository and click the green `Code` button. Clone using the web URL (HTTPS) with this command:
```bash
git clone
```
There should just be one folder called `public`. Move this one folder into your `react-portfolio` project directory.
The easiest way to do this is via file explorer by dragging the folder into your project directory, then returning to your project folder in the command line and deleting the cloned repository manually.
### Start server
Run the following command to start the project.
```bash
npm run dev
```
This will start a local development server at port 3000 by default. In simpler terms, this will be a local version of your portfolio website that will change with your files and let you see what the website looks like in real-time. Your portfolio website can be accessed at http://localhost:3000.
**Tip:** Split your windows between your code editor/IDE and the local development server to see real-time updates.
## Some more setup
Before we begin building this portfolio, let's download some React icons for later. Run the following command:
```bash
npm i react-icons
````
If you're using VSCode as your code editor, now is the time to add the Tailwind CSS extension!
> **Optional:** Simply go down the sidebar on the left until you're hovering over the Extensions icon, click the icon, and then search for "Tailwind." Install the first extension, which should be called "Tailwind CSS IntelliSense."
> To enable the autocomplete and linting features, click the gear icon, select "Extension Settings," and first search for "files.associations," which should have one item added with the item being `*.css` and the value being `tailwindcss`. This tells VSCode to always open `.css` files in Tailwind CSS mode.
> Second, search for "editor.quickSuggestions" and make sure the value for the item `strings` is `on`. This tells VSCode to trigger completions for string content, too.
Now, from the open project directory, look for the `app` folder. Inside the app folder, find and open up the `page.tsx` file. After you clear away all the existing content, write the following lines of code.
```js
// Type definition that helps manage metadata
import type { Metadata } from 'next'
// Defines some metadata, e.g. sets title
export const metadata: Metadata = {
title: 'Kathy Rowe Portfolio',
}
// Creates functional component Page
export default function Page() {
return (
<>
Kathy Rowe Portfolio
>
);
}
```
One thing we need to do to get Tailwind working is to open up `globals.css` file and add some changes.
Remove this entire rule (since we will later use Tailwind to make our own media queries).
```js
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
```
Then, add the following lines of code to the top of the `globals.css` file to include all the neccessary classes and utilities to make our Tailwind code functional.
```js
@tailwind base;
@tailwind components;
@tailwind utilities;
```
# End of Workshop One.
## Begin coding
### Creating the nav bar
We're going to start with a nav bar that contains a title, an icon for dark mode, and a button for your resume.
To do this, first import the icon for dark mode from the React icons package we previously downloaded at the top of the file.
```js
import { BsFillMoonStarsFill } from 'react-icons/bs';
```
Then, create a new `` from within our `` element to enclose the nav bar. Add the `nav` element with the new section and give it a title, which will be your full name. From within that nav bar, add a `
- ` tag, which is where the dark mode icon and the button are going to go. We want the nav bar to fill up the page horizontally and for there to be some padding, so apply classes to style the elements on the page.
-
Resume
-
Enhanced guest experience by welcoming, thanking, and exceeding service expectations.
-
Focused on guest interaction and effective resolution of service issues.
-
Enhanced guest experience by welcoming, thanking, and exceeding service expectations.
-
Focused on guest interaction and effective resolution of service issues.
```js
Kathy Rowe
```
**Tip:** One way to check if you have the Tailwind extension installed with the autocomplete and linting features enabled is to simply type out `className=''` and add a space between the quotes. There should be a list of utility classes that pop up as options.
But the Resume button is still unstyled and too close to the dark mode icon. Let's apply some styling and padding to the ` tag to make it look more like a button, as well as a nice gradient. Add a link to your resume to the `href` attribute.
```js
```
**Extra:** Here's some [examples of a good resume](https://www.overleaf.com/latex/templates/jakes-resume/syzfjbzwjncs) to keep in mind.
### Creating the main page
Let's move on to the main page. Under the `nav` element, create a new `div`. This will be the container for everything within this section.
```js
```
The classes above just ensure that everything is centered perfectly, both vertically and horizontally.
Then, start another `div` within in and include your full name, your most recent role, and some (brief!) background on what you do.
```js
Kathy Rowe
28th President of William & Mary.
Nationally recognized as an innovator in higher education, I champion the liberal arts,
entrepreneurship and strengthening education-workforce pathways.
```
Let's add some buttons with icons represented the various ways someone could contact you. Write out the following import statement at the top of this file.
```js
import {
AiFillLinkedin,
AiFillTwitterCircle,
AiFillMail,
AiFillGithub
} from 'react-icons/ai';
```
Start another `div` and add those icons to `` tags to create clickable icons linking to your various social media platforms.
```js
```
Now, let's add some styling!
```js
KATHY ROWE
28th President of William & Mary 👋
Nationally recognized as an innovator in higher education,
I champion the liberal arts, entrepreneurship and
strengthening education-workforce pathways.
```
For our next step, you are going to import an image of yourself (preferably a professional headshot, but any well-lit image will do), so you will need to upload that image to the `public` folder, then import both the `Image` component and your image at the top of the file.
```js
import Image from 'next/image';
import kathy from '../public/kathy.jpg';
```
Then, start a new `div` and add an `Image` component with the `src` as the image you imported.
```js
```
But now this image isn't _quite_ centered properly. Let's fix that with some styling.
```js
```
There we go!
This will ensure that your image is centered and styled correctly. The `relative` and `overflow-hidden` classes help keep your image properly framed within the rounded container.
Before we move on, let's check that this is our final product.
```js
KATHY ROWE
28th President of William & Mary 👋
Nationally recognized as an innovator in higher education,
I champion the liberal arts, entrepreneurship and
strengthening education-workforce pathways.
```
# End of Workshop Two.
### Creating the education page
Now that you have the main page done, let's move on to the second section! This will be where you put all your education, which should include college (and high school if you are a freshmen or sophomore).
Start off with creating a new `section`. This will serve as the container holding all the elements we use for this page.
```js
EDUCATION
```
Next, add these styling classes.
```js
EDUCATION
```
Now, we have a title, but nothing else. Let's add the schools you went to and which years you went to them as text, using the `
` tag.
The following code should be placed after the heading (this line: `
EDUCATION
`).```js
College of William and Mary
MAY 2026
```
But this text looks a little lonely... why don't we put some more information? For example, like your major(s)/minor and any classes relevant to your desired career.
If you haven't declared a major yet, you can put down whichever major(s) you're most strongly considering, or the major(s) that you applied with.
### Creating the experience page
Now that you have the education page done, let's move on to the third section! This will be where you put all your experience.
To make things faster, simply copy over the Education section here and remove all of the text specific to that section. Here's an example of what that might look like.
```js
EXPERIENCE
Target
SEP 2021 – AUG 2026
Guest Advocate, Cart/Store Attendant
```
### Creating the portfolio
Now that you have the education and experience pages done, let's move on to the third section!
If you are a CS major or intend to work in the computer science field, this will be where you put all of your personal projects.
If you are not, this is a great place to put research, writing samples, etc.
We will build this out step by step during the in-person workshop, but to cut things short here, this is how it should resemble.
```js
{/* PROJECTS */}
PROJECTS
Portfolio Website
```
## Implementing responsive web design
When creating your portfolio, one thing to keep in mind is making sure that it is responsive to a variety of devices and renders well no matter the window or screen size of the device.
### Responsive padding
Adjust padding based on screen size to optimize space usage:
```jsx
```
This provides less padding on mobile devices and gradually increases it for larger screens.
### Responsive typography
Adjust font sizes for different screen sizes:
```jsx
KATHY ROWE
28th President of William & Mary 👋
```
This ensures readable text on small screens while allowing for larger, more impactful text on bigger screens.
### Consistent paragraph layout
Set a maximum width and center the text for a more consistent shape and alignment:
```jsx
Nationally recognized as an innovator in higher education,
I champion the liberal arts, entrepreneurship and
strengthening education-workforce pathways.
```
The `max-w-lg` class sets a maximum width, while `mx-auto` centers the text on small screens. `sm:mx-0` aligns it to the left on larger screens.
### Responsive images
Adjust image size based on screen size:
```jsx
```
This progressively increases the image size as the screen gets larger, ensuring it looks good on all devices.
### Responsive layout
Adjust the layout for different screen sizes:
```jsx
{/* Content here */}
{/* Image div here */}
```
This stacks the content vertically on small screens and switches to a side-by-side layout on larger screens.
### Responsive icons
Adjust icon sizes and spacing for different screen sizes:
```jsx
```
This adjusts the icon size and spacing between icons based on screen size, while also adding hover effects for better interactivity.
By implementing these responsive design techniques, your portfolio will look great and function well across a wide range of devices, from mobile phones to large desktop screens.
## Adding dark mode
Go back to the top of the `page.tsx` file and add this import statement.
```js
import { useState } from 'react';
```
> `useState` is a React Hook that lets you add a state variable to your component and returns an array with exactly two values:
>
> 1. The current state. During the first render, it will match the initialState you have passed.
> 2. The set function that lets you update the state to a different value and trigger a re-render.
>
> Because `useState` is a Hook, you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions. If you need to do that, extract a new component and move the state into it. Interested in learning more? Read the React docs here: https://react.dev/reference/react/useState.
Now, go to the top of the `Page` function responsible for rendering your portfolio and initialize a state variable to manage dark mode enabling.
```js
export default function Page() {
const [darkMode, setDarkMode] = useState(false);
```
Tailwind should already be able to check your system preferences or browser settings to see if you're in dark mode and adapt accordinly, but what we want to be able to toggle between dark and light mode by clicking this button. To do that, you need to modify the `tailwind.config.js` file.
What adding this line in `module.exports` means is that you now are able to toggle dark mode based off a class and not anything externally. To trigger this, all you need to do is add a class name to the entire web app.
```js
return (
```
Adding this class will likely trigger an error if you have Next.js 13+ installed. This is because, by default, all components in the App Router are Server Components where these APIs are not available. By defining the "use client" directive in toggle.js, you can tell React to enter the client boundary where these APIs are available.
To fix this, add this line to the very top of your file, even before all the import statements.
```js
'use client'
```
Read up on the Next.js docs if you're curious about what caused this error: https://nextjs.org/docs/app/building-your-application/rendering/client-components.
Now, locate the line where the dark mode icon resides and add the following code.
```js
setDarkMode(!darkMode)} className='cursor-pointer text-2xl'/>
```
This adds an `onClick` event whenever this icon is clicked and sets it to an arrow function that toggles dark mode.
Then, you're going to add the following classes to some of your elements to style this page when it's in dark mode.
```js
```
```js
```
```js
28th President of William & Mary 👋
Nationally recognized as an innovator in higher education,
I champion the liberal arts, entrepreneurship and
strengthening education-workforce pathways.
```
```js
```
The last two sections feature more extensive modifications, so they are detailed in full below.
```js
{/* EDUCATION */}
EDUCATION
College of William and Mary
MAY 2026
Bachelor's of Science in Computer Science
Coursework: Computational Problem Solving, Calculus II
Random High School
MAY 2022
High School Diploma
Coursework: AP Computer Science A, CS Programming, Web Page Development, Calculus I
```
```js
{/* EXPERIENCE */}
EXPERIENCE
Target
SEP 2021 – AUG 2026
Guest Advocate, Cart/Store Attendant
```
## Credit
This workshop was inspired by the following resources:
- developedbyed's [React Portfolio Website With Tailwind Tutorial](https://www.youtube.com/watch?v=k-Pi5ZMxHWY) on YouTube.
- [Stefan Topalovic's portfolio](https://www.stefantopalovic.com/).
## More information
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.