If you search for "install Java on Mac," you'll find a confusing number of vendors, version numbers, and installation methods. To make it easy, I'll cut through the confusion and show you a recommended Java installation path that takes about five minutes.

Here's my recommendation: Install Java 25 using Homebrew with the Eclipse Temurin distribution. Java 25 is the current LTS (Long-Term Support) release and your best choice unless your work team or university course uses an older version. With Homebrew, one terminal command accommodates the entire installation. The Temurin distribution is free, certified, and unencumbered by Oracle's licensing restrictions.

Now I’ll walk you through the process.

Table of Contents

1. What You Need Before You Begin

2. How to Check if Java Is Already Installed

3. Why Eclipse Temurin and Why Not Oracle

4. How to Install Java with Homebrew

5. How to Verify the Installation

6. How to Set JAVA_HOME for Build Tools

7. How to Troubleshoot Common Problems

8. Alternative Installation Methods

9. What's Next

What You Need Before You Begin

With this recommended path, you only need two things before you install Java: a terminal application and the Homebrew package manager.

Terminal

Terminal is the built-in Mac terminal application. If you don’t know, you can learn how to open Terminal here. You'll use it to run the installation commands.

Homebrew

Homebrew is a package manager you can use to install software programs for the command line. Check if you already have it like this:

$ brew --version
Homebrew 5.0.11

If you see a version number, you're ready. If you see zsh: command not found: brew you need to install Homebrew first. Follow the instructions at Install Homebrew.

How to Check if Java Is Already Installed

Run this command to check for an existing Java installation:

$ java -version

You'll see one of two results.

If Java is installed, you'll see output like this:

openjdk version "25.0.1" 2025-10-21 LTS
OpenJDK Runtime Environment Temurin-25.0.1+8 (build 25.0.1+8-LTS)
OpenJDK 64-Bit Server VM Temurin-25.0.1+8 (build 25.0.1+8-LTS, mixed mode)

If the version number shows 25, you already have the latest Java and you can stop here.

If Java is not installed, you'll see a message, "The operation couldn't be completed. Unable to locate a Java Runtime." You'll need to install Java as described below.

If you previously installed Java but see this dialog, something is wrong with your installation. See Unable to Locate a Java Runtime for troubleshooting. For detailed guidance on Java version output, see Check Java Version on Mac.

Why Eclipse Temurin and Why Not Oracle

If you search for Java downloads, you'll encounter several potentially confusing terms. Here's what they mean.

JDK stands for Java Development Kit. It contains the compiler, runtime, and developer tools you need to build and run Java applications. Vendors used to offer a JRE (Java Runtime Environment) for non-developers, but now the JDK does everything.

OpenJDK is the official open-source implementation of Java. All major Java vendors build from this same source code, so the core functionality is identical across vendors.

Eclipse Temurin is the distribution many developers recommend. It comes from the Adoptium project and is backed by IBM, Microsoft, Red Hat, and Google, among others. It's completely free for any use, including commercial production. Temurin is TCK-certified, meaning it passes Oracle's official compatibility tests (over 139,000 of them). You can trust that your Java code will run correctly.

Why not Oracle JDK? Oracle changed its licensing in January 2023. The new model charges per employee across the entire organization, not per Java user. A 500-person company would pay $90,000 per year. Oracle actively audits for compliance.

Temurin is functionally identical to Oracle JDK and is free to use under its open‑source license, avoiding Oracle’s Java subscription fees.

If you deploy to AWS, Amazon Corretto is another good free option. If you need Java 8 for legacy code, Azul Zulu provides well-supported builds. For a comparison of Java distributions, see Install JDK on Mac.

How to Install Java with Homebrew

Homebrew offers two ways to install Java: the cask method and the formula method. The cask method is easier because it installs the vendor's macOS package to the standard system location. Apple's macOS discovers it automatically with no extra configuration.

Run these two commands:

$ brew update
$ brew install --cask temurin@25

The first command refreshes Homebrew's package list. The second downloads and installs Eclipse Temurin JDK 25.

Homebrew places the JDK at /Library/Java/JavaVirtualMachines/temurin-25.jdk/. This is the standard macOS location for Java installations. Apple's macOS includes a Java launcher at /usr/bin/java that automatically searches this directory. You don't need to configure your PATH.

Homebrew also detects your Mac's chip architecture automatically. You'll get the correct native build whether you have an Apple Silicon or Intel Mac.

For more details about the Homebrew installation process, including the alternative formula method and troubleshooting, see Brew Install Java, Cask Method.

How to Verify the Installation

After installation, open a new Terminal window. Existing windows may not detect the new installation.

Check the Java version:

$ java -version
openjdk version "25.0.1" 2025-10-21 LTS
OpenJDK Runtime Environment Temurin-25.0.1+8 (build 25.0.1+8-LTS)
OpenJDK 64-Bit Server VM Temurin-25.0.1+8 (build 25.0.1+8-LTS, mixed mode)

This confirms three things: the version number (25.0.1), the distribution (Temurin), and that the 64-Bit Server VM is active.

Check the compiler:

$ javac -version
javac 25.0.1

List all installed JDKs:

$ /usr/libexec/java_home -V
Matching Java Virtual Machines (1):
    25.0.1 (arm64) "Eclipse Adoptium" - "OpenJDK 25.0.1" /Library/Java/JavaVirtualMachines/temurin-25.jdk/Contents/Home

If all three commands produce the expected output, Java is installed and working.

How to Set JAVA_HOME for Build Tools

For most users, Java works immediately after installation. The java and javac commands are available with no additional setup.

However, some build tools require the JAVA_HOME environment variable. Apache Maven, Gradle, and Android SDK all look for it. If you see errors mentioning "JAVA_HOME is not set," you need this step.

If you only run Java applications or use IntelliJ IDEA (which manages Java paths internally), you can skip this section.

Add this line to your ~/.zprofile file:

export JAVA_HOME=$(/usr/libexec/java_home)

This uses Apple's java_home utility to find the installed JDK automatically. After saving the file, you'll need to run source ~/.zprofile or close and reopen your terminal. Verify it works:

\( echo \)JAVA_HOME
/Library/Java/JavaVirtualMachines/temurin-25.jdk/Contents/Home

For complete configuration instructions, see Set JAVA_HOME on Mac.

How to Troubleshoot Common Problems

"Unable to locate a Java Runtime" message keeps appearing. Run java -version to verify Java is installed. If you just installed Java, see Unable to Locate a Java Runtime.

Wrong Java version appears. You have multiple JDKs installed and macOS selected a different one. Run /usr/libexec/java_home -V to list all installed versions. See Set JAVA_HOME on Mac to point to the version you want.

Alternative Installation Methods

Homebrew is the fastest path, but other options exist.

1. Manual download: You can download the .pkg installer directly from adoptium.net and double-click to install. This is a good choice if you don't use Homebrew. See Install Java on Mac for detailed instructions.

2. Homebrew formula. The command brew install openjdk@25 installs a Homebrew-managed build. This approach requires manual symlink configuration before macOS can discover it. See Brew Install Java, Formula Method for details.

3. Version managers. Tools like SDKMAN and mise can install and switch between multiple Java versions per project. If you work on codebases that require different Java versions, see Java Version Managers.

What's Next

You now have Java 25 installed on your Mac. You've verified it works and configured JAVA_HOME for build tools. You're ready to compile and run Java applications.

If your team or university course requires Java 21 instead, see Install Java 21 on Mac. If you need to remove Java, see Uninstall Java on Mac.

This article is based on my guides that offer additional details about how to install Java on Mac and choose the latest Java version.

Before you touch a single exploit or send a single payload, you need to know what services are running, what ports are open, what technologies are in play, and where the weak spots might be.

This phase is called reconnaissance. It can eat up hours – sometimes even days – if you’re doing it manually.

That’s where Autorecon comes in.

What is AutoRecon?

Autorecon is a tool that automates most of the initial recon work. It’s not a magic box, but it’s close.

Autorecon takes a list of IPs or domain names and runs a series of predefined scans. Then it organizes the output neatly so you don’t waste time parsing through raw Nmap files or rerunning missed commands.

If you’re just starting out with pentesting – whether you’re on your first TryHackMe box or your tenth OSCP practice lab – Autorecon can save you a ton of time. Let’s break down how it works.

What Exactly Does Autorecon Do?

At its core, Autorecon does three things:

1. Runs Nmap scans on each target IP or hostname.

2. Identifies services running on open ports.

3. Runs specific enumeration tools based on those services.

Let’s say you run it against an IP that has ports 22 (SSH), 80 (HTTP), and 139/445 (SMB) open. Autorecon will:

• Use Nmap to check versions and scripts for each port.

• Run nikto or gobuster on port 80.

• Run enum4linux or smbmap on SMB.

• Store everything in organized folders for later review.

That’s what you’d do manually – but faster, cleaner, and without forgetting steps.

How to Use Autorecon

Let’s walk through a quick example. Assume you have a target at 10.129.8.143.

Here’s the basic command:

autorecon 10.129.8.143

That’s it. No flags, no extra setup. Autorecon takes care of the rest. To understand what is going on behind the scenes, let's add the verbosity -v flag.

Here is a sample result.

Behind the scenes, it creates a folder structure like this:

results/
├── 10.129.8.143/
│   ├── scans/
│   │   ├── nmap/
│   │   └── gobuster/
│   ├── reports/
│   └── notes.txt

You’ll find full Nmap outputs, service-specific tool results, and even a place to jot down your own observations. All ready to go.

If you want to scan multiple targets, just pass a list:

autorecon targets.txt

Once Autorecon completes a scan, go to the results/<IP>/scans/ folder. Start with the Nmap outputs.

Look for open ports and services:

• Port 80 open? Check gobuster and nikto outputs in the HTTP folder.

• SMB ports open? Look in the enum4linux and smbmap results to find shared drives or user info.

• FTP anonymous login allowed? Use that access to explore directories.

These findings will give you the next steps – like browsing a web service, crafting a payload, or checking for known exploits.

Why It’s a Big Deal for Beginners

If you’re new to pentesting, one of the hardest parts is remembering everything you’re supposed to check. You pop open a port, and you think:

• “Wait… Should I run enum4linux on this?”

• “What was that flag for aggressive Nmap scanning again?”

• “Did I already check this web service with nikto?”

Autorecon takes that mental load off your shoulders. You can focus on analysis, not babysitting scans.

And here’s another benefit: it helps you learn the process.

While Autorecon automates recon, it shows you every tool and command it runs. You can open the raw output, read the flags, and understand why it ran those scans.

Example: You’ll see it runs nmap -sV -sC for version detection and scripts. This helps beginners understand which scans map to which services and why they matter.

As it runs, you’ll see all the tools and commands it’s using. You can look at the raw results, see what worked, and gradually build your own workflow.

What It Scans (By Default)

Here’s a quick overview of what Autorecon runs based on port and service:

Nmap:

• Quick scan

• Full TCP port scan

• Service/version detection

• NSE scripts

HTTP/HTTPS:

• gobuster (directory brute-forcing)

• nikto (vulnerability scanner)

• whatweb (tech detection)

SMB:

• enum4linux-ng

• smbmap

• Nmap SMB scripts

FTP:

• Anonymous login check

• Nmap FTP scripts

SSH:

• Banner grab

• SSH version check

And that’s just a slice. It handles other services too, like MySQL, SNMP, SMTP, and even RPC.

When Autorecon Is Most Useful

Autorecon shines in certain situations:

• Training labs: You get a clear view of your target with minimal setup.

• OSCP preparation: It runs the exact recon tools you’ll need to use on the OSCP exam.

• Time-limited pentests: When you need to hit multiple targets fast, Autorecon keeps your output consistent and saves you from retyping everything.

But it’s not just about speed. It’s about being thorough. With manual scanning, it’s easy to miss something small. Autorecon doesn’t forget.

What Autorecon Doesn’t Do

Autorecon isn’t an exploit tool. It doesn’t hack anything for you. It doesn’t guess credentials or bypass login pages.

It’s focused purely on reconnaissance. That means you still have to:

• Review scan results

• Analyze web services manually (for example, browse the site, test inputs)

• Decide which exploits or payloads to run

Also, it can be noisy. If you’re on a real engagement where stealth matters, some scans might raise alarms. In that case, you’d want to run more controlled commands manually.

Tips for Using Autorecon Effectively

Use flags to control scans:
To increase verbosity and skip previously scanned hosts:

autorecon -v --only-scans-dir 10.129.8.143

Customize wordlists for better results:
By default, Autorecon uses small wordlists. You can improve this:

autorecon --dirbuster.wordlist /usr/share/seclists/Discovery/Web-Content/raft-medium-words.txt 10.129.8.143

This makes directory brute-forcing more effective, especially on web targets.

Don’t skip the output: Read the Nmap files, check the HTML reports. Tools don’t think like humans. You still have to connect the dots.

Final Thoughts

Autorecon doesn’t replace your skills – but it helps supercharge them. Instead of spending 30 minutes typing out scan commands, you can run one command and start analyzing in minutes. This helps beginners stay focused, and it helps pros save time.

So if you’re tired of rerunning the same Nmap scans over and over, or you just want cleaner results and fewer mistakes, let Autorecon do the heavy lifting – so you can focus on the part that really matters: breaking stuff.

For more cybersecurity tutorials, join our newsletter. To learn the basics of Offensive Cybersecurity, check out our Security Starter Course.

AI agents are powerful tools for customer services. Having them power your platforms and websites might sound like an expensive proposition with high technical expertise required. But with the emergence of new modern platforms like Agno and Groq, it’s now easier to integrate an AI agent system into your website while still staying within budget.

In this article, you’ll go through the process of developing your own AI agent ecosystem (for free). This will enable you to have a website that can handle customer enquiries, create content, analyse a user's behaviour, and provide custom personal experiences for each user. It's a fantastic setup because you can automate part of your business, speeding up lead generation and freeing up your time to work on more high-priority tasks.

This article is for developers who are familiar with JavaScript, React, and Python. Even if you don’t have a complete understanding of all three, as long as you are a beginner or junior with some knowledge, you should be able to understand at least some of the code. For example, JavaScript and Python are pretty similar syntax-wise, so if you have experience with either of them, then just reading through the codebase will give you an idea of how everything works.

For this tutorial, we’ll build a portfolio website. But you can use the ideas and concepts you learn here for any type of website, regardless of whether you are a solo entrepreneur or part of a large company. With these tools and frameworks, it's possible to transform your web presence without going over budget.

Table of Contents

• Prerequisites

• What Are AI Agents?

• What Are Agno and Groq Cloud?

• What You Will Be Building

• Building Our Python Backend

  • Creating an Account on Groq Cloud

  • Setting Up Our Python Project

  • Working on the Python Codebase

  • Running Our Python Backend

• Building Our React Frontend

• Conclusion

• Stay Up to Date with Tech, Programming, Productivity, and AI

Prerequisites

• Prior knowledge of JavaScript, React, and Python

• Python installed and setup locally on your computer

• An account on Groq Cloud

• A code editor/IDE installed like Cursor, Windsurf, or VS Code

What Are AI Agents?

AI agents are computer systems or programs that are designed to use artificial intelligence to interact with their world and achieve certain objectives. They are able to perceive their world – through sensors, user input, or data – and act to achieve goals, typically with some degree of autonomy. This means that they will decide things for themselves, sometimes with little to no human intervention, depending on how they were designed.

What are Agno and Groq Cloud?

Agno is a lightweight library that lets you build Multimodal Agents. It’s an AI inference engine designed to optimise LLMs for speed and performance. This means it can provide super-fast AI model inference with reduced latency and improved resource utilisation. It has the potential to replace current inference platforms like NVIDIA TensorRT or Hugging Face's Text Generation Inference (TGI).

Groq Cloud is a cloud-based AI inference platform based on Groq LPU (Language Processing Unit) chips, which are optimised for ultra-low-latency AI workloads. Groq is great at high-speed token generation rates, making it perfect for real-time AI applications like chatbots, AI coding help, and other latency-sensitive workloads. The Groq Cloud platform offers free access to its large language models (LLMs) through a free tier, but there are some usage limits.

If you go to the Groq Cloud Playground you can find LLM models from different companies like:

• Qwen

• DeepSeek R1

• Google Gemma 2

• Hugging Face

• Meta llama

• Mistral AI

• OpenAI

This is great because Groq Cloud gives us the flexibility to choose from any of these AI LLM models for our AI agent application. Agno basically acts as the orchestration layer for multiple AI agents. In our case, that would be WelcomeAgent, ProjectAgent, CareerAgent, BusinessAdvisor and ResearchAgent.

The platform is able to manage their conversations, task delegation, and memory. When any of our AI agents need to reason or generate output, Agno then uses Groq Cloud, which can run large language models (LLMs), and it does this with ultra-low latency. The advantage to this is that it ensures that it has fast and efficient responses. Groq Cloud itself is not an LLM – rather, it is a high-performance inference engine which hosts and serves LLMs from lots of different providers.

