Frontend User Input Form

Created on: November 20, 2024

Answered using OpenAI 01 Preview by OpenAI01

Question

// gitprofile.config.js

const config = {
github: {
username: 'hoesungryu', // Your GitHub org/user name. (Required)
sortBy: 'updated', // stars | updated
limit: 6, // How many projects to display.
exclude: {
forks: false, // Forked projects will not be displayed if set to true.
projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
},
},
social: {
linkedin: '',
twitter: '',
facebook: '',
instagram: 'hoesungryu',
dribbble: '',
behance: '',
medium: 'hoesungryudev',
dev: '',
stackoverflow: '', // format: userid/username
website: 'https://hoesungryu.github.io',
phone: '',
email: '[email protected]',
},
resume: {
fileUrl: '0710_2023.pdf', // Empty filßUrl will hide the `Download Resume` button.
},
skills: [
'Python',
'Pytorch/Tensorflow',
'C++',
'R',
'MATLAB',
'MySQL',
'Git',
'Docker',
'Unity3D',
'OpenVINO',
],
experiences: [
{
company: 'Yonsei University',
position: 'Researcher',
from: '2019',
to: '2020',
companyLink: '',
},
],
education: [
{
institution: 'Korea University',
degree: 'Department of Artificial Intelligence',
from: '',
to: 'Ph.D student',
},
{
institution: 'Yonsei University',
degree: 'Department of Mathematics',
from: '',
to: 'MS',
},
],
// Display blog posts from your medium or dev account. (Optional)
blog: {
source: 'medium', // medium | dev
username: 'hoesungryudev', // to hide blog section, keep it empty
limit: 5, // How many posts to display. Max is 10.
},
googleAnalytics: {
id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
},
// Track visitor interaction and behavior. https://www.hotjar.com
hotjar: {
id: '',
snippetVersion: 6,
},
themeConfig: {
// defaultTheme: 'business',
defaultTheme: 'dracula',
// Hides the switch in the navbar
// Useful if you want to support a single color mode
disableSwitch: false,

// Should use the prefers-color-scheme media-query,
// using user system preferences, instead of the hardcoded defaultTheme
respectPrefersColorScheme: false,

// Hide the ring in Profile picture
hideAvatarRing: false,

// Available themes. To remove any theme, exclude from here.
themes: [
'light',
'dark',
'cupcake',
'bumblebee',
'emerald',
'corporate',
'synthwave',
'retro',
'cyberpunk',
'valentine',
'halloween',
'garden',
'forest',
'aqua',
'lofi',
'pastel',
'fantasy',
'wireframe',
'black',
'luxury',
'dracula',
'cmyk',
'autumn',
'business',
'acid',
'lemonade',
'night',
'coffee',
'winter',
'procyon',
],

// Custom theme
customTheme: {
primary: '#fc055b',
secondary: '#219aaf',
accent: '#e8d03a',
neutral: '#2A2730',
'base-100': '#E3E3ED',
'--rounded-box': '3rem',
'--rounded-btn': '3rem',
},
},
};

export default config;
hpw to make a fortnend so that suer can just enter the details easily using forntend and instead of asking educationd etails ask linekdin url to fetch the details do thsi modification seperately for the repo Skip to content
Navigation Menu
hoesungryu
/
hoesungryu.github.io

