Add Services section with enhanced navigation and UX features

[Copilot]

Adds a Services section showcasing four service offerings (Data Annotation, Multilingual AI Training, Translation/Localization, Consultancy) with enhanced navigation and user experience features.

Changes

• Services Section: Four-card grid layout with service descriptions, emoji icons, and hover animations (5px lift, enhanced shadow)
• Navigation: Updated header menu to include About Me, Services, CV, Blog, Contact Me links
• Smooth Scrolling: CSS-based smooth scroll behavior for all anchor navigation
• Back-to-Top Button: Fixed position button with visibility logic (appears after 300px scroll) and smooth scroll to top

Implementation

Services grid uses responsive auto-fit layout:

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(11, 61, 145, 0.2);
}

Back-to-top visibility controlled via scroll event:

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 300) {
    backToTopButton.classList.add('visible');
  } else {
    backToTopButton.classList.remove('visible');
  }
});

All changes maintain existing design system (colors, typography, spacing) and accessibility patterns (ARIA labels, semantic HTML).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.42/linux64/chrome-linux64.zip
  • Triggering command: /usr/local/bin/node node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Incorporate additional services offered by Adamu Danjuma Abubakar into the portfolio website. Update longblog.html following these requirements:\n\n1. Services Section:\n - Create a "Services" section prominently highlighting the offerings. Services include:\n a. Data Annotation\n b. Multilingual AI Training\n c. Translation and Localization\n d. Consultancy (Low-Resource Languages for LLM, Cultural Nuances, AI Bias)\n - Provide a visually striking layout: use cards or sections to outline each service individually with accompanying descriptions.\n - Ensure proper spacing and hover effects for user interaction.\n\n2. Main Updates to Structure:\n - Include the "Services" section as another core section alongside "About Me," "CV," "Contact Me," "Blog," and "Poetry."\n - Make navigation seamless by adding a link to "Services" in the header menu.\n\n3. Enhancing Website Navigation and Functionality:\n - Use smooth scrolling for intra-page navigation links.\n - Add a back-to-top button for an improved user experience.\n\n4. Code Quality and Design:\n - Maintain a modular structure for new sections, with clear and concise comments.\n - Ensure the design aligns with the existing modern, accessible, and visually stunning UI/UX principles established earlier.

This pull request was created as a result of the following prompt from Copilot chat.

Incorporate additional services offered by Adamu Danjuma Abubakar into the portfolio website. Update longblog.html following these requirements:\n\n1. Services Section:\n - Create a "Services" section prominently highlighting the offerings. Services include:\n a. Data Annotation\n b. Multilingual AI Training\n c. Translation and Localization\n d. Consultancy (Low-Resource Languages for LLM, Cultural Nuances, AI Bias)\n - Provide a visually striking layout: use cards or sections to outline each service individually with accompanying descriptions.\n - Ensure proper spacing and hover effects for user interaction.\n\n2. Main Updates to Structure:\n - Include the "Services" section as another core section alongside "About Me," "CV," "Contact Me," "Blog," and "Poetry."\n - Make navigation seamless by adding a link to "Services" in the header menu.\n\n3. Enhancing Website Navigation and Functionality:\n - Use smooth scrolling for intra-page navigation links.\n - Add a back-to-top button for an improved user experience.\n\n4. Code Quality and Design:\n - Maintain a modular structure for new sections, with clear and concise comments.\n - Ensure the design aligns with the existing modern, accessible, and visually stunning UI/UX principles established earlier.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
adab-tech-github-io	Ready	Preview, Comment	Dec 14, 2025 5:53pm

[Copilot]

Pull request overview

Adds a Services section to the portfolio website with four service offerings (Data Annotation, Multilingual AI Training, Translation/Localization, and Consultancy), along with enhanced navigation and user experience improvements including smooth scrolling and a back-to-top button.

• Services section with responsive grid layout and interactive hover effects
• Updated navigation menu with refined anchor links
• Smooth scrolling behavior and back-to-top button for improved UX

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
longblog.html	Added Services section with four service cards, updated navigation menu, implemented smooth scrolling, and added back-to-top button with visibility logic
CNAME	Added custom domain configuration

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The navigation links lack ARIA current-page indicators for better screen reader navigation. Consider adding aria-current="page" to the active link to help users understand which section they're currently viewing.

[Copilot]

The aria-label "Introduction" is inconsistent with the section id "about" and navigation link text "About Me". For clarity, consider changing the aria-label to "About Me" to match the navigation and user expectations.

Suggested change

	<section id="about" class="hero" aria-label="Introduction">
	<section id="about" class="hero" aria-label="About Me">

[Copilot]

The aria-label "Portfolio" doesn't match the section's actual purpose (CV) or the heading text. The aria-label should be "CV" or "Curriculum Vitae" to accurately describe the section content and align with the navigation link.

Suggested change

	<section id="cv" aria-label="Portfolio">
	<section id="cv" aria-label="CV">