JavaScript Portfolio Site with GitHub Codespaces

Create, customize and deploy your own portfolio website in minutes.

With this JavaScript Codespace template repository we have the development environment and base set and ready to go. You can immediately take this template, and focus on how you want to customize without any setup.

Who is this for? Anyone looking to create a portfolio site, learn web development, or just looking to test out Codepsaces.
How much experience do you need? Zero. This template is built ready for all, regardless of experience level. You get to decided how much you'd like to customize and extend.
Tools needed: None. No need to install anything! All you need is a web browser.
Prerequisites: None. This template will provide you a working and deployable web app you can immediately extend to create your own site with no web development background.

About this portfolio template

Our goal is to give a way to quickly create, customize and deploy your own portfolio website using GitHub Codespaces. This project is built to be a bit of "choose your own adventure", meaning you can customize it, and give it as much or as little time as you have.

Using this template you will:

Learn how to use Codespaces (all you need is a web browser)
Learn a bit of JavaScript, React, HTML and CSS
Create your own free personalized and deployed live website
Have something you can build on to highlight your work as build new projects

What is GitHub Codespace and how will it help me?

A Codespace is a development environment that's hosted in the cloud that you can configure.

Quick Start

Click the Use this Template button
Select the repository owner (e.g. your GitHub account)
Enter a unique name for your new repository
Click the Code button
Click Create Codespace on main button

Why use it

Repeatable environment offering a 0-config experience.
Runs in the cloud.
Can be configured and customized.
Integrates with your repositories on GitHub.

🎥 Watch the video tutorial to learn more about Codespaces

🗃️ JavsScript portfolio template

This repo is a GitHub template to build a JavaScript personal portfolio frontend web application using the React framework. The goal is to give you a template to you can immediately utilize to create your own website through Codespaces.

The repo contains the following:

/.devcontainer
- .devcontainer/Dockerfile: Configuration file used by Codespaces to determine operating system and other details.
- .devcontainer/devcontainer.json: Configuration file used by Codespaces to configure Visual Studio Code settings, such as the enabling of additional extensions.
/src: HTML, JS and CSS files used to build your portfolio site.
.eslintrc: Settings for ESLint that is included for code consistency and quality.
.prettierrc: Settings for Prettier that is used to format code.
package.json and package-lock.json: Defines the project information for Node.js, dependent packages and the versions needed of each.

🚀 Getting started

This portfolio site project is filled with sample data so that you can immediately open in Codespaces, see it running, and deploy at any point.

Your development environment is all set for you to start. Based on our JavaScript Codespace Template (React), here is what s already setup and ready for you to use:

Simple React application with components for each section of the portfolio site
Parcel in place to build your site when deploying
Code linting and formattting using ESLint and Prettier for code consistency.

Create your portfolio

Create a repository from this template. Use this create repo link. Select the repository owner, provide a name, a description if you'd like and if you'd like the new repository to be public or private.
Navigate to the main page of the newly created repository.
Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".
Wait as GitHub initializes the Codespace.

When complete you will see your Codespace load with a terminal section at the bottom. Here you will see npm install executing. When complete you will return to the terminal prompt where you can run the web application by executing: npm run start

When the web application is started you will see a prompt telling you it started successfully on port 1234, and you can open that site within your browser:

✨ Customize your site in 3 steps

This project is built to be easily customizable. Each section of the site is a separate component, and your information needs to be set in only one spot. This is not only for ease of updating, but so you can see how prop values are passed to React components.

For each step, open the project in Codespaces, then you can make and commit your changes while within your Codespace.

See Using source control in your codespace for more Codespaces source control how-tos

Step 1: Add your "about me" and social accounts

Within App.jsx you will see a variable called siteProps. This is a JavaScript object that hold the key value pairs needed to customize your name, title, email and social accounts.

Update to the name and title you'd like displayed at the top of your site.

Optional values are email address and social accounts. These are used in the Footer component. If any item is not included in the list, or set to an empty string ("") it will not display the icon and link.

Step 2: Update images

This portfolio site includes 3 images: top section background, "About me" background and portfolio section (desk). These can be any landscape sized images of your choosing from your own collection, or found that have a license allowing you to use without attribution.

A couple possible sites to find photos are Pixabay and Unsplash. Photos, illustrations, vectors, your choice! When you found your images, save each one to /src/images with a short, meaningful file name.

Go to the following components to update the import image... line to reference the new image you downloaded for that section:

Home.jsx - section at top of the page, main image you will see when site loads (woman standing by server wall in sample)
About.jsx - background behind the detailed "about me" section (abstract mosaic in sample)
Portfolio.jsx- image highted in left hand side of section (design desk photo in sample)

Step 3: Add items you've worked on

The portfolio section is the area for you to highlight items you've worked on. These would be articles, videos, logo designs, GitHub projects, anything that highlights you!

Go to Portfolio.jsx to the projectList variable. This is a JavaScript array of objects. Each item you want to highlight needs: title, description and URL.

The sample design has 4, but the number you include is up to you.

🏃 Deploy your web application

Project includes the setup needed for you to deploy free to both Azure Static Web Apps and GitHub Pages.