Type / to search
Code
Pull requests
Actions
Projects
Security
Insights
Owner avatar
hoesungryu.github.io
Public
forked from arifszn/gitprofile
hoesungryu/hoesungryu.github.io
Go to file
t
Add file
This branch is 26 commits ahead of, 504 commits behind arifszn/gitprofile:main.
Folders and files
Name
Latest commit
hoesungryu
hoesungryu
10_July_2023
979a146
·
last year
History
.github
Upgrade GitHub action/cache to v3 arifszn#221
2 years ago
public
10_July_2023
last year
src
Allow linking Stack Overflow account/profile arifszn#226
2 years ago
types
Allow linking Stack Overflow account/profile arifszn#226
2 years ago
.eslintignore
Create .eslintignore
2 years ago
.eslintrc.js
Create .eslintrc.js
2 years ago
.gitignore
Initialize with vite.js
2 years ago
.npmignore
Rename tailwind.config file
2 years ago
.prettierignore
Create .prettierignore
2 years ago
.prettierrc
Allow CRLF when linting arifszn#198
2 years ago
CODE_OF_CONDUCT.md
Add code of conduct
2 years ago
CONTRIBUTING.md
Update contributing guide
2 years ago
LICENSE
Add MIT License
2 years ago
README.md
Document Stack Overflow social link arifszn#226
2 years ago
gitprofile.config.js
10_July_2023
last year
index.html
version_0.1
2 years ago
library.config.js
Rename tailwind.config file
2 years ago
package-lock.json
0130
last year
package.json
0130
last year
tailwind.config.mjs
Rename tailwind.config file
2 years ago
vite.config.js
3
2 years ago
Repository files navigation
README
Code of conduct
License

Easy to use automatic portfolio builder for every GitHub user!

View Demo · Report Bug · Request Feature

Shadow

GitProfile is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.

Features:

✓ Easy to Setup
✓ 30 Themes
✓ Google Analytics
✓ Hotjar
✓ SEO
✓ Avatar and Bio
✓ Social Links
✓ Skill Section
✓ Experience Section
✓ Education Section
✓ Projects Section
✓ Blog Posts Section

To view a live example, click here.

Or try it online.

Themes

🎉 Thank you for the 400 ★
Thank You

🛠 Installation & Setup
There are three ways to use GitProfile. Use any.

Forking this repo (recommended)
Setting up locally
Installing as package
Forking this repo
These instructions will get you a copy of the project and deploy your portfolio online!

Fork repo: Click here to fork the repo so you have your own project to customize. A "fork" is a copy of a repository.

Rename repo:

If you want to host your portfolio at https://<USERNAME>.github.io, rename your forked repository to username.github.io in GitHub, where username is your GitHub username (or organization name).
If you want to host your portfolio at https://<USERNAME>.github.io/<REPO> (e.g. https://<USERNAME>.github.io/portfolio), rename your forked repository to <REPO> (e.g. portfolio) in GitHub.
Enable workflows: Go to your repo's Actions tab and enable workflows.

Workflows

Base Value: Open vite.config.js, and change base's value.

If you are deploying to https://<USERNAME>.github.io, set base to '/'.

If you are deploying to https://<USERNAME>.github.io/<REPO> (e.g. https://<USERNAME>.github.io/portfolio), then set base to '/<REPO>/' (e.g. '/portfolio/').

// vite.config.js
{
base: '/',
// ...
}
Commit the changes: Now commit to your main branch with your changes. Wait a few minutes so that the CI/CD pipeline can publish your website to GitHub Pages. You can check the progress in the Actions tab.

Your portfolio website will be live shortly. Any time you commit a change to the main branch, the website will be automatically updated. If you face any issue viewing the website, double-check the base value in the vite.config.js file. Also, check if Source is set to GitHub Actions in Settings ➜ Pages ➜ Build and deployment.

If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's Settings ➜ Pages ➜ Custom domain.

As this is a Vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this doc for a detailed deployment guide to other services.

Setting up locally
Clone the project and change directory.

git clone https://github.com/arifszn/gitprofile.git
cd gitprofile
Install dependencies.

npm install
Run dev server.

npm run dev
Finally, visit http://localhost:5173/gitprofile/ from your browser.

Installing as package
You can also use GitProfile by installing as an NPM package. First Install GitProfile via NPM.

npm install @arifszn/gitprofile
Or via Yarn.

yarn add @arifszn/gitprofile
Then, import the package, import and style and provide the config.

import GitProfile from '@arifszn/gitprofile';
import '@arifszn/gitprofile/dist/style.css';

function App() {
return (
<GitProfile
config={{
github: {
username: 'arifszn',
},
}}
/>
);
}

export default App;
List of all config here.

If you face any problems or have any questions, open an issue here.

🎨 Customization
All the magic happens in the file gitprofile.config.js. Open it and modify it according to your preference.

// gitprofile.config.js

