A minimalist, hand-crafted Jekyll-based portfolio exploring technology, ethics, philosophy, and digital resilience with glass morphism UI.

🌐 Live: arehman-dev.github.io

• Glass Morphism Design — Smooth blur effects, dark/light theme
• No Build Tools — Pure HTML, CSS, JavaScript + Jekyll
• Privacy-First — No tracking, only Google Fonts & Lucide Icons
• Keyboard Shortcuts — h (home), p (perspective), a (about)
• SEO Optimized — Meta tags, OG, RSS feed, XML sitemap
• Responsive — Mobile-friendly grid layouts
• Stagger Animations — Cards cascade on scroll
• Copy & Print — One-click link sharing + PDF export
• Shared Design System — Coordinated color palette with portfolio

🎨 Color Documentation: See COLOR_PALETTE.md for complete color system (hex codes, gradients, usage guidelines)

Ruby 3.2+, Bundler

bundle install
bundle exec jekyll serve
# → http://localhost:4000

git push origin main
# GitHub Pages auto-deploys in 30-60 seconds

_layouts/default.html       # Master template
_posts/                     # Blog posts (auto-collected)
perspective/                # Essays collection
poetry/                     # Poetry collection
tasweer-kahani/             # Photo gallery
assets/css/style.css        # All styling
_config.yml                 # Jekyll config

Create _posts/YYYY-MM-DD-title.md:

---
layout: default
title: "Title"
category: perspective
tags: [tag1, tag2]
---
Content...

Create perspective/title.md or poetry/title.md:

---
layout: default
title: "Title"
---
Content...

Upload to tasweer-kahani/ (images auto-appear on page via _data/gallery.yml)

To add a new image:

1. Upload file to tasweer-kahani/[theme-folder]/image.jpeg
2. Add entry to _data/gallery.yml:

   galleries:
     [theme-name]:
       images:
         - path: "/tasweer-kahani/[theme-folder]/image.jpeg"
           alt: "Image description"

3. Rebuild site

See DEVELOPMENT.md for:

• Complete code logic & workflows
• Theme system details
• Image gallery system (lightbox + metadata)
• Advanced customization

Colors:

• Light: #f8fbff bg, #071e61 text, #01ac6a accent
• Dark: #030b1c bg, #f0f9f4 text, #00ff9d accent

Fonts:

• Headings: Playfair Display (serif)
• Body: Lora (serif)
• UI: Inter (sans)
• Urdu: Noto Nastaliq

Components: Glass morphism cards, sticky nav, sidebar, photo grid

• Generator: Jekyll 4.4
• Hosting: GitHub Pages
• CSS: Custom, no frameworks
• JS: Vanilla (Intersection Observer, localStorage, modals)
• CDN: Google Fonts, Lucide Icons

• DEVELOPMENT.md — Full guide (code logic, workflows, gallery proposal)
• _config.yml — Customize site settings
• Assets/css/style.css — Theming & components

Uses CSS variables for instant light/dark switching:

:root { --text-main: #071e61; /* Light */ }
.dark { --text-main: #f0f9f4; /* Dark */ }

background: var(--glass-bg);
backdrop-filter: blur(16px);
border-radius: 20px;

Applies to: Top bar, dropdown, cards, buttons

Interactive modal-based photo gallery on tasweer-kahani page with complete keyboard navigation.

Data File (_data/gallery.yml):

galleries:
  blues-and-purple:
    title: "Blues & Purple"
    description: "Urban geometry & architecture"
    images:
      - path: "/tasweer-kahani/theme-blues-and-purple/img-01.jpeg"
        alt: "Image description"

Template (tasweer-kahani/index.md): Liquid loops render images from YAML — click to open modal.

1. Upload to tasweer-kahani/[theme-folder]/image.jpeg
2. Add to _data/gallery.yml (3 lines)
3. Done! Site auto-renders

See DEVELOPMENT.md for technical details

• DEVELOPMENT.md — Complete code documentation
• Jekyll Docs
• GitHub Pages
• CSS Variables Guide

Last Updated: April 5, 2026
Version: 2.0+