DEV Community: Suad Macaulay

AI Didn’t Build My Backend for Me. I Used It as My Copilot.

Suad Macaulay — Sat, 19 Sep 2026 22:17:18 +0000

When we were given our project, CourierIQ, I knew I wanted to use it as an opportunity to learn something outside what I was already comfortable with.

I was already more familiar with frontend development, so when backend development came into the picture, I was actually excited.

I thought, okay, this is going to be interesting.

I don't want to be someone who only knows one side of development. If I have the opportunity to learn something new, why not?

But when the backend sessions actually started, I quickly realized I had a lot to learn.

We were talking about requests, APIs, endpoints, controllers, services, middleware and all these things that sounded very familiar to everyone else but were honestly confusing to me.

I was hearing all these terms, but I didn't really understand how they connected.

It wasn't until I started doing the hands-on work that things slowly started making sense.

I Didn't Want to Spend Weeks Watching Tutorials

At that point, I had a problem.

I could go through several backend tutorials and slowly learn everything before building CourierIQ.

But the project had a deadline.

And knowing myself, I also knew that I could easily spend weeks watching tutorials, taking notes, starting another tutorial, and still be waiting for that perfect moment when I felt "ready" to build.

So I started thinking about another way I could learn while actually building.

That's when I decided to use AI.

Not because I wanted AI to build my backend for me.

I saw AI as a way to speed up the learning process while working on the actual project.

And this is where my approach became very important.

I Didn't Ask AI to Build Everything

When I started working with AI on the backend, I gave it a specific role.

I basically told it:

I'm new to backend development. Act like a senior developer mentoring me through this project. Give me the steps I need to follow, explain why I'm doing them, and don't just write the code for me.

I was using Antigravity, and I really enjoyed the support I got from it throughout the process.

One of the first things I wanted to understand was the structure of the backend itself.

Where should my files go?

Why do I need a config folder?

Why are there routes, controllers, services and models?

What is supposed to happen in each one?

For me, this was important because I didn't just want the project to work. I wanted the codebase to actually make sense.

So instead of asking AI:

"Build my backend."

I would ask it something more like:

"What should I do first?"

And it would give me the steps.

Create this folder.

Create this file.

This file is responsible for this.

Then move to this part.

Then connect this.

Then test it.

And I would write the code myself.

Why I Wanted the Steps Instead of the Code

This was probably one of the most important decisions I made during the process.

It would have been much easier to tell AI:

"Build the authentication system for me."

And then copy whatever it gave me.

But I knew that if I did that, I could end up with a working backend that I didn't actually understand.

And I didn't want that.

I wanted to struggle a little.

I wanted to make mistakes.

I wanted to look at an error and try to figure out what was wrong.

So most of the time, AI gave me the steps and direction, and I handled the implementation.

Sometimes I would write something incorrectly and AI would point out the problem.

Sometimes I would see a piece of code I didn't understand and ask:

"Why are we doing this?"

Or:

"What does this actually do?"

Or even:

"Explain this to me like I'm completely new to it."

And that became part of my learning process.

The Small Things Started Clicking

One of the first moments where I felt like my approach was actually working was when I started setting up the Express application and getting my server running.

Then I moved on to initializing the database.

These might sound like very small things, but for someone who was completely new to backend development, they were actually important moments.

I started understanding that the things I was writing weren't just random lines of code.

There was a reason for the server.

There was a reason for the database connection.

There was a reason for the different folders.

There was a flow.

And slowly, the backend stopped looking like a huge confusing block of code.

It started becoming something I could actually navigate.

Then JWT Confused Me 😂

Of course, it wasn't all smooth.

JWT was one of those things that made me stop and ask a lot of questions.

I understood that users needed to log in, but then I started seeing tokens, secrets, user IDs and verification.

And I was like...

Wait. Why are we doing all this?

So instead of just copying the JWT code, I started asking questions.

What exactly is inside the token?

Why is the user ID there?

What is the JWT secret?

Why does the backend need it?

How does the backend know whether the token is valid?

That process helped me understand that the token wasn't just some random string the backend generated.

It could represent an authenticated user's session, and the backend could verify it before allowing access to protected resources.

That was one of those moments where asking AI to explain something was more valuable to me than simply getting the code.