const config = {
github: {
username: 'arifszn', // Your GitHub org/user name. (Required)
sortBy: 'stars', // stars | updated
limit: 8, // How many projects to display.
exclude: {
forks: false, // Forked projects will not be displayed if set to true.
projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
},
},
social: {
linkedin: '',
twitter: '',
facebook: '',
instagram: '',
dribbble: '',
behance: '',
medium: '',
dev: '',
stackoverflow: '',
website: '',
phone: '',
email: '',
},
resume: {
fileUrl: '', // Empty fileUrl will hide the `Download Resume` button.
},
skills: ['JavaScript', 'React.js'],
experiences: [
{
company: 'Company Name',
position: 'Position',
from: 'September 2021',
to: 'Present',
companyLink: 'https://example.com',
},
{
company: 'Company Name',
position: 'Position',
from: 'July 2019',
to: 'August 2021',
companyLink: 'https://example.com',
},
],
education: [
{
institution: 'Institution Name',
degree: 'Degree',
from: '2015',
to: '2019',
},
{
institution: 'Institution Name',
degree: 'Degree',
from: '2012',
to: '2014',
},
],
// Display blog posts from your medium or dev account. (Optional)
blog: {
source: 'dev', // medium | dev
username: 'arifszn', // to hide blog section, keep it empty
limit: 5, // How many posts to display. Max is 10.
},
googleAnalytics: {
id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
},
// Track visitor interaction and behavior. https://www.hotjar.com
hotjar: {
id: '',
snippetVersion: 6,
},
themeConfig: {
defaultTheme: 'light',

// Hides the theme change switch
// Useful if you want to support a single color mode
disableSwitch: false,

// Should use the prefers-color-scheme media-query,
// using user system preferences, instead of the hardcoded defaultTheme
respectPrefersColorScheme: true,

// Hide the ring in Profile picture
hideAvatarRing: false,

// Available themes. To remove any theme, exclude from here.
themes: [
'light',
'dark',
'cupcake',
'bumblebee',
'emerald',
'corporate',
'synthwave',
'retro',
'cyberpunk',
'valentine',
'halloween',
'garden',
'forest',
'aqua',
'lofi',
'pastel',
'fantasy',
'wireframe',
'black',
'luxury',
'dracula',
'cmyk',
'autumn',
'business',
'acid',
'lemonade',
'night',
'coffee',
'winter',
'procyon',
],

// Custom theme
customTheme: {
primary: '#fc055b',
secondary: '#219aaf',
accent: '#e8d03a',
neutral: '#2A2730',
'base-100': '#E3E3ED',
'--rounded-box': '3rem',
'--rounded-btn': '3rem',
},
},
};
Themes
There are 30 themes available that can be selected from the dropdown.

The default theme can be specified.

// gitprofile.config.js
module.exports = {
// ...
themeConfig: {
defaultTheme: 'light',
// ...
},
};
Theme Dropdown

You can create your own custom theme by modifying these values. Theme procyon will have the custom styles.

// gitprofile.config.js
module.exports = {
// ...
themeConfig: {
customTheme: {
primary: '#fc055b',
secondary: '#219aaf',
accent: '#e8d03a',
neutral: '#2A2730',
'base-100': '#E3E3ED',
'--rounded-box': '3rem',
'--rounded-btn': '3rem',
},
// ...
},
};
Google Analytics
GitProfile supports both GA3 and GA4. If you do not want to use Google Analytics, keep the id empty.

// gitprofile.config.js
module.exports = {
// ...
googleAnalytics: {
id: '',
},
};
Besides tracking visitors, it will track click events on projects and blog posts, and send them to Google Analytics.

Hotjar
GitProfile supports hotjar to track visitor interaction and behavior. If you do not want to use Hotjar, keep the id empty.

// gitprofile.config.js
module.exports = {
// ...
hotjar: {
id: '',
snippetVersion: 6,
},
};
SEO
Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in public/index.html.

Avatar and Bio
Your avatar and bio will be fetched from GitHub automatically.

Social Links
You can link your social media services you're using, including LinkedIn, Twitter, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, personal website, phone and email.

