LyePro
·lyepro.pages.dev·v1.3.0·
← back

v1.3.0 — The Big Redesign

LyeProLyePro·2026-07-26
v1.3.0 — The Big Redesign

This is the biggest update the site has seen since launch. Everything from the header down to individual card corners got reworked. Here’s the full breakdown.

Header & Navigation

The old flat nav bar with “LyePro | The Jack of All Trades” and the copyright footer row is gone. Replaced with a two-row header:

  • Row 1 — Brand name, pulsing emerald status dot, site URL, and version number
  • Row 2 — Centered navigation tabs with a sliding pill indicator that glides between tabs on click

The nav now uses Nunito Regular 400 loaded from Google Fonts. The sliding indicator uses getBoundingClientRect() to calculate exact position and width, transitioning with duration-300 ease-out.

SPA Navigation

The biggest under-the-hood change: zero page reloads. Clicking a tab now:

  1. Fetches the target page HTML via fetch()
  2. Parses it with DOMParser
  3. Swaps the <main> content
  4. Updates the URL with history.pushState()

After the swap, a spa:navigate CustomEvent fires so page-specific scripts can re-initialize. This means switching between Home, About, Projects, Connect, and GForms is instant — no flash, no reload.

Tab Renames

All tabs got cleaner, shorter names:

Before After
Abode Home
Graphy About
Opus Projects
Chains Connect
SHAPE GForms

Home Page

Profile Section

The profile area got a major visual upgrade:

  • Video background — bg.mp4 plays behind the profile with mix-blend-screen at 10% opacity, fading out with a gradient overlay
  • Bigger name — “LyePro” in text-base sm:text-lg with “aka DClyde” subtitle
  • Icon buttons — GitHub and email icons in rounded-lg containers with hover effects

Stats Section

Numbers are bigger and have more breathing room:

  • text-xl sm:text-2xl (was text-base sm:text-lg)
  • py-4 min-h-[72px] (was py-3 min-h-[60px])
  • Labels remain text-[8px] sm:text-[9px] with tracking-widest

Pinned Projects

  • Cards now use rounded-xl (was rounded)
  • Gradient overlay added to thumbnails (from-black/40 to-transparent)
  • Titles bumped to text-[11px] sm:text-xs
  • More spacing between elements

Blogs Section

Same treatment as projects — rounded-xl cards, bigger titles, more spacing between items.

Contact Section (New)

Replaced the old Web3Forms integration with direct contact options:

The 13-slide advertisement carousel has been completely removed. The site doesn’t need it.

Ink Link-in-Bio Page

Brand new standalone page at /ink. This is a completely separate page — own <html>, no Layout wrapper, Inter font, white #fafafa background.

Design

  • Hero — Avatar with green status dot, bold “LyePro” (2rem / weight 900), tagline
  • Skill chips — 5 black pills: AI Solutions, Python, JavaScript, Automation, LLMs
  • Bento grid — 2-column card layout with icons, labels, and subtitles. GitHub spans full width
  • Light theme — White cards on off-white background, subtle borders, no dark mode
  • Staggered animations — Each section fades in sequentially with increasing delays

Tailwind Preflight Fix

The biggest CSS headache: @tailwindcss/vite injects Tailwind’s preflight/reset globally, which overrides styles on <a> tags, <span>, etc. — even inline styles sometimes. The solution: every single style on the Ink page is inline. No CSS classes at all. The only <style> block contains @keyframes and minimal a:hover/a:active states.

The page is also marked noindex nofollow since it’s not meant for search engines.

GForms Tab

The old Web3Forms iframe embed has been replaced with a static message and a “Fill out the form” button that redirects to the Google Form. Cleaner, no iframe baggage.

Connect Page

Added a “Copy Ink Link” button inside the Socials section that copies lyepro.pages.dev/ink to the clipboard using navigator.clipboard. All cards upgraded to rounded-xl.

Under the Hood

About Page README Loading

The initPageContent function got a complete rewrite:

  • Removed marked dependency — The GitHub README is already HTML-heavy (tables, images, badges). The htmlTagRatio check routes it as raw HTML passthrough, so marked.parse() was never actually called. Removing it eliminates a potential failure point.
  • No more async wrapper — The function is now a plain sync function that kicks off two independent fetch chains (profile + readme). Previously, if the await import('marked') at the top failed, the entire function crashed and neither profile nor readme rendered.
  • Independent error handling — Profile and readme each have their own .then()/.catch() chains. One failing can’t block the other.

Brand Consistency

“LyeDev” → “LyePro” across all files. The GitHub username LyeDevGit stays as-is (that’s the actual account).

This was a lot of changes in one session. The site feels significantly more polished now — the SPA navigation alone makes it feel like a real app instead of a static site. More updates coming soon.

— LyePro