Creating a Portfolio Website with GitHub, GitHub.dev, and ChatGPT

Introduction

Developing an online portfolio is a key aspect to showcase professionalism. It provides a platform to expose your accomplishments, skills, and potential to prospective audiences. This blog post will guide you through the process of creating a personal portfolio website using GitHub, GitHub.dev, and the AI model, ChatGPT.

Step 1: Creating a GitHub Account

The initial step involves setting up a GitHub account.

1. Visit the GitHub website.
2. Click on Sign up, situated in the top-right corner of the web page.
3. Fill in the required fields: email address, your chosen password, and username.

4. Verify your account by clicking Start Puzzle and solving it. Then, select the Create Account button.

5. Check your email inbox for a launch code from GitHub. Type the code into the Enter code boxes and hit Enter.

6. Answer some questions to automatically configure the GitHub account based on your preferences. Otherwise, click Skip personalization.

7. Choose the Free Account.

8. Wait until GitHub redirects you to your account page.

Step 2: Forming a New Repository

Upon successful creation of your GitHub account, the next step is to establish a repository for your portfolio.

1. On your dashboard, click the + button to initiate a new repository. From the drop-down menu, select New repository.
2. Name your repository appropriately, e.g., my-portfolio.
3. Ensure that the repository is set to Public, and initialize it with a README file.
4. Click on Create repository.
5. Then GitHub will redirect to your repository.

Step 3: Creating an HTML File

Now, it’s time to create an HTML file that will lay the foundational structure for your portfolio website.

1. On your repository and select Add file.

2. Choose Create new file.

3. Name your file as index.html, and then click Commit changes button.
4. A Commit changes prompt will appear, just leave as it is, then press Commit changes button.

Step 4: Editing Using GitHub.dev

GitHub.dev functions as an intuitive code editor within GitHub. Here’s how to utilize it:

1. On your repository and replace github.com in the URL with github.dev to launch the VS Code editor within your browser. Hit Enter.
2. Once in the editor, locate and open your index.html file.
3. This is where you can input or adjust your HTML code. Be sure to save the changes once you’re finished.

Step 5: Leveraging ChatGPT for HTML Generation

ChatGPT can assist you in generating HTML structure for your website. Here’s a simplified prompt to generate a basic HTML layout which incorporates HTML, CSS, JavaScript, and Bootstrap:

Take on the persona of an experienced web developer.

Generate a portfolio website utilizing HTML, CSS media queries, JavaScript, and Bootstrap Cards. The CSS and JavaScript must be embedded inside the HTML file.

The website should be responsive across devices, look corporate and elegant. It will show my picture in a blue coloured header from a file named me.jpg with the size of 120px width and 150px height. The picture should be inside a circle. The website has grey coloured background underneath the Bootstrap card. It also has copyright letter inside the footer. The writing must be formal and straightforward, using center alignment and written inside Bootstrap Cards according to its category. The writing uses different font styling like bold, underline and italic. The website will include CDN logo for Facebook, LinkedIn, Twitter, Instagram and TikTok links using the below HTML code.

<a href="https://cdnlogo.com/logo/facebook-square-icon_429.html"><img src="https://www.cdnlogo.com/logos/f/74/facebook.svg"></a>
<a href="https://cdnlogo.com/logo/linkedin-icon_39423.html"><img src="https://www.cdnlogo.com/logos/l/66/linkedin-icon.svg"></a>
<a href="https://cdnlogo.com/logo/twitter_40255.html"><img src="https://www.cdnlogo.com/logos/t/45/twitter.svg"></a>
<a href="https://cdnlogo.com/logo/instagram_475.html"><img src="https://www.cdnlogo.com/logos/i/92/instagram.svg"></a>
<a href="https://cdnlogo.com/logo/tiktok_550.html"><img src="https://www.cdnlogo.com/logos/t/60/tiktok.svg"></a>

Each CDN logo must use the following CSS setting:

width: 30px

height: 30px

margin: 0 10px

Below are my LinkedIn, Facebook, and Twitter links that need to be associated with the CDN logo provided above. Use target=”_blank”

LinkedIn link: https://www.linkedin.com/in/ariffinmzin/

Facebook link: https://www.facebook.com/

Twitter link: https://twitter.com/

Instagram link: https://instagram.com/

TikTok link: https://tiktok.com/

The content of the website should be as follows. Locate inside individual Bootstrap Cards according to its category.

Name: Nur Ariffin bin Mohd Zin

Occupation: Senior Lecturer

Institution: Universiti Tun Hussein Onn Malaysia

Qualification: Degree in Computer Science

Subjects taught: Java Programming (2020), Web Development (2021), Blockchain (2022)

Skills: HTML, JavaScript, PHP, Python, Laravel, Node.js, React.js

My contact: ariffin@uthm.edu,my

A new section ‘About me’ that display the summary of the above details.

Once you receive the output, ensure to edit and adjust the code to suit your requirements.

Step 6: Implementing Your Changes

After generating the necessary HTML structures:

1. Return to the GitHub.dev editor.
2. Copy and paste the code generated by ChatGPT into index.html.
3. At the navigation bar on the left, click the Source Control button.
4. Click the + button.
5. In the Message text box, type edit html and press Commit & Push button.
6. Now your index.html file has been saved. 😊

Step 7: Deploying Your Website

The final step is to publish your portfolio website.

1. Navigate to your repository by replacing github.dev in the URL with github.com. Hit Enter.
2. At the top right corner, select Settings tab.
3. On the left side, choose Pages section.
4. Under Source, make sure the selection is Deploy from a branch.
5. Under Branch, select main.
6. Click Save.
7. Refresh the page after a while, you will see your website link. Click on the link.

Now your website has been published and accessible to the public. 🎉 Remember, your portfolio is your personal brand, so invest time to ensure it represents your skills and experiences effectively. Happy building! 🚀