For this project, we will use Meta’s LLaMA 3 model because it strikes a strong balance between performance and accuracy and is openly accessible. This means that it is well-suited for the AI agents in our portfolio website.

It's worth mentioning that we could have used the LLaMA model from llama.com. Still, instead we will use it via Groq Cloud, because, this way, we get better optimisation, more capabilities, and better-quality responses for each AI agent. This is because Groq Cloud gives us the flexibility to test and choose between different AI models if we wish to do so, and that means that we can get the best one for our needs.

What You Will Be Building

Today, you will be building a portfolio website that incorporates AI agents with which anyone can interact. These AI agents are like customer service representatives because anyone can ask them questions about your skills and portfolio, and they will provide the person with information.

This is great because it means that potential clients can learn anything about you 24/7 without having actually to talk to you when you are unavailable. You could even use this portfolio as a template for building your portfolio website or as inspiration for creating one.

In total, there will be five AI agents on your portfolio website:

• WelcomeAgent: a specialist in helping users navigate the website, whether the user is an employer, client, or fellow programmer

• ProjectAgent: a project specialist that can provide information about projects, technology, and challenges

• CareerAgent: a career specialist that can provide information about skills, experience, and professional background

• BusinessAdvisor: a client specialist that can provide information about services, pricing, and project details

• ResearchAgent: a research specialist that can provide information about technology, trends, and industry news

The massive benefit of incorporating AI agents into a portfolio website is that they can create a personalised experience by providing an interactive experience which is tailor-made and not as easily replicated on other, more generic websites.

This can set your website apart because, as opposed to having a static website for showcasing your talent, an AI agent is capable of guiding visitors, answering queries about your projects, and recommending relevant work based on an interest.

Another great feature is the ability to simulate a conversation, which can make the portfolio feel more dynamic, engaging, and immersive while also demonstrating how good you are at working with modern tooling.

All of this combined provides you with a practical and approachable way to explore AI agents. This can be a real-world example and a personal project that does not require the implementation of a full-scale business application to see how valuable this type of concept can be.

The website will have the following six pages:

• Home – the main webpage

• Projects – showcasing some featured projects and technical skills

• Career – showing skills, experience, education, and certifications

• Services – client services and the engagement process

• Research – a way to search the web regarding the tech industry

• Contact – a page with a form to contact the user

You can see what your frontend React application will look like below:

First, you have your portfolio homepage:

Next is your Projects page:

Now you have your Career page:

Then you have the Services page:

Then you can see your Research and Insights page:

Lastly, you have your Contact page:

Now, let's begin building your application, starting with the Python Backend.

Building Our Python Backend

For this tutorial I will be using macOS, and the commands should also work on Linux. If you’re a Windows user, most of the commands should work (although there are some differences like activating a Python environment). You can find the correct commands by searching if need be – and you’ll know if your terminal gives you errors when trying to run a command.

Creating An Account On Groq Cloud

As mentioned earlier, we will use Meta’s LLaMA 3 via Groq Cloud, which is ideal. So, first, we have to create an account on Groq Cloud, as shown here.

Once you have created an account on Groq Cloud, go to the API Keys page and create an API Key as shown in this example. I gave mine the name team-ai-agents:

You should have an API Key that looks like this example, so make sure that you save it somewhere safe – we will need it later.

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

Setting Up Our Python Project

Ok, now let's quickly set up our project. Navigate to a location on your computer, like the desktop, and create a folder called ai-agent-app. cd into the project folder and get ready – we’re going to start building our backend using Python.

I recommend installing agno and groq locally in a Python virtual environment. First, use this terminal command to setup a Python virtual environment inside of your ai-agent-app folder:

python3 -m venv venv
source venv/bin/activate
cd venv

Note: depending on your local Python environment, you might need to use either the python or python3 command for running Python commands. In my environment and examples, I use python3, so adjust the command to suit your needs.

The same applies when using either pip or pip3 when installing Python packages. You can check to see which version of Python and pip you have installed with the python --version, python3 --version , pip --version and pip3 --version commands in your terminal window.

The above command should create a venv folder inside of your ai-agent-app folder. This will be your REST backend with all of your API endpoints which your React frontend will use later on in this tutorial. Your Python virtual environment has also been activated.

To activate and deactivate your Python environment, you can use these commands:

# Activate on macOS/Linux
source venv/bin/activate

# Activate on Windows
venv\Scripts\activate

# Deactivate works on all platforms
conda deactivate

At this point, its a good idea to open the project in your code editor. Now you’ll need to install agno and groq using pip alongside a few other packages: flask, requests, and python-dotenv. You need these packages for setting up your server environment, so go ahead and install them all with this command:

pip install agno
pip install groq
pip install flask
pip install flask_cors
pip install requests
pip install python-dotenv

With these Python packages installed, you’re now ready to set up your API for this project. We’ll be using the Python web application framework Flask, along with the CORS package so that we can access the server anywhere. At the same time, we’ll also use the requests module, which allows us to send HTTP requests using Python.

Note that you’ll also need a .env file for your API keys, so make sure you have installed the python-dotenv package in your Python environment, although in some cases, it's installed automatically.

Working On The Python Codebase

Alright, time to make a start on the codebase. But first, let's generate all of the files for your project. You can do this simply by running the run script I created for the project. Run this command in the venv folder:

mkdir agents
touch .env main.py
cd agents
touch __init__.py base_agent.py career_agent.py client_agent.py project_agent.py research_agent.py welcome_agent.py

With this script, you should now have:

• Created a .env file for your API Keys

• Created an agents folder with all of the files for creating your different AI agents

• Created a main.py file, which will be the main project file for your entire backend app

Ok, your files are set. All that’s left is to add the codebase, and the backend is complete. Let's start with the .env file, as it only needs one line of code and that is for your API key. See my example and update it with your own API Key:

GROQ_API_KEY="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"

Your application now has an API key, which gives you access to Groq Cloud. Now let’s start to add the code for all the various AI agents. The first file we’ll work on will be the __init__.py which holds the imports for all of the AI agent files.

Add this code to the file:

from agents.welcome_agent import WelcomeAgent
from agents.project_agent import ProjectAgent
from agents.career_agent import CareerAgent
from agents.client_agent import ClientAgent
from agents.research_agent import ResearchAgent

# Export all agents
__all__ = ['WelcomeAgent', 'ProjectAgent', 'CareerAgent', 'ClientAgent', 'ResearchAgent']

As you can see, all of the classes for the AI agents will be imported and exported from here so you can use them in your main.py file later.

Ok, good. Now, we have 6 AI agent files to work on, beginning with the base_agent.py file.

Make sure that you add this code to the file:

from agno.agent import Agent
from agno.models.groq import Groq
import os


class BaseAgent:
    def __init__(self, name, description, avatar="default_avatar.png"):

        self.name = name
        self.description = description
        self.avatar = avatar
        self.model = Groq(id="llama-3.3-70b-versatile")
        self.agent = Agent(model=self.model, markdown=True)

    def get_response(self, query, stream=False):

        return self.agent.get_response(query, stream=stream)

    def print_response(self, query, stream=True):

        return self.agent.print_response(query, stream=stream)

This class uses the agno framework to create AI agents powered by Groq's LLama 3.3 70B model, which is free to use with some usage restrictions for API calls. This should be fine for your project. It provides the basic structure that other specialised agents in the application can inherit from and extend with domain-specific functionality.

The model we chose is available on the Groq Cloud platform, and we can change it if we want to. Each model has pros and cons, and a cut-off date for how up-to-date it is, so you can expect to get different results. Just keep in mind that using an up to date LLM like OpenAI will provide better results, but you might have to pay for it.

The next file we will work on will be the career_agent.py file.

And this is this code required for it:

from agents.base_agent import BaseAgent