AI Became My "Senior Developer"

The easiest way I can describe my experience is that AI felt like having a senior developer beside me.

Not someone who sits down and writes the entire project for me.

More like someone who says:

"Okay, this is what you need to do next."

Then I try it.

If I get something wrong:

"This part isn't right. Here's why. Try it again."

If I don't understand something:

"Let's break this down."

And then I continue.

That's how I wanted to use AI.

It wasn't about removing the thinking from the process.

It was about having somewhere to turn when I got stuck.

I Still Used AI for the Frontend Too

Interestingly, I used AI differently depending on what I was building.

With frontend development, there were things I already knew how to do, so I was more comfortable letting AI help me with repetitive code or things I had done before.

But backend was different.

I couldn't just tell it to do something because I didn't know enough yet to confidently judge whether what it gave me was actually good.

So I became much more intentional.

I needed explanations.

I needed the structure.

I needed to understand why something existed before I could confidently use it.

That difference actually taught me something about using AI for development:

The less you understand about a technology, the more careful you need to be about blindly accepting AI-generated solutions.

Did AI Make Me a Backend Developer?

No.

And I don't think I should say that.

After three or four weeks of working through the backend, I wouldn't suddenly call myself a backend expert.

I still have a lot to learn.

There are concepts I haven't worked with deeply yet, and there are definitely things I would struggle to build completely from scratch without some form of guidance.

But I can say something else.

I now have basic knowledge of backend development that I didn't have before.

I understand things that were completely confusing to me at the beginning.

I understand the basic relationship between routes, middleware, controllers, services, models and databases.

I understand why authentication exists and what JWTs are doing in that process.

I understand the importance of validation.

And when I open a backend project now, I don't feel like I'm looking at a completely foreign language.

I can find my way around.

For me, that's progress.

What I Learned About Using AI

The biggest lesson I took from this experience is that how you use AI matters.

You can ask AI to build an entire application for you and have something running in a few minutes.

But having something that runs isn't the same as understanding what you built.

For me, the better approach was to use AI as a copilot.

I wanted it to help me move faster, but I still wanted to think.

I wanted to write the code.

I wanted to make mistakes.

I wanted to ask questions.

I wanted to understand the structure.

And most importantly, I wanted to be able to look at the project afterwards and say:

"I may not know everything yet, but I know what is happening here."

That's a very different feeling from simply having AI generate a project and saying, "It works."

I'm Still Learning

Looking back, I definitely wouldn't say my backend journey is finished.

If anything, CourierIQ showed me how much more there is to learn.

But I'm glad I didn't wait until I knew everything before starting.

I started confused.

I used AI to guide me.

I asked a lot of questions.

I wrote the code myself.

I made mistakes.

I fixed them.

And somewhere along the way, things started making sense.

So no, AI didn't build my backend for me.

I used AI as a learning tool, a guide, and honestly, a very patient "senior developer" sitting beside me throughout the process.

And I think that's probably the biggest thing I took away from the experience:

AI works best for me when it helps me think, not when it thinks for me.

The Role of Private and Public Keys in Blockchain Technology

Suad Macaulay — Fri, 18 Apr 2025 16:14:26 +0000

PRIVATE KEY AND PUBLIC KEY.

A brief overview of a Blockchain, it’s a technology used to record transactions in blocks that are linked together using a hash. This technology is decentralized, secured and tamper-proof and it runs on millions of nodes across the world.

Therefore, to process a transaction on a Blockchain the sender must have a private key to sign the transaction and verify with his public key and the sender must have the public key of the recipient. Now let us delve into what a private key and a public key is and how they work together.

PRIVATE KEY:
The private key is a long range of numbers randomly generated by a computer and assigned to a user. The private key needs to be safe and hidden from anyone. This is because, the private key acts like a password or pin to an account of a user. Once a random person comes in possession of it, they can log in into your account and execute malicious activities without your consent.

PUBLIC KEY:
The public key is also an address or a range of numbers, generated from the private key. This key is not hidden or protected; it is the address used to receive an amount of money by sharing the key with its sender. Therefore, the public key works like your account number, which you send to someone who wants to, pay you or transfer an amount of money into your account. If the address you sent is incorrect, you could lose the money to a wrong account.

