Technical Details

Overview

This website is powered by Jekyll, a static site generator that transforms structured data and content into a fast, lightweight, and secure static website.
A key feature of this site is the automatic generation of sections and pages from YAML-based schemas, ensuring consistency, scalability, and easy updates without manual HTML editing.

Build & Deployment

Benefits of This Approach

• Automation: Sections and pages update instantly when schemas change.
• Performance: Static HTML loads fast without server-side processing.
• Security: No backend code execution.
• Consistency: Centralized schemas avoid repetition.
• Scalability: Easy to add new projects, skills, or links without touching HTML.

Libraries

• Bootstrap – Responsive grid system and UI components
• AOS (Animate On Scroll) – Scroll-triggered animations
• Font Awesome (FA) – Icon set for UI and branding
• Devicons – Icons for programming languages and tools
• Fuse.js – Client-side fuzzy search
• Mermaid - Flowcharts

Auto-Generated Content

A major strength of this site is its reliance on YAML-based schemas to drive content generation.
These schemas are processed by Liquid templates to produce HTML automatically.

1. Social Links (_data/socials.yml)

Schema:

- name: <title>
  icon: <css class>
  url: <url to profile>

Example:

- name: GitHub
  icon: fa-lg fab fa-github
  url: https://github.com/USERNAME

- name: LinkedIn
  icon: fa-lg fab fa-linkedin-in
  url: https://www.linkedin.com/in/USERNAME

Usage:
Populates footer social icons dynamically, creating an icon for each social.

2. Skills (_data/skills.yml)

Schema:

- title: <skill_group_title>
  subtitle: <short_description>
  icons:
    - <icon_key>
    - <icon_key>

Example:

- title: MERN Stack
  subtitle: Web Development (WIP)
  icons:
    - MongoDB
    - Express
    - React
    - NodeJS

Usage:
Generates skill cards displayed at the homepage with matching icons and subtitles.

3. Projects (_projects/*.md)

Schema:

---
title: <project_name>
description: <short_description>
image: <image_url_or_path>
prefrence: <number_for_sorting>
repository: <github_owner/repository>
icons:
  - <icon_key>
  - <icon_key>
permalink: /projects/<filename>
layout: project
category: <prominent | wip | planned>
container_classes: <css_classes>
---
<page_content>

Example:

---
title: MUS
description: Portfolio website of M. Umar Shahbaz
image: icon.png
prefrence: 1
repository: MUmarShahbaz/Portfolio
icons:
   - Bootstrap
   - Jekyll
   - Docker
   - Actions
permalink: /projects/MUS.html
layout: project
category: wip
container_classes: container py-5
---
Some Markdown content. This content will automatically be parsed into HTML and Style will be applied to it appropriately.

Usage:
Used to generate pages for Project Descriptions (including this one)

4. Icons (_data/icons.yml)

Schema:

<icon_key>:
  class: <css_class>
  color: <hex_color>

Example:

MongoDB:
  class: devicon-mongodb-plain
  color: '#4DB33D'

Usage:
A set of reusable icons.

Share this page