# Kamy Ewang - Full Portfolio & Site Content (AI Readable)

> Kamy Ewang is a Software Engineer based in Uyo, Nigeria, specialising in AI-powered full-stack applications, real-time platforms, and modern web development with React, Next.js, Python, and Flask.

## About Kamy Ewang
- **Name**: Kamy Ewang
- **Role**: Software Engineer
- **Location**: Uyo, Nigeria (Africa/Lagos)
- **Email**: kamy.ngn@gmail.com
- **Website**: https://www.kamy.name.ng

### Bio
Kamy Ewang is a Software Engineer based in Uyo, Nigeria, specializing in AI-powered full-stack applications, real-time platforms, Cyber Threat Intelligence, and modern web development with React, Next.js, Node.js, Python, and Flask.

## Work Experience
### Full-Stack Developer at Freelance (2024 - Present)
  - [object Object]
  - [object Object]

### Software Engineering Student at University (2022 - 2026)
  - [object Object]
  - [object Object]

## Technical Skills
- **Frontend Development**: React, Next.js, Tailwind
- **Backend & AI**: Node.js, Python, MongoDB
- **Version Control**: Git, GitHub

## Portfolio Projects
---
## Project: Aether
- **Slug**: aether
- **Published**: 2026-09-16
- **Summary**: A local-first AI development environment: a desktop IDE (Electron + React) with a built-in, permission-gated autonomous coding agent. Bring your own OpenAI-compatible model gateway — your code and keys never leave your machine.
- **URL**: https://www.kamy.name.ng/work/aether
- **Live Project Link**: /work/aether/download
- **Source Code**: https://github.com/kamyCodes/Aether

### Content
## Overview

Aether is a local-first AI development environment — a full desktop IDE with an autonomous coding agent built in. It runs entirely on your machine: an Electron + React desktop app paired with a TypeScript backend that drives an agent which reads and edits your code, runs shell commands, searches the repository, and operates git — always behind an explicit permission system, with every step streamed live into the UI.

The agent talks to any OpenAI-compatible model gateway (Aether ships with support for OmniRoute, a self-hosted gateway), so you choose the models — local or cloud — and your code and API keys never leave your machine.

## Key Features

- **Real desktop IDE**: Monaco editor, file tree, git panel, integrated terminal (node-pty), live preview, and code map — panels that resize and remember.
- **Autonomous agent, permission-gated**: The agent plans, calls tools (edit / shell / search / git), and streams its work over WebSockets. Every tool call passes an allow/deny engine, and approvals persist across restarts.
- **Local-first by design**: The gateway endpoint, ports, and data directory are the only configuration. Keys live in local settings, are masked in logs, and a "mock guard" refuses to run against fake gateways in production.
- **Project memory & history**: Optional PostgreSQL backing for task history, usage dashboards, and project memory. Skip it and everything else still works.
- **Setup that actually tests**: The first-run wizard write-probes the data directory, makes a real `/models` call, runs a real SQL query, and shows a per-item pass/fail checklist.
- **Hardened by an audit gate**: CI scans every commit for hardcoded paths/ports, secrets, leftover mocks, and dead flags — nothing ships without an explicit, documented allowlist entry.

## Technologies Used

- **Desktop shell**: Electron with an NSIS (electron-builder) Windows installer; runtime bundled, no Node.js required for users
- **Frontend**: React 19 + Vite, Monaco editor, Zustand state store, WebSocket streaming
- **Backend**: TypeScript (ESM) Express API server; agent runtime with a permission-gated tool surface (edit, shell, search, git)
- **Models**: Any OpenAI-compatible gateway; ships with OmniRoute (self-hosted) support
- **Data & QA**: Optional PostgreSQL (history, usage, memory), node:test suites, CI audit gate on ubuntu + windows runners

## Download