HOW THE TWO KEYS WORK HAND IN HAND:
As you know, the public key is computed from the private key but you can never guess the private key by using the public key. Therefore, to transfer money to a user, you receive their public address and you input the amount you are willing to send. Before that money leaves your account, the transaction must be verified and for that to happen, you must sign with your private key, just as you approve a transaction in our local banking system using your account pin. Now when you successfully sign that message with your private key it generates a unique signature that proves the transaction came from you and this signature cannot be altered. The signature of the message is simply random numbers that are lengthy.

So after you sign the message with your private key, you move on to verify this message to approve that the public key sending the amount to another account is actually the true possessor of that account. Because if you sign the message and you receive the message signature under your transaction and you’re now about to verify, but the public address is not linked to the private address you used to sign the message you’ll receive an error which will hinder you from proceeding with the transaction.

It’s just like someone is trying to send an amount of money from your account to another account, before that transaction is successful they must verify it with your account pin. If they don’t know your pin they’ll end up stuck with processing the transaction because if they enter a pin that’s not in connection with your account they’ll receive a message telling them that the account pin is incorrect resulting in failed transaction.

SUMMARY:
In conclusion, the private key in Blockchain is like your bank account PIN secret and essential for authorizing any transaction. The public key is like your account number something you can share to receive funds. Both work together to ensure secure, verifiable transactions on the Blockchain. As a user, protecting your private key is crucial, because anyone with access to it can control your funds.

Next js Portfolio Website Documentation

Suad Macaulay — Mon, 03 Feb 2025 23:23:28 +0000

Introduction

This documentation provides step-by-step guidance on how to build a portfolio website using Next js. The goal is to help others set up their own portfolio efficiently.

Here's a link to have an overview of the portfolio site
https://www.loom.com/share/04a6843f67de48d0962ab2ddf2311a9f?sid=43940911-7c80-4fbe-ba19-f683e662ff90

Prerequisites

Before starting, ensure you have the following installed:
Basic knowledge of HTML, CSS, and JavaScript

A code editor (e.g., VS Code)
Node.js installed

Link to watch a tutorial on how to install node.js
https://www.loom.com/share/23fd05a76b424682b2517b17fe9b33c4?sid=3129f99e-73da-484a-b6c2-3f74e3a8fe3d
Your project folder with the neccessary dependencies

Link to watch how to create your next.js project folder
https://www.loom.com/share/74b232a97d654d48b69f0bcc8fb06a1a?sid=4291f2a5-011c-4732-bbf8-a33ad1c246dd
GitHub account
Netlify / Vercel account
A web browser (Chrome, Firefox, Edge, etc.)

Project Setup

Open your a Code Editor

Open the project folder in your preferred code editor.

Run the development command line

Run the command line in the terminal of vscode
npm run dev

After click on the local url, so it's opened in your browser

Folder Structure

Link to a video explaining the folder structure
https://www.loom.com/share/bcf2a1c616e644fe836077b180326307?sid=b0bdb288-ead4-464c-a99d-29a29f239d90

Link to access the images/icons for your project
https://drive.google.com/drive/folders/18e05Pu5U6pCn2zSdi1fHoCn3_-G4dU8u?usp=drive_link

*NOTE: You must create the assets and components folder in the app folder and then create the about, contact, footer, head, navbar, project and service within the component folder.
*

Customization

Update the tailwind.config.mjs code

Open tailwind.config.mjs and update the file with this code

/** @type {import('tailwindcss').Config} */

import { Montserrat, Poppins } from "next/font/google";

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
    fontFamily: {
      Poppins: ["Poppins", "sans-serif"],
      Montserrat: ["Montserrat", "serif"],
    },

    boxShadow: {
      shadowWhite: "2px 2px 0 #cbd5e1",
    },
    gridTemplateColumns: {
      auto: "repeat(auto-fit, minmax(200px, 1fr))",
    },
  },
  plugins: [],
};

Update the global.css

Change the code the the global.css file with this

@import "tailwindcss";

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

:root {
  --foreground: #ffffff;
  --background: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Poppins;
}

Modify layout.js Section

Update the code in layout.js with the code below

import { Poppins, Montserrat } from "next/font/google";
import "./globals.css";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