class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="CareerGuide",
            description="I'm the career specialist. I can provide information about skills, experience, and job suitability.",
            avatar="career_avatar.png"
        )

        self.skills = {
            "languages": ["Python", "JavaScript", "TypeScript", "Java", "SQL"],
            "frameworks": ["React", "Vue.js", "Node.js", "Django", "Flask", "Spring Boot"],
            "tools": ["Git", "Docker", "AWS", "Azure", "CI/CD", "Kubernetes"],
            "soft_skills": ["Team leadership", "Project management", "Agile methodologies", "Technical writing", "Client communication"]
        }

        self.experience = [
            {
                "title": "Senior Full Stack Developer",
                "company": "Tech Innovations Inc.",
                "period": "2020-Present",
                "responsibilities": [
                    "Led development of cloud-based SaaS platform",
                    "Managed team of 5 developers",
                    "Implemented CI/CD pipeline reducing deployment time by 40%",
                    "Architected microservices infrastructure"
                ]
            },
            {
                "title": "Full Stack Developer",
                "company": "WebSolutions Co.",
                "period": "2017-2020",
                "responsibilities": [
                    "Developed responsive web applications using React and Node.js",
                    "Implemented RESTful APIs and database schemas",
                    "Collaborated with UX/UI designers to implement user-friendly interfaces",
                    "Participated in code reviews and mentored junior developers"
                ]
            },
            {
                "title": "Junior Developer",
                "company": "StartUp Labs",
                "period": "2015-2017",
                "responsibilities": [
                    "Built and maintained client websites",
                    "Developed custom WordPress plugins",
                    "Implemented responsive designs and cross-browser compatibility",
                    "Assisted in database design and optimization"
                ]
            }
        ]

    def get_skills_summary(self):

        prompt = f"""
        Generate a professional summary of the following skills for a portfolio website:

        Programming Languages: {', '.join(self.skills['languages'])}
        Frameworks & Libraries: {', '.join(self.skills['frameworks'])}
        Tools & Platforms: {', '.join(self.skills['tools'])}
        Soft Skills: {', '.join(self.skills['soft_skills'])}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_experience_summary(self):

        experience_text = "# Work Experience\n\n"
        for job in self.experience:
            experience_text += f"## {job['title']} at {job['company']}\n"
            experience_text += f"**{job['period']}**\n\n"
            experience_text += "**Responsibilities:**\n"
            for resp in job['responsibilities']:
                experience_text += f"- {resp}\n"
            experience_text += "\n"

        prompt = f"""
        Based on the following work experience, generate a professional career summary for a portfolio website:

        {experience_text}

        Highlight career progression, key achievements, and growth. Format the response in markdown.
        """
        return self.get_response(prompt)

    def assess_job_fit(self, job_description):

        skills_flat = []
        for skill_category in self.skills.values():
            skills_flat.extend(skill_category)

        experience_flat = []
        for job in self.experience:
            experience_flat.extend(job['responsibilities'])

        prompt = f"""
        Assess the fit for the following job description based on the skills and experience provided:

        Job Description:
        {job_description}

        Skills:
        {', '.join(skills_flat)}

        Experience:
        {' '.join(experience_flat)}

        Provide an analysis of strengths, potential gaps, and overall suitability for the role. Format the response in markdown.
        """
        return self.get_response(prompt)

This agent is designed to help users with career-related tasks such as:

• Creating professional summaries of technical and soft skills

• Generating career narratives based on work experience

• Evaluating job fit by comparing skills and experience against job descriptions

The agent uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate natural language responses that are formatted in markdown, making them suitable for inclusion in portfolio websites, résumés, or job applications. This file has sample career data, and in a real implementation, this would come from a database

Ok time for the next AI agent – this time it’s client_agent.py, which receives this code:

from agents.base_agent import BaseAgent


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="BusinessAdvisor",
            description="I'm the client specialist. I can provide information about services, pricing, and project details.",
            avatar="client_avatar.png"
        )

        self.services = {
            "web_development": {
                "name": "Web Development",
                "description": "Custom web application development using modern frameworks and best practices.",
                "pricing_model": "Project-based or hourly",
                "price_range": "$5,000 - $50,000 depending on complexity",
                "timeline": "4-12 weeks depending on scope",
                "technologies": ["React", "Vue.js", "Node.js", "Django", "Flask"]
            },
            "mobile_development": {
                "name": "Mobile App Development",
                "description": "Native and cross-platform mobile application development for iOS and Android.",
                "pricing_model": "Project-based",
                "price_range": "$8,000 - $60,000 depending on complexity",
                "timeline": "6-16 weeks depending on scope",
                "technologies": ["React Native", "Flutter", "Swift", "Kotlin"]
            },
            "consulting": {
                "name": "Technical Consulting",
                "description": "Expert advice on architecture, technology stack, and development practices.",
                "pricing_model": "Hourly",
                "price_range": "$150 - $250 per hour",
                "timeline": "Ongoing or as needed",
                "technologies": ["Various based on client needs"]
            }
        }

        self.process = [
            "Initial consultation to understand requirements",
            "Proposal and quote preparation",
            "Contract signing and project kickoff",
            "Design and prototyping phase",
            "Development sprints with regular client feedback",
            "Testing and quality assurance",
            "Deployment and launch",
            "Post-launch support and maintenance"
        ]

    def get_services_overview(self):

        services_text = "# Services Offered\n\n"
        for service_id, service in self.services.items():
            services_text += f"## {service['name']}\n"
            services_text += f"{service['description']}\n\n"
            services_text += f"**Pricing Model**: {service['pricing_model']}\n"
            services_text += f"**Price Range**: {service['price_range']}\n"
            services_text += f"**Timeline**: {service['timeline']}\n"
            services_text += f"**Technologies**: {', '.join(service['technologies'])}\n\n"

        prompt = f"""
        Generate a professional overview of the following services for a programmer's portfolio website:

        {services_text}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

    def get_service_details(self, service_id):

        if service_id in self.services:
            service = self.services[service_id]
            prompt = f"""
            Generate a detailed description for the following service:

            Service Name: {service['name']}
            Description: {service['description']}
            Pricing Model: {service['pricing_model']}
            Price Range: {service['price_range']}
            Timeline: {service['timeline']}
            Technologies: {', '.join(service['technologies'])}

            Include information about the value proposition, typical deliverables, and client benefits. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Service not found. Please check the service ID and try again."

    def explain_process(self):

        process_text = "# Client Engagement Process\n\n"
        for i, step in enumerate(self.process, 1):
            process_text += f"## Step {i}: {step}\n\n"

        prompt = f"""
        Based on the following client engagement process, generate a detailed explanation for potential clients:

        {process_text}

        For each step, provide a brief explanation of what happens, what the client can expect, and any deliverables. Format the response in markdown.
        """
        return self.get_response(prompt)

    def generate_proposal(self, project_description):

        prompt = f"""
        Generate a professional project proposal based on the following client requirements:

        Project Description:
        {project_description}

        Include the following sections:
        1. Project Understanding
        2. Proposed Approach
        3. Estimated Timeline
        4. Estimated Budget Range
        5. Next Steps

        Base your proposal on the services and processes described in the portfolio. Format the response in markdown.
        """
        return self.get_response(prompt)

This agent is designed to help users with client and business-related tasks such as:

• Providing overviews of available services for marketing materials

• Generating detailed service descriptions for specific offerings

• Explaining the client engagement process to potential clients

• Creating customised project proposals based on client requirements

The agent also uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate professional, business-oriented content formatted in markdown. Like before, this file also has sample service data.

Now we can start to work on the project_agent.py file and add this code to its codebase:

from agents.base_agent import BaseAgent


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="TechExpert",
            description="I'm the project specialist. I can provide detailed information about any project in this portfolio.",
            avatar="project_avatar.png"
        )

        self.projects = {
            "project1": {
                "name": "E-commerce Platform",
                "tech_stack": ["React", "Node.js", "MongoDB", "Express"],
                "description": "A full-stack e-commerce platform with user authentication, product catalog, shopping cart, and payment processing.",
                "highlights": ["Responsive design", "RESTful API", "Stripe integration", "JWT authentication"],
                "github_link": "https://github.com/username/ecommerce-platform",
                "demo_link": "https://ecommerce-demo.example.com"
            },
            "project2": {
                "name": "Task Management App",
                "tech_stack": ["Vue.js", "Firebase", "Tailwind CSS"],
                "description": "A real-time task management application with collaborative features, notifications, and progress tracking.",
                "highlights": ["Real-time updates", "User collaboration", "Drag-and-drop interface", "Progressive Web App"],
                "github_link": "https://github.com/username/task-manager",
                "demo_link": "https://taskmanager-demo.example.com"
            },
            "project3": {
                "name": "Data Visualization Dashboard",
                "tech_stack": ["Python", "Django", "D3.js", "PostgreSQL"],
                "description": "An interactive dashboard for visualizing complex datasets with filtering, sorting, and export capabilities.",
                "highlights": ["Interactive charts", "Data filtering", "CSV/PDF export", "Responsive design"],
                "github_link": "https://github.com/username/data-dashboard",
                "demo_link": "https://dataviz-demo.example.com"
            }
        }

    def get_project_list(self):

        project_list = "# Available Projects\n\n"
        for project_id, project in self.projects.items():
            project_list += f"## {project['name']}\n"
            project_list += f"**Tech Stack**: {', '.join(project['tech_stack'])}\n"
            project_list += f"{project['description']}\n\n"

        return project_list

    def get_project_details(self, project_id):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Generate a detailed description for the following project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}
            GitHub: {project['github_link']}
            Demo: {project['demo_link']}

            Include technical details about implementation challenges and solutions. Format the response in markdown.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

    def answer_technical_question(self, project_id, question):

        if project_id in self.projects:
            project = self.projects[project_id]
            prompt = f"""
            Answer the following technical question about this project:

            Project Name: {project['name']}
            Tech Stack: {', '.join(project['tech_stack'])}
            Description: {project['description']}
            Highlights: {', '.join(project['highlights'])}

            Question: {question}

            Provide a detailed technical answer with code examples if relevant.
            """
            return self.get_response(prompt)
        else:
            return "Project not found. Please check the project ID and try again."

This agent is designed to help users with project-related tasks such as:

• Providing an overview of all projects in a portfolio

• Generating detailed descriptions of specific projects

• Answering technical questions about implementation details

The agent, like in the previous examples, uses the LLM capabilities of the base agent (using Groq's LLama 3.3 70B model) to generate technical, project-oriented content formatted in markdown. This is good for technical documentation, or when responding to inquiries about project implementations. We’re using mock data here as opposed to a database.

With that file completed, we have two left. The next is the research_agent.py file, so go ahead and add this code:

from agents.base_agent import BaseAgent
import requests
import os
import json


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="ResearchAssistant",
            description="I'm the research specialist. I can search the web for information about technologies, trends, and industry news.",
            avatar="research_avatar.png"
        )
        self.api_key = os.getenv("GROQ_API_KEY")

    def search_web(self, query):

        headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json"
        }

        payload = {
            "model": "llama-3.3-70b-versatile",
            "messages": [
                {"role": "system", "content": "You are a helpful research assistant."},
                {"role": "user", "content": f"Search the web for: {query}"}
            ],
            "tools": [
                {
                    "type": "web_search"
                }
            ]
        }

        try:
            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=payload
            )

            if response.status_code == 200:
                result = response.json()
                return result["choices"][0]["message"]["content"]
            else:
                return f"Error searching the web: {response.status_code} - {response.text}"
        except Exception as e:
            return f"Error searching the web: {str(e)}"

    def research_technology(self, technology):

        query = f"latest developments and best practices for {technology} in software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results about {technology}, provide a concise summary of:
        1. What it is
        2. Current state and popularity
        3. Key features and benefits
        4. Common use cases
        5. Future trends

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections.
        """
        return self.get_response(prompt)

    def compare_technologies(self, tech1, tech2):

        query = f"comparison between {tech1} and {tech2} for software development"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results comparing {tech1} and {tech2}, provide a detailed comparison including:
        6. Core differences
        7. Performance considerations
        8. Learning curve
        9. Community support
        10. Use case recommendations

        Search Results:
        {search_results}

        Format the response in markdown with a comparison table and explanatory text.
        """
        return self.get_response(prompt)

    def get_industry_trends(self):

        query = "latest trends in software development industry"
        search_results = self.search_web(query)

        prompt = f"""
        Based on the following search results about software development trends, provide a summary of:
        11. Emerging technologies
        12. Industry shifts
        13. In-demand skills
        14. Future predictions

        Search Results:
        {search_results}

        Format the response in markdown with appropriate sections and highlights.
        """
        return self.get_response(prompt)

This agent is designed to help users with research-related tasks such as:

• Researching specific technologies to understand their features, benefits, and use cases

• Comparing different technologies to make informed decisions

• Staying updated on industry trends and emerging technologies

What makes this agent unique compared to the other agents is that it actively fetches real-time information from the web using the Groq Toolhouse API's web search capability instead of relying solely on pre-defined data or the LLM's training data. This allows it to provide more current and comprehensive information about rapidly evolving technology topics.

Ok, now we have one last AI agent to create and it’s the welcome_agent.py file. Add this code to the file:

from agents.base_agent import BaseAgent


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            name="Greeter",
            description="I'm the welcome agent for this portfolio. I can help guide you to the right section based on your interests.",
            avatar="welcome_avatar.png"
        )

    def greet(self, visitor_type=None):

        if visitor_type == "employer":
            return self.get_response(
                "Generate a friendly, professional greeting for a potential employer visiting a programmer's portfolio website. "
                "Mention that they can explore the Projects section to see technical skills and the Career section for professional experience."
            )
        elif visitor_type == "client":
            return self.get_response(
                "Generate a friendly, business-oriented greeting for a potential client visiting a programmer's portfolio website. "
                "Mention that they can check out the Projects section for examples of past work and the Client section for service details."
            )
        elif visitor_type == "fellow_programmer":
            return self.get_response(
                "Generate a friendly, casual greeting for a fellow programmer visiting a portfolio website. "
                "Mention that they can explore the Projects section for technical details and code samples."
            )
        else:
            return self.get_response(
                "Generate a friendly, general greeting for a visitor to a programmer's portfolio website. "
                "Ask if they are an employer, client, or fellow programmer to provide more tailored information."
            )

    def suggest_section(self, interest):

        prompt = f"Based on a visitor expressing interest in '{interest}', suggest which section of a programmer's portfolio they should visit. Options include: Projects, Career, Client Work, About Me, Contact. Explain why in 1-2 sentences."
        return self.get_response(prompt)

This agent is designed to serve as the initial point of contact for visitors to a portfolio website, providing:

• Personalised greetings based on visitor type

• Guidance to relevant sections based on specific interests

• A friendly, conversational introduction to the portfolio

The WelcomeAgent is simpler than some of the other agents we've looked at because it focuses on creating a positive first impression and helping visitors navigate to the content most relevant to their needs. It uses the LLM capabilities of the base agent to generate natural, contextually appropriate responses.

Ok good – your backend API is almost ready. You just have one last file to work on: the main.py file that completes your codebase. This file is quite big, so I will split it into three parts. You’ll need to copy and paste each section into the file. If you have not done so already, its worth installing the Python extension for VS Code as this has debugging, linting, and formatting for Python files.

Alright, here is the first part of the codebase for our main.py file:

from flask import Flask, request, jsonify
import os
from dotenv import load_dotenv
import json
import requests
from flask_cors import CORS


load_dotenv()


app = Flask(__name__)
CORS(app)


class BaseAgent:
    def __init__(self, name, description):
        self.name = name
        self.description = description

        self.api_key = os.getenv("GROQ_API_KEY")

    def get_response(self, prompt):

        try:
            headers = {
                "Authorization": f"Bearer {self.api_key}",
                "Content-Type": "application/json"
            }

            data = {
                "model": "llama3-8b-8192",
                "messages": [
                    {"role": "system", "content": f"You are {self.name}, {self.description}. Respond in a helpful, concise, and professional manner."},
                    {"role": "user", "content": prompt}
                ],
                "temperature": 0.7,
                "max_tokens": 500
            }

            response = requests.post(
                "https://api.groq.com/openai/v1/chat/completions",
                headers=headers,
                json=data
            )

            if response.status_code == 200:
                return response.json()["choices"][0]["message"]["content"]
            else:
                return f"Error: {response.status_code} - {response.text}"
        except Exception as e:
            return f"An error occurred: {str(e)}"


class WelcomeAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "WelcomeAgent",
            "a welcome specialist who greets visitors and helps them navigate the portfolio website"
        )

    def greet(self, visitor_type=None):
        if visitor_type == "employer":
            return self.get_response("Generate a warm welcome message for an employer visiting a programmer's portfolio website. Suggest they check out the Projects and Career sections.")
        elif visitor_type == "client":
            return self.get_response("Generate a warm welcome message for a potential client visiting a programmer's portfolio website. Suggest they check out the Services section.")
        elif visitor_type == "fellow_programmer":
            return self.get_response("Generate a warm welcome message for a fellow programmer visiting a programmer's portfolio website. Suggest they check out the Projects and Research sections.")
        else:
            return self.get_response("Generate a general welcome message for a visitor to a programmer's portfolio website. Ask if they are an employer, client, or fellow programmer.")

    def suggest_section(self, interest):
        return self.get_response(f"A visitor to my portfolio website has expressed interest in {interest}. Suggest which section(s) of the website they should visit based on this interest.")


class ProjectAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ProjectAgent",
            "a project specialist who provides detailed information about the programmer's projects"
        )

    def get_project_list(self):
        return self.get_response("Generate a list of 3-5 impressive software development projects that could be in a programmer's portfolio. Include a brief description for each.")

    def get_project_details(self, project_id):
        project_prompts = {
            "project1": "Describe in detail an e-commerce platform project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project2": "Describe in detail a task management application project for a programmer's portfolio. Include technologies used, challenges overcome, and key features.",
            "project3": "Describe in detail a data visualization dashboard project for a programmer's portfolio. Include technologies used, challenges overcome, and key features."
        }

        prompt = project_prompts.get(
            project_id, f"Describe a project called {project_id} in detail.")
        return self.get_response(prompt)

    def answer_technical_question(self, project_id, question):
        return self.get_response(f"Answer this technical question about a project: '{question}'. The project is {project_id}.")

This part of the code has your imports, set up, and some greetings for the AI agent.

Now for part two, add this code to the file underneath the first code you added:

class CareerAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "CareerAgent",
            "a career specialist who provides information about the programmer's skills and experience"
        )

    def get_skills_summary(self):
        return self.get_response("Generate a comprehensive summary of technical and professional skills for a full-stack developer's portfolio.")

    def get_experience_summary(self):
        return self.get_response("Generate a summary of work experience for a full-stack developer with 5+ years of experience.")

    def assess_job_fit(self, job_description):
        return self.get_response(f"Assess how well a full-stack developer with 5+ years of experience would fit this job description: '{job_description}'. Highlight matching skills and experience.")


class ClientAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ClientAgent",
            "a client specialist who provides information about services, pricing, and the client engagement process"
        )

    def get_services_overview(self):
        return self.get_response("Generate an overview of services that a freelance full-stack developer might offer to clients.")

    def get_service_details(self, service_type):
        service_prompts = {
            "web_development": "Describe web development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "mobile_development": "Describe mobile app development services offered by a freelance full-stack developer, including technologies, pricing range, and typical timeline.",
            "consulting": "Describe technical consulting services offered by a freelance full-stack developer, including areas of expertise, hourly rate range, and engagement model."
        }

        prompt = service_prompts.get(
            service_type, f"Describe {service_type} services in detail.")
        return self.get_response(prompt)

    def explain_process(self):
        return self.get_response("Explain the client engagement process for a freelance full-stack developer, from initial consultation to project delivery.")

    def generate_proposal(self, project_description):
        return self.get_response(f"Generate a project proposal for this client request: '{project_description}'. Include estimated timeline, cost range, and approach.")


class ResearchAgent(BaseAgent):
    def __init__(self):
        super().__init__(
            "ResearchAgent",
            "a research specialist who provides information about technologies, trends, and industry news"
        )

    def search_web(self, query):
        return self.get_response(f"Provide information about '{query}' as if you've just searched the web for the latest information. Include key points and insights.")

    def compare_technologies(self, tech1, tech2):
        return self.get_response(f"Compare {tech1} vs {tech2} in terms of features, performance, use cases, community support, and future prospects.")

    def get_industry_trends(self):
        return self.get_response("Describe current trends in software development and technology that are important for developers to be aware of.")


welcome_agent = WelcomeAgent()
project_agent = ProjectAgent()
career_agent = CareerAgent()
client_agent = ClientAgent()
research_agent = ResearchAgent()


@app.route('/static/images/default_avatar.png')
@app.route('/static/images/default_project.jpg')
def block_default_images():

    response = app.make_response(
        b'GIF89a\x01\x00\x01\x00\x80\x00\x00\xff\xff\xff\x00\x00\x00!\xf9\x04\x01\x00\x00\x00\x00,\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02D\x01\x00;')
    response.headers['Content-Type'] = 'image/gif'

    response.headers['Cache-Control'] = 'public, max-age=31536000'
    response.headers['Expires'] = 'Thu, 31 Dec 2037 23:59:59 GMT'
    return response


@app.route('/api/welcome', methods=['POST'])
def welcome_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    visitor_type = None
    if 'employer' in message.lower():
        visitor_type = 'employer'
    elif 'client' in message.lower():
        visitor_type = 'client'
    elif 'programmer' in message.lower() or 'developer' in message.lower():
        visitor_type = 'fellow_programmer'

    if 'interest' in message.lower() or 'looking for' in message.lower():

        interest = message.replace('interest', '').replace(
            'looking for', '').strip()
        response = welcome_agent.suggest_section(interest)
    else:
        response = welcome_agent.greet(visitor_type)

    return jsonify({'response': response})

In this part of your codebase, you have more AI responses and a welcome API route.

Lastly, complete the code by adding this final piece at the end:

@app.route('/api/project', methods=['POST'])
def project_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    project_id = None
    if 'e-commerce' in message.lower() or 'ecommerce' in message.lower():
        project_id = 'project1'
    elif 'task' in message.lower() or 'management' in message.lower():
        project_id = 'project2'
    elif 'data' in message.lower() or 'visualization' in message.lower() or 'dashboard' in message.lower():
        project_id = 'project3'

    if project_id and ('tell me more' in message.lower() or 'details' in message.lower()):
        response = project_agent.get_project_details(project_id)
    elif 'list' in message.lower() or 'all projects' in message.lower():
        response = project_agent.get_project_list()
    elif project_id:

        response = project_agent.answer_technical_question(project_id, message)
    else:

        response = project_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a project specialist for a portfolio website. "
            "If they're asking about a specific project, suggest they mention one of the projects: "
            "E-commerce Platform, Task Management App, or Data Visualization Dashboard."
        )

    return jsonify({'response': response})


@app.route('/api/career', methods=['POST'])
def career_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'skills' in message.lower():
        response = career_agent.get_skills_summary()
    elif 'experience' in message.lower() or 'work history' in message.lower():
        response = career_agent.get_experience_summary()
    elif 'job' in message.lower() or 'position' in message.lower() or 'role' in message.lower():

        response = career_agent.assess_job_fit(message)
    else:

        response = career_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a career specialist for a portfolio website. "
            "Suggest they ask about skills, experience, or job fit assessment."
        )

    return jsonify({'response': response})


@app.route('/api/client', methods=['POST'])
def client_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'services' in message.lower() or 'offerings' in message.lower():
        response = client_agent.get_services_overview()
    elif 'web' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('web_development')
    elif 'mobile' in message.lower() and 'development' in message.lower():
        response = client_agent.get_service_details('mobile_development')
    elif 'consulting' in message.lower() or 'technical consulting' in message.lower():
        response = client_agent.get_service_details('consulting')
    elif 'process' in message.lower() or 'how does it work' in message.lower():
        response = client_agent.explain_process()
    elif 'proposal' in message.lower() or 'quote' in message.lower() or 'estimate' in message.lower():

        response = client_agent.generate_proposal(message)
    else:

        response = client_agent.get_response(
            f"The user asked: '{message}'. Respond as if you are a client specialist for a portfolio website. "
            "Suggest they ask about services, the client engagement process, or request a proposal."
        )

    return jsonify({'response': response})


@app.route('/api/research', methods=['POST'])
def research_agent_endpoint():
    data = request.json
    message = data.get('message', '')

    if 'compare' in message.lower() and ('vs' in message.lower() or 'versus' in message.lower()):

        tech_parts = message.lower().replace('compare', '').replace(
            'vs', ' ').replace('versus', ' ').split()
        tech1 = tech_parts[0] if len(tech_parts) > 0 else ''
        tech2 = tech_parts[-1] if len(tech_parts) > 1 else ''
        response = research_agent.compare_technologies(tech1, tech2)
    elif 'trends' in message.lower() or 'industry' in message.lower():
        response = research_agent.get_industry_trends()
    else:
        response = research_agent.search_web(message)

    return jsonify({'response': response})


if __name__ == '__main__':

    app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
    app.config['TEMPLATES_AUTO_RELOAD'] = True   # Ensure templates reload

    @app.after_request
    def add_header(response):
        response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
        response.headers['Pragma'] = 'no-cache'
        response.headers['Expires'] = '0'
        return response

    app.run(host='0.0.0.0', port=5001, debug=True,
            use_reloader=False, threaded=True)

Okay, if your file has errors, they're probably caused by the Python indentation. Hopefully, the formatting will not make them too difficult to fix.

The file is now complete, and you’ve created the rest of your AI API routes.

Running Our Python Backend

All that's left is to run your Flask server and get the backend up and running. You can do that with this run script inside the venv folder:

python3 main.py

Your backend should now be running on http://127.0.0.1:5001/. If you go to the page you will see an error like this:

Not Found

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

This is expected, because if you have checked the codebase, you’ll realise that there are no GET routes, only POST routes. To see them working, you need to use an HTTP client like Postman. Another option is to create some curl commands that send a POST request, which you can run from your terminal. Let's use curl because there is less setup. You’ll need to copy and paste the commands.

Each POST request will use exactly one API call on Groq Cloud for your API Key which you can view here https://console.groq.com/keys. Remember that it’s free to use but there are usage limits which you can read about in their documentation on Rate Limits.

I have provided some sample curl commands below – just copy and paste them into your terminal and hit enter, and you should see the response message:

1. Testing the Welcome Agent Endpoint

curl -X POST http://localhost:5001/api/welcome \
  -H "Content-Type: application/json" \
  -d '{"message": "I am an employer looking for a skilled developer"}'

2. Testing the Project Agent Endpoint

curl -X POST http://localhost:5001/api/project \
  -H "Content-Type: application/json" \
  -d '{"message": "Tell me more about the e-commerce project"}'

3. Testing the Career Agent Endpoint

curl -X POST http://localhost:5001/api/career \
  -H "Content-Type: application/json" \
  -d '{"message": "What skills do you have?"}'

4. Testing the Client Agent Endpoint

curl -X POST http://localhost:5001/api/client \
  -H "Content-Type: application/json" \
  -d '{"message": "What services do you offer?"}'

5. Testing the Research Agent Endpoint

curl -X POST http://localhost:5001/api/research \
  -H "Content-Type: application/json" \
  -d '{"message": "What are the current trends in web development?"}'

Building Our React Frontend

We have reached halfway point, and all that's left is to build your front end. We’ll build the front end using Vite, and the website will have six pages. Make sure that you are now inside the root folder for the ai-agent-app project. You can leave the Python server running because your front end is going to connect to the API routes you created.

Now, run the commands below to setup your React project using Vite, Tailwind CSS, react-router and Axios, which we need for page routing and fetch requests:

npm create vite@latest frontend -- --template react
cd frontend
npm install -D tailwindcss@3 postcss autoprefixer react-router axios
npx tailwindcss init -p
npm install

Great, now with those packages installed and our dependencies set up, we are almost ready to start on the codebase. But before that, we need to run one more script, which is going to create all of the files and folders for our project. It's much faster than doing them all manually.

Run this command inside the frontend folder:

mkdir -p src/components src/pages
touch src/style.css src/components/{Chat,Footer,Layout,Navbar}.jsx
touch src/pages/{Career,Contact,Home,Projects,Research,Services}.jsx

Our React frontend should now have a project structure like the example shown below:

We are now ready to start writing some code.

Up first is the tailwind.config.js file. This is the only configuration file you’ll need to work on, as the others already have the configuration we need. Replace all of the code in the file with the code below:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

All this code does is add the paths to all of your template files.

Ok, next, you are going to work on your styles and Tailwind CSS. There are three CSS files to work on: App.css, index.css, and style.css.

First up is the App.css file. Replace all of the code with this code here:

#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

We just have some basic layout styles here for root and main.

Next is the index.css file. Below is the code you’ll need, so replace everything in the file with it:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  .chat-container {
    @apply w-full h-96 flex flex-col;
  }

  .chat-messages {
    @apply flex-1 overflow-y-auto p-4;
  }

  .message {
    @apply flex mb-4;
  }

  .user-message {
    @apply justify-end;
  }

  .agent-message {
    @apply justify-start;
  }

  .message-avatar {
    @apply flex-shrink-0 mr-2;
  }

  .avatar-placeholder {
    @apply w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold;
  }

  .message-content {
    @apply p-3 rounded-lg max-w-xs sm:max-w-sm md:max-w-md;
  }

  .user-message .message-content {
    @apply bg-blue-500 text-white;
  }

  .agent-message .message-content {
    @apply bg-gray-200 text-gray-800;
  }

  .chat-input-container {
    @apply p-4 border-t border-gray-200;
  }

  .chat-input-group {
    @apply flex;
  }

  .chat-input {
    @apply flex-1 border border-gray-300 rounded-l-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .chat-send-button {
    @apply bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .loading-dots:after {
    @apply content-['...'] animate-pulse;
  }

  .project-image-placeholder {
    @apply h-48 bg-gray-300 flex items-center justify-center text-gray-600 font-semibold;
  }

  .agent-avatar-placeholder {
    @apply w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mx-auto;
  }
}

All of these styles relate to your Tailwind CSS setup throughout your project.

Just one file remains for the CSS and it’s the style.css file. This is a big file, so I will split the code into two parts – just copy and paste them into the file.

Here is the first part:

/* Main Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* Layout Styles */
#root {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

footer {
  margin-top: auto;
}

/* Navbar Styles */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 700;
}

.navbar .container {
  max-width: 1320px;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem;
  padding: 2em;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Agent Styles */
.agent-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* Chat Container Styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f8f9fa;
}

And here is the second part:

.chat-input-container {
  padding: 0.5rem;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
}

.chat-input-group {
  display: flex;
}

.chat-input {
  flex: 1;
  margin-right: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.chat-send-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.chat-send-button:hover {
  background-color: #0069d9;
}

/* Message Styles */
.message {
  margin-bottom: 1rem;
  max-width: 80%;
}

.user-message {
  margin-left: auto;
  text-align: right;
}

.agent-message {
  display: flex;
  align-items: flex-start;
}

.message-avatar {
  margin-right: 0.5rem;
}

.message-content {
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.user-message .message-content {
  background-color: #007bff;
  color: #fff;
}

.agent-message .message-content {
  background-color: #fff;
}

/* Loading Animation */
.loading-dots:after {
  content: '.';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60% {
    content: '...';
  }
  80%,
  100% {
    content: '';
  }
}

This code has the main styles for the layout of the website’s content. That takes care of the styling. We just have the components and pages left, and then you can run your app. Before we start on those folders, let’s quickly do the App.jsx and main.jsx files in the src folder.

So, add this code to the App.jsx file:

import { BrowserRouter as Router, Routes, Route } from 'react-router';
import Layout from './components/Layout';
import Home from './pages/Home';
import Projects from './pages/Projects';
import Career from './pages/Career';
import Services from './pages/Services';
import Research from './pages/Research';
import Contact from './pages/Contact';
import './App.css';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/career" element={<Career />} />
          <Route path="/services" element={<Services />} />
          <Route path="/research" element={<Research />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

In this file, you have all of your routes. This is how you’ll navigate between pages using BrowserRouter.

Finally, replace and update all of the code inside of main.jsx with this:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import './style.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

The only update we did here was add an import for import './style.css' so now you can access the styles from this file across your application.

Time to work on your component files, starting with the Chat.jsx file. I split the codebase because it’s a big file, so make sure you add it all together.

Like before, here is the first part:

import { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";

function Chat({ agentType, initialMessage, agentInitials, directQuestion }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef(null);
  const [processedQuestions, setProcessedQuestions] = useState([]);

  const API_BASE_URL = "http://127.0.0.1:5001";

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleSendMessage = useCallback(
    async (questionOverride = null) => {
      const messageToSend = questionOverride || input;

      if (!messageToSend.trim()) return;

      const userMessage = {
        content: messageToSend,
        isUser: true,
      };

      setMessages((prev) => [...prev, userMessage]);

      if (!questionOverride) {
        setInput("");
      }

      setIsLoading(true);

      try {
        const response = await axios.post(
          `${API_BASE_URL}/api/${agentType}`,
          {
            message: messageToSend,
          },
          {
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          }
        );

        if (response.data && response.data.response) {
          setMessages((prev) => [
            ...prev,
            {
              content: response.data.response,
              isUser: false,
            },
          ]);
        }
      } catch (error) {
        console.error("Error sending message:", error);
        setMessages((prev) => [
          ...prev,
          {
            content:
              "Sorry, there was an error connecting to the AI agent. Please make sure the Flask server is running at http://127.0.0.1:5001/",
            isUser: false,
          },
        ]);
      } finally {
        setIsLoading(false);
      }
    },
    [input, agentType, API_BASE_URL]
  );

  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      handleSendMessage();
    }
  };

  const cleanQuestion = (question) => {
    return question.replace(/\s*\[\d+\]\s*$/, "");
  };

  useEffect(() => {
    if (initialMessage) {
      setMessages([
        {
          content: initialMessage,
          isUser: false,
        },
      ]);
    }
  }, [initialMessage]);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

The first part of this code has your imports, base URL to connect to the backend, and the functions.

Now let’s add the second part of the codebase:

  useEffect(() => {
    if (
      directQuestion &&
      directQuestion.trim() !== "" &&
      !processedQuestions.includes(directQuestion)
    ) {
      const cleanedQuestion = cleanQuestion(directQuestion);
      setInput(cleanedQuestion);
      handleSendMessage(cleanedQuestion);
      setProcessedQuestions((prev) => [...prev, directQuestion]);
    }
  }, [directQuestion, processedQuestions, handleSendMessage]);

  const renderContent = (content) => {
    let formattedContent = content;

    formattedContent = formattedContent.replace(
      /#{6}\s+(.*?)(?=\n|$)/g,
      "<h6>$1</h6>"
    );
    formattedContent = formattedContent.replace(
      /#{5}\s+(.*?)(?=\n|$)/g,
      "<h5>$1</h5>"
    );
    formattedContent = formattedContent.replace(
      /#{4}\s+(.*?)(?=\n|$)/g,
      "<h4>$1</h4>"
    );
    formattedContent = formattedContent.replace(
      /#{3}\s+(.*?)(?=\n|$)/g,
      "<h3>$1</h3>"
    );
    formattedContent = formattedContent.replace(
      /#{2}\s+(.*?)(?=\n|$)/g,
      "<h2>$1</h2>"
    );
    formattedContent = formattedContent.replace(
      /#{1}\s+(.*?)(?=\n|$)/g,
      "<h1>$1</h1>"
    );

    formattedContent = formattedContent.replace(
      /\*\*(.*?)\*\*/g,
      "<strong>$1</strong>"
    );

    formattedContent = formattedContent.replace(/\*(.*?)\*/g, "<em>$1</em>");

    formattedContent = formattedContent.replace(/`(.*?)`/g, "<code>$1</code>");

    formattedContent = formattedContent.replace(
      /\[(.*?)\]\((.*?)\)/g,
      '<a href="$2" target="_blank">$1</a>'
    );

    formattedContent = formattedContent.replace(
      /^\s*\*\s+(.*?)(?=\n|$)/gm,
      "<li>$1</li>"
    );
    formattedContent = formattedContent.replace(
      /<li>(.*?)<\/li>(?:\s*<li>.*?<\/li>)*/g,
      "<ul>$&</ul>"
    );

    formattedContent = formattedContent.replace(
      /^\s*\d+\.\s+(.*?)(?=\n|$)/gm,
      "<li>$1</li>"
    );
    formattedContent = formattedContent.replace(
      /<li>(.*?)<\/li>(?:\s*<li>.*?<\/li>)*/g,
      "<ol>$&</ol>"
    );

    return { __html: formattedContent };
  };

  return (
    <div className="chat-container">
      <div className="chat-messages" id={`${agentType}-messages`}>
        {messages.map((message, index) => (
          <div
            key={index}
            className={`message ${
              message.isUser ? "user-message" : "agent-message"
            }`}
          >
            {!message.isUser && (
              <div className="message-avatar">
                <div className="avatar-placeholder">
                  {agentInitials || "AI"}
                </div>
              </div>
            )}
            <div className="message-content">
              <div dangerouslySetInnerHTML={renderContent(message.content)} />
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="message agent-message">
            <div className="message-avatar">
              <div className="avatar-placeholder">{agentInitials || "AI"}</div>
            </div>
            <div className="message-content">
              <p className="loading-dots">Thinking</p>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      <div className="chat-input-container">
        <div className="chat-input-group">
          <input
            type="text"
            id={`${agentType}-input`}
            className="chat-input"
            placeholder="Type your message..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
          />
          <button
            id={`${agentType}-send`}
            className="chat-send-button"
            onClick={() => handleSendMessage()}
          >
            <i className="fa-solid fa-paper-plane mr-2"></i>Send
          </button>
        </div>
      </div>
    </div>
  );
}

export default Chat;

The second part of the code mostly has the JSX for the components.

Right, next let’s do the Footer.jsx file by adding this code to the file:

function Footer() {
  return (
    <footer className="bg-dark text-white py-4">
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <h5>Portfolio</h5>
            <p>Showcasing my work with the help of AI agents</p>
          </div>
          <div className="col-md-6 text-md-end">
            <h5>Connect</h5>
            <div className="social-links">
              <a href="#" className="text-white me-2"></a>
              <a href="#" className="text-white me-2"></a>
              <a href="#" className="text-white me-2"></a>
            </div>
          </div>
        </div>
        <div className="row mt-3">
          <div className="col-12 text-center">
            <p className="mb-0">
              &copy; {new Date().getFullYear()} Portfolio. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;

The code is pretty much self-explanatory – it has some contact details which will show up at the bottom of your page in the footer section.

Now we can work on the Layout.jsx. I have also split it into two parts.

Add the first part of the codebase here:

import { Link, useLocation } from "react-router";
import { useState } from "react";

function Layout({ children }) {
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="flex flex-col min-h-screen">
      <nav className="bg-gray-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link className="text-xl font-bold" to="/">
                Portfolio
              </Link>
            </div>
            <div className="hidden md:block">
              <div className="ml-10 flex items-center space-x-4">
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/"
                >
                  Home
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/projects"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/projects"
                >
                  Projects
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/career"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/career"
                >
                  Career
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/services"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/services"
                >
                  Services
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/research"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/research"
                >
                  Research
                </Link>
                <Link
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location.pathname === "/contact"
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white"
                  }`}
                  to="/contact"
                >
                  Contact
                </Link>
              </div>
            </div>
            <div className="md:hidden flex items-center">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
              >
                <span className="sr-only">Open main menu</span>
                {isMenuOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>

This part of the code has a lot of components, as expected for the layout.

Here is the second part of the code to be added to the file:

        {/* Mobile menu, show/hide based on menu state */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/projects"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/projects"
                onClick={() => setIsMenuOpen(false)}
              >
                Projects
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/career"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/career"
                onClick={() => setIsMenuOpen(false)}
              >
                Career
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/services"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/services"
                onClick={() => setIsMenuOpen(false)}
              >
                Services
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/research"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/research"
                onClick={() => setIsMenuOpen(false)}
              >
                Research
              </Link>
              <Link
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location.pathname === "/contact"
                    ? "bg-gray-900 text-white"
                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
                }`}
                to="/contact"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </Link>
            </div>
          </div>
        )}
      </nav>

      <main className="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {children}
      </main>

      <footer className="bg-gray-800 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="md:flex md:justify-between">
            <div className="mb-8 md:mb-0">
              <h5 className="text-lg font-semibold mb-2">Portfolio</h5>
              <p className="text-gray-300">
                Showcasing my work with the help of AI agents
              </p>
            </div>
          </div>
          <div className="mt-8 border-t border-gray-700 pt-8 text-center">
            <p className="text-gray-300">
              &copy; 2025 Portfolio. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default Layout;

This code has more components, which completes the Layout component.

We’re almost done. Now for the last component, Navbar.jsx, before we move on to the pages.

This is the code you need for the file:

import { Link, useLocation } from 'react-router';

function Navbar() {
  const location = useLocation();

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container">
        <Link className="navbar-brand" to="/">
          Portfolio
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/' ? 'active' : ''
                }`}
                to="/"
              >
                Home
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/projects' ? 'active' : ''
                }`}
                to="/projects"
              >
                Projects
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/career' ? 'active' : ''
                }`}
                to="/career"
              >
                Career
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/services' ? 'active' : ''
                }`}
                to="/services"
              >
                Services
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/research' ? 'active' : ''
                }`}
                to="/research"
              >
                Research
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className={`nav-link ${
                  location.pathname === '/contact' ? 'active' : ''
                }`}
                to="/contact"
              >
                Contact
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

The navbar component has your navigation links, which lets you navigate between pages using react-router.

Alright, the component codebase is ready! All that remains is the six page routes in our pages folder.

The first file we’ll work on will be the Career.jsx file. I will split the codebase for readability like before, so copy the different sections starting with the first part here:

import { useState } from "react";
import Chat from "../components/Chat";

function Career() {
  const initialMessage =
    "Hello! I'm CareerAgent, the career specialist. I can provide information about skills, experience, and professional background. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askCareerQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Career</h1>
          <p className="text-lg mb-4">
            Here you can find information about my professional background,
            skills, and experience. Feel free to ask CareerAgent for more
            details.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with CareerAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our career specialist can provide information about skills,
                experience, and professional background.
              </p>
              <Chat
                agentType="career"
                initialMessage={initialMessage}
                agentInitials="CA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Skills</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Frontend Development
              </h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  React
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Vue.js
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Angular
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  TypeScript
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  CSS/SASS
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your frontend development skills"
                  )
                }
              >
                Ask About Frontend Skills
              </button>

Like before, we have imports, states, and some components. Now for the second part, which is here:

 </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Backend Development
              </h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  Node.js
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Python
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Django
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Flask
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  SQL/NoSQL
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your backend development skills"
                  )
                }
              >
                Ask About Backend Skills
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">Other Skills</h5>
              <ul className="divide-y divide-gray-200">
                <li className="py-3 flex justify-between items-center">
                  DevOps
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  UI/UX Design
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Project Management
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Advanced
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Agile Methodologies
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Expert
                  </span>
                </li>
                <li className="py-3 flex justify-between items-center">
                  Technical Writing
                  <span className="px-2.5 py-0.5 bg-blue-500 text-white text-xs font-medium rounded-full">
                    Intermediate
                  </span>
                </li>
              </ul>
              <button
                className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion("What other skills do you have?")
                }
              >
                Ask About Other Skills
              </button>
            </div>
          </div>
        </div>
      </div>

There is a lot more component code here for the career page. Lastly, lets add the last part of the code for this page:

<div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Experience</h2>
        </div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">
                  Senior Full-Stack Developer
                </h5>
                <span className="text-gray-500 text-sm">2020 - Present</span>
              </div>
              <h6 className="text-gray-600 mb-3">Tech Innovations Inc.</h6>
              <p className="text-gray-700 mb-4">
                Lead developer for multiple web and mobile applications,
                managing a team of 5 developers. Implemented CI/CD pipelines and
                improved development workflow efficiency by 30%.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Tech Innovations Inc."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Full-Stack Developer</h5>
                <span className="text-gray-500 text-sm">2017 - 2020</span>
              </div>
              <h6 className="text-gray-600 mb-3">WebSolutions Co.</h6>
              <p className="text-gray-700 mb-4">
                Developed and maintained multiple client websites and web
                applications. Specialized in React frontend development and
                Node.js backend services.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at WebSolutions Co."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="flex justify-between items-start mb-2">
                <h5 className="text-xl font-semibold">Junior Web Developer</h5>
                <span className="text-gray-500 text-sm">2015 - 2017</span>
              </div>
              <h6 className="text-gray-600 mb-3">Digital Creations Ltd.</h6>
              <p className="text-gray-700 mb-4">
                Worked on frontend development for e-commerce websites. Gained
                experience with JavaScript, CSS, and responsive design
                principles.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askCareerQuestion(
                    "Tell me more about your experience at Digital Creations Ltd."
                  )
                }
              >
                More Details
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Education</h5>
            <div className="mb-6">
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Master of Science in Computer Science
                </h6>
                <span className="text-gray-500 text-sm">2013 - 2015</span>
              </div>
              <p className="text-gray-600">University of Technology</p>
            </div>
            <div>
              <div className="flex justify-between items-start mb-1">
                <h6 className="font-medium">
                  Bachelor of Science in Software Engineering
                </h6>
                <span className="text-gray-500 text-sm">2009 - 2013</span>
              </div>
              <p className="text-gray-600">State University</p>
            </div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion(
                  "Tell me more about your educational background"
                )
              }
            >
              Ask About Education
            </button>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Certifications</h5>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 flex justify-between items-center">
                AWS Certified Solutions Architect
                <span className="text-gray-500 text-sm">2022</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Google Cloud Professional Developer
                <span className="text-gray-500 text-sm">2021</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Microsoft Certified: Azure Developer Associate
                <span className="text-gray-500 text-sm">2020</span>
              </li>
              <li className="py-3 flex justify-between items-center">
                Certified Scrum Master
                <span className="text-gray-500 text-sm">2019</span>
              </li>
            </ul>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askCareerQuestion("Tell me more about your certifications")
              }
            >
              Ask About Certifications
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Career;

And this completes our Career.jsx page: we have forms and more components in this part of the code.

Next is our Contact.jsx page. Like before, I will split the codebase for readability, so add the first part of this code to it:

import { useState } from "react";

function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  const [formResponse, setFormResponse] = useState(null);

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [id]: value,
    }));
  };

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

    setFormResponse({
      type: "success",
      message:
        "Thank you for your message! I'll get back to you as soon as possible.",
    });

    setFormData({
      name: "",
      email: "",
      subject: "",
      message: "",
    });

    document
      .getElementById("form-response")
      .scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-2/3">
          <h1 className="text-3xl font-bold mb-4">Contact Me</h1>
          <p className="text-lg mb-4">
            Have a question or want to discuss a potential project? Feel free to
            reach out using the form below or through any of my social media
            channels.
          </p>
        </div>
        <div className="md:w-1/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">Quick Links</h5>
              <div className="flex flex-col gap-2">
                <a
                  href="/projects"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  View Projects
                </a>
                <a
                  href="/services"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  Services & Pricing
                </a>
                <a
                  href="/research"
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 text-center transition-colors"
                >
                  Research & Resources
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-4">Contact Form</h5>
            <form id="contact-form" onSubmit={handleSubmit}>
              <div className="mb-4">
                <label
                  htmlFor="name"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Name
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="name"
                  placeholder="Your Name"
                  required
                  value={formData.name}
                  onChange={handleChange}
                />
              </div>

We have our imports, functions, and part of the components here. Lastly, add the second part to complete this page:

<div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Email
                </label>
                <input
                  type="email"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="email"
                  placeholder="your.email@example.com"
                  required
                  value={formData.email}
                  onChange={handleChange}
                />
              </div>
              <div className="mb-4">
                <label
                  htmlFor="subject"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Subject
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="subject"
                  placeholder="Subject"
                  required
                  value={formData.subject}
                  onChange={handleChange}
                />
              </div>
              <div className="mb-4">
                <label
                  htmlFor="message"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Message
                </label>
                <textarea
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  id="message"
                  rows="5"
                  placeholder="Your message..."
                  required
                  value={formData.message}
                  onChange={handleChange}
                ></textarea>
              </div>
              <button
                type="submit"
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              >
                Send Message
              </button>
            </form>
            <div
              id="form-response"
              className="mt-4"
              style={{ display: formResponse ? "block" : "none" }}
            >
              {formResponse && (
                <div
                  className={`p-4 ${
                    formResponse.type === "success"
                      ? "bg-green-100 text-green-700"
                      : "bg-red-100 text-red-700"
                  } rounded-md`}
                >
                  <i className="bi bi-check-circle-fill mr-2"></i>
                  {formResponse.message}
                </div>
              )}
            </div>
          </div>
        </div>
        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-4">
                Contact Information
              </h5>
              <ul className="space-y-3">
                <li className="flex items-center">
                  <i className="bi bi-envelope mr-2"></i>
                  <a
                    href="mailto:contact@example.com"
                    className="text-blue-500 hover:underline"
                  >
                    contact@example.com
                  </a>
                </li>
                <li className="flex items-center">
                  <i className="bi bi-geo-alt mr-2"></i>
                  UK
                </li>
              </ul>
              <h5 className="text-xl font-semibold mt-6 mb-3">
                Connect on Social Media
              </h5>
              <div className="flex flex-wrap gap-2">
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-github mr-1"></i> GitHub
                </a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 flex items-center transition-colors"
                >
                  <i className="bi bi-linkedin mr-1"></i> LinkedIn
                </a>
                <a
                  href="#"
                  className="px-3 py-1.5 border border-gray-800 text-gray-800 rounded-md hover:bg-gray-100 flex items-center transition-colors"
                >
                  <i className="bi bi-twitter mr-1"></i> X
                </a>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-3">Availability</h5>
              <p className="text-gray-700 mb-3">
                I'm currently available for freelance work and consulting. My
                typical response time is within 24 hours.
              </p>
              <p className="text-gray-700">
                For urgent inquiries, please call the phone number listed above.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Contact;

With that, this page is now done, and we have the rest of the components and form.

Ok just four pages left: let’s work on the home page first. The code is not that big so we can do it all at once.

This is the code to add to the Home.jsx page file:

import { Link } from 'react-router';
import Chat from '../components/Chat';

function Home() {
  const initialMessage =
    "Hello! I'm WelcomeAgent, the welcome specialist. I can help you navigate this portfolio website. Are you an employer, client, or fellow programmer?";

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Welcome to my Portfolio</h1>
          <p className="text-lg mb-4">
            This portfolio showcases my work and skills with the help of
            specialized AI agents. Each agent is designed to assist you with
            different aspects of my portfolio.
          </p>
          <p className="text-gray-700">
            Feel free to interact with the WelcomeAgent to get personalized
            recommendations on which sections of the portfolio to explore based
            on your interests.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with WelcomeAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our welcome specialist can help you navigate this portfolio
                website.
              </p>
              <Chat
                agentType="welcome"
                initialMessage={initialMessage}
                agentInitials="WA"
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Meet the Agents</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">PA</div>
              <h5 className="text-xl font-semibold mb-2">ProjectAgent</h5>
              <p className="text-gray-600 mb-4 text-center">
                Provides detailed information about my projects, technologies
                used, and challenges overcome.
              </p>
              <Link
                to="/projects"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Projects
              </Link>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">CA</div>
              <h5 className="text-xl font-semibold mb-2">CareerAgent</h5>
              <p className="text-gray-600 mb-4 text-center">
                Shares information about my skills, experience, and professional
                background.
              </p>
              <Link
                to="/career"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Career
              </Link>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col items-center">
              <div className="agent-avatar-placeholder mb-4">BA</div>
              <h5 className="text-xl font-semibold mb-2">BusinessAdvisor</h5>
              <p className="text-gray-600 mb-4 text-center">
                Provides information about services, pricing, and client
                engagement process.
              </p>
              <Link
                to="/services"
                className="mt-auto py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Services
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Featured Projects</h5>
            <p className="text-gray-600 mb-4">
              Check out some of my recent work:
            </p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">E-commerce Platform</li>
              <li className="py-3 px-2">Task Management Application</li>
              <li className="py-3 px-2">Data Visualization Dashboard</li>
            </ul>
            <div className="mt-4">
              <Link
                to="/projects"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View All Projects
              </Link>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Research & Insights</h5>
            <p className="text-gray-600 mb-4">
              Explore my research on emerging technologies and industry trends:
            </p>
            <ul className="divide-y divide-gray-200">
              <li className="py-3 px-2">AI in Web Development</li>
              <li className="py-3 px-2">Modern Frontend Frameworks</li>
              <li className="py-3 px-2">Cloud Architecture Patterns</li>
            </ul>
            <div className="mt-4">
              <Link
                to="/research"
                className="inline-block py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              >
                View Research
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

This has the code for our home page and WelcomeAgent.

Alright, now let's work on the Projects.jsx page. For readability it's easier to split the code in half again. So here is the first part:

import { useState } from "react";
import Chat from "../components/Chat";

function Projects() {
  const initialMessage =
    "Hello! I'm ProjectAgent, the project specialist. I can provide detailed information about projects, technologies used, and challenges overcome. What would you like to know?";

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askProjectQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Projects</h1>
          <p className="text-lg mb-4">
            Here you can explore my portfolio of projects. Feel free to ask
            ProjectAgent for more details about any project.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with ProjectAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our project specialist can provide detailed information about
                projects, technologies, and challenges.
              </p>
              <Chat
                agentType="project"
                initialMessage={initialMessage}
                agentInitials="PA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Featured Projects</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">E-commerce Platform</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                E-commerce Platform
              </h5>
              <p className="text-gray-600 mb-4">
                A full-featured e-commerce platform with product management,
                shopping cart, and payment processing.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the E-commerce Platform project"
                      )
                    }
                  >
                    View Details
                  </button>
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the E-commerce Platform project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">2023</span>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">Task Management App</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Task Management Application
              </h5>
              <p className="text-gray-600 mb-4">
                A collaborative task management application with real-time
                updates and team collaboration features.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the Task Management Application project"
                      )
                    }
                  >
                    View Details
                  </button>

As previously mentioned, we have our imports, functions, and some components. Complete the page with the second part of the code here:

 <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the Task Management Application project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">2022</span>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="project-image-placeholder">Data Visualization</div>
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Data Visualization Dashboard
              </h5>
              <p className="text-gray-600 mb-4">
                An interactive dashboard for visualizing complex datasets with
                customizable charts and filters.
              </p>
              <div className="flex justify-between items-center">
                <div className="flex space-x-2">
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "Tell me more about the Data Visualization Dashboard project"
                      )
                    }
                  >
                    View Details
                  </button>
                  <button
                    type="button"
                    className="py-1.5 px-3 text-sm border border-gray-500 text-gray-500 rounded-md hover:bg-gray-50 transition-colors"
                    onClick={() =>
                      askProjectQuestion(
                        "What technologies were used in the Data Visualization Dashboard project?"
                      )
                    }
                  >
                    Technologies
                  </button>
                </div>
                <span className="text-sm text-gray-500">2021</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">
              Technical Skills Showcase
            </h5>
            <p className="text-gray-600 mb-4">
              These projects demonstrate proficiency in the following
              technologies:
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h6 className="font-semibold mb-2">Frontend</h6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>React</li>
                  <li>Vue.js</li>
                  <li>Angular</li>
                  <li>TypeScript</li>
                  <li>CSS/SASS</li>
                </ul>
              </div>
              <div>
                <h6 className="font-semibold mb-2">Backend</h6>
                <ul className="list-disc pl-5 space-y-1">
                  <li>Node.js</li>
                  <li>Python</li>
                  <li>Django</li>
                  <li>Flask</li>
                  <li>MongoDB</li>
                </ul>
              </div>
            </div>
            <button
              className="mt-4 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askProjectQuestion(
                  "What other technologies are you proficient in?"
                )
              }
            >
              Ask About Other Skills
            </button>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Project Inquiry</h5>
            <p className="text-gray-600 mb-4">
              Interested in a specific type of project or technology? Ask
              ProjectAgent for more information.
            </p>
            <div className="flex flex-col space-y-3">
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Do you have any projects involving machine learning or AI?"
                  )
                }
              >
                Ask About AI Projects
              </button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion("What are your most challenging projects?")
                }
              >
                Ask About Challenging Projects
              </button>
              <button
                className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askProjectQuestion(
                    "Can you show me examples of your UI/UX work?"
                  )
                }
              >
                Ask About UI/UX Work
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Projects;

With the remaining components added, this page is now complete.

Its time to do the Research.jsx page, starting with the first half of the codebase:

import { useState } from "react";
import Chat from "../components/Chat";

function Research() {
  const initialMessage =
    "Hello! I'm ResearchAgent, the research specialist. I can provide information about technologies, trends, and industry news. What would you like to know?";
  const [searchQuery, setSearchQuery] = useState("");
  const [tech1, setTech1] = useState("");
  const [tech2, setTech2] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askResearchQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      askResearchQuestion(`Search for information about: ${searchQuery}`);
      setSearchQuery("");
    }
  };

  const handleCompare = (e) => {
    e.preventDefault();
    if (tech1.trim() && tech2.trim()) {
      askResearchQuestion(`Compare ${tech1} vs ${tech2}`);
      setTech1("");
      setTech2("");
    }
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Research & Insights</h1>
          <p className="text-lg mb-4">
            Here you can explore research on technologies, trends, and industry
            news. Feel free to ask ResearchAgent for more information.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with ResearchAgent
              </h5>
              <p className="text-gray-600 mb-4">
                Our research specialist can provide information about
                technologies, trends, and industry news.
              </p>
              <Chat
                agentType="research"
                initialMessage={initialMessage}
                agentInitials="RA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">
              Search for Information
            </h5>
            <p className="text-gray-600 mb-4">
              Enter a topic to search for the latest information and insights.
            </p>
            <form onSubmit={handleSearch}>
              <div className="flex mb-4">
                <input
                  type="text"
                  className="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="e.g., WebAssembly, Edge Computing, etc."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
                <button
                  className="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors"
                  type="submit"
                >
                  Search
                </button>
              </div>
            </form>
          </div>
        </div>
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">Compare Technologies</h5>
            <p className="text-gray-600 mb-4">
              Compare two technologies to understand their pros, cons, and use
              cases.
            </p>
            <form onSubmit={handleCompare}>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
                <div>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="First technology"
                    value={tech1}
                    onChange={(e) => setTech1(e.target.value)}
                  />
                </div>

We have our imports, state, functions, and some components for the ResearchAgent, so it's pretty straightforward. Now, we can complete the page by finishing it with the rest of the code:

<div>
                  <input
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Second technology"
                    value={tech2}
                    onChange={(e) => setTech2(e.target.value)}
                  />
                </div>
              </div>
              <button
                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
                type="submit"
              >
                Compare
              </button>
            </form>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Current Tech Trends</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                AI in Web Development
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Exploring how artificial intelligence is transforming web
                development practices and tools.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Tell me about AI in web development")
                }
              >
                Learn More
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Modern Frontend Frameworks
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Analysis of current frontend frameworks, their strengths, and
                ideal use cases.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Compare modern frontend frameworks")
                }
              >
                Learn More
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6 flex flex-col h-full">
              <h5 className="text-xl font-semibold mb-3">
                Cloud Architecture Patterns
              </h5>
              <p className="text-gray-600 mb-4 flex-grow">
                Best practices and patterns for designing scalable cloud-based
                applications.
              </p>
              <button
                className="py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors self-start"
                onClick={() =>
                  askResearchQuestion("Explain cloud architecture patterns")
                }
              >
                Learn More
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="mb-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-3">Industry Trends</h5>
            <p className="text-gray-600 mb-4">
              Stay updated on the latest trends in software development and
              technology.
            </p>
            <button
              className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
              onClick={() =>
                askResearchQuestion(
                  "What are the current trends in software development and technology?"
                )
              }
            >
              Get Industry Trends
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Research;

The second half of the code has the remaining components, which complete the page.

Now for the final page which is for Services.jsx. The codebase is quite large so we will break it down.

And here's the first part of the codebase to add:

import { useState } from "react";
import axios from "axios";
import Chat from "../components/Chat";

function Services() {
  const initialMessage =
    "Hello! I'm BusinessAdvisor, the client specialist. I can provide information about services, pricing, and project details. What would you like to know?";
  const [projectDescription, setProjectDescription] = useState("");

  const [currentQuestion, setCurrentQuestion] = useState("");

  const askClientQuestion = (question) => {
    setCurrentQuestion(`${question} [${Date.now()}]`);

    setTimeout(() => {
      setCurrentQuestion("");
    }, 500);
  };

  const generateProposal = async () => {
    if (!projectDescription.trim()) return;

    try {
      const response = await axios.post("/api/client/proposal", {
        project_description: projectDescription,
      });

      if (response.data && response.data.proposal) {
        askClientQuestion(
          `Can you provide a proposal for this project: ${projectDescription}`
        );
      }
    } catch (error) {
      console.error("Error generating proposal:", error);
    }
  };

  return (
    <div>
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="md:w-1/3">
          <h1 className="text-3xl font-bold mb-4">Services</h1>
          <p className="text-lg mb-4">
            Here you can find information about the services I offer. Feel free
            to ask BusinessAdvisor for more details about pricing, timelines,
            and project specifics.
          </p>
        </div>
        <div className="md:w-2/3">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Chat with BusinessAdvisor
              </h5>
              <p className="text-gray-600 mb-4">
                Our client specialist can provide information about services,
                pricing, and project details.
              </p>
              <Chat
                agentType="client"
                initialMessage={initialMessage}
                agentInitials="BA"
                directQuestion={currentQuestion}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Services Offered</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">Web Development</h5>
              <p className="text-gray-600 mb-4">
                Custom web application development using modern frameworks and
                best practices.
              </p>
              <h6 className="font-semibold mb-2">Technologies</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>React</li>
                <li>Vue.js</li>
                <li>Node.js</li>
                <li>Django</li>
                <li>Flask</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Project-based or hourly
                </li>
                <li>
                  <strong>Price Range:</strong> $5,000 - $50,000 depending on
                  complexity
                </li>
                <li>
                  <strong>Timeline:</strong> 4-12 weeks depending on scope
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your web development services"
                  )
                }
              >
                Ask about Web Development
              </button>
            </div>
          </div>

We have more import statements, state, and components for our BusinessAdvisor AI agent. Onto the next part of this codebase here:

 <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Mobile App Development
              </h5>
              <p className="text-gray-600 mb-4">
                Native and cross-platform mobile application development for iOS
                and Android.
              </p>
              <h6 className="font-semibold mb-2">Technologies</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>React Native</li>
                <li>Flutter</li>
                <li>Swift</li>
                <li>Kotlin</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Project-based
                </li>
                <li>
                  <strong>Price Range:</strong> $8,000 - $60,000 depending on
                  complexity
                </li>
                <li>
                  <strong>Timeline:</strong> 6-16 weeks depending on scope
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your mobile app development services"
                  )
                }
              >
                Ask about Mobile Development
              </button>
            </div>
          </div>
          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full">
            <div className="p-6">
              <h5 className="text-xl font-semibold mb-2">
                Technical Consulting
              </h5>
              <p className="text-gray-600 mb-4">
                Expert advice on architecture, technology stack, and development
                practices.
              </p>
              <h6 className="font-semibold mb-2">Areas of Expertise</h6>
              <ul className="list-disc pl-5 space-y-1 mb-4">
                <li>System Architecture</li>
                <li>Database Design</li>
                <li>Performance Optimization</li>
                <li>Security Best Practices</li>
                <li>DevOps Implementation</li>
              </ul>
              <h6 className="font-semibold mb-2">Details</h6>
              <ul className="space-y-2 mb-4">
                <li>
                  <strong>Pricing Model:</strong> Hourly
                </li>
                <li>
                  <strong>Price Range:</strong> $150 - $250 per hour
                </li>
                <li>
                  <strong>Timeline:</strong> Ongoing or as needed
                </li>
              </ul>
              <button
                className="mt-2 py-1.5 px-3 text-sm border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                onClick={() =>
                  askClientQuestion(
                    "Tell me more about your technical consulting services"
                  )
                }
              >
                Ask about Consulting
              </button>
            </div>
          </div>
        </div>
      </div>

We can expect to see lots of component code here for the page, so lets finish it off with the final part now:

 <div className="mb-12">
        <div className="mb-6">
          <h2 className="text-2xl font-bold mb-4">Client Engagement Process</h2>
        </div>
        <div className="w-full">
          <div className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      1
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Initial Consultation
                    </h5>
                    <p className="text-gray-600 text-center">
                      Understanding your requirements and project goals
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      2
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Proposal
                    </h5>
                    <p className="text-gray-600 text-center">
                      Detailed quote and project plan preparation
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      3
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Development
                    </h5>
                    <p className="text-gray-600 text-center">
                      Regular sprints with client feedback
                    </p>
                  </div>
                </div>
                <div className="mb-6 md:mb-0">
                  <div className="flex flex-col items-center">
                    <div className="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center text-xl font-bold mb-4">
                      4
                    </div>
                    <h5 className="text-lg font-semibold mt-2 mb-1">
                      Delivery
                    </h5>
                    <p className="text-gray-600 text-center">
                      Testing, deployment, and ongoing support
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex justify-center mt-8">
                <button
                  className="py-2 px-4 border border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition-colors"
                  onClick={() =>
                    askClientQuestion(
                      "Explain your client engagement process in detail"
                    )
                  }
                >
                  Learn More About the Process
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="w-full">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="p-6">
            <h5 className="text-xl font-semibold mb-2">Request a Proposal</h5>
            <p className="text-gray-600 mb-4">
              Interested in working together? Describe your project below and
              BusinessAdvisor will generate a custom proposal for you.
            </p>
            <div className="mb-4">
              <label
                htmlFor="project-description"
                className="block text-sm font-medium text-gray-700 mb-1"
              >
                Describe your project:
              </label>
              <textarea
                id="project-description"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows="5"
                placeholder="Enter project description..."
                value={projectDescription}
                onChange={(e) => setProjectDescription(e.target.value)}
              ></textarea>
            </div>
            <button
              className="py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
              onClick={generateProposal}
            >
              Generate Proposal
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Services;

Our services page is complete, and so is the application!

Make sure that the Python backend server is running, and then start your React frontend with the usual Vite run script here inside the frontend folder:

npm run dev

You should see the website up and running on http://localhost:5173/ with working AI agents on all pages (apart from the contact page, which does not have one). Remember that every time you use one of the AI agents to ask a question, it will use 1 API call on Groq Cloud, so check the Rate Limits for the different LLMs.

Conclusion

Building a squad of AI agents for your website using platforms like Agno and Groq is a powerful way to showcase how innovative automated workflows can enhance user experience without spending a lot of money.

The combination of Agno and Groq provides a free route for exploring AI agents, which can be very beneficial. With Agno's no-code agent orchestration and Groq's super-fast inference, you can deploy AI-powered features that engage with visitors and make interactions easier.

So, whether it's a chatbot, content generator, or intelligent assistant, these tools are making it easier than ever to integrate AI into your brand. With the advancements that AI technology is making, being able to try out these free solutions will definitely keep you ahead and make your website truly shine as you continue to modernise your brand.

Stay up to date with tech, programming, productivity, and AI

If you enjoyed these articles, connect and follow me across social media, where I share content related to all of these topics 🔥

It’s not just about learning a programming language and typing out code to build software. There’s a lot more to it. And one of the most confusing (and often frustrating) topics for developers is clean code.

So, what is clean code?

Simply put, it’s about writing code that’s so clear and well-organized that neither you nor anyone else will get frustrated trying to understand it six months later.

Think of clean code as the programming equivalent of great design — it’s functional, beautiful, and easy to work with.

And today, I won’t spend a lot of time explaining why clean code is important — you probably already know that. Instead, I’ll get straight to the point and share seven powerful hacks to help you write cleaner, better code.

Table of Contents

• 1. Write Code Like You’re Explaining it to a 5-Year Old

• 2. Use AI Tools (or an AI Code Reviewer)

• 3. Get Rid of Unnecessary Comments

• 4. Follow the DRY Principle

• 5. Fix Your Code Formatting & Follow a Consistent Style

• 6. Don’t Let Your Functions Do Too Much

• 7. Organize Your Files and Folders Properly

• Wrapping Up

1. Write Code Like You’re Explaining it to a 5-Year Old

Let me be honest — if you are writing exceedingly clever code that your teammates or someone else can’t easily read, it won’t be helpful to anyone.

You need to write code so simple that anyone, including someone who just opened the file for the first time, can easily go through it.

For example, if your variable names look like this:

let x = y + z;

This isn’t helpful. No one will know what x, y, and z mean — not even you, three weeks later.

Variables should describe what they hold. Think of them as self-documenting comments. Here’s a better example:

let totalPrice = productPrice + shippingCost;

This simple best practice can be applied even when writing functions, comments, and more.

Here’s an example of hard to understand code:

function calc(itm) {
 let t = 0;
 for (let i = 0; i < itm.length; i++) {
 t += itm[i].p;
 }
 return t;
}

You see, it doesn’t give you a proper idea about the function other than the logic.

Instead, try to write it like this:

function calculateTotalPrice(cartItems) {
    let totalPrice = 0;
    for (let i = 0; i < cartItems.length; i++) {
        totalPrice += cartItems[i].price;
    }
    return totalPrice;
}

Now it’s clear just from looking at the code what’s going on.

2. Use AI Tools (or an AI Code Reviewer)

AI is evolving quickly and is being used in almost every industry.

Well, as a developer, you can use AI to help you write clean and readable code — all thanks to AI tools like ChatGPT, Claude, and GitHub Copilot.

For starters, you can copy and paste your code into an LLM and ask it to review your code.

Here’s an example of a request I made to ChatGPT:

And here’s what ChatGPT recommended:

It even provided me with an improved version of the code. Here it is as follows:

Along with that, you can also use AI-powered code reviewers like CodeRabbit AI, which integrates with your pull requests to offer automated code reviews, walkthroughs, and more.

In simple terms, when you install CodeRabbit AI, add it to your pull request, and then create a pull request, CodeRabbit AI provides you with summaries, code reviews, walkthroughs, and more.

Here’s an example from an open-source repository “minefield” of a summary generated by CodeRabbit AI:

In the above examples, CodeRabbit AI simply goes through the code and provides a great summary highlighting the new features, bug fixes, and unit tests added via a pull request.

If you want to learn more, here’s a quickstart guide that provides more info on how to get started and use CodeRabbit AI.

Note that, AI tools can be a great help in improving your code, but they should never replace your own thinking.

When AI suggests changes, always ask yourself: Does this actually make sense?

After all, AI isn’t perfect—it can generate incorrect code. It might also miss important details that only a human can fully understand.

So instead of blindly accepting AI’s suggestions, take a moment to understand why they were made.

Remember, the goal is to use AI to speed up your workflow, catch errors, and more—while keeping full control over your code.

3. Get Rid of Unnecessary Comments

Writing good code comments can help others understand why your code is doing what it’s doing.

But I see developers writing too many comments, even where there is no need.

I believe that, whenever possible, good code should document itself.

Here’s an example of a not so helpful comment:

// Adding 10 to the result 
total = total + 10;

You see, here the comment doesn’t make sense, and it doesn’t really add anything to the code (or our understanding of it).

It’s a better practice to write comments only if they’re important in helping a reviewer understand why you did something in particular or if there’s some ambiguity that needs explaining.

Here’s an example:

// Adding 10 because the client requires a 10% buffer for calculations 
total = total + 10;

Now you can see that here the comment gives a clear idea about why the programmer added 10 to the total.

4. Follow the DRY Principle

I’ve seen a lot of programmers repeating the same logic or adding the same functionality in different files.

Well, you don’t need to repeat the same code everywhere because it makes the process much more complex. Keep your code DRY (Don’t Repeat Yourself).

Instead, abstract that logic into a single reusable function.

For example, instead of writing the same logic in different files:

if (user.age > 18 && user.age < 65) { 
 // Do something 
}

if (user.age > 18 && user.age < 65) { 
 // Do something else 
}

You can create a reusable function so that you can use the logic everywhere, as shown below:

function isWorkingAge(age) { 
 return age > 18 && age < 65; 
}

if (isWorkingAge(user.age)) { 
 // Do something 
}

In short — write once, and use everywhere.

5. Fix Your Code Formatting & Follow a Consistent Style

This is another simple hack, but many devs don’t even think about it.

First of all, you need to format your code with proper indentation.

You can just install a VS Code extension/linters like Prettier, ESLint, or Flake8, depending on the programming language you use. Configure a few settings, and you’re good to go.

These linters can help you write better code by finding mistakes, helping you follow coding rules, and keeping your code consistent. They can also catch errors, make your code easier to read, and save time on fixing bugs and reviews.

But fixing your formatting doesn’t just mean it’s clean code – it’s way more than that.

Beyond formatting, you should stick to a consistent style guide for things like function names or variable names.

For example, here’s some code that has an inconsistent style:

let total_price;  
let UserData;  
function getuser() {}

But some of you may ask, why is the code inconsistent?

Well, it uses several different naming conventions – like total_price uses snake_case, UserData uses PascalCase, and getuser() is in lowercase instead of camelCase.

This makes your code harder to read and more confusing. Instead, you can follow a consistent style. Here’s how:

let userData; 
let totalPrice; 
function getUser() {}

And just to let you know, JavaScript typically follows camelCase for variables and functions, so names like getUser(), userData, and totalPrice would be more consistent.

No matter whether you’re working in a team or solo, sticking to one style is a good idea. It makes the code clean, and the reviewer can easily go through it.

6. Don’t Let Your Functions Do Too Much

As a programmer, I know that sometimes you need to write complex logic inside a function.

But most often, programmers include too much logic in a single function, causing it to do more than one thing at a time. These functions become too complex, making them hard to read or understand.

It’s better to create multiple smaller functions, with each function handling a single responsibility.

Here’s an example of a slightly too complex function:

function calculateCart(items) {
 let total = 0;
 for (let i = 0; i < items.length; i++) {
 total += items[i].price * items[i].quantity;
 }
 return total > 100 ? total * 0.9 : total;
}

You see, this single function does too much—it applies discounts if applicable, and calculates the total price based on quantity, making it hard to reuse for specific use cases.

A better way is to split it into three functions:

• One to apply the discount (if applicable).

• One to calculate the total price based on quantity.

• One to get the total and apply the discount if needed.

This makes the code cleaner and easier to manage. Here’s an improved version:

function calculateCart(items) {
 const total = getCartTotal(items);
 return applyDiscount(total);
}

function getCartTotal(items) {
 return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

function applyDiscount(total) {
 return total > 100 ? total * 0.9 : total;
}

You see, instead of writing everything in one long block, the logic is broken into smaller, clearer functions.

And that’s what makes it easier for you (and everyone else) to understand.

7. Organize Your Files and Folders Properly

Now comes the most important part.

When you’re working on a big project, it makes no sense to dump all your code into one single folder with a bunch of random files. It’s become a nightmare for anyone trying to review the code or find a specific file.

Think about it — going through 50 files just to fix a bug. Nobody wants that.

Instead, try organizing your project into multiple folders based on pages or features.

And don’t stop there — break large files into smaller, specific modules based on functionality. This way, everything is neat, easy to find, and makes sense at first glance.

Here’s a bad example of a project structure:

project-folder/  
│  
├── index.html  
├── app.js  
├── helpers.js  
├── data.js  
├── user.js  
├── product.js

It’s messy, right? Now, here’s how you can improve it:

project-folder/  
│  
├── pages/  
│   ├── home/  
│   │   ├── HomePage.js  
│   │   ├── HomePage.css  
│   │   └── HomePage.test.js  
│   ├── user/  
│   │   ├── UserPage.js  
│   │   ├── UserPage.css  
│   │   └── UserPage.test.js  
│   └── product/  
│       ├── ProductPage.js  
│       ├── ProductPage.css  
│       └── ProductPage.test.js  
├── components/  
│   ├── Header.js  
│   ├── Footer.js  
│   └── Button.js  
├── utils/  
│   └── api.js  
└── index.js

See how simple this is?

You have separate folders for pages, components, and utilities. Inside each folder, files are organized by purpose and given clear names.

For example, if you need something for the product page, you’ll know exactly where to find it.

Wrapping Up

In this article, you learned the basics you need to get started writing clean, efficient, and maintainable code.

We discussed how to write clean code, use AI tools, apply proper code formatting techniques, structure functions effectively, and follow other best practices.

If you apply these tips consistently, you’ll significantly improve your coding skills and write cleaner code.

I hope you liked it.

You can connect with me on Substack, and Twitter.

Also, if you're interested in learning more about AI, you can subscribe to my newsletter, AI Made Simple, where I dive deeper into practical AI strategies for everyday people.

In 2016, I thought I wasn’t cut out for programming. After months of trying and failing with my first language, I came to a conclusion: I wasn’t smart enough. I thought some people were naturally gifted, while others, like me, simply weren’t meant for programming.

I gave up several times, convinced I didn’t have the talent needed to succeed.

Fast forward to today eight years later. I’ve become proficient in several programming languages. Looking back, I realize programming doesn’t come naturally to anyone. The difference between those who seem “gifted” and those of us who struggled is simple: it’s all about having the right foundational knowledge.

Programming is like walking into a movie halfway through you can’t understand what’s happening because you missed the beginning. The same applies to programming. You can’t build an advanced calculator app without understanding basic data types or algorithms.

Here’s the truth: programming isn’t inherently difficult. Most beginners struggle because they skip key foundational steps. Without these prerequisites, programming can feel like trying to swim in the deep end without first learning how to float.

But don’t worry I’ve got you covered. By the end of this article, you’ll know exactly what these prerequisites are, how to develop them, and why they’re the key to making programming click for you.

Here’s what we’ll cover:

1. Why Programming Feels Hard – Hint: It’s Not About Talent

2. The Prerequisites You Actually Need

3. Data Structures: Taking User Input

4. Algorithms: Performing Computations

5. Programming Languages: Displaying the Output

6. Additional Skills

7. How to Build the Right Foundations: Practice, Practice, Practice

8. Final Thoughts

Why Programming Feels Hard – Hint: It’s Not About Talent

Let me pick up my story again. By 2018, I was becoming a confident developer. I could build basic websites, fetch data from a database using APIs, and display it on the screen. I thought I had programming figured out.

Then came my first job interview.

During the interview, I was asked a seemingly simple question: “What happens when you type www.google.com into the address bar and press Enter? You have 30 minutes.”

I paused, thought for a moment, and gave my best answer. I spoke for maybe five minutes, then the interview ended.

Later, I Googled the question out of curiosity. What I found shocked me. The question wasn’t just about typing and entering a URL, it was about networks, servers, DNS lookups, HTTP requests, rendering engines, and more. That’s when it hit me: I had barely scratched the surface. There was so much foundational knowledge I was missing.

That day, I realized programming isn’t just about fetching data from a database or making a website look good. It’s about understanding the layers beneath the surface. If you're curious, I didn’t get the job. In fact, I never heard back from them. Honestly, I wouldn’t have hired me either.

Now, think about that interview question: Could you confidently explain what happens when you hit “Enter” on www.google.com?

If you’re like I was back then, probably not. But here’s the good news: If I were asked that same question today, I could speak on it for an hour. Heck, I could even write a 1,000-word article about it.

The Real Problem Isn’t Talent

Here’s the key takeaway: programming success isn’t about talent or intelligence. If you try to learn programming without the right preparation, you’ll keep hitting a wall of frustration.

So, no—it’s not talent you lack. It’s preparation. And the good news? Lack of preparation is something you can fix.

The Prerequisites You Actually Need

To understand the prerequisites, let’s take a step back and consider what a computer is actually for. At its core, the main purpose of a computer is to:

1. Take user input,

2. Perform computations, and

3. Display the output.

Every piece of software or program ever developed revolves around these three tasks. As a programmer, your role is to create software that performs these functions properly.

To do this, you need to build your skills in a way that aligns with these tasks. This means learning about data structures and algorithms, and then diving into a programming language. Let’s dig into each of these skills more deeply.

Data Structures: Taking User Input

So, users interact with your software, whether they’re clicking buttons, filling out forms, or uploading files. And guess what? All that interaction creates data that you, the developer, need to manage. But how do you do that without going crazy? That’s where data structures come in.

What Are Data Structures?

Think of data structures like special containers for your data. But not just any containers – they’re the kind that let you quickly grab, change, and organize your data in the most efficient way possible. Without them, managing user input would be like trying to store your clothes in a messy pile rather than a neat closet. Not fun, right?

A Few Data Structures You Should Know

There are tons of data structures out there, but let’s talk about a couple that are absolute essentials:

1. Arrays

Arrays are like simple, ordered lists. Imagine a row of boxes, each labeled with a number (index). You can put something in each box, and when you want to grab something, you just tell the system the number of the box. Super easy! It’s like a list of your favorite songs, where each song is numbered in order.

2. Hash Tables (or Dictionaries)

Hash tables are the cool kids of the data structure world. Instead of organizing data by number, they let you organize it by keys, which are like labels that help you find things super fast. If you had a list of customers, you could use their customer IDs as the “key” to look up their info. Think of it like a phone book—rather than flipping through pages, you jump straight to the person’s name based on how the names are organized (likely alphabetically).

Why Should You Care About Data Structures?

Good question! Here’s the deal: first of all, data structures help you organize your data in an intelligent way that makes sense. They keep things neat and make them easy to access. No more digging through a pile of data.

Second, data structures can make your apps faster. With the right data structure, you’ll be able to retrieve, modify, and sort data in the blink of an eye.

And finally, they help you solve problems like a boss**.** Whether you need to sort stuff, search through a lot of data, or handle some complex information, data structures are your go-to solution.

Example: Storing and Finding Customer Names

Okay, let’s say your app needs to store and retrieve customer names. You could do this in two ways. Let’s compare how an array and a hash table would handle this task.

1. Using an Array:
Imagine you’ve got a list of customer names, and they’re stored in a nice, neat array:

customers = ["John", "Jane", "Emily", "Michael"]

If you want to grab the name of the person in the third spot (Emily), you can just point to the third index like this:

print(customers[2])  // Output: Emily

Arrays are perfect if you have a simple, ordered list and you need to grab items by their position.

2. Using a Hash Table:
Now, let’s say you want to store customer names but also have a unique ID for each one. This is where a hash table (or dictionary) comes in handy. You use keys (like customer IDs) to quickly find their names. It’s much faster than searching through an array.

Here’s what it might look like in action:

customers = { 101: "John", 102: "Jane", 103: "Emily", 104: "Michael" }

Now, if you want to find the customer with ID 103 (Emily), you just look up the key:

print(customers[103])  // Output: Emily

Hash tables are awesome when you need to look things up fast. No searching, just straight to the point!

Ready to Dive Deeper?

If you're pumped to learn more about data structures, here are some resources to help you level up:

• Google’s Data Structures Learning Guide

• freeCodeCamp’s Data Structures and Algorithms Course

Algorithms: Performing Computations

Okay, so you've got your data. Now what? Well, you need to process it—and that’s where algorithms step in. Think of algorithms as a set of instructions, kind of like a recipe, that tells your computer how to solve a problem or complete a task, step-by-step.

Why Learn Algorithms Before You Learn a Programming Language?

Before you dive into learning a programming language, it helps to first learn algorithms. Here’s why: algorithms teach you how to think like a problem-solver. They help you break down challenges, think logically, and tackle them systematically. And when you know your algorithms, you’re not just memorizing syntax – you’re also learning how to solve problems efficiently. That makes programming a lot easier.

Let’s Dive Into Some Cool Algorithms

There are a ton of algorithms out there, but let’s keep it simple for now with a couple of the most popular ones. These will get you started and make your code run smoother than ever.

1. Bubble Sort: The Basics of Sorting

Bubble Sort is the beginner’s go-to algorithm for sorting. It’s simple—kinda like flipping pancakes. You start with the first two elements in the list, compare them, and if they’re in the wrong order, you swap them. Then you move to the next pair and keep doing that until everything is in order.

Here’s how it works:

Imagine you’ve got a list of names that need to be sorted alphabetically:

John, Sarah, Anna, Jake, Emily

Bubble Sort will go through the list, comparing two names at a time, swapping them if they’re out of order. It repeats this process until the list is sorted.

At the end, your list will look like this:

Anna, Emily, Jake, John, Sarah

It’s simple, but not the fastest for long lists.

2. Quick Sort: Speedy and Smart

If Bubble Sort is like a slow and steady turtle, Quick Sort is the speedy rabbit. It’s much faster, especially for larger data sets. Quick Sort is a “divide and conquer” algorithm—it breaks the list into smaller chunks, sorts them, and then puts everything back together.

Here’s how it works:

Let’s take that same list of names and use Quick Sort:

John, Sarah, Anna, Jake, Emily

First, pick a pivot—let’s say Jake. Now, split the list into two parts:

• Names that come before Jake alphabetically:

    Anna, Emily
  

• Names that come after Jake alphabetically:

    John, Sarah
  

Now, you repeat the process for each group. Keep picking pivots, splitting, and sorting until each group is small enough to be sorted easily. Then you just put everything back together, and voilà! Sorted list:

Anna, Emily, Jake, John, Sarah

Quick Sort is much faster than Bubble Sort, especially when you've got a lot of names to sort.

Again, there are many more algorithms to learn, but this should give you the basic idea of how they work and why they’re useful.

Why You Should Care About Algorithms

So why does any of this matter? Here’s the deal: first, algorithms help you solve problems more easily by breaking them down problems into manageable steps.

Second, they make your code faster. With the right algorithm, you can make your code run like a sports car—fast!

They also allow you to manage big datasets more easily. Some algorithms, like Quick Sort, can handle large sets of data in no time, which is crucial when performance matters.

Want to Get Better at Algorithms?

If you’re hungry for more algorithmic goodness, here’s where to go:

• LeetCode

• HackerRank

And if you want to dive deeper, here’s a free 48-hour course on the freeCodeCamp YouTube channel on Data Structures and Algorithms.

Programming Languages: Displaying the Output

Finally, we get to programming languages. This is where most beginners start and it’s often why they struggle. Without a solid grasp of data structures and algorithms, programming languages can feel like trying to run before you can walk. You can learn the syntax, but without understanding the fundamentals, you’ll find it harder to write effective code.

Why Programming Languages Should Come Last:

Once you understand how to manage input (data structures) and process it (algorithms), learning a programming language becomes much easier. You can go beyond worrying about memorizing syntax you may not understand, and start applying logic and solving problems. Programming languages are the tools you use to implement your algorithms and data structures.

Which Programming Language to Learn:

When it comes to picking a programming language, it’s important to align your choice with your goals. The language you choose should be based on what you want to build and your career path.

Here’s a breakdown of some common choices:

• JavaScript: If your goal is to build websites or web applications, JavaScript is essential. It runs in the browser and allows you to create dynamic and interactive websites. JavaScript also has a wide range of libraries and frameworks (like React, Node.js, and Vue) that can speed up development.

• Python: Known for its simplicity and readability, Python is a great choice for beginners. It’s widely used in data science, web development (with frameworks like Django and Flask), and machine learning. Python's syntax is clean and easy to understand, which makes it perfect for beginners focusing on building strong foundational skills.

• Java: If you’re interested in building large-scale, enterprise-level applications, Java is a solid choice. It's a statically typed language, meaning you define variable types explicitly. Java is commonly used in Android development and large backend systems.

• Swift: Swift is a great language for iOS app development. If you want to build mobile apps for the Apple ecosystem (iPhone, iPad, etc.), Swift is the way to go. It's fast, modern, and integrates well with Apple’s software development tools.

• C#: If you’re planning to work with game development, especially with Unity, C# is your best bet. It’s also used for enterprise applications, web development (via ASP.NET), and desktop apps.

How to Choose the Right Language for You:

The best way to choose a language is to consider what excites you and where you want to focus your efforts. Don’t worry too much about finding the "easiest" language – just focus on one that aligns with your interests.

For example, if you're excited about building websites, JavaScript might be the best place to start. If you’re interested in mobile apps, Swift or Kotlin could be a better fit.

Once you've picked a language, don’t stress about mastering every feature. Start with the basics and build projects that interest you. As you practice, you’ll naturally pick up more advanced concepts and techniques. The goal isn’t to become a master of syntax but to learn how to think like a programmer and solve problems effectively.

Here are some tips for getting started:

1. Start with Basics: Get comfortable with basic syntax and constructs. Learn how to write loops, conditional statements, and functions in your chosen language.

2. Build Simple Projects: Apply what you've learned by building small projects. If you're learning JavaScript or Python, for example, try building a simple to-do list app or a calculator. These types of projects help solidify your understanding.

3. Understand Libraries and Frameworks: Once you have the basics down, dive into libraries and frameworks that can help speed up development. For JavaScript, this might mean learning React or Vue. For Python, it could mean exploring Django or Flask.

Helpful Resources for Learning Programming Languages:

• JavaScript.info

• Python.org Tutorials

• freeCodeCamp JavaScript Curriculum

• Codecademy Python

Additional Skills

While mastering the fundamentals of programming is essential, there are other skills that can significantly boost your development journey. These include problem-solving techniques, debugging, and version control. These skills might not seem as glamorous as learning a programming language, but they are just as important.

Why These Skills Matter:

Even if you know the syntax of a language, you’ll still face challenges when writing real-world applications. Problems like bugs, performance issues, and collaboration with other developers are inevitable. That’s why these additional skills are so valuable as they help you tackle these challenges more effectively.

1. Problem-Solving:
Problem-solving is at the core of programming. It’s not enough to know how to write code – you also need to know how to break down a problem and figure out the best way to solve it. A good programmer typically spends just as much time thinking about the problem as they do writing the solution.

• Breaking down the problem: Start by understanding the problem. Ask questions like: What am I trying to achieve? What do I already know? What inputs do I have, and what do I expect as the output?

• Dividing it into smaller parts: Once you have a clear understanding, divide the problem into smaller, manageable pieces. This helps you focus on solving one part at a time rather than feeling overwhelmed by the entire issue.

• Looking for patterns: Often, problems in programming can be solved by recognizing patterns or using similar approaches you’ve learned before. Don’t be afraid to reuse code you’ve written or adapt it for a new task.

2. Debugging: No code is perfect, and bugs are inevitable. Debugging is the process of finding and fixing these bugs (problems in your code that cause it to mess up or not run). It's a skill that every programmer needs to learn because it helps you maintain and improve the quality of your code.

• Using print statements: A simple and effective debugging technique is inserting print statements (or logging) in your code. This allows you to inspect variables and understand what’s happening at different stages of your program.

• Using a debugger: A debugger is a tool that allows you to step through your code line by line. It’s especially helpful when dealing with more complex bugs. Many programming environments, like Visual Studio Code or PyCharm, have built-in debuggers.

• Checking for common issues: Bugs often come from simple issues like typos, off-by-one errors, or misunderstanding the behavior of a function. Before diving into complex debugging, double-check your assumptions.

3. Version Control: Version control is a tool that helps developers manage changes to their code over time. It allows you to keep track of edits, collaborate with others, and revert to previous versions if something goes wrong.

• Git: Git is the most widely used version control system. It allows you to save snapshots of your code, known as commits, and track the history of your project. It also makes collaboration easier by allowing multiple developers to work on the same project without stepping on each other's toes.

• GitHub: GitHub is a platform that hosts Git repositories and offers additional tools like issue tracking, project management, and code reviews. As you start collaborating with other developers, GitHub will become an invaluable resource.

• Basic Git commands: Learn basic Git commands like git init, git commit, git push, and git pull. Understanding these commands will allow you to manage your code effectively, both when working solo and with a team.

Helpful Resources for Additional Skills:

• LeetCode (for problem-solving practice)

• freeCodeCamp Debugging Guide

• Book on Learning Git and GitHub

• Git Documentation

• GitHub Guides

How to Build the Right Foundations: Practice, Practice, Practice

Okay, so you've got the theory down, but the real magic happens when you put what you've learned into action. Mastering data structures and algorithms isn't just about understanding them it’s about practicing until they feel second nature. Here’s how you can do that:

Start Small: Learn the Basics

Before you dive into big, complex problems, start by getting comfortable with the basics. Things like arrays, stacks, and queues are your best friends.

Example Practice:
Start with problems that help you understand how these data structures work. Try writing a function that reverses a string using a stack. Here's a quick idea of what that might look like in JavaScript:

function reverseString(inputString) {
    let stack = [];
    // Push all characters onto the stack
    for (let i = 0; i < inputString.length; i++) {
        stack.push(inputString[i]);
    }

    let reversedString = '';
    // Pop characters off the stack and add them to reversedString
    while (stack.length > 0) {
        reversedString += stack.pop();
    }

    return reversedString;
}

console.log(reverseString("hello"));  // Output: "olleh"

Why this helps: By using a stack to reverse a string, you're getting a hands-on feel for how stacks work—storing items and then removing them in reverse order. Practice small problems like this daily.

Solve Real Problems: Bring Algorithms to Life

Once you’ve nailed the basics, it’s time to apply what you've learned in real-world scenarios. Try using algorithms to solve problems that feel useful in real life.

Example Practice:
Create a simple sorting program to arrange names alphabetically using an algorithm like Bubble Sort or Quick Sort. Here’s a quick example using Bubble Sort:

function bubbleSort(names) {
    let n = names.length;
    for (let i = 0; i < n; i++) {
        for (let j = 0; j < n - i - 1; j++) {
            if (names[j] > names[j + 1]) {
                let temp = names[j];
                names[j] = names[j + 1];
                names[j + 1] = temp;
            }
        }
    }
    return names;
}

let names = ["John", "Emily", "Sarah", "Jake"];
console.log(bubbleSort(names));  // Output: ['Emily', 'Jake', 'John', 'Sarah']

Why this helps: Solving real problems with algorithms deepens your understanding and gives you a tangible result. Whether you’re sorting names or calculating averages, real problems make the learning experience stick.

Write Code Daily: Make It a Habit

The secret to becoming a great programmer is consistency. Choose a programming language (Python, JavaScript, Java, or whatever you like) and make it a habit to write code every day. Even if it's just for 30 minutes, those 30 minutes add up.

Example Practice:
Pick a small problem every day to practice applying data structures and algorithms. Use platforms like LeetCode or HackerRank for daily challenges that fit your skill level. Here’s an example of a coding challenge you might find on these platforms:

• Problem: Find the maximum number in a list of integers.

    function findMax(nums) {
        let maxNum = nums[0];
        for (let num of nums) {
            if (num > maxNum) {
                maxNum = num;
            }
        }
        return maxNum;
    }
  
    console.log(findMax([1, 3, 7, 0, -5]));  // Output: 7
  

Why this helps: Daily practice is key to internalizing what you’ve learned. It helps you stay sharp and gradually move from simple problems to more complex ones.

Challenge Yourself: Go Beyond Your Comfort Zone

When you feel like you’ve got the basics down, it’s time to level up. Get involved in coding challenges or take on personal projects that push you outside of your comfort zone.

Example Practice:
Join a hackathon or participate in a competitive coding challenge like Google Code Jam or Codeforces. These challenges will push your problem-solving skills to the limit and help you learn new algorithms and techniques.

Why this helps: Challenges force you to think critically and solve problems under time constraints. They help you learn faster and build confidence in your abilities.

Stay Consistent: Build a Routine

Consistency is the key to success in programming (and in most things, really). Set aside time every day or week to practice. Even if you don’t feel like it, just getting in some short coding sessions will make a huge difference in the long run.

Example Practice:
Create a study plan with weekly goals. For example:

• Week 1: Focus on basic data structures (arrays, stacks, queues).

• Week 2: Move on to sorting algorithms (Bubble Sort, Merge Sort).

• Week 3: Dive into more complex algorithms like Binary Search or Dynamic Programming.

A routine ensures that you’re making steady progress. Plus, it makes sure you don’t get stuck on one topic for too long.

Final Thoughts

Programming doesn’t have to be so hard. It’s like building a house: without a strong foundation, everything else feels unstable. But with the right basics like data structures, algorithms, and logical thinking, you’ll be amazed at how quickly you can create great things.

If someone had told me in 2016 that I’d be writing this article today, I wouldn’t have believed them. But with the right preparation, I turned frustration into confidence, and so can you.

Don’t let frustration hold you back. Focus on the fundamentals, practice consistently, and explore the resources I’ve shared. Remember, programming isn’t about being a genius it’s about preparation and persistence. You’ve got this!

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

SSH is widely used for accessing remote servers and managing code repositories securely, particularly in environments like GitHub. You’ll learn about the fundamental concepts of SSH, how it works, and practical steps to set it up on Windows. We will cover everything from generating SSH keys to testing your connection and cloning repositories.

By the end of this guide, you will have a solid understanding of SSH and be equipped to enhance your workflow with secure connections.

What we’ll cover:

1. What is SSH?

2. How Does the Secure Shell Protocol Work?

• TCP/IP

• The SSH Connection Process

3. How to Use SSH in Windows

• Windows PowerShell or Command Prompt

• Windows Subsystem for Linux (WSL)

• Third-Party SSH Clients (for example, PuTTY)

4. How to Use SSH In Windows To Connect To GitHub

• Install Through Windows Optional Features

• Download And Install From Github

• How To Generate SSH Keys

• How To Add The Public Key To GitHub

• Testing The SSH Connection

• Cloning A Repository Using SSH

5. Conclusion

Prerequisites

Before you begin this tutorial, ensure you have the following:

• Basic Understanding of Command Line: You should be familiar with using the command line interface (CLI) on Windows, including how to open PowerShell or Command Prompt.

• Windows Operating System: This tutorial is specifically tailored for users running Windows 10 or later versions.

• OpenSSH Client Installed: Ensure that you have the OpenSSH client installed on your system. You can check this by typing ssh in your command line interface.

• GitHub Account: You’ll need a GitHub for testing SSH connections and managing repositories.

• Text Editor: You’ll also need a code editor (like Visual Studio Code, Notepad++, or similar) to edit configuration files if needed.

What is SSH?

SSH stands for secure shell (protocol). The secure shell protocol is a cryptographic network protocol for operating network services securely over an unsecured network.

In simpler terms, SSH is a way to safely use services on a network, like accessing a remote computer, even when the network itself isn’t fully secure. It protects your data and communications by scrambling (encrypting) everything, so no one can eavesdrop or tamper with it, even if they intercept it.

This is especially useful when connecting to services like GitHub, where you want to securely manage code on a remote server.

How Does The Secure Shell Protocol Work?

SSH runs on the TCP/IP set of rules that computers use to communicate over the internet.

TCP/IP

TCP stands for Transmission Control Protocol. It’s one of the core protocols in the TCP/IP suite, which is used to send data over the internet. The IP stands for Internet Protocol. It's part of the TCP/IP set of rules also, and its job is to guide packets of data to the right destination on the internet.

You can read more about the TCP/IP protocol here if you’d like to go deeper.

The SSH Connection Process

The Secure Shell protocol operates by establishing a secure connection between a client (your local machine) and a remote server.

First, the client initiates the connection by specifying the server's address (IP or domain) and login credentials. During the authentication phase, the server verifies the identity of the client, typically using a password or, more securely, SSH keys. These are a pair consisting of a private key stored on the client and a public key on the server.

Once authenticated, SSH encrypts all data transferred between the client and the server, ensuring confidentiality and integrity. This secure channel allows the client to execute commands, transfer files, and manage the server remotely as if physically present while safeguarding the data from potential interception or tampering.

IP is responsible for addressing and routing the initial connection request from the client to the server. It ensures that the request, which includes the server's address, is sent to the correct destination.

Once the SSH connection request reaches the server, TCP establishes a reliable communication channel. It manages data transmission between the client and the server, ensuring that all packets are delivered accurately and in the correct order.

During the SSH session, TCP ensures that data packets are correctly transmitted and reassembled, while IP handles the addressing. SSH then uses this secure and reliable channel to authenticate the client, encrypt all transferred data, and maintain a secure connection. This allows remote management and file transfer with confidentiality and integrity.

How to Use SSH in Windows

Windows provides a few different ways to use SSH:

Windows PowerShell or Command Prompt

Windows comes with a built-in OpenSSH client. You can access this by opening PowerShell or Command Prompt and typing ssh This method is simple and requires no additional software.

Windows Subsystem for Linux (WSL)

You can enable Windows Subsystem for Linux to run a Linux distribution directly on your Windows PC. Many Linux distros come with OpenSSH pre-installed, allowing you to use ssh commands from the Linux terminal. This method is great if you prefer a Linux-like environment.

Third-Party SSH Clients (for example, PuTTY)

If you prefer a standalone application, tools like PuTTY offer a graphical interface to manage SSH connections. PuTTY is widely used for connecting to servers and supports advanced options like saving connection profiles.

Windows 10 and later versions come with a native OpenSSH client, which allows you to securely connect to remote systems over an SSH (Secure Shell) connection.

How to Use SSH in Windows to Connect to GitHub

If you're using Windows 10 or a later version, you can take advantage of the built-in SSH capabilities.

To get started, open your Windows Terminal or PowerShell, preferably as an administrator. In the command line interface, you can check if SSH is installed by typing the command ssh. This will confirm if the SSH client is available on your system.

If you got the above image, it means SSH is available on your local system.

The first thing you'll need to set up an SSH connection is a pair of SSH keys – a public key and a private key. These are typically located in the .ssh directory in your home directory if generated already.

On Windows, your home directory is usually C:\Users\owner\.ssh. This is where you will find your SSH key files if they've already been generated.

You can easily install OpenSSH on your Windows system. There are a couple of ways to do this:

Install Through Windows Optional Features

1. Open the Windows Start menu and type "optional features" in the search bar.

2. Click on "Add or remove Windows optional features" to open the Optional Features window.

3. In the Optional Features window, scroll down and find the "OpenSSH Client" option.

4. Check the box next to it and click the "Install" button at the bottom to install the OpenSSH client.

Download and Install from GitHub

1. Visit the GitHub repository for the Win32-OpenSSH (32-bit) or Win64-OpenSSH (64-bit) release, depending on your Windows version:

   • 32-bit: https://github.com/PowerShell/Win32-OpenShell/releases

   • 64-bit: https://github.com/PowerShell/Win64-OpenShell/releases

2. Download the latest .msi installer file that matches your Windows architecture.

3. Run the .msi installer to install the OpenSSH client on your system.

After installing OpenSSH, you can now generate SSH keys by opening the Windows Terminal or PowerShell and running the ssh-keygen command. This will walk you through the process of creating a new public-private key pair that you can use to authenticate your SSH connections, such as to your GitHub account.

The public key can then be added to your GitHub account settings, allowing you to connect to your repositories using the SSH protocol instead of HTTPS. Remember to keep your private key safe and secure, as it provides access to your GitHub account.

By installing OpenSSH, you've set up the necessary foundation to work with SSH keys and establish secure connections to remote systems and services like GitHub.

Now you can check if the OpenSSH server is running by accessing the Windows Services utility. To do this, press the Windows key + R to open the Run dialog, then input "services.msc" and press Enter. This will open the services manager.

The services manager:

Scroll and look for the openSSH SSH server:

If the OpenSSH Server service is running in the Services window, it means that the OpenSSH server component is properly set up on your Windows system. This is an important first step in enabling secure SSH connections.

To ensure the OpenSSH server starts automatically whenever your PC is turned on, you can further configure the service's startup type. In the Services window, right-click on the "OpenSSH Server" service and select "Properties."

In the service properties, look for the "Startup type" dropdown and select "Automatic." This will ensure the OpenSSH Server service starts up automatically whenever your computer is powered on, rather than requiring you to manually start it each time.

By setting the OpenSSH Server service to start automatically, you can be confident that the server will be ready to accept incoming SSH connections at all times, without needing to remember to start it manually. This streamlines the process of using SSH-based authentication and remote access on your Windows machine.

Remember, having the OpenSSH Server service running and set to start automatically is just the first step. You'll still need to generate SSH keys and configure your GitHub account (or other services) to use the public key for authentication. But this initial setup of the OpenSSH server lays the foundation for seamless SSH usage going forward.

Now that you've confirmed the OpenSSH Server is running on your Windows system, the next step is to ensure it can communicate through the Windows Firewall. The easiest way to do this is by using a PowerShell command.

Open PowerShell as an administrator and run the following command:

New-NetFirewallRule -Name sshd -DisplayName 'OpenSSH SSH Server' -Enabled True -Direction Inbound -Protocol TCP -Action Allow -LocalPort 22 -Program "C:\Program Files\OpenSSH\sshd.exe"

This PowerShell command will create a new firewall rule that allows inbound TCP traffic on port 22 (the default SSH port) for the OpenSSH Server executable located at "C:\Program Files\OpenSSH\sshd.exe".

Here's a breakdown of the different parameters used in the command:

• -Name sshd: Assigns the name "sshd" to the new firewall rule.

• -DisplayName 'OpenSSH SSH Server': Provides a descriptive display name for the rule.

• -Enabled True: Ensures the rule is active and enabled.

• -Direction Inbound: Specifies that the rule applies to inbound network traffic.

• -Protocol TCP: Configures the rule to allow TCP protocol connections.

• -Action Allow: Instructs the firewall to allow the specified traffic.

• -LocalPort 22: Sets the local port to 22, which is the default SSH port.

• -Program "C:\Program Files\OpenSSH\sshd.exe": Identifies the specific program (the OpenSSH Server executable) that the rule should apply to.

By running this PowerShell command, you're creating a dedicated firewall rule that permits the OpenSSH Server to communicate through the Windows Firewall, enabling you to establish secure SSH connections to your system.

Remember, it's always a good practice to review your firewall settings periodically, especially if you make changes to your network configuration or want to refine access to the OpenSSH Server further.

If successful, you should get this:

Summary of the above CLI response:

• Rule Name: sshd

• Display Name: OpenSSH SSH Server

• Direction: Inbound

• Action: Allow

• Enabled: True

• Profile: Any

The rule is designed to allow inbound traffic, enabling external clients to connect to the server. The "Enabled" status confirms that the rule is currently active, while the "Profile" set to "Any" indicates that it applies to all network types, including public, private, and domain.

Security Policies:

• Edge Traversal Policy: Block

• Loose Source Mapping: False

• Local Only Mapping: False

The "EdgeTraversalPolicy" is configured to "Block," preventing traffic from traversing the network boundary, specifically disallowing connections from public networks to private ones. This helps enhance security by mitigating potential vulnerabilities.

The settings for "LooseSourceMapping" and "LocalOnlyMapping" are both set to false, ensuring that only direct connections are allowed without additional mapping.

Status and Enforcement:

• Primary Status: OK

• Status: The rule was parsed successfully from the store.

• Enforcement Status: NotApplicable

• Policy Store Source: PersistentStore

• Policy Store Source Type: Local

The "Status" field confirms that the rule has been successfully parsed from the policy store, indicating no configuration issues. The "EnforcementStatus" marked as "NotApplicable" suggests there are no restrictions that would prevent the rule from being enforced.

Remember, to set up an SSH connection we need a pair of SSH keys – a public key and a private key. Let’s see how to do that now.

How to Generate SSH Keys

• Open your Windows Terminal or PowerShell.

• Run the command ssh-keygen to generate a new SSH key pair.

• Follow the prompts to specify the save location and passphrase (optional) for your keys.

You will get what you see in the above image if you’re successful.

The public key will be saved as id_rsa.pub in the .ssh directory of your user's home folder (for example, C:\Users\you\.ssh\id_rsa.pub).

How to Add the Public Key to GitHub

• Log in to your GitHub account and go to your account settings.

• Navigate to the "SSH and GPG keys" section.

• Click on the "New SSH key" button. Give your key a descriptive title, and then copy the contents of the id_rsa.pub file (your public key) into the "Key" field.

• Click "Add SSH key" to save the new key.

Testing the SSH Connection

In your Windows Terminal or PowerShell, execute the following command to test your SSH connection to GitHub:

bashCopy codessh -T git@github.com

If prompted, enter your passphrase if you set one during the key generation process. If you did not set a passphrase, simply type "yes" when asked for a response to the handshake.

If the connection is successful, you should see a message like "Hi username! You've successfully authenticated, but GitHub does not provide shell access."

You can solve this by following the process here.

Cloning a Repository Using SSH

Navigate to one of your GitHub repositories and copy the SSH clone URL, which typically starts with git@github.com:

In your local terminal, run the command git clone git@github.com:username/repository.git to clone the repository using the SSH protocol.

Conclusion

You now have SSH working between your Windows computer and your GitHub account. This means you can work with your GitHub projects more easily and securely.

Why SSH is Cool:

1. It's super secure. SSH scrambles your data so others can't snoop on it.

2. It's convenient. No more typing passwords all the time!

3. It's flexible. You can use it for more than just GitHub.

4. You can have different "keys" for different projects.

5. It works well with automatic coding tools.

But it’s not perfect:

1. Keeping track of many SSH keys can be a headache.

2. If someone gets your private key, they could access your stuff.

3. Setting it up the first time can be tricky.

4. You need to remember to change your keys yourself for extra safety.

5. Some networks might block SSH, which can be annoying.

Remember to keep your private SSH key safe. It's like a special password for your GitHub account, so guard it well.

Even with these small downsides, SSH is still awesome for most coders. You are now all set to work on your GitHub projects more easily and safely. Have fun with your improved coding setup, and keep learning about ways to keep your work secure.