// gitprofile.config.js
module.exports = {
// ...
social: {
linkedin: 'ariful-alam',
twitter: 'arif_szn',
facebook: '',
instagram: '',
dribbble: '',
behance: '',
medium: '',
dev: '',
stackoverflow: '',
website: '',
phone: '',
email: '',
},
};
Skills
To showcase your skills provide them here.

// gitprofile.config.js
module.exports = {
// ...
skills: ['JavaScript', 'React.js'],
};
Empty array will hide the skills section.

Experience
Provide your job history in experiences.

// gitprofile.config.js
module.exports = {
// ...
experiences: [
{
company: 'Company Name',
position: 'Position',
from: 'September 2021',
to: 'Present',
companyLink: 'https://example.com',
},
{
company: 'Company Name',
position: 'Position',
from: 'July 2019',
to: 'August 2021',
companyLink: 'https://example.com',
},
],
};
Empty array will hide the experience section.

Education
Provide your education history in education.

// gitprofile.config.js
module.exports = {
// ...
education: [
{
institution: 'Institution name 1',
degree: 'Bachelor of Science',
from: '2015',
to: '2019',
},
{
institution: 'Institution name 2',
degree: 'Higher Secondary Certificate (HSC)',
from: '2012',
to: '2014',
},
],
};
Empty array will hide the education section.

Projects
Your public repo from GitHub will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.

// gitprofile.config.js
module.exports = {
// ...
github: {
username: 'arifszn',
sortBy: 'stars',
limit: 8,
exclude: {
forks: false,
projects: ['my-project1', 'my-project2'],
},
},
};
Blog Posts
If you have medium or dev account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is 10).

// gitprofile.config.js
module.exports = {
// ...
blog: {
source: 'dev',
username: 'arifszn',
limit: 5,
},
};
Blog

The posts are fetched by blog.js.

💖 Support
You can show your support by starring this project. ★

Github Star
💡 Contribute
To contribute, see the Contributing guide.

📄 License
MIT

About
🚀 Create a dynamic portfolio by just providing your GitHub username.

arifszn.github.io/gitprofile
Resources
Readme
License
MIT license
Code of conduct
Code of conduct
Activity
Stars
2 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
No releases published
Packages
No packages published
Deployments
51
github-pages last year
+ 50 deployments
Languages
JavaScript
96.7%

CSS
2.5%

HTML
0.8%
Footer
© 2024 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
Status
Docs
Contact
Manage cookies
Do not share my personal information
Copied!

Thought

Evaluating configuration contents

I’m looking at a JavaScript configuration file for "GitProfile" and overlaying it with the user’s own setup. The file includes potentially duplicative lengthy content from a README, detailing setup and customization.

Envisioning functionalities

The user is thinking about a GitProfile project update, focusing on an intuitive frontend for easy details input and replacing educational info with LinkedIn URL to retrieve details.

Enhancing user experience

I’m working on creating a front-end for GitProfile to streamline user detail entry, replacing the manual config file edit. Also, planning to extract education details from LinkedIn using the provided URL.

Creating a user-friendly frontend

I'm mapping out the creation of a GitProfile project frontend to simplify user data entry. Instead of manual edits, users will input details, and LinkedIn URL will fetch education information.

Generating dynamic forms

Crafting a dynamic form on a React page to simplify user inputs, including education details fetched from LinkedIn.

Detailing profile form

I’m mapping out a profile form with fields like GitHub username, social media links, skills, and experiences. Utilizing React's state management to handle inputs and generate a dynamic configuration object.

Focusing on LinkedIn

I’m registering a LinkedIn app, setting up OAuth 2.0 for authentication, and using the API to fetch profile data. If this isn't possible, manually entering the data might be the next step.

Refining data sources

Hmm, I’m thinking about how not scraping LinkedIn. Instead, user-uploaded resumes in JSON or CSV formats could be a viable alternative for extracting education data.

Crafting the form

I created a functional React form with States for GitHub and LinkedIn URLs. The form has two input fields and a submit button to gather user inputs and compile them into a configuration object.

Integrating updates