const montserrat = Montserrat({
  subsets: ["latin"],
  weight: ["400"],
});

export const metadata = {
  title: "Portfolio - Your name",
  description:
    "Showcasing the work and skills of a passionate frontend developer with a focus on web development, UX/UI design, and problem-solving",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" className="scroll-smooth">
      <body
        className={`${poppins.className} ${montserrat.className} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

3.** Modify page.js Section**
Update the code in page.js with the code below

import Image from "next/image";
import Navbar from "./components/Navbar";
import Head from "./components/Head";
import About from "./components/About";
import Service from "./components/Service";
import Project from "./components/Project";
import Contact from "./components/Contact";
import Footer from "./components/Footer";

export default function Home() {
  return (
    <div>
      <Navbar />
      <Head />
      <About />
      <Service />
      <Project />
      <Contact />
      <Footer />
    </div>
  );
}

*Open the Navbar.jsx *

In this file follow this code format

"use client";

import Image from "next/image";
import React, { useRef } from "react";
import logo from "../assets/logo3.png";
import close from "../assets/close-white.png";
import menu from "../assets/menu-white.png";

const Navbar = () => {
  const sideMenu = useRef();

  const openMenu = () => {
    sideMenu.current.style.transform = "translateX(-15rem)";
  };

  const closeMenu = () => {
    sideMenu.current.style.transform = "translateX(16rem)";
  };

  return (
    <nav>
      <div className=" hidden sm:flex justify-between bg-opacity-50 backdrop-blur-md bg-[#222222] py-2  px:[5rem] sm:px-20 lg:px-[20rem] fixed top-0 right-0 left-0 z-50">
        <Image src={logo} className=" w-20 md:w-24 " alt="" />
        <div className="flex sm:gap-5 text-xs lg:text-sm lg:gap-12 items-center gap-2">
          <a href="#top" className="hover:text-[#ffbc92] duration-500">
            Home
          </a>
          <a href="#about" className="hover:text-[#ffbc92] duration-500 ">
            About
          </a>
          <a href="#service" className="hover:text-[#ffbc92] duration-500">
            Services
          </a>
          <a href="#project" className="hover:text-[#ffbc92] duration-500">
            Projects
          </a>
          <a href="#contacts" className="hover:text-[#ffbc92] duration-500">
            Contact
          </a>
        </div>
      </div>
      <div className="bg-[#222222] fixed w-full h-[4rem] bg-opacity-50 backdrop-blur-md sm:hidden z-50">
        <Image src={logo} className=" w-20 md:w-24  mt-7 ml-5 fixed " alt="" />
        <button>
          <Image
            onClick={openMenu}
            src={menu}
            className="w-6 mt-3 sm:hidden -right-[1px] mr-3 fixed"
            alt=""
          />
        </button>
      </div>
      <div>
        <ul
          ref={sideMenu}
          className="sm:hidden flex flex-col gap-4 bg-slate-700 z-50 py-12 px-5 fixed rounded-sm h-screen -right-[15rem]  w-[12rem] duration-500"
        >
          <div onClick={closeMenu}>
            <button>
              <Image
                src={close}
                className="w-4 absolute top-5 left-[10rem] "
                alt=""
              />
            </button>
          </div>
          <li>
            <a href="#top" onClick={closeMenu}>
              Home
            </a>
          </li>
          <li>
            <a href="#about" onClick={closeMenu}>
              About
            </a>
          </li>{" "}
          <li>
            <a href="#service" onClick={closeMenu}>
              Services
            </a>
          </li>{" "}
          <li>
            <a href="#project" onClick={closeMenu}>
              Projects
            </a>
          </li>{" "}
          <li>
            <a href="#contacts" onClick={closeMenu}>
              Contact
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

*Open the Head.jsx *

In this file follow this code format

import Image from "next/image";
import React from "react";
import profileImg from "../assets/profile-img.png";
import hand from "../assets/hand-icon.png";

const Head = () => {
  return (
    <div className="">
      <div className=" flex flex-col items-center mx-auto mt-20 text-center gap-2">
        <Image src={profileImg} className="rounded-full w-32" alt="" />
        <p className="  text-[1rem] w-[20rem]  sm:w-full justify-center sm:text-2xl flex sm:gap-2 font-semibold lg:text-2xl">
          Hey There! I go by the name [Your name]
          <Image
            src={hand}
            className=" w-7 h-[28px] -translate-x-2 sm:translate-x-0 sm:h-auto sm:w-7 "
          />
        </p>
        <h2 className="text-2xl sm:text-[2rem] sm:w-[40rem] mt-2 overflow-y-hidden lg:text-5xl lg:w-[58rem]">
          A frontend Developer and Blockchain enthusiast 
        </h2>
        <p className=" text-[13px] w-[20rem] sm:text-[15px] sm:w-[38rem] mt-3 lg:text-[16px] lg:w-[45rem]">
          I am an IT student with a strong interest in frontend development and
          the blockchain field. I am focused on building user-friendly,
          responsive websites and am actively exploring blockchain technologies.
          My goal is to contribute positively to the ecosystem by developing
          innovative solutions and improving the user experience.
        </p>
        <div className="flex flex-col gap-5 sm:flex-row sm:gap-20 mt-10 font-bold">
          <a
            href="#contacts"
            className="border rounded-3xl py-3 px-6 bg-white text-black hover:text-[#f08847] duration-500"
          >
            Let's connect
          </a>
          <a
            href="/Your-Resume.pdf"
            className="border rounded-3xl py-3 px-8 hover:text-[#ffbc92] duration-500"
            download
          >
            My resume
          </a>
        </div>
      </div>
    </div>
  );
};

export default Head;

*Open the About.jsx *

In this file follow this code format

import Image from "next/image";
import React from "react";
import myImage from "../assets/user-image.png";
import lang from "../assets/Logos.png";
import vscode from "../assets/vscode.png";
import vercel from "../assets/vercel.png";
import netlify from "../assets/netlify.png";
import figma from "../assets/figma.png";
import github from "../assets/github.png";

const About = () => {
  return (
    <div id="about">
      <div className="mt-32 text-center ">
        <h2 className="mb-12 text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text overflow-y-hidden">
          About me
        </h2>
        <div className="flex flex-col lg:flex-row  items-center lg:justify-center lg:gap-40 lg:items-start gap-5">
          <Image src={myImage} className="rounded-xl w-52 lg:w-64" alt="" />
          <div>
            <p className="text-[13px] w-[21rem] mx-auto sm:mx-0 sm:text-[14px] sm:w-[30rem] lg:text-[16px] lg:w-[40rem] lg:text-left">
              I am an aspiring frontend developer, learning the necessary tech
              stack i need to succeed in my field. I have worked on few projects
              that helped me to reinforce what i've learnt as well as improve
              upon my skills. I'm willing to work and collaborate with people to
              learn and grow.
            </p>
            <div className="mt-10 lg:text-left">
              <p className="mb-5 font-bold text-lg lg:text-xl bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                Experience with
              </p>
              <a className="flex lg:justify-start justify-center ">
                <Image src={lang} className="w-72 sm:w-80" />
              </a>
            </div>
            <div className=" mt-7 ">
              <p className=" font-bold text-lg lg:text-xl lg:text-left bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                Tools I use
              </p>
              <div className=" flex gap-7 sm:gap-10 lg:justify-start justify-center overflow-y-visible ">
                <a href="https://code.visualstudio.com/" target="_blank">
                  <Image
                    alt=""
                    src={vscode}
                    className="w-9 sm:w-10  mt-4 duration-500  bg-white rounded-xl  border p-2  hover:bg-slate-200 hover:shadow-shadowWhite hover:-translate-y-1"
                  />
                </a>
                <a href="https://www.figma.com/" target="_blank">
                  <Image
                    alt=""
                    src={figma}
                    className="w-9 sm:w-10 duration-500 mt-4 bg-white rounded-xl border p-2  hover:bg-slate-200 hover:shadow-shadowWhite hover:-translate-y-1"
                  />
                </a>
                <a href="https://vercel.com/" target="_blank">
                  <Image
                    alt=""
                    src={vercel}
                    className="w-[38px] sm:w-[40px] duration-500 mt-4 border rounded-xl bg-white r p-2  hover:bg-slate-200 hover:shadow-shadowWhite hover:-translate-y-1"
                  />
                </a>
                <a href="https://www.netlify.com/" target="_blank">
                  <Image
                    alt=""
                    src={netlify}
                    className="w-[38px] sm:w-[40px] duration-500 mt-4 bg-white rounded-xl border p-2  hover:bg-slate-200 hover:shadow-shadowWhite hover:-translate-y-1"
                  />
                </a>
                <a href="https://github.com/" target="_blank">
                  <Image
                    alt=""
                    src={github}
                    className="w-[40px] sm:w-[42px] duration-500 mt-4 bg-white rounded-xl border p-2 hover:bg-slate-200 hover:shadow-shadowWhite hover:-translate-y-1"
                  />
                </a>
              </div>{" "}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;

*Open the Service.jsx *

In this file follow this code format

import Image from "next/image";
import React from "react";
import ui from "../assets/ui-icon.png";
import graphic from "../assets/graphics-icon.png";
import web from "../assets/web-icon.png";

const Service = () => {
  return (
    <div id="service" className="">
      <div className="my-32 ">
        <h2 className="text-3xl sm:text-4xl lg:text-5xl overflow-y-hidden font-bold text-center bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
          What I do
        </h2>
        <ul className="mt-10 flex flex-col sm:flex-row items-center mx-auto gap-6 w-[80%] lg:w-[60%]">
          <li className="  border-none rounded-xl p-8 w-3/4 h-[15rem] bg-slate-900 hover:bg-slate-800 duration-500  ">
            <Image alt="" src={web} className="w-10 mb-3" />
            <h2 className="text-sm lg:text-[1rem] font-semibold mb-3 bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
              Web development
            </h2>
            <p className=" text-[13px] ">
              Building fast and responsive websites.
            </p>
          </li>
          <li className=" border-none rounded-xl p-8 w-3/4 h-[15rem]  bg-slate-900  hover:bg-slate-800 duration-500 ">
            <Image alt="" src={ui} className="w-10 mb-3" />
            <h2 className="text-sm lg:text-[1rem] font-semibold mb-3 bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
              UI/UX design
            </h2>
            <p className=" text-[13px]">
              Designing simple and intuitive websites
            </p>
          </li>
          <li className="border-none rounded-xl p-7 w-3/4 h-[15rem] bg-slate-900 hover:bg-slate-800 duration-500  ">
            <Image alt="" src={graphic} className="w-10 mb-3" />
            <h2 className="text-sm lg:text-[1rem] font-semibold mb-3 bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
              Graphic design
            </h2>
            <p className=" text-[13px]">Creating visually appealing designs</p>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Service;

Open the Project.jsx In this file follow this code format

import React from "react";
import profileLinks from "../assets/work-1.png";
import guessGame from "../assets/guess_game.png";
import pigGame from "../assets/pig_game.png";
import landingPage from "../assets/landing_page.jpg";
import send from "../assets/send-icon.png";
import Image from "next/image";

const Project = () => {
  return (
    <div id="project">
      <div className=" mt-20 mb-10 w-3/4 mx-auto">
        <div className="">
          <h2 className="mb-10 text-3xl sm:text-4xl lg:text-5xl overflow-y-hidden text-center bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
            Projects i Built
          </h2>
          <ul className="grid grid-cols-auto gap-4 place-items-center ">
            <li>
              <Image src={profileLinks} className="w-[17rem] h-44" alt="" />
              <div className="bg-slate-900 hover:bg-slate-800 py-2 px-5 rounded-xl mt-2 flex gap-10 items-center w-[17rem]">
                <a
                  href=""
                  target="_blank"
                >
                  <p className="font-semi-bold   bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                    Social links profile
                  </p>
                  <p className="text-sm">Web design</p>
                </a>
                <a
                  href="
                  target="_blank"
                >
                  <Image
                    alt=""
                    src={send}
                    className="bg-white w-8 p-2 aspect-square rounded-xl hover:bg-gray-200"
                  />
                </a>
              </div>
            </li>
            <li>
              <Image src={guessGame} className="w-[17rem] rounded-xl" alt="" />
              <div className="bg-slate-900  w-[17rem] hover:bg-slate-800 py-2 px-5 rounded-xl mt-2 flex gap-24 items-center">
                <a href="" className="">
                  <p className="font-semi-bold   bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                    Guess game
                  </p>
                  <p className="text-sm">Web design</p>
                </a>
                <a
                  href=""
                  target="_blank"
                >
                  <Image
                    alt=""
                    src={send}
                    className="bg-white w-8 p-2 aspect-square rounded-xl hover:bg-gray-200"
                  />
                </a>
              </div>
            </li>
            <li>
              <Image src={pigGame} className="w-[17rem] rounded-xl" alt="" />
              <div className="bg-slate-900 w-[17rem] hover:bg-slate-800 py-2 px-5 rounded-xl mt-2 flex gap-28 items-center">
                <a href="" target="_blank">
                  <p className="font-semi-bold   bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                    Pig game
                  </p>
                  <p className="text-sm">Web design</p>
                </a>
                <a href="" target="_blank">
                  <Image
                    alt=""
                    src={send}
                    className="bg-white w-8 p-2 aspect-square rounded-xl  hover:bg-gray-200"
                  />
                </a>
              </div>
            </li>
            <li>
              <Image
                src={landingPage}
                className="w-[17rem] rounded-xl"
                alt=""
              />
              <div className="bg-slate-900 w-[17rem] hover:bg-slate-800 py-2 px-5 rounded-xl mt-2 flex gap-7 items-center">
                <a
                  href=""
                  target="_blank"
                >
                  <p className="font-semi-bold   bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
                    Huddle landing page
                  </p>
                  <p className="text-sm">UI/UX</p>
                </a>
                <a
                  href=""
                  target="_blank"
                >
                  <Image
                    alt=""
                    src={send}
                    className="bg-white w-8 p-2 aspect-square rounded-xl hover:bg-gray-200"
                  />
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Project;

*Open the Contact.jsx *

In this file follow this code format

import Image from "next/image";
import React from "react";
import x from "../assets/x.png";
import linkedin from "../assets/linkedin.png";
import whatsapp from "../assets/whatsapp.png";
import email from "../assets/mail_icon_dark.png";

const Contact = () => {
  return (
    <div
      id="contacts"
      className="mt-36 mb-16 flex flex-col items-center  gap-5"
    >
      <div className="text-center">
        <h2 className=" text-xl sm:text-4xl font-bold  overflow-y-hidden mb-2 bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
          Want to collaborate with me?
        </h2>
        <p className=" text-md sm:text-xl font-semibold ">
          Lets connect on social media app!{" "}
        </p>
      </div>
      <div className="flex gap-4 sm:gap-6">
        <p className="bg-gradient-to-r from-[#FF8660] to-[#9A33FF] text-transparent bg-clip-text">
          Connect:
        </p>
        <a href=" mailto:suadmacaulay50@gmail.com" target="_blank">
          <Image
            alt=""
            src={email}
            className="w-[1.4rem] sm:w-[1.6rem] translate-y-1"
          />
        </a>
        <a href="https://www.linkedin.com/in/suad-macaulay " target="_blank">
          <Image
            alt=""
            src={whatsapp}
            className="w-[1.5rem] sm:w-[1.7rem]"
          />
        </a>
        <a href=" https://wa.me/0598399951" target="_blank">
          <Image
            alt=""
            src={linkedin}
            className="w-[1.6rem] sm:w-[1.8rem]"
          />
        </a>
        <a href="https://x.com/moreofababe " target="_blank">
          <Image
            alt=""
            src={x}
            className="w-[1.6rem] sm:w-7"
          />
        </a>
      </div>
    </div>
  );
};

export default Contact;

*Open the Footer.jsx *

In this file follow this code format

import React from "react";

const Footer = () => {
  return (
    <div>
      <div className="border-t text-center mx-[15%]">
        <p className="my-5">© Your name. All rights reserved</p>
      </div>
    </div>
  );
};

export default Footer;

Deployment

Once you’ve customized your portfolio, deploy it online.
**

Use this link to watch a step by step guide on how to push your project to github and how to deploy on Netlify or Vercel.
https://youtu.be/P75e8DgOxn8?si=y3pS2QQJ5hevVly7

Conclusion
This documentation provides a foundation to build and customize your own portfolio website. If you encounter issues, feel free to reach out!

Author: Suad Macaulay