Documentation & guide

This page explains every link on the hub, how the site is built, and how to change or deploy it.

The links explained

Facebook

The official Facebook page. Follow it for announcements, posts and community updates. facebook.com

WhatsApp Channel

A one-way broadcast channel. Admins post updates and you receive them without exposing your number to others. whatsapp.com/channel

WhatsApp Group

A two-way chat group where members talk, ask questions and share. chat.whatsapp.com

Telegram Group 1

The “Home of All 254” community on Telegram, an open discussion group. t.me/homeofall254

Telegram Group B

The official Decan Konnect Telegram group for support, tools and project news. t.me/decankonnect

My Website

The main Decan Konnect site: services, blog and projects. decankonnect.co.ke

Decan Football

Football fixtures, scores and live streaming. football.decankonnect.co.ke

Coding Class

TechsWebDevs, the Decan Konnect coding school for learning web development. techswebdevs.decankonnect.co.ke

Add or edit a button

Open index.html, copy one <a class="card"> block and change four things: the --accent colour, the href, the title and the description. The icon is an inline SVG path, so no icon library is needed.

<a class="card" style="--accent:#a78bfa"
   href="https://example.com" target="_blank" rel="noopener noreferrer">
  <span class="ico"><svg viewBox="0 0 24 24"><path d="..."/></svg></span>
  <span class="txt"><h2>Title</h2><p>Description</p></span>
</a>

Colours live in :root at the top of assets/style.css (--v, --b, --c, --p).

SEO checklist

Unique <title> and meta description on every page.
Canonical URLs, Open Graph and Twitter cards for rich link previews.
JSON-LD structured data (WebSite, Organization with sameAs links).
robots.txt and sitemap.xml included.
Replace links.decankonnect.co.ke with your real domain in index.html, docs/index.html, robots.txt and sitemap.xml.
Add a 1200x630 og-image.png in the project root for social previews.
Submit the sitemap in Google Search Console.

Animations

Aurora blobs: large blurred gradient shapes drifting in CSS.
Moving grid: a masked grid that slowly scrolls.
Particle network: canvas particles that connect and flee from your cursor or finger.
Cards: scroll reveal, cursor spotlight glow, 3D tilt, click ripple and hover lift.
Page transitions: moving between the home page and docs uses the browser's native View Transitions (Chrome, Edge, Safari 18.2+) with the background and header staying put. Other browsers get a smooth fade-out fallback.
Extras: staggered intro, scroll progress bar, parallax hero, magnetic buttons.
Everything is disabled automatically for visitors with reduced motion turned on, and the canvas pauses when the tab is hidden to save battery.

Deploy on Vercel

Push the folder to a GitHub repository (or run vercel inside it).
Import the repo in Vercel. Framework preset: Other. No build command, output directory is the root.
Add a custom domain such as links.decankonnect.co.ke under Project Settings, Domains.
vercel.json already enables clean URLs (so /docs works), security headers, a Content-Security-Policy and sensible caching.
In your DNS add a CNAME record: name links, value cname.vercel-dns.com.
After changing CSS or JS, visitors pick up the new version within an hour (assets are cached for 1 hour).

Project structure

decan-links/
  index.html
  docs/index.html
  404.html
  favicon.svg
  icon-192.png, icon-512.png, apple-touch-icon.png
  og-image.png
  manifest.webmanifest
  robots.txt
  sitemap.xml
  vercel.json
  README.md
  assets/style.css
  assets/app.js

Back to links