Scribd
Upload
5 views23 pages

Slides

This document outlines the process for creating, customizing, and deploying a JavaScript portfolio website using a React-based template and GitHub Codespaces. It provides step-by-step instructions for setting up the project, customizing content, and deploying the site on platforms like Azure Static Web Apps or GitHub Pages. The template is designed for educators and students with zero experience in web development, making it accessible for all levels.

Uploaded by

vanamaakhilraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views23 pages

Slides

This document outlines the process for creating, customizing, and deploying a JavaScript portfolio website using a React-based template and GitHub Codespaces. It provides step-by-step instructions for setting up the project, customizing content, and deploying the site on platforms like Azure Static Web Apps or GitHub Pages. The template is designed for educators and students with zero experience in web development, making it accessible for all levels.

Uploaded by

vanamaakhilraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

JavaScript Portfolio Site

with GitHub Codespaces

Create, customize and deploy your own


portfolio website in minutes.
Audience
Educators of all levels

Zero Experience

About this required from students

Can I use this template for other


template Web Frameworks?

No requirements
About this portfolio
template

We have a React based web


application ready for you to
easily customize and deploy
using only your web browser.
JavaScript portfolio
template
http://aka.ms/JSCodespacesProject
/.devcontainer

.devcontainer/Dockerfile
Important files 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

.eslintrc
Important files .prettierrc

package.json and package-


lock.json
🚀 Simple React application

Parcel in place to build your site


when deploying

Getting started Code linting and formattting


using ESLint and Prettier for code
consistency.
Create your portfolio
following these steps:

Create a repo from this template.


Use this create repo link

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".
🚀 Run this template
following these steps:

Wait as GitHub initializes the Codespace


🚀 Run this template
following these steps:

When complete you will see your


Codespace load with a terminal
section at the bottom.
Customize your site in 3
steps
Customize your site in 3 steps

Add your "about Update images Add items you've


me" and social worked on
accounts
1. Add your "about me" and social
accounts

Within App.jsx you will see a variable called siteProps.


2. Update images
Home.jsx

About.jsx

Portfolio.jsx
3. Add items you've worked on
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.
Deploy your web application
Azure Static Web Apps

With your Project open in Codespaces follow the


next steps
GitHub Pages

With your Project open in Codespaces follow the


next steps
1. Customize 2. Update to
your Codespace smooth scroll to
a section

Next
Challenges
3. Animate desk 4. Add a new
Follow the steps, here. photo section
Learn More
GitHub Codespaces docs
overview

Use dev containers locally

Additional questions
Found an issue or have
an idea for
improvement?
Help us make this template repository better by
letting us know and opening an issue!.
Thank you

You might also like