Simply update the values in this file to personalize your portfolio.

Blog

Blog posts are written in MDX and live in content/blog. Each post uses frontmatter for metadata such as title, description, date, author, readingTime, and tags.

Example:

---
title: "Primitive Types"
description: "Learn JavaScript's 7 primitive types."
date: "2026-05-22"
author: Al-Hussein Abubakar
readingTime: 23 min read
tags:
  - JavaScript
  - Fundamentals
---

Write your article content here.

The blog index is available at /blog, and each post is generated from its filename, such as /blog/primitive-types.

How to Add Your CV

1. Upload Your CV : Place your CV file in the public folder of the project.

2. Update the Download Link : Modify the href attribute of the "Download CV" button in the hero.tsx file to point to your uploaded CV.

Here's an example

<Link
  download
  aria-label="Download CV in PDF format"
  className="w-full sm:w-auto"
  href="/your-cv-filename.pdf"
>
  <Button
    fullWidth
    aria-label="Download CV"
    color="primary"
    endContent={<Icon icon="lucide:download" />}
    size="lg"
    variant="shadow"
  >
    Download CV
  </Button>
</Link>

Contact Form Setup (Email.js)

This template uses Email.js for handling contact form submissions without a backend. To set it up:

1. Create an Email.js account: If you don't have one, sign up at Email.js.

2. Create a new Email Service: Go to Email Services and add a new service (e.g., Gmail, Outlook). Follow the instructions to connect your email account.

3. Create a new Email Template: Go to Email Templates and create a new template. You can use the default template or customize it. Make note of your Template ID.

   Here's an example template you can use:

<div style="font-family: system-ui, sans-serif, Arial; font-size: 12px">
  <div>
    A message by <strong>{{ sender_name }}</strong> ({{ sender_email }}) has
    been received with the subject "<strong>{{ sender_subject }}</strong>".
    Kindly respond at your earliest convenience.
  </div>

  <div
    style="
      margin-top: 20px;
      padding: 15px 0;
      border-width: 1px 0;
      border-style: dashed;
      border-color: lightgrey;
    "
  >
    <table role="presentation">
      <tr>
        <td style="vertical-align: top">
          <div
            style="
              padding: 6px 10px;
              margin: 0 10px;
              background-color: aliceblue;
              border-radius: 5px;
              font-size: 26px;
            "
            role="img"
          >
            &#x1F4E7;
          </div>
        </td>
        <td style="vertical-align: top">
          <div style="color: #2c3e50; font-size: 16px">
            <strong>{{ sender_name }}</strong> —
            <a href="mailto:{{sender_email}}" style="color: #3498db">
              {{ sender_email }}
            </a>
          </div>
          <div style="color: #999999; font-size: 13px">
            <em>Subject:</em> {{ sender_subject }}
          </div>
          <p style="font-size: 16px; margin-top: 10px">{{ sender_message }}</p>
        </td>
      </tr>
    </table>
  </div>
</div>

4. Get your Public Key: You can find your Public Key under Account -> API Keys.

5. Configure Environment Variables: Create a .env.local file in the root of your project (if it doesn't exist) and add the following environment variables:

   NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
   NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
   NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
   

   Replace your_service_id, your_template_id, and your_public_key with the values from your Email.js account.

   In your EmailJS template settings:

   • Set From Name to {{sender_name}}
   • Set Reply-To to {{sender_email}}

   Note: for Gmail/Outlook services, the actual From email address is usually your connected service account. Reply-To is what ensures replies go to the visitor's email.

6. Restart your development server: After adding the environment variables, restart your development server (pnpm dev) for the changes to take effect.

Technologies Used

• Next.js: A React framework for production.
• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework.
• Framer Motion: A library for creating animations in React.
• Fumadocs MDX: MDX content tooling for the blog.
• HeroUI: A React UI library for beautiful and accessible components.
• Iconify: A library for using icons from various icon sets.
• TypeScript: A typed superset of JavaScript.

License

This project is licensed under the MIT License. See the LICENSE file for more details.