Building a Portfolio with AI

Introduction

AI is a machine that turn dreams into realities – Kasisdis Satangmongkol (Ad Toy)

AI has become one of the essential skills required today. It allows us perform tasks more efficiently and enable us to do things that we would never dreamt of. Because of that, learning how to use AI is no longer optional. Those who ignore it risk falling behind.

So how do people use AI today? Most people treat it like a search engine. More advanced users, however, use it to build applications, create automations, and conduct deeper research.

hat is what makes AI exciting to me. It is not just a tool for answering questions. It is something you can use to build real things.

In this post, I will demonstrate a more advanced use of AI by building a fictional portfolio. I will explain the tools involved and walk through the process step by step.

The purpose of this project is to understand how Google Gemini CLI works with other related software and web tools. My goal is not to create a fully polished portfolio, but to use this project as a way to better understand how AI works in practice.

Tools

These are the following tools I will use throughout this project:

1. Gemini CLI – An AI model that can perform more complex tasks.
2. Git Hub – A platform for storing and publishing codes
3. Visual Studio Code – A code editor for writing and editing files.
4. Terminal – A tool for creating folders, managing files, and running commands.

The Process

I will build a portfolio in three steps:

1. Set up the relevant softwares and accounts
2. Use Google Gemini CLI to create a build a portfolio
3. Upload the project to GitHub and publish it as a website.

For this project, I will be working on Mac Book Air 15 inch M3 (2024).

Preparation: Installing relevant softwares and setting up accounts.

Setting up the required tools

Before building the portfolio, I need to set up the necessary tools. These include:

1. Node js.
2. Gemini CLI
3. Visual Studio Code
4. Git Hub account

Node js.

Node js. allows the computer to run Javascript outside of a browser. This is essential for running tools like Google Gemini CLI

Node js. can be install from the official website.

https://nodejs.org/en

Gemini CLI

Gemini CLI is the main AI tool used in this project. It allows me to interact with Google Gemini directly through the Terminal.

To install it, open Terminal and run:

npm install -g @google/gemini-cli

It is likely that this will not work on a personal computer. This is because the computer thinks that the one accessing it is not the owner of the computer. To solve this problem use

sudo npm install -g @google/gemini-cli

sudo or “super user do” allows you to run commands with administrative privileges. Authentications will be needed here to confirm that you are actually an administrator.

After installation, verifications can be made through the Terminal

node -v
gemini -v

If installed correctly, both commands will return version numbers.

Visual Studio Code

Visual Studio Code is used to write and edit code throughout this project. This can be downloaded through an official website

https://code.visualstudio.com

Git Hub Account

Git Hub account can be set up through the official website. It is a place to store and publish the project.

https://github.com

Build a Portfolio using Gemini CLI

Getting Start with Gemini CLI

Gemini CLI or Gemini Command Line Interface is a version of Gemini that runs in the Terminal. It is fast and flexible, but requires some familiarity with command-line tools.

To begin, I first create a working directory using Terminal.

To check my current location, I use:

pwd

pwd (present working directory) gives the current location. Alternatively, this is also displayed on command line.

From the information above, I am at Prudyas-Laptop. I can view all the folders with a following command.

ls

To navigate into a folder, I use cd (change directory)

cd *foldername*

Other useful commands include

mkdir = make directory
rm = remove directory

Using these commands, I create a folder and launch Gemini CLI

Building a Portfolio

Inside Gemini CLI, I start with Plan Mode.

/plan

I then describe all the details of what I want to build:

  Help me plan to build a portfolio website on git hub page. This should represent my resume on Git Hub. It should
   consist of the following sections: Introduction, Education, Work Experiences, Projects, and  Certificates. The tone
   should be modern dark tone.

Next, I provide a sample of personal details.

 This is a resume of Bobby Godly. He was born in 23rd July 1993. He is an ambitious learner, attentive programmer and
   melticulous data analyst. He enjoys working with data and looks at programming as solving a puzzle. He graduate from
   university of "Eat The Code" in 2012 with first class honours in MSC Computer Science. Since then, He's been working
   at  "Peanut Butter Jelly. Co., Ltd" where he oversees all the projects  as a manager. This is current brief
   biography. Help me sort this out into different sections

Gemini then generates 3 main files:

• index.html – The html file represents the structure of a webpage. What is in a header or footer? What are my text boxes placed?
• css/style.css – This represents the design of a webpage. What is the font style of a webpage? What colors are the fonts? What is a font size of a particular area?
• js/script.js – This is like a user interface. What happens when the button is pressed?