Azure Static Web Apps

Azure Static Web Apps is Microsoft's hosting solution through Azure for static sites (or sites that are rendered in the user's browser, not on a server). Will provide you additional opportunities to expand your site through Azure Functions, authentication, staging versions and more.

With your project open in Codespaces:

Go to the Azure icon in the left sidebar. Log in if you are not already. If you are new to Azure, follow the provide prompts to create your account.
From Azure menu click “+” sign and then “Create Static Web App”.
If you are not logged into GitHub you will be prompted to log in, and if you have any pending file changes you will then be prompted to commit those changes.
You will be prompted to set you application information:
1. Region: pick the one closest to you
2. Project structure: select "React"
3. Location of application code: /
4. Build location: dist
When complete you will see notification at the bottom of your screen, and a new GitHub Action workflow will be added to your project. If you click “Open Action in GitHub” you will see the action that was created for you, and it is currently running.

GitHub Pages

GitHub Pages allows you to host websites directly from your GitHub repository. This project is already set up for you to get your portfolio deployed to GitHub pages with minimal steps.

With your project open in Codespaces:

Go to package.json and find the "homepage" value, and update it to http://{github-username}.github.io/{repo-name}, where github-username is your GitHub username and repo-name is the what you named this portfolio repo when you created it.
Commit and push that change to package.json to your GitHub remote repo.
Open a new terminal from the menu or by pressing crtl + shift + ```
Within the terminal window run npm run deploy. This will first run the predeploy script to build the project, followed by the deploy script that will push those bundled files to a new branch on your repo (gh-pages) that will be used for you GitHub Pages site.
When completed, within your repo, go to Settings and Pages. There you will see that a page has been set up to for you against the gh-pages branch, and you should see the url (that should match the “homepage” value you set in package.json)

Challenges

1. Customize your Codespace

Your environment comes with preinstalled extensions. You can change which extensions your Codespaces environment starts with, here's how:

Open file .devcontainer/devcontainer.json and locate the following JSON element extensions

"extensions": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "ms-vscode.azure-account",
     "ms-azuretools.vscode-azurestaticwebapps"
]

Let's add the indent-rainbow extension. To do this, go to the extensions list and add:
```
"oderwat.indent-rainbow"
```
What you did above was to add the unique identifier of an extension of the indent-rainbow. This will let Codespaces know that this extension should be pre-installed upon startup.

To find the unique identifier of an extension:

Navigate to the extension's web page, like so https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Locate the Unique Identifier field under More info section on your right side.

💡 Learn more here, https://docs.github.com/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account

2. Update to smooth scroll to a section

In your site header you have links to each section below. Click one of these links and watch it scroll the page to that section. Not really a scroll right?

Let's make this a better user experience by slowing that down so the user has a sense of what is happening, and where they are navigating to on the page.

Open styles.css, which is the stylesheet for your portfolio application. We need to add a style for html. If you look, you'll see right now html and body styles are being set together, so let's add the following css snippet to set the scrolling for the html element:

html {
  scroll-behavior: smooth;
}

Your site should already be running in your Codespace, and the change will reload onto the page automatically. Click a link in the top header to see the smooth scroll in action.

3. Animate desk photo

Animations are a way you can easily add some motion to elements on your page to increase user interactivity, and highlight items you want to make sure they notice. Let's animate the desk photo in the portfolio section.

Start by opening your site's stylesheet, styles.css within your Codespace. We are going to first define the animation sequence by adding a @keyframes definition to slide in from the left:

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

Now that we have defined our slideInLeft animation sequence we can tell our desk photo to animate itself with that sequence. Open up the Portfolio.jsx component in your Codespaces, and find the img tag. You wills ee it utilizes inline CSS to set it's styling. Within it's style definition add the following:

animation: "1s ease-out 0s 1 slideInLeft";

Your image tag should look something like:

<img src={image} style={{ height: "90%", width: "100%", objectFit: "cover", animation: "1s ease-out 0s 1 slideInLeft" }} />

Your site should already be running in your Codespace, and the change will reload onto the page automatically. Scroll up and down the page and watch your desk photo slide onto the page.

Bonus: Animate scroll down arrow

4. Add a new section

We started you off with a few basic sections for your portfolio site, but you have creative freedom to make it your own. That includes adding new sections. For example, let's add an education section to your site.

Start by creating the new component for the section. Within the Components folder, add a new file Education.jsx. This will be our new education section.

Within that file add the component function, export and information you'd like to include:

import React from "react";

const Education = () => {
    return(
        <section className="light" id="portfolio">
            <h2>Education</h2>
        </section>
    )
}

export default Education;

Now, let's import this new component into our App.jsx and have it render. Within your App.jsx file import your new Education component at the top by adding the following:

import Footer from "./Components/Footer";

Then below in the rendering of App, add the Education component were you would like it to render within the page by inserting:

<Education />

In your Codespace, your portfolio application should be running and will reload your site with the changes.

📚 Other Resources

🔎 Found an issue or have an idea for improvement?

Help us make this template repository better by letting us know and opening an issue!.

errortax/MLSA_onboarding