DEV Community: Fatihat Akinwunmi

Building the Footer for Ekehi: My Frontend Contribution to an Open-Source Resource Platform

Fatihat Akinwunmi — Fri, 06 Mar 2026 21:44:01 +0000

Introduction
Ekehi is a searchable and continuously updated business resource centre designed to support women entrepreneurs across Africa.
The goal of the MVP is to provide a lightweight, fast-loading system where users can search and filter funding opportunities, discover business resources, and bookmark relevant programs.

As part of the frontend development team, my role involved implementing the landing page footer using Vanilla HTML based on the project design and technical requirements.

This article documents the setup phase, my contribution to the project, and the lessons learned while collaborating on the Ekehi MVP for the first sprint.

Project Architecture Overview

The system follows a simple but scalable architecture consisting of four major components:

Frontend (Presentation Layer)
The user interface is built using Vanilla HTML, CSS, and JavaScript. The frontend is responsible for displaying funding opportunities, handling search interactions, and communicating with the backend API. The application is hosted on Netlify to provide fast global content delivery and automatic deployment.

Backend API (Application Logic)
The backend is built with Node.js and Express.js. It acts as the middle layer between the frontend and the database. This ensures that sensitive operations such as authentication and data updates are handled securely. The backend also manages integrations with email services such as Resend or Mailgun.

Database and Authentication Layer
The project uses Supabase (PostgreSQL) as the database. Supabase provides built-in authentication, allowing users to register, log in, and manage their accounts securely. PostgreSQL full-text search capabilities enable fast querying of funding opportunities and resources.

Admin CMS
An Admin CMS powered by Directus allows the team to manage and update resources directly within the database without modifying application code. This enables continuous updates and ensures that information remains current.

SETUP PHASE
To start contributing to the project, contributors follow a structured Git workflow to ensure smooth collaboration.

First, I forked the repository and cloned their fork locally.

git clone https://github.com/YOUR_USERNAME/ekehi.git
cd ekehi

Next, the upstream repository is added so updates from the main project can be synchronized.

git remote add upstream https://github.com/Tabi-Project/Ekehi.git

The project uses a branching strategy with the following core branches:

main – production-ready code
dev – integration branch for active development
feature/ – new features
fix/ – bug fixes
docs/ – documentation updates
All development work begins from the dev branch.

git checkout dev
git pull upstream dev
git checkout -b feature/landing-page-footer

This workflow ensures that all changes are isolated, reviewable, and integrated through pull requests.

My Role and Contribution

My primary contribution to the project was implementing the Landing Page Footer for the Ekehi website using semantic HTML and responsive layout principles.
The footer acts as a key navigation area of the platform and contains the Ekehi brand identity, grouped navigation links, and project information.

Brand Section
The first part of the footer displays the Ekehi logo, wordmark, and tagline describing the purpose of the platform.
Example implementation:

<div class="footer-brand">
  <img src="../assets/icons/ekehi-logo.png" alt="Ekehi Logo">

  <h1>ekehi</h1>

  <p>
    A searchable, continuously updated business resource centre built for
    women entrepreneurs across Africa.
  </p>
</div>

This section visually communicates the platform’s identity while also providing a clear description of the service offered.

Navigation Link Groups
The footer contains three structured navigation groups: Explore, For Partners, and About.
Each group was implemented using semantic headings and lists for accessibility and proper document structure.
Example implementation:

<div class="footer-group">
  <h4>EXPLORE</h4>
  <ul>
    <li><a href="#">Browse funding</a></li>
    <li><a href="#">Training programmes</a></li>
    <li><a href="#">Mentorship</a></li>
    <li><a href="#">Resources</a></li>
  </ul>
</div>

Using <h4> headings instead of plain text helps maintain semantic structure and improves accessibility for screen readers.
Footer Bottom Bar
The final section of the footer contains copyright information, an open-source contribution notice, and legal navigation links.
Example implementation:

<section class="footer-bottom">
  <p>© 2026 Tabi Project (TEE Foundation)</p>

  <p>Open Source & Open for Contributions</p>

  <div class="footer-legal">
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
    <a href="#">Policy</a>
    <a href="#">Accessibility</a>
  </div>