I’m pulling together the main app component by incorporating GitProfile and ConfigForm. The goal is to seamlessly toggle between form submission and profile display.

Integrating LinkedIn

I’m showing how to authenticate users and fetch education details with an API integration, or considering a resume upload for manual entry.

Refining the application

I’m working through dynamic configurations and comprehensive testing for precise portfolio generation. Also, I'm weighing deployment options for scalability and user security.

Answer

To enhance your GitProfile project by adding a frontend for user input and fetching education details from LinkedIn, you'll need to make several modifications. Below is a step-by-step guide to help you achieve this:

1. Create a Frontend Form for User Input

Instead of requiring users to edit the gitprofile.config.js file manually, you can create a user-friendly form where they can enter their details.

a. Set Up a New React Component

Since GitProfile is built with React.js, you can add a new component for the form.

Example: Create a file named ConfigForm.jsx in the src/components directory.

// src/components/ConfigForm.jsx

import React, { useState } from 'react';

const ConfigForm = ({ onSubmit }) => {
  const [githubUsername, setGithubUsername] = useState('');
  const [linkedinUrl, setLinkedinUrl] = useState('');
  // ... other state variables for social links, skills, etc.

  const handleSubmit = (e) => {
    e.preventDefault();

    const config = {
      github: {
        username: githubUsername,
        // other GitHub config options
      },
      social: {
        linkedin: linkedinUrl,
        // other social links
      },
      // other config options
    };

    onSubmit(config);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        GitHub Username:
        <input
          type="text"
          value={githubUsername}
          onChange={(e) => setGithubUsername(e.target.value)}
          required
        />
      </label>

      <label>
        LinkedIn URL:
        <input
          type="text"
          value={linkedinUrl}
          onChange={(e) => setLinkedinUrl(e.target.value)}
        />
      </label>

      {/* Add other form fields as needed */}

      <button type="submit">Generate Portfolio</button>
    </form>
  );
};

export default ConfigForm;

b. Update the Main App Component

Modify your App.jsx to include the form and handle the configuration.

// src/App.jsx

import React, { useState } from 'react';
import GitProfile from '@arifszn/gitprofile';
import ConfigForm from './components/ConfigForm';

function App() {
  const [config, setConfig] = useState(null);

  const handleConfigSubmit = (config) => {
    setConfig(config);
  };

  return (
    <div>
      {!config ? (
        <ConfigForm onSubmit={handleConfigSubmit} />
      ) : (
        <GitProfile config={config} />
      )}
    </div>
  );
}

export default App;

2. Fetch Education Details from LinkedIn

Fetching data directly from LinkedIn profiles requires careful handling due to API restrictions.

a. Understand LinkedIn API Limitations

API Access: LinkedIn's API requires you to register an application and get it approved.
Permissions: You'll need the r_liteprofile and r_emailaddress permissions at a minimum.
Usage Policies: Ensure compliance with LinkedIn's Terms of Service and Developer Agreement.

b. Implement OAuth 2.0 Authentication

You'll need to authenticate users to access their LinkedIn data.

Steps:

Register a LinkedIn App:
- Go to LinkedIn Developer Portal and create a new app.
- Obtain your Client ID and Client Secret.
Set Up Authentication Flow:
- Use a library like react-linkedin-login-oauth2 to handle OAuth.
- Redirect users to LinkedIn's authentication page.
Obtain Access Token:
- After user consent, you'll receive an authorization code.
- Exchange this code for an access token.
Fetch Education Data:
- Use the access token to make API requests to LinkedIn's /me endpoint.
- Example endpoint for education: https://api.linkedin.com/v2/educationElements?q=members&projection=(elements*(schoolName,degreeName,fieldOfStudy,dates))

Example Code Snippet:

// Inside ConfigForm.jsx

import LinkedIn from 'react-linkedin-login-oauth2';

