jekyll-theme-resume 1.3.0

data/_sass/_resume-ltr.scss

@@ -0,0 +1,436 @@
+// Resume styles
+// ---------------------------------------/
+// jekyll-theme-resume
+// Core stylesheet shared by every locale (_layouts/resume.html, and
+// portfolio landing pages). Provides the default LTR positioning; _resume-rtl.scss layers
+// mirrored positioning on top for right-to-left locales. Manages header typography, section
+// dividers, unboxed card items, responsive tables, social icons, and print media optimizations.
+// Text typography (font-family, line-height) reads from the --font-locale / --line-height-locale
+// CSS custom properties, set per language from _data/locales/<lang>.yml (see IMPLEMENTATION_PLAN.md
+// Section 4.1); the values below are the fallbacks used when a locale does not set them.
+// ---------------------------------------/
+
+// util
+// Modular Dart Sass imports: encapsulate mixins and design variables without global pollution.
+@use "mixins";
+@use "variables";
+
+// Locale-driven body typography: font-family and line-height are supplied per-language via
+// --font-locale / --line-height-locale (falls back to the current English/Lora values when unset).
+body {
+  font-family: var(--font-locale, "Lora", "Minion Pro", Palatino, Georgia, serif);
+  line-height: var(--line-height-locale, 1.5);
+}
+
+// ==========================================================================
+// Section Header Component
+// ==========================================================================
+// Visually anchors each major resume section (Experience, Education, Skills, etc.)
+// using double-line borders (4px top, 2px bottom) to establish distinct vertical hierarchy.
+.section-header {
+  @include mixins.section_border;
+  margin-bottom: 1.5rem;
+
+  // Primary section title: heavy sans-serif weight (900) with slightly tightened
+  // letter-spacing (-.05rem) to deliver a modern, authoritative editorial aesthetic.
+  h2 {
+    font-family: var(--font-locale, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+    font-weight: 900;
+    font-size: 1.75rem;
+    letter-spacing: -.05rem;
+    margin: 0;
+  }
+}
+
+// page header styles
+// ==========================================================================
+// Page Header: Avatar, Candidate Headline, Contact Information, and Title Bar
+// ==========================================================================
+.page-header {
+  padding: 1.5rem 0;
+
+  // Profile picture: centered circular badge with fixed 95px dimensions.
+  // Uses overflow hidden and high border-radius to ensure non-square images crop cleanly.
+  .avatar {
+    width: 95px;
+    max-width: 100%;
+    overflow: hidden;
+    border-radius: 100px;
+    margin: 0 auto;
+    display: block;
+  }
+
+  // Candidate Name: utilizes CSS clamp() for fluid, viewport-responsive typography.
+  // Scales dynamically between 2rem (mobile minimum) and 3rem (desktop maximum) based on 8vw,
+  // preventing awkward word wrapping on smaller mobile screens without discrete breakpoint jumps.
+  .header-name {
+    font-family: var(--font-locale, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+    font-size: clamp(2rem, 8vw, 3rem);
+    font-weight: 900;
+    text-align: center;
+    letter-spacing: -.15rem;
+    line-height: var(--line-height-locale, 1);
+    margin: 1rem 0 0;
+  }
+
+  // Sub-header contact info list (email, phone, location): centered typography.
+  .header-contact-info {
+    @include mixins.sans;
+    text-align: center;
+
+    p {
+      margin: 0.35rem 0;
+    }
+
+    .header-languages {
+      margin-top: 0.25rem;
+    }
+  }
+
+  // Contact links inherit parent text color to avoid default browser hyperlink blue.
+  .header-contact-info p a {
+    color: inherit;
+  }
+
+  // Title bar: bordered horizontal ribbon separating candidate headline from resume body.
+  // Contains professional job title and social media links in a responsive floated layout.
+  .title-bar {
+    @include mixins.section_border;
+    margin-top: 2rem;
+    padding: .4rem 0;
+    @include mixins.clearfix;
+
+    // Professional subtitle: centered on mobile viewports; floats left on desktop screens.
+    .header-title {
+      font-family: var(--font-locale, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+      font-weight: 300;
+      font-size: 1.75rem;
+      line-height: var(--line-height-locale, 2rem);
+      letter-spacing: -.05rem;
+      text-align: center;
+      margin: 0 0 .5rem;
+
+      @include mixins.media_larger_than_mobile {
+        float: left;
+        margin: 0;
+      }
+    }
+  }
+
+  // Brief introductory summary: standard 1rem font on desktop viewports.
+  .executive-summary {
+    @include mixins.media_larger_than_mobile {
+      font-size: 1rem;
+    }
+  }
+}
+
+// ==========================================================================
+// Social Media Icon Links
+// ==========================================================================
+// Interactive SVG icon bar. On mobile, rendered centered with a subtle top border;
+// on viewports larger than 600px, floats to the right side of the title bar.
+.social-links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  top: 4px; // Fine-tunes optical vertical alignment against the 1.75rem header title text baseline
+  text-align: center;
+  border-top: 2px solid var(--border-color, #c7c7c7);
+  padding-top: .4rem;
+
+  @include mixins.media_larger_than_mobile {
+    float: right;
+    border-top: none;
+    padding-top: 0;
+  }
+
+  // Individual icon list item: horizontal inline-block layout with 5px left margin in LTR.
+  .icon-link-item {
+    display: inline-block;
+    margin-left: 5px;
+  }
+
+  // Base layout/hover properties for .icon-link, .social-links a, .social-links li a
+  // are declared once, globally, in _all-pages.scss.
+
+  // Vector fill cascading: ensures multi-path SVG icons inherit parent fill colors.
+  .icon-link svg path,
+  .social-links svg path {
+    fill: inherit;
+  }
+
+  // Smooth 0.2s color transition on hover/focus using CSS custom property tokens.
+  .icon-link {
+    &:hover .icon path,
+    &:focus .icon path {
+      fill: var(--icon-fill, var(--icon-fill-dark, #333));
+      transition: all .2s ease;
+    }
+  }
+
+  .icon {
+    height: 28px;
+  }
+}
+
+// ==========================================================================
+// Contact & Status Call-to-Action (CTA) Buttons
+// ==========================================================================
+// Interactive pill button (.contact-button) for job inquiries and resume actions.
+// Shares its base skin with .cv-button (profile page) via mixins.cv-button-base.
+.contact-button {
+  @include mixins.cv-button-base;
+  max-width: 100%;
+  box-sizing: border-box;
+  @include mixins.sans_light;
+
+  // Modifier for extended status messages (e.g. "Currently not open to new roles").
+  // Expands width to 400px to prevent multi-line text wrapping.
+  &.not-looking {
+    width: 400px;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+// resume content styles
+// ==========================================================================
+// Resume Content Sections & Unboxed Card Layouts
+// ==========================================================================
+.content-section {
+  margin: 0 0 3rem;
+
+  // Core content unit: semantic unboxed card representing an individual job role,
+  // degree, project, or certificate, spaced with 2rem vertical separation.
+  // Acts as the foundational component for roadmap timeline visualizations.
+  .resume-item {
+    margin-bottom: 2rem;
+  }
+
+  // Role/Job/Degree Title: authoritative bold sans typography (1.5rem).
+  .resume-item-title {
+    font-family: var(--font-locale, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+    font-weight: 700;
+    margin: 0 0 .75rem;
+    font-size: 1.5rem;
+    letter-spacing: -.05rem;
+    line-height: var(--line-height-locale, 1);
+  }
+
+  // Organization, dates, and subtitle details: 1.125rem font size.
+  .resume-item-details {
+    font-size: 1.125rem;
+    margin: 0 0 .75rem;
+    line-height: var(--line-height-locale, 1);
+
+    &.award-title {
+      font-size: 1rem;
+    }
+  }
+
+  // Subtle interactive link underline: renders a discrete 1px solid bottom border
+  // in place of standard text-decoration, removing the border on hover for clean feedback.
+  .resume-item-title,
+  .resume-item-details,
+  .resume-item-copy,
+  .resume-item-list {
+    a {
+      color: var(--link-color, #333);
+      text-decoration: none;
+      border-bottom: 1px solid;
+
+      &:hover {
+        border-bottom: none;
+        color: var(--link-hover, #9c9c9c);
+      }
+    }
+  }
+
+  // Role description copy: spacing above descriptive body paragraphs.
+  .resume-item-copy {
+    margin: .75rem 0 0;
+  }
+
+  // References: logical border-inline-start mirrors automatically in RTL.
+  .resume-item blockquote {
+    margin: 0;
+    padding-block: .25rem;
+    padding-inline-start: 1rem;
+    border-inline-start: 3px solid var(--accent-color, #3064a9);
+
+    p {
+      margin: 0 0 .5rem;
+    }
+
+    cite {
+      display: block;
+      font-size: .9em;
+      color: var(--text-light, #646464);
+    }
+  }
+
+  // Normal weight styling for certification IDs and license numbers.
+  .resume-item-copy-license-cert-id {
+    font-weight: normal;
+  }
+  /* Languages table (responsive, flexible spacing) */
+  .languages-table {
+    width: 100%;
+    /* use separate border spacing to create visible gaps between TDs */
+    border-collapse: separate;
+    border-spacing: 1rem 0.5rem; /* horizontal gap, vertical gap */
+    table-layout: fixed; /* let columns share available width */
+    margin: 0 0 0.5rem 0;
+  }
+
+  .languages-table tbody {
+    width: 100%;
+  }
+
+  .languages-table .lang-cell {
+    padding: 0.5rem 1rem;
+    vertical-align: top;
+    word-break: break-word;
+  }
+
+  .lang-entry {
+    margin: 0;
+    line-height: 1.25;
+  }
+
+  /* move typography here so markup stays clean */
+  .languages-table .resume-item-details {
+    font-weight: 700;
+    font-size: 14px;
+  }
+
+  /* Make the table stack into single-column blocks on narrow viewports */
+  @include mixins.media_mobile {
+    .languages-table,
+    .languages-table tbody,
+    .languages-table tr,
+    .languages-table td {
+      display: block;
+      width: 100%;
+    }
+
+    .languages-table tr { margin-bottom: 0.5rem; }
+  }
+
+  /* Print-specific: keep two columns side-by-side (do not stack) */
+  @media print {
+    .languages-table {
+      display: table;
+      table-layout: fixed;
+      border-collapse: separate;
+      border-spacing: 1rem 0.5rem;
+      width: 100%;
+      page-break-inside: avoid;
+    }
+
+    .languages-table tbody { display: table-row-group; }
+
+    .languages-table tr { display: table-row; }
+
+    .languages-table td {
+      display: table-cell !important;
+      width: 50%;
+      vertical-align: top;
+      padding: 0.4rem 0.8rem;
+    }
+  }
+}
+
+// footer styles
+// ==========================================================================
+// Page Footer: Dividers and Copyright Information
+// ==========================================================================
+// Base padding/text-align/margin-bottom/.footer-line styling for .page-footer is
+// declared once, globally, in _all-pages.scss; only the resume-specific divider lives here.
+.page-footer {
+  border-top: 4px solid var(--border-color, #c7c7c7);
+}
+
+// ==========================================================================
+// Print Visibility Utility Classes
+// ==========================================================================
+// Hidden by default on digital screens; revealed during physical printing / PDF generation.
+.print-only,
+.print-only-inline {
+  display: none !important
+}
+
+// ==========================================================================
+// Print Media Overrides (@media print)
+// ==========================================================================
+// Tightens spacing and downscales typography to fit CV content cleanly onto A4 / US Letter paper.
+@media print {
+  // Suppress interactive elements and digital-only buttons.
+  .no-print {
+    display: none !important
+  }
+
+  // Reveal plaintext contact data and printable URLs.
+  .print-only {
+    display: block !important
+  }
+
+  .print-only-inline {
+    display: inline !important
+  }
+
+  // Base print typography: scales down to 12px for compact multi-column printable density.
+  body {
+    font-size: 12px;
+    line-height: 1rem;
+  }
+
+  // Reduced padding on page header to conserve physical page budget.
+  .page-header {
+    padding: 1rem 0 .2rem;
+
+    .header-name {
+      @include mixins.sans_bold;
+      font-size: 2rem;
+      margin: 0 0 .2rem;
+    }
+  }
+
+  // Switch thick decorative borders to 1px hairline rules.
+  .section-header {
+    @include mixins.section_border_thin;
+    margin-bottom: 1rem;
+
+    h2 {
+      font-size: 1.2rem;
+      line-height: 1.5rem;
+    }
+  }
+
+  // Tighten margins across items and scale down titles.
+  .content-section {
+    margin: 0 0 1rem;
+
+    .resume-item {
+      margin-bottom: 1rem;
+    }
+
+    .resume-item-title {
+      font-size: 16px;
+      line-height: .7em;
+    }
+
+    .resume-item-details {
+      font-size: 12px;
+      margin: 0 0 .75rem;
+      line-height: .7em;
+      font-style: italic;
+
+      &.award-title {
+        font-size: 11px;
+      }
+    }
+  }
+}

data/_sass/_resume-rtl.scss

@@ -0,0 +1,91 @@
+// RTL positioning overrides for the resume layout
+// ---------------------------------------/
+// jekyll-theme-resume
+// Language-neutral RTL overrides loaded last via assets/css/cv-rtl.scss, on top of
+// _resume-ltr.scss. Scoped strictly under html[dir="rtl"] to ensure complete style
+// isolation from LTR layouts. Handles horizontal mirroring and RTL element repositioning
+// only; font-family and line-height are locale-driven (--font-locale / --line-height-locale,
+// set per language in the page head from _data/locales/<lang>.yml) so Arabic, Urdu, and any
+// future RTL locale each get their own typeface and line spacing without editing this file.
+// ---------------------------------------/
+
+@use "mixins";
+
+// Scoped root selector: activates automatically when the page sets <html dir="rtl">.
+html[dir="rtl"] {
+  body {
+    direction: rtl;
+  }
+
+  // Cursive ligature stabilization
+  // ==========================================================================
+  // WHY: Arabic and Urdu are intrinsically cursive scripts where letters within words must
+  // connect seamlessly via contextual ligatures. Latin headlines often apply negative
+  // letter-spacing (e.g., -.05rem). If applied to a cursive RTL script, negative or positive
+  // tracking causes glyph connection failure, detaching letters into broken, isolated forms.
+  // letter-spacing: normal restores natural cursive ligature rendering, and applies equally
+  // to every RTL locale regardless of its specific font or line-height.
+  // ==========================================================================
+  .section-header h2,
+  .page-header .header-name,
+  .page-header .header-title,
+  .resume-item-title,
+  .resume-item-details,
+  .content-section .resume-item-title,
+  .content-section .resume-item-details {
+    letter-spacing: normal;
+  }
+
+  // Global alignment defaults
+  // Enforces right-alignment across resume item headers, dates, and descriptive paragraphs.
+  .content-section,
+  .content-section .resume-item-title,
+  .content-section .resume-item-details,
+  .content-section .resume-item-copy {
+    text-align: right;
+  }
+
+  // Header tweaks
+  // Horizontally mirrors the title bar: floats the candidate title to the right on desktop.
+  .page-header {
+    .title-bar {
+      .header-title {
+        @include mixins.media_larger_than_mobile {
+          float: right;
+        }
+      }
+    }
+  }
+
+  // Social links on the opposite side in wide viewports
+  // Mirrored positioning: floats social icons to the left side on screens wider than 600px.
+  .social-links {
+    @include mixins.media_larger_than_mobile {
+      float: left;
+    }
+
+    .icon-link-item {
+      // flip spacing for RTL
+      // Inverts icon margins: applies spacing on the trailing left side (margin-right: 5px; margin-left: 0).
+      margin-right: 5px;
+      margin-left: 0;
+    }
+  }
+
+  // Lists
+  // Inverts list bullet indentation: in RTL, bullets appear on the right side of the text block.
+  // Padding must be placed on the right (1.2rem) and cleared on the left (0).
+  // Also serves as the architectural model for right-aligned timeline markers in Feature 4.2.
+  .resume-item-list {
+    padding-right: 1.2rem;
+    padding-left: 0;
+  }
+
+  // Languages table tweaks
+  // Enforces right-to-left column progression for the two-column language proficiency grid.
+  .languages-table {
+    direction: rtl;
+  }
+
+  // Footer: text-align: center already cascades from _all-pages.scss; no RTL override needed.
+}

data/_sass/_variables.scss

@@ -0,0 +1,45 @@
+// Variables
+// ---------------------------------------/
+// jekyll-theme-resume
+// SCSS design tokens and compile-time defaults.
+// Variables are flagged with `!default` to allow consuming Jekyll sites to override
+// layout dimensions, gutters, and font stacks without modifying gem theme source.
+// Color variables bind to CSS custom properties to seamlessly support dynamic dark mode.
+// ---------------------------------------/
+
+// Layout Dimensions
+// Standard 980px container width and 10px gutter spacing (total 20px column gap).
+$container-width: 980px !default;
+$grid-gutter: 10px !default;
+
+// Colors
+// Legacy SCSS color variables bound to CSS custom property design tokens
+// defined in _dark-mode.scss, enabling reactive theme switching without SCSS re-compilation.
+$white: var(--bg-color, #fff);
+$black: var(--text-color, #333);
+
+// Styles
+$text_color: var(--text-color, #333);
+
+// Font stack
+// Cross-platform sans-serif system fallback stack with emoji symbol support.
+$body-font: Helvetica,
+arial,
+nimbussansl,
+liberationsans,
+freesans,
+clean,
+sans-serif,
+"Segoe UI Emoji",
+"Segoe UI Symbol" !default;
+
+// The base body size
+$body-font-size: 13px !default;
+
+// Monospace font stack
+// Cross-platform developer monospace font stack for code snippets, IDs, and preformatted blocks.
+$mono-font: Consolas,
+"Liberation Mono",
+Menlo,
+Courier,
+monospace !default;

data/assets/css/cv-ltr.scss

@@ -0,0 +1,31 @@
+---
+---
+
+// ==========================================================================
+// LTR Resume Stylesheet Entrypoint
+// jekyll-theme-resume
+//
+// Primary SCSS compilation entrypoint for every left-to-right resume locale
+// (_layouts/resume.html for English and any other LTR locale). Compiles into
+// assets/css/cv-ltr.css via Jekyll SASS processing.
+// Cascade order:
+// 1. Resets & Tokens: normalize, mixins, variables, dark-mode custom properties
+// 2. Base & Grid: universal box-sizing, typography, 980px Primer grid
+// 3. Resume Sections: header fluid typography, cards, tables, print rules
+// 4. Shared Utilities: SVG icons, screen-reader helpers, universal footer
+// ==========================================================================
+
+// "Reset" styles and SCSS reusable components
+@use "normalize";
+@use "mixins";
+@use "variables";
+@use "dark-mode";
+
+// Generic site base & layout styles
+@use "base";
+@use "layout";
+
+// Layouts
+@use "resume-ltr";
+
+@use "all-pages";

data/assets/css/cv-rtl.scss

@@ -0,0 +1,36 @@
+---
+---
+
+// ==========================================================================
+// RTL Resume Stylesheet Entrypoint
+// jekyll-theme-resume
+//
+// Primary SCSS compilation entrypoint for every right-to-left resume locale
+// (_layouts/resume.html for Arabic, Urdu, and any other RTL locale). Compiles into
+// assets/css/cv-rtl.css via Jekyll SASS processing.
+// Strict Bilingual Parity (Rule 1):
+// Compiles identical base foundations as cv-ltr.scss, followed by @use "resume-rtl"
+// at the very end of the cascade. This ensures that RTL ligature stability
+// (letter-spacing: normal) and mirrored horizontal alignment override preceding LTR
+// positioning cleanly. Typography (font-family, line-height) is not set here; it is
+// locale-driven via --font-locale / --line-height-locale, emitted per language in the
+// page head from _data/locales/<lang>.yml.
+// ==========================================================================
+
+// "Reset" styles and SCSS reusable components
+// RTL CV entrypoint: load base styles then RTL overrides
+@use "normalize";
+@use "mixins";
+@use "variables";
+@use "dark-mode";
+
+// Generic site base & layout styles
+@use "base";
+@use "layout";
+
+// Layouts
+@use "resume-ltr";
+@use "all-pages";
+
+// RTL-specific positioning overrides
+@use "resume-rtl";

data/assets/css/main.scss

@@ -0,0 +1,8 @@
+--- 
+--- 
+// "Reset" styles and SCSS reusable components
+@use "normalize";
+@use "dark-mode";
+@use "base";
+@use "all-pages";
+@use "layout";

data/assets/css/profile.scss

@@ -0,0 +1,9 @@
+---
+---
+// Standalone Profile Page Stylesheet
+@use "normalize";
+@use "dark-mode";
+@use "base";
+@use "all-pages";
+@use "profile-page";
+@use "layout";

data/assets/favicon/resume/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f4bc.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f4bc.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

data/assets/favicon/resume/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/assets/favicon/resume/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/assets/favicon/resume/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}