</section>

This bottom bar ensures that important project information and legal links remain visible across all pages.

Lessons Learned
Working on the Ekehi project provided valuable insights into collaborative software development.

One of the most important lessons for me was understanding the importance of structured Git workflows. Using feature branches and pull requests helped to prevent conflicts and ensured that code is properly reviewed before merging.

Another key takeaway was the importance of semantic HTML and accessibility. I made sure to use meaningful HTML elements to improve both readability and usability.

I also learned how clear technical documentation improves team coordination. By defining architecture, branching rules, and coding standards early in the project, I was able to understand the project quickly and work more efficiently without confusion.
Finally, working in an open-source style environment reinforced the importance of writing clean, readable code that other developers can easily understand and extend.

Conclusion
The Ekehi MVP aims to simplify access to funding opportunities and business resources for women entrepreneurs across Africa. By combining a lightweight frontend, scalable backend, and structured collaboration workflow, the project establishes a solid technical foundation for future growth.

Contributing to this project provides hands-on experience with collaborative development, semantic frontend implementation, and structured project workflows.

Contributors
Special thanks to my fellow contributors for their collaboration on the Ekehi MVP:
@aj1732

I built a website for people that are out of love...

Fatihat Akinwunmi — Sat, 21 Feb 2026 10:40:32 +0000

Project Name
Kindling

A quiet digital space for people who feel unseen to feel acknowledged through anonymous human resonance.

Problem Statement

Many social and love-focused platforms reward visibility, romance, and performance. People who are single, emotionally overlooked, or who quietly give more than they receive rarely get a space to express small, genuine feelings without pressure. They are left with “motivation” posts or noisy anonymous apps that lack structure and safety.

Kindling addresses a different problem:

How can someone feel seen without being exposed?

The project solves that problem by providing an intentionally anonymous environment where simple signals of resonance (not likes or clout) produce brief, guided human contact and tiny proof points that someone noticed you without profile-building, comparison, or social pressure.

Target Audience

People who often feel unseen or unappreciated.
Individuals not looking for dating or romance but for quiet recognition.
Students, early-career adults, and anyone in transitional phases who need small, nonjudgmental validation.
Users who prefer anonymity and low-pressure interactions over profiles and followers.
Users seeking emotional validation rather than romantic engagement
Those overwhelmed by traditional social media metrics

Solution Design
I designed Kindling around three human needs: to be noticed, to be safe, and to feel useful. The product flow intentionally keeps interactions short and intentional so users don’t trade one form of loneliness for another.

-Post (minimal friction) — A single textarea prompt (or daily prompt) lets a user post one honest thought. No usernames, no photos, no profile. This lowers the activation energy to share.

-Resonate (no free-text replies) — Other users respond using guided reactions (e.g., “Seen”, “Held”, “You’re brave”) rather than open comments. This prevents performative replies and reduces toxicity.

-Mutual resonance → Spark — If two users react to each other’s posts, the system opens a limited Spark: a timed, anonymous interaction (10 minutes) or a shared micro-activity (pick a song, answer a single prompt). Sparks are ephemeral to discourage dependence and encourage presence.

-Reflection & evidence — After a Spark, the app shows small evidence: “3 people resonated with your post,” and a gentle follow-up prompt the next day to encourage reframing (“What did they see?”). This converts brief attention into cognitive evidence that the user affects others.

-Love Garden & Insights — Each post/reaction increments a shared garden and summary stats (private and non-competitive) so users see collective patterns like “Most-shared feeling today: wanting to be noticed.”

This flow turns raw expression into a repeatable loop: Share → Resonate → Spark → Reflect → Repeat. The UI nudges users from invisibility to recognition without forcing emotional labor.
Users seeking emotional validation rather than romantic engagement

HTML & SEO: Semantic Structure and Accessibility
Semantic HTML Structure
Kindling was structured using semantic HTML5 elements to ensure clarity, accessibility, and search engine readability. Instead of relying solely on

containers, I used structural tags that define purpose and hierarchy.

Navigation ()
Each page begins with a element containing:

