diff --git a/components/techIcon.tsx b/components/techIcon.tsx
index 29712e9..68c5141 100644
--- a/components/techIcon.tsx
+++ b/components/techIcon.tsx
@@ -24,7 +24,8 @@ export type TechType =
| "serverless"
| "splunk"
| "tableau"
- | "redshift";
+ | "redshift"
+ | "ai-agents";
interface props {
tech: TechType;
diff --git a/components/utils/skills.ts b/components/utils/skills.ts
index 7a16394..b009253 100644
--- a/components/utils/skills.ts
+++ b/components/utils/skills.ts
@@ -1,6 +1,11 @@
import { ISkill } from "./types";
export const skills: ISkill[] = [
+ {
+ tech: "ai-agents",
+ prettyName: "AI Agents",
+ years: 2,
+ },
{
tech: "react",
prettyName: "ReactJS",
diff --git a/public/hq_icons/ai-agents-icon.png b/public/hq_icons/ai-agents-icon.png
new file mode 100644
index 0000000..4e4f247
Binary files /dev/null and b/public/hq_icons/ai-agents-icon.png differ
diff --git a/public/icons/ai-agents-icon.png b/public/icons/ai-agents-icon.png
new file mode 100644
index 0000000..c23ebd7
Binary files /dev/null and b/public/icons/ai-agents-icon.png differ
diff --git a/tasks/AI-7.md b/tasks/AI-7.md
new file mode 100644
index 0000000..6a3c671
--- /dev/null
+++ b/tasks/AI-7.md
@@ -0,0 +1,76 @@
+# AI-7: Update portfolio main page to show AI agents as a skill
+
+## Important Rules
+- Do not run commands, always use MCP tools
+- Stop if a tool is missing
+- Always commit changes
+- Always update this task list
+
+## Task Description
+Add "AI Agents" as a new skill icon in the Skills grid on the portfolio main page.
+
+## Acceptance Criteria
+1. A new icon labelled "AI Agents" appears in the Skills grid
+2. Icon size, padding and hover behaviour match existing skill icons
+3. Tooltip/alt text reads "AI Agents"
+4. Grid remains responsive on all breakpoints (no layout shift)
+5. Lighthouse performance score remains ≥ 95 (no CLS regressions)
+6. Unit or Cypress test asserts icon renders in the DOM
+
+## Tasks
+1. [x] Create a new branch for this task
+2. [x] Find or create an AI agent icon image and add to public/icons and public/hq_icons
+ - Added files:
+ - `/public/icons/ai-agents-icon.png` (standard resolution)
+ - `/public/hq_icons/ai-agents-icon.png` (high resolution)
+3. [x] Update TechType in techIcon.tsx to include "ai-agents"
+4. [x] Add the new skill to the skills array in components/utils/skills.ts
+5. [x] Write a test to verify the icon renders correctly
+6. [ ] Update component snapshot if needed
+7. [ ] Create or update Confluence documentation regarding:
+ - Purpose of the AI Agents skill entry
+ - SVG source, file location, naming conventions
+ - Steps for adding future skills
+ - Add changelog entry referencing this Jira ticket
+
+ Documentation Content (to be added to Confluence):
+ ```
+ # AI Agents Skill Icon
+
+ ## Purpose
+ The AI Agents skill icon represents Art's experience in building autonomous, LLM-powered solutions. This skill was added to highlight expertise in developing conversational agents, recommendation systems, and other AI-powered applications.
+
+ ## Asset Information
+ - **Icon Name**: ai-agents
+ - **File Format**: PNG
+ - **Location**:
+ - `/public/icons/ai-agents-icon.png` (standard resolution)
+ - `/public/hq_icons/ai-agents-icon.png` (high resolution)
+ - **Source**: [Optional: Include the source of the icon here]
+
+ ## Adding Future Skills
+ To add a new skill to the portfolio site:
+
+ 1. Create icon files in both standard and high resolutions
+ 2. Add the new skill type to the `TechType` in `components/techIcon.tsx`
+ 3. Add the skill entry to the `skills` array in `components/utils/skills.ts`
+ 4. Create a test to verify the icon renders correctly
+ 5. Update component snapshots if necessary
+ 6. Document the new skill in Confluence
+
+ ## Changelog
+ - April 24, 2025: Added AI Agents skill icon ([AI-7](link-to-jira-ticket))
+ ```
+
+8. [x] Commit changes
+9. [ ] Open pull request
+
+## Progress
+- Created task file and planning implementation
+- Created branch feat/AI-7-ai-agents-skill
+- Updated TechType in techIcon.tsx to include "ai-agents"
+- Added "AI Agents" skill entry to the skills array in skills.ts
+- Created test file to verify AI Agents skill icon rendering
+- Added icon files to public/icons and public/hq_icons directories
+- Prepared Confluence documentation content (to be added when access is available)
+- Committed all changes to the branch
\ No newline at end of file
diff --git a/tests/components/skillIcon.test.tsx b/tests/components/skillIcon.test.tsx
new file mode 100644
index 0000000..c98183e
--- /dev/null
+++ b/tests/components/skillIcon.test.tsx
@@ -0,0 +1,22 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import SkillIcon from "../../components/skillIcon";
+
+describe("", () => {
+ it("renders skill icon with correct name and years", async () => {
+ render();
+
+ // Check if the icon appears with the proper alt and title text
+ const iconElement = screen.getByAltText("AI Agents");
+ expect(iconElement).toBeInTheDocument();
+ expect(iconElement).toHaveAttribute('title', '2 years of experience with AI Agents');
+
+ // Check if the skill name is rendered
+ const nameElement = screen.getByText("AI Agents");
+ expect(nameElement).toBeInTheDocument();
+
+ // Check if the years text is rendered
+ const yearsElement = screen.getByText("2 years");
+ expect(yearsElement).toBeInTheDocument();
+ });
+});
\ No newline at end of file