A site can be previewed through opening the index.html file.

Editing your Portfolio with VS Code

Opening the file in VS Code can be done through Gemini CLI or directly opening it from VS Code. With Gemini CLI, enter Shell Mode using

/shell

and use the command to open the file.

code .

From here, I manually edit the code. For example, to add a new project under the project section.

<div class="card">
      <h3>Photography Website</h3>
            <p>This very website displayed my abilities as a photographer. I throughly enjoy visiting different countries, capturing stunning moments</p>
            <div class="card-links">
                  <a href="#" class="btn"><i class="fab fa-github"></i> Code</a>
            </div>
 </div>

I can also ask Gemini CLI to modify the code.

I want to add another project to the projects section. 
The title should be "Photography Website"
The context should be "This very website displayed my abilities as a photographer. I throughly enjoy visiting different countries, capturing stunning moments"

In practice, Gemini CLI is faster for generating and modifying code while VS Code is better for fixing specific bugs or making precise edits.

Uploading the Portfolio to GitHub

Once the portfolio is ready, I upload it to GitHub. I will proceed this by

1. Create Git Hub account
2. Create a repository. (Think of repository as a folder in Git Hub)
3. Generate Personal Access Token
4. Deploy my portfolio into Git Hub

Setting up Git Hub account and creating repository are straight forward. Therefore, I won’t be explaining how to do that.

Generating Personal Access Token is also simple. Go to the user navigation menu > settings. Navigate to developer settings at the bottom. There you find the Personal Access Token menu.

Personal Access Token are like password that enables us to go to Git Hub.

A set up is also required in Gemini CLI as well. To do this, run the following commands in Gemini CLI

let's set up git hub account in this machine. I have a personal access token

Then follow the instructions provided, it should be pretty straight forward

There are multiple git commands in Gemini CLI that needed to be aware of:

git init  #initialize repository
git add #add files
git push #upload to GitHub
git commit #save changes

I now want to deploy my code, turning it into a website. To do this:

1. Go to your repository on GitHub
2. Open Settings → Pages
3. Select deployment from the main branch
4. Choose the /docs folder

Currently, I do not have the folder name docs, so I want to create this folder in Gemini CLI.

I want to deploy my code in git hub, please help me create a folder call docs

Once complete, GitHub will generate a live website link.

Mindsets for using AI

Building this website for me was not easy. It required more than just using AI. While Google Gemini can generate a website quickly, I still needed to understand how tools like GitHub, VS Code, and the Terminal work.

This changed the way I see AI.

Many people believe that AI is the only skill that matters today. After working on this project, I disagree. AI makes things faster, but it does not replace understanding. To use AI effectively, you still need to understand the tools around it.

This brings me to the basic mindsets of using AI that I learn about a few weeks back.

• AI Draft, Human Craft – While AI helps us create work, it is our job to check and refine it ourselves.
• If you don’t know, Ask! – AI is most useful then you actively engage with it. It is important to learn what procedures AI takes and how it performs. Leaving AI do things independently can lead to AI Hallucination.
• Use Multiple Models – Different AI tools serve different purposes. I use tools like ChatGPT and Google Gemini for research and writing. However, Gemini CLI acts more like an agent—it helps execute tasks such as building files and structuring projects.
• AI is only as good as your are – This project is challenging for me because I had no prior experience with Git Hub, VS Code, or command line tools. The better I understand my tools, the better AI can assist you.

More information about AI can be read here.

Conclusion

This project started as a simple goal: to build a portfolio using AI. Along the way, it became something more.

I learned that AI is not a shortcut. It does not replace understanding. While tools like Google Gemini can generate a working website in seconds, the real challenge lies in knowing what to do with it. Understanding GitHub, VS Code, and the Terminal became just as important as using AI itself.

More importantly, this experience changed how I think about AI.

At first, it felt like a tool that could do everything. But in practice, it became clear that AI is only as useful as the person using it. It can assist, guide, and accelerate—but it cannot replace the need to think, learn, and refine.

AI is powerful, but it is not a shortcut to mastery.

It amplifies what you already know. If your foundation is weak, the results will be weak. But if your foundation is strong, AI becomes a force multiplier.

This project is not a finished product. It is a starting point. A way to understand how AI works, how it connects with other tools, and how I can use it more effectively in the future.

And that, to me, is where the real value lies.