presentation updated
This commit is contained in:
Shayan Rais
@@ -0,0 +1,207 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 100 120" width="140" height="168">
|
||||
<defs>
|
||||
<!-- 3D enhanced Gemini gradient (lighter top) -->
|
||||
<linearGradient id="gjBodyGrad" x1="0" y1="0" x2="0.3" y2="1">
|
||||
<stop offset="0%" stop-color="#6AA3FF"/>
|
||||
<stop offset="20%" stop-color="#4285F4"/>
|
||||
<stop offset="50%" stop-color="#7B68EE"/>
|
||||
<stop offset="80%" stop-color="#EA4335"/>
|
||||
<stop offset="100%" stop-color="#B82A22"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- 3D gradient for border -->
|
||||
<linearGradient id="gjBorderGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#6AA3FF"/>
|
||||
<stop offset="25%" stop-color="#4285F4"/>
|
||||
<stop offset="50%" stop-color="#9080F0"/>
|
||||
<stop offset="75%" stop-color="#EA4335"/>
|
||||
<stop offset="100%" stop-color="#C03028"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Inner panel gradient (dark with depth) -->
|
||||
<linearGradient id="gjInnerGrad" x1="0" y1="0" x2="0.3" y2="1">
|
||||
<stop offset="0%" stop-color="#282840"/>
|
||||
<stop offset="50%" stop-color="#1a1a2e"/>
|
||||
<stop offset="100%" stop-color="#0E0E1A"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Arm gradient (3D colorful) -->
|
||||
<linearGradient id="gjArmL" x1="0" y1="0" x2="1" y2="0.5">
|
||||
<stop offset="0%" stop-color="#3570D0"/>
|
||||
<stop offset="50%" stop-color="#5A78E0"/>
|
||||
<stop offset="100%" stop-color="#7B68EE"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="gjArmR" x1="0" y1="0" x2="1" y2="0.5">
|
||||
<stop offset="0%" stop-color="#D04535"/>
|
||||
<stop offset="50%" stop-color="#EA4335"/>
|
||||
<stop offset="100%" stop-color="#C03028"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Leg gradient -->
|
||||
<linearGradient id="gjLegL" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#4285F4"/>
|
||||
<stop offset="50%" stop-color="#6A58D0"/>
|
||||
<stop offset="100%" stop-color="#5040A0"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="gjLegR" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#B84030"/>
|
||||
<stop offset="50%" stop-color="#EA4335"/>
|
||||
<stop offset="100%" stop-color="#D03828"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Eye white gradient (glossy) -->
|
||||
<radialGradient id="gjEyeGrad" cx="35%" cy="30%" r="65%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||
<stop offset="60%" stop-color="#F0F0F0"/>
|
||||
<stop offset="100%" stop-color="#D8D8D8"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Chevron 3D gradient -->
|
||||
<linearGradient id="gjChevronGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#6AA3FF"/>
|
||||
<stop offset="30%" stop-color="#4285F4"/>
|
||||
<stop offset="60%" stop-color="#9080F0"/>
|
||||
<stop offset="100%" stop-color="#EA4335"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Ground shadow radial -->
|
||||
<radialGradient id="gjShadowGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#000" stop-opacity="0.35"/>
|
||||
<stop offset="60%" stop-color="#000" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<!-- Drop shadow filter -->
|
||||
<filter id="gjDropShadow" x="-15%" y="-15%" width="130%" height="140%">
|
||||
<feDropShadow dx="1.5" dy="2.5" stdDeviation="1.8" flood-color="#000" flood-opacity="0.28"/>
|
||||
</filter>
|
||||
|
||||
<!-- Inner depth for body -->
|
||||
<filter id="gjInnerDepth" x="-5%" y="-5%" width="110%" height="110%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="blur"/>
|
||||
<feOffset dx="0" dy="1.5" result="off"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.2" result="color"/>
|
||||
<feComposite in="color" in2="off" operator="in" result="shadow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Chevron glow -->
|
||||
<filter id="gjChevronGlow" x="-15%" y="-15%" width="130%" height="130%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
.gemini-body {
|
||||
animation: jump 0.5s ease-in-out infinite;
|
||||
transform-origin: 42px 86px;
|
||||
}
|
||||
.shadow {
|
||||
animation: shadow-scale 0.5s ease-in-out infinite;
|
||||
}
|
||||
.left-arm {
|
||||
animation: wave-left 0.5s ease-in-out infinite;
|
||||
transform-origin: 18px 45px;
|
||||
}
|
||||
.right-arm {
|
||||
animation: wave-right 0.5s ease-in-out infinite;
|
||||
transform-origin: 66px 45px;
|
||||
}
|
||||
.left-leg {
|
||||
animation: leg-bounce 0.5s ease-in-out infinite;
|
||||
transform-origin: 30px 72px;
|
||||
}
|
||||
.right-leg {
|
||||
animation: leg-bounce 0.5s ease-in-out infinite 0.1s;
|
||||
transform-origin: 54px 72px;
|
||||
}
|
||||
@keyframes jump {
|
||||
0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
|
||||
30% { transform: translateY(-16px) scaleY(1.1) scaleX(0.95); }
|
||||
50% { transform: translateY(-18px) scaleY(1.05) scaleX(0.98); }
|
||||
80% { transform: translateY(-5px) scaleY(0.95) scaleX(1.05); }
|
||||
}
|
||||
@keyframes shadow-scale {
|
||||
0%, 100% { transform: scaleX(1); opacity: 0.35; }
|
||||
50% { transform: scaleX(0.7); opacity: 0.25; }
|
||||
}
|
||||
@keyframes wave-left {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(-25deg); }
|
||||
}
|
||||
@keyframes wave-right {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(25deg); }
|
||||
}
|
||||
@keyframes leg-bounce {
|
||||
0%, 100% { transform: scaleY(1); }
|
||||
40% { transform: scaleY(1.15); }
|
||||
60% { transform: scaleY(0.88); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Shadow -->
|
||||
<ellipse class="shadow" cx="42" cy="92" rx="20" ry="4" fill="url(#gjShadowGrad)"/>
|
||||
|
||||
<!-- Gemini Character Group -->
|
||||
<g class="gemini-body" filter="url(#gjDropShadow)">
|
||||
<!-- Left arm -->
|
||||
<rect class="left-arm" x="6" y="42" width="12" height="6" rx="2" fill="url(#gjArmL)"/>
|
||||
<rect class="left-arm" x="7" y="43" width="4" height="2" fill="#8AB8FF" opacity="0.3" rx="0.5"/>
|
||||
|
||||
<!-- Right arm -->
|
||||
<rect class="right-arm" x="66" y="42" width="12" height="6" rx="2" fill="url(#gjArmR)"/>
|
||||
<rect class="right-arm" x="67" y="43" width="4" height="2" fill="#F08070" opacity="0.25" rx="0.5"/>
|
||||
|
||||
<!-- Left leg -->
|
||||
<rect class="left-leg" x="26" y="72" width="8" height="14" rx="2" fill="url(#gjLegL)"/>
|
||||
<rect class="left-leg" x="27" y="73" width="3" height="7" fill="#6AA3FF" opacity="0.3" rx="0.5"/>
|
||||
|
||||
<!-- Right leg -->
|
||||
<rect class="right-leg" x="50" y="72" width="8" height="14" rx="2" fill="url(#gjLegR)"/>
|
||||
<rect class="right-leg" x="51" y="73" width="3" height="7" fill="#F08070" opacity="0.25" rx="0.5"/>
|
||||
|
||||
<!-- Gemini CLI Icon - Rounded rectangle with gradient border -->
|
||||
<g transform="translate(10, 8)" filter="url(#gjInnerDepth)">
|
||||
<!-- Outer gradient border (3D enhanced) -->
|
||||
<rect x="0" y="0" width="64" height="64" rx="14" fill="url(#gjBorderGrad)"/>
|
||||
<!-- Border highlight (top edge shine) -->
|
||||
<rect x="2" y="1" width="40" height="3" rx="2" fill="#8AB8FF" opacity="0.3"/>
|
||||
|
||||
<!-- Inner dark background (3D depth) -->
|
||||
<rect x="5" y="5" width="54" height="54" rx="10" fill="url(#gjInnerGrad)"/>
|
||||
<!-- Inner panel top highlight -->
|
||||
<rect x="8" y="7" width="28" height="4" rx="2" fill="#3A3A58" opacity="0.4"/>
|
||||
|
||||
<!-- Chevron ">" symbol - thick terminal style (3D glow) -->
|
||||
<g transform="translate(14, 16)" filter="url(#gjChevronGlow)">
|
||||
<!-- Top arm of chevron -->
|
||||
<polygon points="0,14 20,0 24,5 10,16" fill="url(#gjChevronGrad)"/>
|
||||
<!-- Bottom arm of chevron -->
|
||||
<polygon points="0,18 10,16 24,27 20,32" fill="url(#gjChevronGrad)"/>
|
||||
<!-- Chevron highlight -->
|
||||
<polygon points="1,14.5 18,2 20,4 9,14" fill="#9CC0FF" opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Eyes positioned on the icon - happy bouncing -->
|
||||
<rect x="24" y="28" width="8" height="12" rx="2" fill="url(#gjEyeGrad)"/>
|
||||
<!-- Left eye highlights -->
|
||||
<rect x="25" y="29" width="2.5" height="2.5" fill="#fff" opacity="0.8" rx="0.5"/>
|
||||
<rect x="29" y="35" width="1.2" height="1.2" fill="#fff" opacity="0.35" rx="0.3"/>
|
||||
|
||||
<rect x="44" y="28" width="8" height="12" rx="2" fill="url(#gjEyeGrad)"/>
|
||||
<!-- Right eye highlights -->
|
||||
<rect x="45" y="29" width="2.5" height="2.5" fill="#fff" opacity="0.8" rx="0.5"/>
|
||||
<rect x="49" y="35" width="1.2" height="1.2" fill="#fff" opacity="0.35" rx="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: presentation-learning-journey
|
||||
description: PROACTIVELY use this agent whenever the user wants to update, modify, rearrange, or fix the LEARNING-JOURNEY presentation (`presentation/learning-journey/index.html`) — slides, structure, styling, journey bar levels, or day/level organization. Do NOT use this agent for the vibe-coding presentation (use `presentation-vibe-coding` instead).
|
||||
description: PROACTIVELY use this agent whenever the user wants to update, modify, rearrange, or fix the LEARNING-JOURNEY presentation (`presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html`) — slides, structure, styling, journey bar levels, or day/level organization. Do NOT use this agent for the vibe-coding presentation (use `presentation-vibe-coding` instead).
|
||||
allowedTools:
|
||||
- "Bash(*)"
|
||||
- "Read"
|
||||
@@ -19,7 +19,7 @@ color: cyan
|
||||
|
||||
# Presentation Learning-Journey Agent
|
||||
|
||||
You are a specialized agent for modifying the **Claude Code Learning Journey** presentation at `presentation/learning-journey/index.html`.
|
||||
You are a specialized agent for modifying the **Claude Code Learning Journey** presentation at `presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html`.
|
||||
|
||||
Scope: this agent ONLY edits the learning-journey presentation. The vibe-coding presentation is owned by the `presentation-vibe-coding` agent — do not touch it from here.
|
||||
|
||||
@@ -67,7 +67,7 @@ Single-file HTML presentation with inline CSS and JS. Core conventions:
|
||||
|
||||
### Step 1: Read the current state
|
||||
|
||||
Before any edit, read `presentation/learning-journey/index.html` and confirm:
|
||||
Before any edit, read `presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html` and confirm:
|
||||
- Current total slide count
|
||||
- Current `data-level` assignments (which slides carry which level)
|
||||
- Current TOC `goToSlide(N)` targets on slide 2
|
||||
@@ -167,3 +167,6 @@ After completing changes, report to the user:
|
||||
- **2026-04-19 chip overlap check method**: after any chip insertion, mentally walk each new chip's bounding box against its neighbors — chip height is roughly `padding-top + padding-bottom + font-size * line-height` ≈ 38-46px at 0.9-1.3rem. A 6-9% vertical gap on a 480px min-height container is ~29-43px which is tight but sufficient for same-column chips with different left offsets. If left offsets are within 15% of each other, require at least 8% vertical gap.
|
||||
- **2026-04-22 About Me slide (slide 2) insertion — interactive fact-card pattern**: new slide inserted at position 2; all slides 2-39 renumbered to 3-40 (total now 40). Slide 2 has no `data-level` — journey bar shows visible but 0% fill (correct for pre-arc slides, bar is only hidden for slide 1). Interactive elements: circular avatar with `onmouseover` scale+glow effect; three `.fact-card` divs (Role, Education, Repo) using `translateY(-5px)` lift + colored box-shadow on hover; repo card is an `<a>` with `target="_blank" rel="noopener"` opening `https://github.com/shanraisshan/claude-code-best-practice`; star icon uses `animation: pulse-star 2s ease-in-out infinite` keyframe. The `@keyframes pulse-star` was placed in the `<head>` `<style>` block (not inline in the slide div). Image path `../assets/shayan.png` resolves to `presentation/assets/shayan.png` — verified file exists. **Gotcha**: the initial sed renumber pass had a typo that changed slide 33 to 36 instead of 34; fix required a targeted line-number-based `sed -i '' -e '1226s/...'` call before running the 2-32 batch. **Rule**: always verify the sed substitution list before running — check that each `s/"N"/"N+1"/` matches the intended slide, not a mis-typed number.
|
||||
- **2026-04-22 About Me slide (slide 2) redesigned — horizontal-to-vertical card rework**: replaced the 3-column horizontal grid with 3 stacked vertical cards (max-width 660px, flex-direction column, gap 16px). Card 1 (Role, blue): flex row with `disrupt-logo.png` (56px contain) + text. Card 2 (Education, purple): two-row logo+text layout inside one card, separated by a thin `border-top: 1px solid #e0d4ec` divider — `uni-fast-logo.png` for Master's (FAST NUCES 2019) and `uni-ned-logo.png` for Bachelor's (NED 2014), both 48px contain. Card 3 (Achievement, amber): flex row with `claude-mascot.svg` (56px contain) + text + inline GitHub badge (`<img src="github.svg" style="filter: invert(1)">` on dark `#24292e` background pill). All 5 logo paths verified against `presentation/assets/logo/`. Hover effects preserved: `translateY(-3px)` lift + colored box-shadow per card. Repo card is `<a href="..." target="_blank" rel="noopener">`. `@keyframes pulse-star` removed from `<style>` block — no longer used (star emoji replaced by claude-mascot.svg). No new CSS classes added — all styling inline. Slide count (40), data-slide numbering, goToSlide targets, and level transitions are untouched.
|
||||
- **2026-04-22 asset path reorganization — Shayan personal assets moved to subdirectory**: `presentation/assets/` was reorganized to accommodate a new GDG Kolachi co-presenter deck. Shayan's personal assets are now under `presentation/assets/introduction/Shayan/`. The four updated paths on slide 2 are: `../assets/shayan.png` → `../assets/introduction/Shayan/shayan.png`, `../assets/logo/disrupt-logo.png` → `../assets/introduction/Shayan/disrupt-logo.png`, `../assets/logo/uni-fast-logo.png` → `../assets/introduction/Shayan/uni-fast-logo.png`, `../assets/logo/uni-ned-logo.png` → `../assets/introduction/Shayan/uni-ned-logo.png`. Generic brand assets (`../assets/logo/claude-mascot.svg`) remain at their original paths. **Rule for future edits**: any new slide referencing Shayan's personal photo or logos must use the `../assets/introduction/Shayan/` prefix, not the old `../assets/` or `../assets/logo/` roots.
|
||||
- **2026-04-22 deck relocated + GDG Kolachi re-topic of slide 1**: deck moved from `presentation/learning-journey/` to `presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/`. This agent's `description` frontmatter already reflects the new path. Slide 1 was replaced with a conference title slide for GDG Kolachi (Apr 25, 2026). New elements: (1) pill-shaped event badge using `linear-gradient(90deg, #1a73e8 0%, #4285f4 55%, #ea4335 100%)` — GDG blue-to-red — with `border-radius: 999px` and a blue drop-shadow; (2) h1 "Agentic Engineering in the CLI" at 3.2rem with tight letter-spacing; (3) `.subtitle` with inline `<strong style="color:#1a73e8">Claude Code</strong>` and `<em style="color:#ea4335;font-style:normal">Gemini CLI</em>` brand tints; (4) two 140px round avatar cards side-by-side (gap: 72px) for Shayan Rais and Syed Umaid Ahmed — avatar hover uses blue glow for Shayan and red glow for Umaid to mirror the GDG gradient. Umaid's photo resolves at `../assets/introduction/Umaid/umaid.png` (verified). The `../../!/claude-jumping.svg` mascot path resolves correctly from the new deck folder (the `!/` dir is at repo root, two levels up from `presentation/<deck-name>/`) — but the mascot was deliberately dropped because the GDG title slide doesn't need it. Slide count: 40. `data-slide="1"` wrapper unchanged. Slides 2-40 untouched. TOC goToSlide targets: Agents=9, Skills=15, Context=21, CLAUDE.md=26, Commands=32. **Color convention for GDG-brand elements**: use `#1a73e8` (Google blue) and `#ea4335` (Google red) consistently — these are the two poles of the event-badge gradient and the subtitle tints. Do not substitute `#4285f4` (the midpoint blue) for either named role.
|
||||
- **2026-04-22 global dual-mascot pattern (Claude top-left, Gemini top-right)**: the deck now renders two persistent corner mascots on every slide via a pair of fixed-position `<div class="header-logo">` elements just before the `.navigation` block. CSS: `.header-logo` is `position: fixed; top: 20px; left: 40px; width: 100px; height: 65px; z-index: 50` (Claude, top-left). `.header-logo.right` adds `left: auto; right: 40px` to flip it to top-right (Gemini). Assets: `../../!/claude-jumping.svg` and `../../!/gemini-jumping.svg` — both verified present at repo root `!/`. The Gemini jumping mascot pairs with the Claude one for the GDG dual-CLI deck. Per-slide mascot `<img>` tags that were hardcoded on slide 1 (with `position: absolute`) are now deleted — use global divs only. The `style="position: relative;"` that was on the slide 1 wrapper was removed because it only existed to anchor those absolute-positioned per-slide mascots. **z-index safety**: mascots at z-index 50 sit below `.journey-bar` (99) and `.navigation` / `.progress` (100) — no overlap. The journey bar is at `right: 62px; top: 95px`, which is far enough below `top: 20px` that the right mascot and the bar track do not visually collide. **Rule**: for any GDG dual-CLI deck, always use this two-div global pattern rather than per-slide mascots — it guarantees consistent placement across all 40 slides without per-slide maintenance.
|
||||
|
||||
@@ -12,7 +12,7 @@ Any request to update, modify, or fix a presentation MUST be handled by the matc
|
||||
| Presentation | Path | Agent |
|
||||
|---|---|---|
|
||||
| Vibe Coding → Agentic Engineering | `presentation/vibe-coding-to-agentic-engineering/index.html` | `presentation-vibe-coding` |
|
||||
| Claude Code Learning Journey | `presentation/learning-journey/index.html` | `presentation-learning-journey` |
|
||||
| Claude Code Learning Journey | `presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html` | `presentation-learning-journey` |
|
||||
|
||||
Invoke via the Agent tool:
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ Skills in `.claude/skills/<name>/SKILL.md` use YAML frontmatter:
|
||||
- `hooks`: Lifecycle hooks scoped to this skill
|
||||
|
||||
### Presentation System
|
||||
See `.claude/rules/presentation.md` — presentation work is delegated per-presentation to `presentation-vibe-coding` (for `presentation/vibe-coding-to-agentic-engineering/`) or `presentation-learning-journey` (for `presentation/learning-journey/`).
|
||||
See `.claude/rules/presentation.md` — presentation work is delegated per-presentation to `presentation-vibe-coding` (for `presentation/vibe-coding-to-agentic-engineering/`) or `presentation-learning-journey` (for `presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/`).
|
||||
|
||||
### Hooks System
|
||||
Cross-platform sound notification system in `.claude/hooks/`:
|
||||
|
||||
+44
-13
@@ -75,7 +75,8 @@
|
||||
.slide-counter { position: fixed; bottom: 40px; left: 40px; font-size: 0.9rem; color: #999; }
|
||||
.keyboard-hint { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 0.85rem; color: #999; }
|
||||
.keyboard-hint kbd { background: #f0f0f0; padding: 4px 8px; border-radius: 4px; border: 1px solid #ddd; font-family: inherit; }
|
||||
.header-logo { position: fixed; top: 20px; right: 40px; width: 100px; height: 65px; z-index: 50; }
|
||||
.header-logo { position: fixed; top: 20px; left: 40px; width: 100px; height: 65px; z-index: 50; }
|
||||
.header-logo.right { left: auto; right: 40px; }
|
||||
.header-logo img { width: 100%; height: 100%; }
|
||||
.title-logo { width: 200px; height: 130px; margin-bottom: 40px; }
|
||||
.title-logo img { width: 100%; height: 100%; }
|
||||
@@ -139,15 +140,42 @@
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- SLIDE 1: Title -->
|
||||
<!-- SLIDE 1: GDG Kolachi Conference Title -->
|
||||
<!-- ============================================================ -->
|
||||
<div class="slide active title-slide" data-slide="1">
|
||||
<div class="title-logo">
|
||||
<img src="../../!/claude-jumping.svg" alt="Claude Code mascot jumping" />
|
||||
</div>
|
||||
<h1>Claude Code Learning Journey</h1>
|
||||
<p class="subtitle">There is no one correct way of using Claude Code</p>
|
||||
<p style="margin-top: 60px; font-size: 0.95rem; color: #888;">An onboarding guide for non-engineers & engineers alike.</p>
|
||||
|
||||
<!-- Main title -->
|
||||
<h1 style="font-size: 3.2rem; letter-spacing: -0.02em; margin-bottom: 16px;">Agentic Engineering in the CLI</h1>
|
||||
|
||||
<!-- Subtitle with inline brand logos + gradient text -->
|
||||
<p class="subtitle" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 0;">
|
||||
<span>Lessons from</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;">
|
||||
<img src="../assets/logo/claude-mascot.svg" alt="Claude" style="height: 28px; width: auto; object-fit: contain; vertical-align: middle;">
|
||||
<strong style="color: #D97757; font-weight: 700;">Claude Code</strong>
|
||||
</span>
|
||||
<span style="color: #999; font-weight: 400;">— applied to —</span>
|
||||
<span style="display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;">
|
||||
<img src="../assets/logo/gemini.svg" alt="Gemini" style="height: 28px; width: auto; object-fit: contain; vertical-align: middle;">
|
||||
<strong style="background: linear-gradient(90deg, #1a73e8 0%, #4285f4 55%, #ea4335 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;">Gemini CLI</strong>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<!-- GDG Kolachi event badge (bottom) -->
|
||||
<div style="
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, #1a73e8 0%, #4285f4 55%, #ea4335 100%);
|
||||
color: #fff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 22px;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 3px 12px rgba(26,115,232,0.38);
|
||||
margin-top: 88px;
|
||||
">GDG Kolachi · Apr 25, 2026</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
@@ -159,7 +187,7 @@
|
||||
<!-- Avatar -->
|
||||
<div style="position: relative; margin-bottom: 12px;">
|
||||
<img
|
||||
src="../assets/shayan.png"
|
||||
src="../assets/introduction/Shayan/shayan.png"
|
||||
alt="Shayan Rais"
|
||||
style="width: 280px; height: 280px; border-radius: 50%; object-fit: cover; border: 4px solid #e5e5e5; box-shadow: 0 8px 32px rgba(0,0,0,0.12); display: block; transition: transform 0.3s ease, box-shadow 0.3s ease;"
|
||||
onmouseover="this.style.transform='scale(1.07)'; this.style.boxShadow='0 12px 40px rgba(21,101,192,0.35), 0 0 0 6px rgba(21,101,192,0.12)';"
|
||||
@@ -169,7 +197,7 @@
|
||||
|
||||
<!-- Name + tagline -->
|
||||
<h1 style="font-size: 2.6rem; font-weight: 700; margin-bottom: 6px; border-bottom: none; padding-bottom: 0; color: #1a1a1a;">Shayan Rais</h1>
|
||||
<p style="font-size: 1.2rem; color: #444; margin-bottom: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px;">Software Architect at <img src="../assets/logo/disrupt-logo.png" alt="disrupt.com" style="height: 28px; width: auto; object-fit: contain; vertical-align: middle;" /></p>
|
||||
<p style="font-size: 1.2rem; color: #444; margin-bottom: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px;">Software Architect at <img src="../assets/introduction/Shayan/disrupt-logo.png" alt="disrupt.com" style="height: 28px; width: auto; object-fit: contain; vertical-align: middle;" /></p>
|
||||
|
||||
<!-- Side-by-side cards (2-column grid) -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 900px; align-items: stretch;">
|
||||
@@ -183,7 +211,7 @@
|
||||
<div style="font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #7b1fa2; font-weight: 700; margin-bottom: 14px; text-align: left;">Education</div>
|
||||
<!-- Master's row -->
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
|
||||
<img src="../assets/logo/uni-fast-logo.png" alt="FAST NUCES logo" style="width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;" />
|
||||
<img src="../assets/introduction/Shayan/uni-fast-logo.png" alt="FAST NUCES logo" style="width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;" />
|
||||
<div style="text-align: left;">
|
||||
<div style="font-size: 0.98rem; font-weight: 600; color: #1a1a1a; line-height: 1.3;">Master’s in Computer Science</div>
|
||||
<div style="font-size: 0.87rem; color: #666; margin-top: 2px;">FAST NUCES — 2019</div>
|
||||
@@ -193,7 +221,7 @@
|
||||
<div style="border-top: 1px solid #e0d4ec; margin: 4px 0 12px 0;"></div>
|
||||
<!-- Bachelor's row -->
|
||||
<div style="display: flex; align-items: center; gap: 16px;">
|
||||
<img src="../assets/logo/uni-ned-logo.png" alt="NED University logo" style="width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;" />
|
||||
<img src="../assets/introduction/Shayan/uni-ned-logo.png" alt="NED University logo" style="width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;" />
|
||||
<div style="text-align: left;">
|
||||
<div style="font-size: 0.98rem; font-weight: 600; color: #1a1a1a; line-height: 1.3;">Bachelor’s in Computer Information Systems</div>
|
||||
<div style="font-size: 0.87rem; color: #666; margin-top: 2px;">NED University — 2014</div>
|
||||
@@ -1517,10 +1545,13 @@ This is a TodoApp with a FastAPI backend and React frontend.
|
||||
<p style="margin-top: 40px; font-size: 0.95rem; color: #aaa;">github.com/shanraisshan/claude-code-best-practice</p>
|
||||
</div>
|
||||
|
||||
<!-- Header Logo -->
|
||||
<!-- Corner mascots (global, appear on every slide) -->
|
||||
<div class="header-logo">
|
||||
<img src="../../!/claude-jumping.svg" alt="Claude Code mascot" />
|
||||
</div>
|
||||
<div class="header-logo right">
|
||||
<img src="../../!/gemini-jumping.svg" alt="Gemini CLI mascot" />
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<button class="nav-btn" id="prevBtn" onclick="prevSlide()">←</button>
|
||||
|
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 177 KiB |
|
Before Width: | Height: | Size: 544 KiB After Width: | Height: | Size: 544 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
@@ -0,0 +1,25 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="20" role="img" aria-label="Gemini">
|
||||
<title>Gemini</title>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#4285F4"/>
|
||||
<stop offset="0.5" stop-color="#7B68EE"/>
|
||||
<stop offset="1" stop-color="#EA4335"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s" x2="0" y2="100%">
|
||||
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
|
||||
<stop offset="1" stop-opacity=".1"/>
|
||||
</linearGradient>
|
||||
<clipPath id="r">
|
||||
<rect width="64" height="20" rx="3" fill="#fff"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#r)">
|
||||
<rect width="64" height="20" fill="url(#g)"/>
|
||||
<rect width="64" height="20" fill="url(#s)"/>
|
||||
</g>
|
||||
<g transform="translate(2, 2) scale(0.0625)">
|
||||
<path d="M 128 0 C 128 64 160 96 256 128 C 160 160 128 192 128 256 C 128 192 96 160 0 128 C 96 96 128 64 128 0 Z" fill="#fff"/>
|
||||
</g>
|
||||
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="11">
|
||||
<text x="40" y="14">Gemini</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user