A logo (SVG icon + text)
Primary navigation links
Clear anchor links for internal sections Using signals to screen readers and search engines that this is primary site navigation. This improves usability for assistive technologies and supports crawl clarity.

Main Content ()
On the landing page, I wrapped the primary hero section inside :

The tag:

Identifies the central content of the document
Helps screen readers skip repetitive navigation
Improves semantic clarity for search engines
Only one is used per page to follow accessibility standards.

Sectioning ()
The site is divided into thematic sections using :

#features
#share
#garden
#faq

Each section contains its own heading (<h2>) to establish a clear content hierarchy.
Example:

<section id="features">
  <h2>Human resonance, 4 steps away.</h2>
</section>

This creates a logical document outline:
<h1> — Core emotional thesis
<h2> — Major sections
<h3> — Feature descriptions
<h4>— FAQ questions

This structured heading system improves:

SEO ranking clarity
Content scannability
Screen reader navigation

Content Blocks ( opportunity)
Although the current implementation uses structured containers for posts and flower cards, these components conceptually represent independent content blocks. In a future iteration, these could be improved using:

This would enhance semantic meaning because each post or bloom functions as standalone content.

Accessibility Considerations

Clear Heading Hierarchy
There is only one <h1> per page, ensuring a clean document outline. Subsections cascade logically using <h2>,<h3>, and <h4>.
Descriptive Button Text
Buttons such as:

“Share anonymously”

“See the Love Garden”

“Resonated ❤️”
Avoid vague labels like > “Click here,” making interactions understandable without visual context.

SVG Logo Accessibility The logo icon is inline SVG, ensuring:

Scalability
No image distortion
Decorative consistency

In a full accessibility enhancement, an aria-label could be added to describe the logo for screen readers.

Form Input Simplicity The chat page uses a single input field with a clear prompt. The minimal interface reduces cognitive overload and supports ease of interaction.

In future versions, the input would include:
<label for="postInput">Share your thought</label>

To further enhance screen reader compatibility.

SEO Strategy
Although Kindling is conceptually an anonymous platform, the landing page is optimized for discoverability.

Keyword-Relevant Title <title>Kindling - A Space to be Seen</title> This includes emotionally relevant keywords such as:

“Space”
“Seen”
“Anonymous”

Clear Content Themes Search engines can easily identify:

Emotional validation focus
Anonymous posting model
Non-dating positioning (clarified in FAQ) The FAQ section improves SEO by answering natural user queries such as:

“Is this a dating app?”
“Is it really anonymous?”
This supports long-tail keyword matching.

Clean URL Structure The site uses:

index.html
chat.html
garden.html This keeps routing simple and crawlable.

Anchor Navigation Internal links like: <a href="#features">

Improve crawl flow and allow search engines to understand page segmentation.
Structural Consistency Across Pages
All pages maintain:
<nav>
Primary content sections
<footer>
This structural consistency:

Reinforces predictable navigation
Improves usability
Strengthens crawl architecture By organizing content into meaningful structural elements rather than generic containers, the platform supports both human users and search engine crawlers, aligning technical implementation with the product’s mission of clarity and simplicity.