const ConfigForm = ({ onSubmit }) => {
  // ... existing state variables

  const handleSuccess = (data) => {
    // Exchange data.code for access token
    // Fetch education details using access token
    // Update state with education details
  };

  const handleFailure = (error) => {
    console.log(error);
  };

  return (
    <div>
      {/* ... existing form elements */}

      <LinkedIn
        clientId="LINKEDIN_CLIENT_ID"
        onFailure={handleFailure}
        onSuccess={handleSuccess}
        redirectUri="YOUR_REDIRECT_URI"
      >
        <img src={linkedInButton} alt="Log in with Linked In" />
      </LinkedIn>
    </div>
  );
};

Important: Replace LINKEDIN_CLIENT_ID and YOUR_REDIRECT_URI with your actual LinkedIn app credentials.

c. Handle API Responses

Process the data received from LinkedIn and incorporate it into the user's configuration.

3. Modify the Repository to Use Dynamic Configurations

Adjust your project to accept configurations dynamically rather than from a static file.

a. Remove Dependency on `gitprofile.config.js`

Since the configuration will now come from user input, you can eliminate or repurpose the config file.

b. Update GitProfile Component Usage

Ensure that the GitProfile component uses the dynamic configuration.

// src/App.jsx

<GitProfile config={config} />

c. Adjust Default Exports and Imports

If necessary, modify how configurations are exported and imported throughout your project to accommodate dynamic data.

4. Optional: Persist User Data

If you want to allow users to save or share their generated portfolios:

a. Use Local Storage

Save the configuration in the browser's local storage.

// After setting the config
localStorage.setItem('userConfig', JSON.stringify(config));

b. Implement a Backend Service

Set up a backend (e.g., Node.js with Express) to store user configurations in a database.

Endpoints: Create APIs to save and retrieve configurations.
Database: Use MongoDB, PostgreSQL, or any other database.
Security: Implement authentication if storing sensitive data.

5. Update User Interface

Adjust the frontend to reflect these changes.

a. Hide Education Fields

Since you're fetching education details from LinkedIn, you can remove manual education input fields.

b. Provide Feedback

Loading Indicators: Show a spinner while fetching data from LinkedIn.
Error Handling: Inform users of any issues during data retrieval.

6. Testing

Ensure that all components work as expected.

Unit Tests: Write tests for your components and functions.
Integration Tests: Verify that the form submission correctly generates the portfolio.
User Testing: Have real users test the form and provide feedback.

7. Deployment Considerations

When deploying the application:

a. Environment Variables

Store sensitive information like API keys and Client Secrets in environment variables.
Use a package like dotenv to manage them locally.

b. HTTPS Requirement

LinkedIn's OAuth 2.0 requires HTTPS for redirect URIs in production environments.

Ensure your deployed application uses HTTPS.
Services like Netlify, Vercel, or Heroku provide HTTPS out of the box.

8. Important Notes on LinkedIn API Usage

Approval Required: Access to full profile data (including education) may require special permissions from LinkedIn.
Alternatives: If API access is restricted, consider asking users to upload their education details in a structured format like JSON or CSV.
Compliance: Always comply with LinkedIn's API usage policies to avoid legal issues.

Example Alternative: Manual Education Entry

If integrating with LinkedIn's API is not feasible, you can modify the form to allow manual entry of education details in a more user-friendly way.

a. Dynamic Education Fields

Provide a way for users to add multiple education entries.

// In ConfigForm.jsx

const [educations, setEducations] = useState([]);

const addEducation = () => {
  setEducations([...educations, { institution: '', degree: '', from: '', to: '' }]);
};

const handleEducationChange = (index, field, value) => {
  const newEducations = [...educations];
  newEducations[index][field] = value;
  setEducations(newEducations);
};

// Render education fields
{educations.map((edu, index) => (
  <div key={index}>
    <input
      type="text"
      placeholder="Institution"
      value={edu.institution}
      onChange={(e) => handleEducationChange(index, 'institution', e.target.value)}
    />
    {/* Other fields for degree, from, to */}
  </div>
))}
<button type="button" onClick={addEducation}>Add Education</button>

Conclusion

By following these steps, you can modify your GitProfile project to include a frontend form for user input and fetch education details from LinkedIn. Remember to handle user data responsibly and comply with all third-party API terms of service.

Feel free to ask if you need further assistance or clarification on any of the steps!