Aether is available for Windows — grab the latest installer from [GitHub Releases](https://github.com/kamyCodes/Aether/releases) or head to the [download page](/work/aether/download).


---
## Project: Candid
- **Slug**: candid
- **Published**: 2026-09-04
- **Summary**: A quiet, local-first hiring pipeline. Drag candidates across a Kanban board or triage them in a sortable list, with notes, ratings, and full history. No server, no account, data stays in your browser.
- **URL**: https://www.kamy.name.ng/work/candid
- **Live Project Link**: https://candid-navy.vercel.app/
- **Source Code**: https://github.com/kamyCodes/Candid

### Content
## Overview

Candid is a local-first hiring pipeline that assumes the opposite of most applicant trackers: one person, one tab, six stages. Drag a card, write down what you actually thought of the person, and move on.

There is no server, no database, and no account. Candidates and activity are stored in `localStorage`, so the app works offline, loads instantly, and your data never leaves your machine. Live demo deployed on Vercel.

## Key Features

- **One pipeline, two views**: A drag-and-drop board for running the funnel and a sortable table for triage; both share the same stage colors, chips, and type scale.
- **Notes and ratings**: One-to-five star ratings plus timestamped notes, signed with your name or left anonymous.
- **Search while you type**: Filter by name, email, role, or phone, combinable with a stage dropdown in either view.
- **Activity log**: Every move, note, and rating, newest first, capped at the last fifty entries.
- **Nothing depends on dragging**: Every card has stage arrows, every row has a dropdown, focus rings stay visible, and `Esc` and `Cmd/Ctrl + Enter` cover the repetitive bits.
- **Slide-out detail panel**: Any card or row opens a full profile with notes, rating, and edit or delete actions, backed by an inline add form with live validation and duplicate checks.

## Technologies Used

- **Frontend**: Next.js (App Router), React, TypeScript
- **Styling**: Tailwind CSS v4 with a hand-rolled "ink and copper" token system in CSS variables
- **State**: React Context plus a small `useLocalStorage` hook; state flows one way, with views deriving search, filter, and sort at render time
- **UI**: Hand-rolled icons and primitives; no UI or state library
- **Type**: Geist via `next/font`


---
## Project: Energy2Green
- **Slug**: energy2green
- **Published**: 2025-04-01
- **Summary**: A modern corporate demo site for a renewable energy company, featuring dynamic animations, responsive design, and a sleek dark-themed interface.
- **URL**: https://www.kamy.name.ng/work/energy2green
- **Live Project Link**: https://energy2-green.vercel.app/


### Content
## Overview

Energy2Green is a polished corporate website built for a renewable energy company. The site showcases the company's services, from solar grids to hybrid power systems, with a premium, modern design that emphasizes credibility, professionalism, and sustainability.

## Key Features

- **Dynamic Animations**: Leveraged Framer Motion for scroll-triggered animations, smooth page transitions, and interactive UI elements that bring the site to life.
- **Responsive Design**: Fully responsive layout that adapts seamlessly from desktop to mobile, ensuring a consistent experience across all devices.
- **Dark Corporate Theme**: A sleek, dark-themed design that conveys professionalism and aligns with the brand's energy-forward identity.
- **Performance Optimized**: Deployed on Vercel with analytics integration, optimized for fast load times and SEO performance.

## Technologies Used

- **Frontend**: React 19, React Router DOM 7, Framer Motion 12, Lucide React, Tailwind CSS 4, Vite 8
- **Analytics & Hosting**: Vercel Analytics, Vercel
- **Dev & Linting**: ESLint 10 (React Hooks + React Refresh plugins), PostCSS, Autoprefixer


---
## Project: Local Job Connect
- **Slug**: local-job-connect
- **Published**: 2025-08-01
- **Summary**: A dual-portal job platform connecting local businesses with nearby talent, featuring AI resume parsing, real-time messaging, and geolocation-based search.
- **URL**: https://www.kamy.name.ng/work/local-job-connect
- **Live Project Link**: https://github.com/kamyCodes/Local-Job-Connect


### Content
## Overview

Local Job Connect is Nigeria's dedicated local job platform, a full-stack web application that bridges the gap between local businesses and nearby job seekers. It features a dual-portal system where employers can post jobs and manage applications, while candidates can search by location, apply with AI-parsed resumes, and communicate in real time.

## Key Features

- **Dual-Portal System**: Separate dashboards for employers and job seekers, each tailored to their workflow: posting jobs, reviewing applicants, or browsing and applying.
- **AI Resume Parsing**: Integrated intelligent resume analysis to automatically extract key skills and experience, streamlining the application review process for employers.
- **Geolocation Search**: Leveraged `geopy` to enable location-based job discovery, letting candidates find opportunities close to home.
- **Real-Time Messaging**: Built an in-app messaging system so employers and candidates can communicate directly without leaving the platform.
- **Glassmorphism UI**: Designed a modern, dark-themed interface using vanilla CSS with HSL variables, glassmorphism effects, and micro-animations for a premium feel.

## Technologies Used

- **Backend**: Python 3.12, Flask, Flask-SQLAlchemy, Flask-Login, Flask-WTF, Flask-Caching, Werkzeug, geopy, gunicorn
- **Frontend**: Jinja2 templates, Vanilla CSS (HSL variables, glassmorphism, micro-animations)
- **Database**: SQLite (with psycopg2-binary for PostgreSQL production-ready swap)
- **Dev & Testing**: pytest, pytest-flask, Flask-Migrate, python-dotenv


---
## Project: Quizzly
- **Slug**: quizzly
- **Published**: 2025-02-01
- **Summary**: An AI-powered mobile quiz app that generates customized quizzes from any topic or uploaded document using Llama 3.3, built with React Native and Expo.
- **URL**: https://www.kamy.name.ng/work/quizzly
- **Live Project Link**: https://github.com/kamyCodes/Quizzly


### Content
## Overview

Quizzly is a cross-platform mobile application that uses AI to generate personalized quizzes. Users can create quizzes by entering any topic or uploading a document (PDF/text), selecting the number of questions and difficulty level, and letting the AI generate a tailored knowledge check, all from their phone.

## Key Features

- **AI Quiz Generation**: Powered by Groq SDK with Llama 3.3 70B, the app generates contextually relevant multiple-choice questions from any topic or uploaded document.
- **Document Upload**: Supports PDF and text file uploads via Expo Document Picker, parsing content server-side with `pdf-parse` to generate quiz material.
- **Customizable Parameters**: Users choose the number of questions (3, 5, or 10) and difficulty level (Easy, Medium, Hard) to tailor each quiz session.
- **Cross-Platform**: Built with React Native and Expo for seamless deployment on both iOS and Android, with React Native Web support.
- **Local Storage**: Quiz history and progress are persisted using React Native Async Storage for offline access.

## Technologies Used

- **Mobile**: React 19, React Native 0.81, Expo 54, React Native Web 0.21, Expo Linear Gradient, Expo Document Picker
- **Storage**: React Native Async Storage
- **Backend**: Express 4, CORS, dotenv
- **AI & PDF**: Groq SDK (Llama 3.3 70B), pdf-parse
- **Runtime**: Node.js


---
## Project: Sentinel NLP
- **Slug**: sentinel-nlp
- **Published**: 2025-06-01
- **Summary**: An AI-powered fake news detection and cyber threat intelligence analyzer using zero-shot NLI models, fact-checking APIs, and malware database lookups.
- **URL**: https://www.kamy.name.ng/work/sentinel-nlp
- **Live Project Link**: https://github.com/kamyCodes/FakeNewsCTIAnalyzer


### Content
## Overview

Sentinel NLP is a final-year university project that combines Natural Language Processing with Cyber Threat Intelligence to combat misinformation and online threats. Users can paste any article or suspicious content and receive an instant, multi-dimensional analysis, including fake news probability, news authenticity scoring, originality assessment, and cyber threat risk evaluation.

## Key Features

- **Zero-Shot NLI Classification**: Leveraged Hugging Face's DeBERTa-v3-large model for zero-shot natural language inference, enabling the system to classify news credibility without task-specific training data.
- **Multi-Score Dashboard**: Provides three core scores (Fake News Probability, News Authenticity, and Originality), displayed through custom SVG donut charts with color-coded risk levels.
- **Cyber Threat Analysis**: A dedicated module that scans suspicious content for phishing indicators, malware URLs (via URLhaus), and social engineering patterns.
- **External API Integration**: Cross-references content with Google Fact Check API and DuckDuckGo Search for real-time corroboration, plus GROQ API for advanced LLM-powered analysis.
- **Glassmorphism Dark UI**: Built a sleek, professional dark-themed interface with glassmorphism cards and responsive design.

## Technologies Used

- **Backend**: Python 3.12, FastAPI, PyTorch, Hugging Face Transformers (DeBERTa-v3-large zero-shot NLI), spaCy, NLTK
- **Frontend**: React, Vite, CSS (glassmorphism + SVG donut charts)
- **External APIs**: Google Fact Check, DuckDuckGo Search, URLhaus malware DB, GROQ API


## Blog Articles & Posts
---
## Blog Post: Create, edit and delete blog posts
- **Slug**: blog
- **Published**: 2025-03-17
- **Summary**: Create, edit and delete posts in the blog section of your Magic Portfolio.
- **URL**: https://www.kamy.name.ng/blog/blog

### Content
## Manage posts

You can create, edit and delete posts by adding, modifying or removing `*.mdx` files in the `src/app/blog/posts` directory.

## Frontmatter

The frontmatter is used to set the post's metadata: title, description, image, and tags. It's used in the post's page and in meta- and open graph tags.

<CodeBlock
    marginBottom="16"
    codes={[
      {
        code:
`---
title: "Arriving to a new milestone in my career"
publishedAt: "2024-04-08"
image: "/images/gallery/img-02.jpg"
summary: "Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path."
tag: "Journal"
---`,
        language: "tsx",
        label: "src/app/blog/posts/post-1.mdx"
      }
    ]}
/>

## MDX syntax

You can use MDX to write the content of your posts. It helps you write rich and dynamic content with minimal code. Some MDX elements will be automatically transformed to Once UI components to integrate better in the design and add additional functionality.

## Custom components

You can use custom components in MDX files, but you need to import them first in the `src/components/mdx.tsx` file.

<CodeBlock
    marginBottom="16"
    highlight="11-12"
    codes={[
      {
        code:
`const components = {
    p: createParagraph as any,
    h1: createHeading(1) as any,
    h2: createHeading(2) as any,
    h3: createHeading(3) as any,
    h4: createHeading(4) as any,
    h5: createHeading(5) as any,
    h6: createHeading(6) as any,
    img: createImage as any,
    a: CustomLink as any,
    Table,
    CodeBlock,
};`,
        language: "tsx",
        label: "src/components/mdx.tsx"
      }
    ]}
/>

As you can see, the `Table` and `CodeBlock` components are already imported and available for use. You can add more by simply importing them to this file and passing them to the `components` object.

## Hot reload

Hot reload of MDX files is currently not supported, but we're working on it.


---
## Blog Post: Using custom components in markdown
- **Slug**: components
- **Published**: 2025-04-20
- **Summary**: Every career is a journey, filled with challenges, growth, and those significant moments that mark a shift in our path.
- **URL**: https://www.kamy.name.ng/blog/components

### Content
Magic Portfolio will replace some default HTML elements to Once UI components to integrate better in the design and add additional functionality. Furthermore, many common Once UI components are already imported and available for use.

## Feedback

The feedback component is used to display critical information to visitors.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={<Feedback icon title="Feedback element" variant="success" description="Longer description of the feedback message." marginBottom="24"/>}
    codes={[
      {
        code:
`<Feedback
    icon
    variant="success"
    title="Feedback element"
    description="Longer description of the feedback message."
/>`,
        language: "tsx",
        label: "Feedback"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/feedback" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Table

Tables are used to display data in a structured format.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
    <Table 
      data={{
        headers: [
          { content: "Name", key: "name", sortable: true },
          { content: "Type", key: "type", sortable: true },
          { content: "Description", key: "description" }
        ],
        rows: [
          ["title", "string", "The title of the document"],
          ["summary", "string", "A brief summary of the document content"],
          ["updatedAt", "string", "The date when the document was last updated"],
          ["navLabel", "string", "The label used in navigation menus"]
        ]
      }}
    />}
    codes={[
      {
        code:
`<Table 
    data={{
      headers: [
        { content: "Name", key: "name", sortable: true },
        { content: "Type", key: "type", sortable: true },
        { content: "Description", key: "description" }
      ],
      rows: [
        ["title", "string", "The title of the document"],
        ["summary", "string", "A brief summary of the document content"],
        ["updatedAt", "string", "The date when the document was last updated"],
        ["navLabel", "string", "The label used in navigation menus"]
      ]
    }}
/>`,
        language: "tsx",
        label: "Table"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/table" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Code

Use the CodeBlock component to display code snippets with code highlighting, preview, and copy to clipboard functionality. Use the InlineCode component for inline code snippets.

### CodeBlock

The code block component works based on Once UI's CodeBlock. You can access it with the complete syntax for full customization, or by using the standard markdown syntax (triple backticks) with pre-configured props.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codes={[
      {
        code:
`// Full component syntax
<CodeBlock
    codes={[
      {
        code: "console.log('Hello, World!');",
        language: "javascript",
        label: "Example"
      }
    ]}
/>

// Short syntax example
\`\`\`tsx
function greeting(name) {
    return \`Hello, \${name}!\`;
}

console.log(greeting('World'));
\`\`\``,
        language: "tsx",
        label: "CodeBlock"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/codeBlock" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

### InlineCode

The `InlineCode` is another Once UI component that you can access either through the complete syntax or the short syntax (backticks). Usually the standard markdown syntax is recommended, since it doesn't have that much configuration options.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={
    <InlineCode>
        const x = 10;
    </InlineCode>}
    codes={[
      {
        code:
`// Full component syntax
<InlineCode>
    const x = 10;
</InlineCode>

// Short syntax example
\`const x = 10;\``,
        language: "tsx",
        label: "InlineCode"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/inlineCode" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Accordion

Accordions are used to toggle between hiding and showing content.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
      <AccordionGroup 
        items={[
          {
            title: "Section 1",
            content: <Text variant="body-default-s" onBackground="neutral-weak">This is the content for section 1. You can include any components here.</Text>
          },
          {
            title: "Section 2",
            content: <Text variant="body-default-s" onBackground="neutral-weak">This is the content for section 2. Accordions are great for FAQs and other expandable content.</Text>
          },
          {
            title: "Section 3",
            content: <Text variant="body-default-s" onBackground="neutral-weak">This is the content for section 3. They help save space by hiding content until needed.</Text>
          }
        ]}
      />
    }
    codes={[
      {
        code:
`<AccordionGroup 
    items={[
      {
        title: "Section 1",
        content: <Text>This is the content for section 1.</Text>
      },
      {
        title: "Section 2",
        content: <Text>This is the content for section 2.</Text>
      },
      {
        title: "Section 3",
        content: <Text>This is the content for section 3.</Text>
      }
    ]}
/>`,
        language: "tsx",
        label: "Accordion"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/accordion" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Button

Buttons are used to trigger actions or navigate to other pages.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={
    <Row gap="8" marginBottom="16" marginTop="8">
      <Button variant="primary" label="Primary" />
      <Button variant="secondary" label="Secondary" />
      <Button variant="tertiary" label="Tertiary" />
    </Row>}
    codes={[
      {
        code:
`<Row gap="8">
  <Button variant="primary" label="Primary" />
  <Button variant="secondary" label="Secondary" />
  <Button variant="tertiary" label="Tertiary" />
</Row>`,
        language: "tsx",
        label: "Button"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/button" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Card

Cards are used to group related content and actions.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
    <Row fillWidth horizontal="center">
      <Card
        href=" "
        maxWidth={20}
        radius="l-4"
        direction="column"
        padding="4"
        gap="8"
      >
        <Media src="/images/projects/project-01/cover-01.jpg" aspectRatio="16/9" radius="l" sizes="400px" />
        <Column fillWidth padding="12" gap="8" horizontal="start">
          <Text variant="heading-strong-m" onBackground="neutral-strong" align="left">
            Card Title
          </Text>
          <Text variant="body-default-s" onBackground="neutral-weak" align="left">
            This is a description of the card. It can contain multiple lines of text.
          </Text>
        </Column>
      </Card>
    </Row>
    }
    codes={[
      {
        code:
`<Card
    href=" "
    maxWidth={20}
    radius="l-4"
    direction="column"
    padding="4"
  >
    <Media src="/images/projects/project-01/cover-01.jpg" aspectRatio="16/9" radius="l" sizes="400px" />
    <Column fillWidth padding="12" gap="8" horizontal="start">
      <Text variant="heading-strong-m" onBackground="neutral-strong" align="left">
        Card Title
      </Text>
      <Text variant="body-default-s" onBackground="neutral-weak" align="left">
        This is a description of the card. It can contain multiple lines of text.
      </Text>
    </Column>
</Card>`,
        language: "tsx",
        label: "Card"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/card" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Icon

Icons are used to visually represent actions, objects, or concepts. For instructions on importing new icons, head over to [the Once UI documentation](https://once-ui.com/docs/icons).

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={<Row gap="24" wrap>
      <Icon name="rocket" onBackground="danger-medium" size="m" />
      <Icon name="close" size="m" />
      <Icon name="check" onBackground="success-medium" size="m" />
      <Icon name="info" onBackground="info-medium" size="m" />
      <Icon name="warning" onBackground="warning-medium" size="m" />
      <Icon name="chevronDown" size="m" />
      <Icon name="search" size="m" />
    </Row>}
    codes={[
      {
        code:
`<Icon name="rocket" size="m" />
<Icon name="close" size="m" />
<Icon name="check" onBackground="success-medium" size="m" />
<Icon name="info" onBackground="info-medium" size="m" />
<Icon name="warning" onBackground="warning-medium" size="m" />
<Icon name="chevronDown" size="m" />
<Icon name="search" size="m" />`,
        language: "tsx",
        label: "Icon"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/icon" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Layout

Layout components help structure content on the page.

### Flex

The Flex component is accessible as `Column` and `Row` and can handle a wide range of layout options and style properties.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
    <Row
      fillWidth
      s={{direction: "column"}}
      gap="16"
    >
      <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
        <Row padding="8">Row Item</Row>
        <Row padding="8">Row Item</Row>
      </Column>
      <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
        <Row padding="8">Row Item</Row>
        <Row padding="8">Row Item</Row>
      </Column>
      <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
        <Row padding="8">Row Item</Row>
        <Row padding="8">Row Item</Row>
      </Column>
      <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
        <Row padding="8">Row Item</Row>
        <Row padding="8">Row Item</Row>
      </Column>
    </Row>}
    codeHeight={24}
    codes={[
      {
        code:
`<Row
    fillWidth
    s={{direction: "column"}}
    gap="16"
  >
    <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
      <Row padding="8">Row Item</Row>
      <Row padding="8">Row Item</Row>
    </Column>
    <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
      <Row padding="8">Row Item</Row>
      <Row padding="8">Row Item</Row>
    </Column>
    <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
      <Row padding="8">Row Item</Row>
      <Row padding="8">Row Item</Row>
    </Column>
    <Column fillWidth border="neutral-alpha-medium" padding="16" radius="m">
      <Row padding="8">Row Item</Row>
      <Row padding="8">Row Item</Row>
    </Column>
</Row>`,
        language: "tsx",
        label: "Layout"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/flex" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

### Grid

Use the grid to construct responsive grid layouts. It can be styled similarly to the Flex element.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
    <Grid
      fillWidth
      columns="3"
      s={{columns: 2}}
      gap="16"
    >
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
      <Column border="neutral-alpha-medium" padding="16" radius="m">
        <Text>Grid Item</Text>
      </Column>
    </Grid>}
    codeHeight={24}
    codes={[
      {
        code:
`<Grid
    fillWidth
    columns="3"
    s={{columns: 2}}
    gap="16"
  >
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
    <Column border="neutral-alpha-medium" padding="16" radius="m">
      <Text>Grid Item</Text>
    </Column>
</Grid>`,
        language: "tsx",
        label: "Layout"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/grid" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Media

Media provides an optimized way to display images. Access it with the `Media` component for full customization or use the markdown syntax.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={<Media src="/images/projects/project-01/cover-01.jpg" alt="Example image" sizes="640px" aspectRatio="16/9" radius="l" />}
    codes={[
      {
        code:
`<Media
    src="/images/projects/project-01/cover-01.jpg"
    sizes="640px"
    alt="Example image"
    aspectRatio="16/9"
    radius="l"
/>`,
        language: "tsx",
        label: "Media"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/Media" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

You can also use it to embed YouTube videos.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    codeHeight={24}
    preview={<Media src="https://www.youtube.com/watch?v=TQT_FSdxbC8" alt="Example video" aspectRatio="16/9" radius="l" />}
    codes={[
      {
        code:
`<Media
    src="https://www.youtube.com/watch?v=TQT_FSdxbC8"
    alt="Example video"
    aspectRatio="16/9"
    radius="l"
/>`,
        language: "tsx",
        label: "Media"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/Media" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Link

SmartLink provides an enhanced way to link to internal and external resources. You can access it with the `SmartLink` component for full customization or with the standard markdown syntax.

<Column fillWidth gap="-1" marginBottom="16" marginTop="8">
<CodeBlock
    radius="none"
    topRadius="l"
    preview={
      <Row  fillWidth horizontal="center">
        <SmartLink href=" " suffixIcon="chevronRight">Link with icon</SmartLink>
      </Row>
    }
    codes={[
      {
        code:
`<SmartLink href=" " suffixIcon="chevronRight">Link with icon</SmartLink>`,
        language: "tsx",
        label: "SmartLink"
      }
    ]}
/>
<Row fillWidth bottomRadius="l" padding="4" border="neutral-medium" background="surface">
    <Button href="https://once-ui.com/docs/smart-link" weight="default" label="View on Once UI" size="s" variant="tertiary" suffixIcon="chevronRight"/>
</Row>
</Column>

## Custom components

Since Magic Portfolio is based on Once UI, you can use all the components provided by Once UI in the `.mdx` files, but you need to import them first in the `src/product/mdx.tsx` file and pass it to the `components` object.

<CodeBlock
    marginBottom="16" marginTop="8"
    highlight="2"
    codes={[
      {
        code:
`const components = {
    // Add new components
    p: createParagraph as any,
    h1: createHeading("h1") as any,
    ...
    Media,
    SmartLink,
};`,
        language: "tsx",
        label: "src/product/mdx.tsx"
      }
    ]}
/>


---
## Blog Post: Updating the content of Magic Portfolio
- **Slug**: content
- **Published**: 2025-04-18
- **Summary**: Personalize the portfolio template with your own content.
- **URL**: https://www.kamy.name.ng/blog/content

### Content
## Avatar

Replace the `public/images/avatar.jpg` file with your own avatar image. It is used on the `/about` page as well as on the dynamically generated `open-graph` images.

## Favicon

Replace the `src/app/favicon.ico` file with your own favicon.

## Content

Replace the content in the `resources/content.js` file with your own content. You can use custom components in most cases, since the props are usually declared as `ReactNode` instead of `string`, but it's important that you need to import them in the file.

<CodeBlock
    marginBottom="16"
    highlight="1-2"
    codes={[
  {
    code:
`import { InlineCode } from "@once-ui-system/core";
import Link from "next/link";

const person = {
  ...
};`,
    language: "tsx",
    label: "src/app/resources/content.js"
  }
]} />

The imports above would let us use `InlineCode` and `Link` components in the content file.

### Personal details

Your personal details are used across the whole app to render personalized headings, labels and images. Languages are displayed on the `/about` page, and location and time in the header.

<CodeBlock
    marginBottom="16"
    highlight="2-3,7-10"
    codes={[
  {
    code:
`const person = {
    firstName: "Selene",
    lastName: "Yu",
    get name() {
      return "...";
    },
    role: "Design Engineer",
    avatar: "/images/avatar.jpg",
    location: "Asia/Jakarta", // Expecting the IANA time zone identifier, e.g., 'Europe/Vienna'
    languages: ["English", "Bahasa"], // optional: Leave the array empty if you don't want to display languages
};`,
    language: "tsx",
    label: "src/app/resources/content.js"
  }
]} />

### Social links

Social links are rendered on the `/about` page and in the footer based on the array configured in the `social` object. You can set custom icons to each, but don't forget to import them in `src/once-ui/icons.ts`. Read the Once UI documentation](https://once-ui.com/docs/icons) for more information.

<CodeBlock
    marginBottom="16"
    codes={[
  {
    code:
`const social = [
    {
      name: "GitHub",
      icon: "github",
      link: "https://github.com/once-ui-system/nextjs-starter",
    },
    {
      name: "Email",
      icon: "email",
      link: "mailto:lorant@once-ui.com",
    },
];`,
    language: "tsx",
    label: "src/app/resources/content.js"
  }
]} />

### Pages

Each page have it's own object that manages the personalized content, such as headings, subheadings, images and dynamic data.

<CodeBlock
    marginBottom="16"
    codes={[
  {
    code:
`const home = {
    label: "Home",
    title: "Selene Yu's Portfolio",
    description: "Portfolio website showcasing my work as a Design Engineer",
    headline: <>Design engineer and builder</>,
    subline: (
      <>
        I'm Selene, a design engineer at <InlineCode>FLY</InlineCode>, where I craft intuitive
        <br /> user experiences. After hours, I build my own projects.
      </>
    ),
};`,
    language: "tsx",
    label: "src/app/resources/content.js"
  }
]} />

The `label` property is used in the header navigation. The `title` property is used for the page title and the `description` property is used for the page description. They are also used in meta- and open graph tags.


---
## Blog Post: Localized version of Magic Portfolio
- **Slug**: localization
- **Published**: 2025-04-15
- **Summary**: Magic Portfolio was localized by François Hernandez.
- **URL**: https://www.kamy.name.ng/blog/localization

### Content
In the latest version of Magic Portfolio, localization is no longer supported. However, the localized version created by [François Hernandez](https://github.com/francoishernandez) is still available as a [separate branch](https://github.com/once-ui-system/magic-portfolio/tree/localization-(Once-UI-0.4.2)). This branch will not receive further updates.


---
## Blog Post: Set up Mailchimp and collect emails
- **Slug**: mailchimp
- **Published**: 2025-04-16
- **Summary**: Set up the Mailchimp newsletter block for your Magic Portfolio.
- **URL**: https://www.kamy.name.ng/blog/mailchimp

### Content
## Mailchimp account

Sign up for a [Mailchimp account](https://mailchimp.com) and create a new list if you don't have one.

## Embed form

Create a new [embed form](https://mailchimp.com/help/add-a-signup-form-to-your-website/) and copy the form URL to your Magic Portfolio config.

<CodeBlock
    highlight="2"
    codes={[
  {
    code:
`const mailchimp = {
    action: 'https://url/subscribe/post?parameters',
    effects: {
      ...
    }
};`, 
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />

## Newsletter content

You can modify the headline and description in the `content.js` file.

<CodeBlock
    highlight="2"
    codes={[
  {
    code:
`const newsletter = {
    display: true,
    title: <>Subscribe to {person.firstName}'s Newsletter</>,
    description: (
      <>
        I occasionally write about design, technology, and share thoughts on the intersection of creativity and engineering.
      </>
    ),
};`, 
    language: "tsx",
    label: "src/app/resources/content.js"
  }
]} />

## Background effect

There's a pre-configured background in `Mailchimp.tsx` that you can modify in the `mailchimp` object. Set graphic elements such as gradient, dots, lines, and grid and configure their appearance for the newsletter block.

<CodeBlock
    codeHeight={24}
    marginBottom="16"
    codes={[
  {
    code:
`const mailchimp = {
    action: 'https://url/subscribe/post?parameters',
    effects: {
      mask: {
        cursor: false,
        x: 50,
        y: 0,
        radius: 100
      },
      gradient: {
        display: true,
        x: 50,
        y: -25,
        width: 100,
        height: 100,
        tilt: 0,
        colorStart: 'accent-background-strong',
        colorEnd: 'static-transparent',
        opacity: 50
      },
      dots: {
        display: true,
        size: 2,
        color: 'brand-on-background-weak',
        opacity: 20
      },
      lines: {
        display: false,
        color: 'neutral-alpha-weak',
        opacity: 100
      },
      grid: {
        display: false,
        color: 'neutral-alpha-weak',
        opacity: 100,
        width: 'var(--static-space-32)',
        height: 'var(--static-space-32)'
      }
  }
}`, 
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />


---
## Blog Post: Enable or disable pages for your portfolio
- **Slug**: pages
- **Published**: 2025-04-22
- **Summary**: Magic Portfolio's RouteGuard component takes care of conditionally rendering pages based on your settings.
- **URL**: https://www.kamy.name.ng/blog/pages

### Content
## Enable or disable pages

Magic Portfolio's `RouteGuard` component takes care of conditionally rendering pages based on the `routes` object in the `resources/config.js` file.

<CodeBlock
    marginBottom="16"
    highlight="6"
    codes={[
  {
    code:
`const routes = {
    '/':        true,
    '/about':   true,
    '/work':    true,
    '/blog':    true,
    '/gallery': false,
};`,
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />

The code above will ensure that the `/gallery` page is not accessible and is not displayed in the navigation.

## Add new pages

When creating a new page, it needs to be added to the `routes` object in the `resources/config.js` file.

<CodeBlock
    marginBottom="16"
    highlight="6"
    codes={[
  {
    code:
`const routes = {
    '/':        true,
    '/about':   true,
    '/work':    true,
    '/blog':    true,
    '/gallery': false,
    '/music': true,
};`,
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />

The code above will ensure that the `/music` page is accessible. Users will be able to navigate to it after adding it to the navigation menu in the `components/Header.tsx` file.


---
## Blog Post: Create password protected pages
- **Slug**: password
- **Published**: 2025-04-17
- **Summary**: Create password protected pages through the RouteGuard component.
- **URL**: https://www.kamy.name.ng/blog/password

### Content
## Add protected pages

To enable password protection for specific pages, add the page paths you want to protect to the `protectedRoutes` object in the `resources/config.js` file.

The `RouteGuard` component will automatically handle access control for these pages, requiring password authentication before allowing access.

<CodeBlock
    marginBottom="16"
    highlight="2"
    codes={[
  {
    code:
`const protectedRoutes = {
  '/work/once-ui': true
};`,
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />

The code above will ensure that the `/work/once-ui` page is only accessible after providing a password. 

## Set a password

The password can be set in the `.env.local` file for local development and as an [environment variable](https://vercel.com/docs/environment-variables) for production.


---
## Blog Post: Quick start with Magic Portfolio
- **Slug**: quick-start
- **Published**: 2025-04-23
- **Summary**: Magic Portfolio is a comprehensive, MDX-based, SEO-friendly, responsive portfolio template built with Once UI and Next.js.
- **URL**: https://www.kamy.name.ng/blog/quick-start

### Content
## About

Magic Portfolio is a comprehensive, MDX-based, SEO-friendly, responsive portfolio template built with Once UI and Next.js.

## License

Magic Portfolio is licensed under the [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/). You can only use it for personal purposes, and you must attribute the original work. The attribution is added in the footer by default, but you can place it in any other, visible part of your site.

Subscribe to the [Once UI Pro plan](https://once-ui.com/pricing) to extend the license to [Dopler CC](https://once-ui.com/products/magic-portfolio).

## Quick start

Clone the git repository:

<CodeBlock compact marginBottom="16" codes={[
  {
    code: "git clone https://github.com/once-ui-system/magic-portfolio.git",
    language: "bash"
  }
]} />

Install the necessary dependencies:

<CodeBlock compact marginBottom="16" codes={[
  {
    code: "npm install",
    language: "bash"
  }
]} />

Start the local development server:

<CodeBlock compact marginBottom="16" codes={[
  {
    code: "npm run dev",
    language: "bash"
  }
]} />


---
## Blog Post: SEO settings for Magic Portfolio
- **Slug**: seo
- **Published**: 2025-04-14
- **Summary**: Manage your Magic Portfolio's SEO settings.
- **URL**: https://www.kamy.name.ng/blog/seo

### Content
## Meta tags

Magic Portfolio automatically generates meta- and open graph tags for your pages based on the `content.js` file.

## Schema

Magic Portfolio automatically generates schema tags for your pages based on the `content.js` file.

## Open Graph image

Social sharing images (open-graph and twitter) are automatically generated with `next/og`.

<Feedback
    icon
    marginBottom="16"
    description={<>
        Make sure you have updated the <InlineCode>content.js</InlineCode> file with your own information and the <InlineCode>baseURL</InlineCode> variable in the <InlineCode>config.js</InlineCode> file.
    </>}
/>

<CodeBlock
    marginBottom="16"
    highlight="4"
    codes={[
      {
        code:
`export async function generateMetadata() {
  const title = home.title;
  const description = home.description;
  const ogImage = \`https://\/api/og/generate?title=\${encodeURIComponent(title)}\`;
   ...
};`,
        language: "tsx",
        label: "src/app/{page}/page.tsx"
      }
    ]}
/>

The above declaration generates the social image with the title of the page. You can use a static image by replacing the `ogImage` value with a path to an image in the `public` directory.


---
## Blog Post: Styling your portfolio
- **Slug**: styling
- **Published**: 2025-04-21
- **Summary**: Magic Portfolio's styling is based on Once UI's customization through data-attributes.
- **URL**: https://www.kamy.name.ng/blog/styling

### Content
## Global style

Magic Portfolio's styling is based on Once UI's customization through data-attributes. You can generate a custom color palette for brand, accent and neutral colors on [Once UI](https://once-ui.com/customize) where you'll find instructions on how to apply it.

<CodeBlock
    marginBottom="16"
    codes={[
  {
    code:
`theme:       'dark',         // dark | light
neutral:     'gray',         // sand | gray | slate
brand:       'blue',         // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
accent:      'indigo',       // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
solid:       'contrast',     // color | contrast
solidStyle:  'flat',         // flat | plastic
border:      'playful',      // rounded | playful | conservative
surface:     'translucent',  // filled | translucent
transition:  'all',          // all | micro | macro
scaling:     '100',          // 90 | 95 | 100 | 105 | 110`, 
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />

## Background effect

There's a pre-configured background in `layout.tsx` that you can modify in the config file. Set graphic elements such as gradient, dots, lines, and grid and configure their appearance.

<CodeBlock
    codeHeight={24}
    marginBottom="16"
    codes={[
  {
    code:
`const effects = {
    mask: {
      cursor: false,
      x: 50,
      y: 0,
      radius: 100
    },
    gradient: {
      display: true,
      x: 50,
      y: -25,
      width: 100,
      height: 100,
      tilt: 0,
      colorStart: 'accent-background-strong',
      colorEnd: 'static-transparent',
      opacity: 50
    },
    dots: {
      display: true,
      size: 2,
      color: 'brand-on-background-weak',
      opacity: 20
    },
    lines: {
      display: false,
      color: 'neutral-alpha-weak',
      opacity: 100
    },
    grid: {
      display: false,
      color: 'neutral-alpha-weak',
      opacity: 100,
      width: 'var(--static-space-32)',
      height: 'var(--static-space-32)'
    }
}`, 
    language: "tsx",
    label: "src/app/resources/config.js"
  }
]} />


---
## Blog Post: Create,edit and delete projects
- **Slug**: work
- **Published**: 2025-04-19
- **Summary**: Create, edit and delete projects in the work section of your Magic Portfolio.
- **URL**: https://www.kamy.name.ng/blog/work

### Content
## Manage projects

You can create, edit and delete projects by adding, modifying or removing `*.mdx` files in the `src/app/work/projects` directory.

## Frontmatter

The frontmatter is used to set the project's metadata: title, description, image, and tags. It's used in the project's page and in meta- and open graph tags.

<CodeBlock
    marginBottom="16"
    codes={[
      {
        code:
`---
title: "Developing a design system for indie creators"
publishedAt: "2025-03-17"
summary: "Once UI is a design system that empowers indie creators, small teams, and startups to build web applications."
images:
  - "/images/projects/project-01/cover-02.jpg"
  - "/images/projects/project-01/image-03.jpg"
team:
  - name: "Lorant One"
    role: "Software Engineer"
    avatar: "/images/avatar.jpg"
    linkedIn: "https://www.linkedin.com/company/once-ui/"
link: "https://once-ui.com/"
---`,
        language: "tsx",
        label: "src/app/work/projects/project-1.mdx"
      }
    ]}
/>

## MDX syntax

You can use MDX to write the content of your projects. It helps you write rich and dynamic content with minimal code. Some MDX elements will be automatically transformed to Once UI components to integrate better in the design and add additional functionality.

## Custom components

You can use custom components in MDX files, but you need to import them first in the `src/components/mdx.tsx` file.

<CodeBlock
    marginBottom="16"
    highlight="11-12"
    codes={[
      {
        code:
`const components = {
    p: createParagraph as any,
    h1: createHeading(1) as any,
    h2: createHeading(2) as any,
    h3: createHeading(3) as any,
    h4: createHeading(4) as any,
    h5: createHeading(5) as any,
    h6: createHeading(6) as any,
    img: createImage as any,
    a: CustomLink as any,
    Table,
    CodeBlock,
};`,
        language: "tsx",
        label: "src/components/mdx.tsx"
      }
    ]}
/>

As you can see, the `Table` and `CodeBlock` components are already imported and available for use. You can add more by simply importing them to this file and passing them to the `components` object.

## Hot reload

Hot reload of MDX files is currently not supported, but we're working on it.


## Connect & Social Links
- GitHub: https://github.com/kamyCodes
- LinkedIn: https://www.linkedin.com/in/kamyomobong-ewang-4a29822b7
- WhatsApp: https://wa.me/2348076730654
- Email: mailto:kamy.ngn@gmail.com