CSS Architecture
Design System Using CSS Variables
The foundation of the CSS architecture is built on a centralized design system using :root variables. This ensures consistency, scalability, and easier future modification without refactoring the entire stylesheet.
1.1 Color System
:root { --pink-sorbet: #F4978E; --soft-sand: #F8EDEB; --dusty-rose: #DAADAF; --charcoal: #2D2D2D; --white: #ffffff; --text-main: #4A4A4A; --text-muted: #8E8E8E; }

The color system is structured around emotional warmth and softness to match Kindling’s theme of vulnerability and human connection.
--pink-sorbet functions as the primary brand accent (buttons, highlights, active states).
--soft-sand acts as the base background color.
--dusty-rose is used for subtle emphasis and gradients.
--charcoal and --text-main maintain readability and contrast.
This separation allows for:
Easy theme switching
Centralized brand control
Reduced repetition of hex values

1.2 Spacing System (Tokenized Scale)

--space-0: 0.25rem;
--space-1: 0.5rem;
--space-2: 0.75rem;
--space-3: 1rem;
--space-4: 1.2rem;
--space-6: 2.5rem;
--space-7: 3rem;
--space-8: 4rem;

Instead of arbitrary margins and paddings, spacing follows a consistent scale. This improves:
Visual rhythm
Layout harmony
Predictability across components
Every section (#features, #share, #garden) uses these spacing tokens, ensuring uniform vertical rhythm throughout the interface.

1.3 Component Tokens
Reusable sizing tokens were introduced for layout predictability:

--container-bg: 35rem;
--border-radius: 1rem;
--border-radius-btn: 50px;
--width-sm: 25rem;
--width-md: 30rem;
--width-lg: 40rem;

This ensures:
Uniform border radii across cards and containers
Consistent container widths
Scalable button styling
For example, all rounded UI components derive from --border-radius, reinforcing visual cohesion.

1.4 Motion System
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

A unified transition curve is used across buttons, cards, hover states, and animations. This creates:

Consistent motion feel
Smooth micro-interactions
A soft, human-centered interface aesthetic

Layout Architecture: Flexbox & Grid
The layout system uses both Flexbox and CSS Grid strategically depending on structural complexity.

2.1 Flexbox for Directional Alignment
Flexbox was used where linear alignment was required.
Navigation Bar

.glass-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexbox allows:

Horizontal distribution of logo and navigation links
Vertical centering
Responsive stacking in smaller viewports

CTA Group

.cta-group {
  display: flex;
  gap: 1.25rem;
}

This creates:

Even spacing between buttons
Easy column stacking under media queries
Clean horizontal alignment without manual margins

Garden Header Layout

.garden-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

This aligns:

Section title
Filter pills
Ensures responsive flexibility without fixed positioning

2.2 Grid for Complex Content Layouts
CSS Grid was used for multidimensional layouts where rows and columns dynamically respond to content size.
Features Section

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1.5fr));
  gap: 2rem;
}

This enables:

Automatic wrapping
Responsive column scaling
Balanced spacing across screen sizes

Instead of manually defining breakpoints for each column, auto-fit + minmax() allows the browser to dynamically determine layout distribution.

Garden Posts Layout (Complex Component)
The flowers grid represents the most complex layout.

.flowers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Why this is significant:

auto-fill allows dynamic card insertion without layout breaking.
minmax(200px, 1fr) ensures minimum readability width.
Cards scale fluidly across desktop and tablet.
No hard-coded column count. This is crucial because the Love Garden is dynamic — posts grow over time.

Challenging Component Example: Flower Card System
One of the most technically layered components is the .flower-card.
It combines:

Grid placement
Hover scaling
Staggered animation delays
Nested flex layouts

State-based styling (e.g., .blooming, .your-post)
Code Snippet


.flower-card {
  background: var(--soft-sand);
  border-radius: 20px;
  padding: 24px 20px;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  border: 1px solid rgba(218,173,175,0.15);
  animation: bloomIn 0.6s ease both;
}

.flower-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(244,151,142,0.12);
}

Why It’s Challenging

It integrates animation (bloomIn) with layout rendering.
It maintains performance while animating multiple elements.
It includes visual state indicators like .spark-badge.
It supports special variants such as:
.blooming
.your-post
It uses nested flex containers inside grid containers.
This layered structure ensures:
Modularity
Reusability
Scalability for dynamic backend integration

3.Responsive Strategy
Media queries are minimal but strategic:

@media (max-width: 768px) {
  .nav-links { display: none; }
  .cta-group { flex-direction: column; }
}

Rather than rebuilding layouts entirely, responsiveness relies on:

Grid auto-fit behavior
Flex direction switching
Relative sizing (rem, clamp()) This reduces CSS complexity while preserving adaptability.

Reflection
The hardest part of building Kindling was designing the Love Garden in a way that genuinely conveyed the emotional intention behind it. Conceptually, the garden represents growth, visibility, and quiet affirmation — each anonymous post becoming something that “blooms.”

However, translating that emotional idea into CSS was challenging.

CSS can control layout, color, spacing, animation, and interaction — but it cannot directly control how something feels. I wanted the Love Garden to feel:

Soft but not childish
Warm but not overwhelming
Alive but not chaotic
Comforting without looking like a dating app
Balancing those visual cues required repeated experimentation with:
Grid layouts (auto-fill vs auto-fit)
Hover animations and motion timing
Color transparency and gradients
Border radius and shadow depth
Animation delays for staggered “bloom” effects

One of the biggest challenges was avoiding visual clutter. Because posts grow over time, the grid could easily feel crowded. Achieving emotional softness while maintaining structural clarity required careful spacing and subtle motion design.
In short, the most difficult part was not technical complexity — it was emotional translation through CSS.

What I Would Do Differently in Version 2.0

More Organic Motion In Version 2.0, I would refine the bloom animations to feel more natural. Instead of simple fade-and-scale effects, I would experiment with:

Slight vertical floating animations
Subtle rotation shifts
Staggered opacity transitions
Micro-interactions when hovering over “spark” counts This would make the garden feel more alive, rather than simply arranged in a grid.

Dynamic Growth Visualization Currently, the Love Garden uses a card-based grid. In Version 2.0, I would explore:

Variable card sizes based on resonance count
Color intensity changes based on engagement
A gradual “growth” animation when a post receives a spark This would visually reinforce the metaphor: appreciation leads to visible growth.

Deeper Emotional Feedback At the moment, interaction feedback is visual (hover, scale, spark badges). In the next iteration, I would add:

Gentle micro-copy after a user resonates (e.g., “You helped this bloom.”)
Soft transition overlays when a post reaches a milestone
Small animation feedback on the user’s own post to show impact This strengthens the feeling of being seen — which is the core purpose of Kindling.

Accessibility Enhancements In Version 2.0, I would improve:

ARIA states for resonance buttons
Keyboard navigation support for flower cards
Higher contrast mode toggle
Reduced motion option for users sensitive to animations This would ensure the emotional experience is inclusive.

Visual Depth Through Layering To enhance atmosphere, I would experiment with:

Layered background gradients
Parallax scrolling effects
Subtle light blur transitions
Ambient motion in the garden canvas background These would create a stronger sense of immersion without overwhelming the user.

Final Reflection
The Love Garden taught me that designing for emotion is significantly more complex than designing for function. It required balancing aesthetics, performance, clarity, and symbolism.
The difficulty was not just making something look good — it was ensuring that the design supports the platform’s purpose: helping people who feel overlooked experience visibility and quiet affirmation.
If rebuilt as Version 2.0, I would focus on deepening emotional interaction through motion, dynamic scaling, and more meaningful feedback systems — while maintaining the simplicity that makes the space feel safe.

Github Link :

Pheonixai / Kindling-Love-Project

KINDLING - A SPACE TO BE SEEN

Project Overview

In a digital landscape often dominated by high-decibel social interaction and performance metrics, Kindling serves as a sanctuary for the quiet. I designed this platform to facilitate anonymous, peaceful connection where the value is placed on being heard rather than being "liked." It is a dedicated space for simple human acknowledgement, allowing users to feel a little less alone in their thoughts.

Name : Akinwunmi Fatihat (Solo Member) Team : Team G

Live Deployment

Vercel URL https://kindling-love-project.vercel.app/

Project Documentation

Case Study

Document - https://docs.google.com/document/d/1jRVR9ycD1vFRID3hNQyJAocZVh3TF1Nmh6fa8tuft1Q/edit?usp=sharing

Blog Link - https://dev.to/fatihat_akinwunmi_bde40f0/i-built-a-website-for-people-that-are-out-of-love-20f4

Presentation Link - https://gxunjlst.gensparkspace.com/

Design Document - https://docs.google.com/document/d/1FKs8DCOKQXL7vzuxrV18N3Ext8lRB8awrJnaAzFj6Bg/edit?usp=sharing

Brainstorm & Case Study

Project Name: Kindling

Problem Statement: Addressing the digital invisibility and social noise that often alienates introverted individuals or those seeking quiet support.

Target Audience: Introverts, individuals seeking anonymous emotional refuge, and those desiring brief, authentic human connections.

Core Features:

Anonymous "Seed"…

View on GitHub

Live Link :

kindling-love-project.vercel.app