Merge pull request #8 from mozumasu/feature/qiita-bash-update-claude-code

feat: Qiita Bash用プレゼンテーション - Claude Codeテーマとネオン効果の追加

Author: mozumasu

slides.md

@@ -19,17 +19,20 @@ mdc: true
 ---
 
 <div class="text-center">
-  <div class="font-handwritten-jp-casual text-2xl mb-2">CLI資産を活かせ !</div>
+  <div class="font-handwritten-jp-casual neon-glow-purple text-2xl mb-2">CLI資産を活かせ !</div>
   <div>
     <span class="neon-glow-orange flicker text-7xl font-bold">Claude Code</span>
-    <span class="font-handwritten-jp-casual text-3xl">で整える</span>
+    <span class="font-handwritten-jp-casual neon-glow-purple text-3xl">で整える</span>
   </div>
-  <div class="font-handwritten-jp-cassual text-4xl mt-6">アウトプットワークフロー</div>
+  <div class="font-handwritten-jp-cassual neon-glow-pink text-5xl mt-5">アウトプットワークフロー</div>
 </div>
 
-<p class="opacity-35">もずます</p>
+<div class="font-handwritten-jp-casual neon-glow-matrix-colored flicker-slow text-4xl absolute bottom-25 left-175 transform -rotate-15">2025/09/08<br> Qiita Bash</div>
 
-<div class="font-handwritten-jp-casual text-green-400 text-5xl opacity-85 absolute bottom-25 left-170 transform -rotate-15">2025/09/08 Qiita Bash</div>
+<br>
+<div class="opacity-70 mt-4">
+mozumasu
+</div>
 
 ---
 layout: center
@@ -118,7 +121,7 @@ layout: two-cols-header
 ## 便利ショートカットキー
 
 - ドキュメント: [Interactive Mode](https://docs.anthropic.com/ja/docs/claude-code/interactive-mode)
-- `?` を入力すると追加のショートカットが表示される
+- `?` でショートカット表示
   - **undo** - 直前の操作を取り消し
   - **suspend** - セッションを一時停止
 
@@ -201,11 +204,26 @@ transition: slide-up
 layout: center
 ---
 
-# - <ruby>WezTerm<rt>ターミナル</rt></ruby>も<ruby>Neovim<rt>エディタ</rt></ruby>もLuaで設定できる
-
-<br>
-
-# - コマンドの知識が活かせる
+<div class="text-center space-y-8">
+  <div class="flex items-center justify-center gap-4">
+    <div class="text-4xl neon-glow-cyan">
+      <ruby>WezTerm<rt class="text-xs opacity-60">ターミナル</rt></ruby>
+    </div>
+    <span class="text-2xl">も</span>
+    <div class="text-4xl neon-glow-purple">
+      <ruby>Neovim<rt class="text-xs opacity-60">エディタ</rt></ruby>
+    </div>
+    <span class="text-2xl">も</span>
+    <div class="text-4xl neon-glow-orange">
+      <ruby>Lua<rt class="text-xs opacity-60">プログラミング言語</rt></ruby>
+    </div>
+    <span class="text-2xl">で設定できる</span>
+  </div>
+  
+  <div class="text-4xl mt-12 neon-glow-matrix flicker-slow">
+    CLIの知識が活かせる
+  </div>
+</div>
 
 ---
 layout: center
@@ -637,10 +655,6 @@ class: text-center
 
 # ご清聴ありがとうございました
 
-<div class="mt-10 text-2xl opacity-70">
-  <p>@mozumasu</p>
-</div>
-
 <div class="mt-10">
   <div class="text-xl neon-glow-cyan">
     CLIで快適なアウトプットライフを！

slidev-theme-neon/components/NeonBackground.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 }>()
 
 // 現在のNeonテーマ
-const currentNeonTheme = ref<NeonTheme>('default')
+const currentNeonTheme = ref<NeonTheme>('synthwave')
 const neonConfig = computed(() => NEON_THEMES[currentNeonTheme.value])
 
 // ポリゴン生成用の変数

slidev-theme-neon/components/SelfIntroduction.vue

@@ -324,15 +324,17 @@ onMounted(() => {
   font-size: 1.35rem;
   font-weight: 500;
   font-family: "Outfit", "Inter", sans-serif;
-  color: rgba(255, 255, 255, 0.7);
+  color: #fff;
   letter-spacing: 0.08em;
   line-height: 1;
   opacity: 1;
   margin-top: 0.5rem;
   position: relative;
   text-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.15),
-    0 2px 4px rgba(0, 0, 0, 0.1);
+    0 0 1px #0ff,
+    0 0 15px #0ff,
+    0 0 8px #0ff,
+    0 0 25px #0ff;
   backdrop-filter: blur(2px);
 }
 
@@ -373,6 +375,20 @@ onMounted(() => {
 .role-text {
   font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
   letter-spacing: -0.02em;
+  color: #fff;
+  text-shadow:
+    0 0 1px #ffff00,
+    0 0 10px #ffff00,
+    0 0 5px #ffff00;
+}
+
+.theme-neon .role-text {
+  color: #fff;
+  text-shadow:
+    0 0 2px #ff10f0,
+    0 0 10px #ff10f0,
+    0 0 20px #ff10f0,
+    0 0 30px #ff10f0;
 }
 
 /* Tools Section */
@@ -387,10 +403,13 @@ onMounted(() => {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.2em;
-  color: rgba(255, 255, 255, 0.5);
+  color: #fff;
   opacity: 1;
   margin: 0 0 0.4rem 0;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  text-shadow:
+    0 0 1px #ff10f0,
+    0 0 10px #ff10f0,
+    0 0 5px #ff10f0;
 }
 
 .tools-badges {
@@ -446,14 +465,25 @@ onMounted(() => {
 }
 
 .tool-name {
-  color: rgba(255, 255, 255, 0.9);
+  color: #fff;
   font-weight: 600;
   font-family: "Outfit", "Inter", "Hiragino Sans", sans-serif;
   font-size: 0.8rem;
   letter-spacing: 0.03em;
   position: relative;
   z-index: 1;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  text-shadow:
+    0 0 1px #8b5cf6,
+    0 0 10px #8b5cf6,
+    0 0 5px #a78bfa;
+}
+
+.theme-neon .tool-name {
+  text-shadow:
+    0 0 2px #0ff,
+    0 0 15px #0ff,
+    0 0 8px #0ff,
+    0 0 25px #0ff;
 }
 
 /* Achievement Section */
@@ -494,9 +524,12 @@ onMounted(() => {
   font-family: "Outfit", sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  color: rgba(255, 255, 255, 0.55);
+  color: #fff;
   opacity: 1;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  text-shadow:
+    0 0 1px #00ff41,
+    0 0 10px #00ff41,
+    0 0 5px #39ff14;
 }
 
 .achievement-text {
@@ -508,6 +541,14 @@ onMounted(() => {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
+.theme-neon .achievement-text {
+  color: #fff;
+  text-shadow:
+    0 0 2px rgba(255, 215, 0, 0.8),
+    0 0 10px rgba(255, 215, 0, 0.5),
+    0 0 15px rgba(255, 215, 0, 0.3);
+}
+
 /* Neon Theme */
 .theme-neon {
   --bg-color: rgba(0, 0, 0, 0.3);
@@ -552,27 +593,7 @@ onMounted(() => {
   /* ホバー効果を無効化 */
 }
 
-.theme-neon .avatar-name {
-  color: rgba(200, 200, 200, 0.85);
-  text-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.3),
-    0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.theme-neon .section-title,
-.theme-neon .achievement-label {
-  color: rgba(180, 180, 180, 0.6);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.theme-neon .role-content,
-.theme-neon .achievement-text {
-  color: rgba(220, 220, 220, 0.85);
-}
-
-.theme-neon .tool-name {
-  color: rgba(230, 230, 230, 0.9);
-}
+/* ネオンテーマではオーバーライドを削除（上記のネオン効果を維持） */
 
 .theme-ocean {
   --bg-color: rgba(240, 248, 255, 0.3);

slidev-theme-neon/components/ThemeIndicator.vue

@@ -4,7 +4,7 @@ import type { NeonTheme } from "../composables/useNeonThemes";
 
 // プロパティ
 const props = defineProps<{
-  currentTheme: "neon";
+  currentTheme: "synthwave" | "neon";
   neonTheme?: NeonTheme;
 }>();
 
@@ -15,27 +15,26 @@ const emit = defineEmits<{
 
 // 算出プロパティ
 const themeIcon = computed(() => "✨");
-const themeVariant = computed(() => {
-  if (props.neonTheme) {
-    return props.neonTheme.toUpperCase();
-  }
-  return "";
+
+// 現在のテーマ名を取得
+const displayThemeName = computed(() => {
+  // neonThemeが指定されていればそれを使用、なければsynthwave
+  const theme = props.neonTheme || 'synthwave';
+  return theme.toUpperCase();
 });
 
 const hintText = computed(() => {
-  return "Press W for neon style";
+  return "Press W to switch theme";
 });
 </script>
 
 <template>
   <div class="theme-indicator">
     <div
-      class="theme-badge neon"
+      :class="['theme-badge', neonTheme || 'synthwave']"
       @click="$emit('switchTheme')"
     >
-      {{ themeIcon }}
-      {{ currentTheme.toUpperCase() }}
-      <span v-if="themeVariant" class="theme-variant"> ({{ themeVariant }}) </span>
+      {{ themeIcon }} {{ displayThemeName }}
     </div>
     <div class="theme-hint">{{ hintText }}</div>
   </div>
@@ -72,6 +71,21 @@ const hintText = computed(() => {
   box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
 }
 
+.theme-badge.synthwave {
+  background: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
+  box-shadow: 0 0 20px rgba(255, 0, 110, 0.7);
+}
+
+.theme-badge.cyberpunk {
+  background: linear-gradient(135deg, #ff0080 0%, #00ff88 100%);
+  box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
+}
+
+.theme-badge.default {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
+}
+
 .theme-badge:hover {
   transform: scale(1.05);
   box-shadow: 0 0 20px currentColor;

slidev-theme-neon/composables/useNeonThemes.ts

@@ -99,7 +99,7 @@ export const NEON_THEMES: Record<NeonTheme, NeonSettings> = {
 
 // 次のNeonテーマを取得
 export const getNextNeonTheme = (current: NeonTheme): NeonTheme => {
-  const themes: NeonTheme[] = ["default", "cyberpunk", "synthwave"];
+  const themes: NeonTheme[] = ["synthwave", "cyberpunk", "default"];
   const currentIndex = themes.indexOf(current);
   const nextIndex = (currentIndex + 1) % themes.length;
   return themes[nextIndex];

slidev-theme-neon/global-bottom.vue

@@ -5,11 +5,11 @@ import ThemeIndicator from "./components/ThemeIndicator.vue";
 
 // テーマプロパティ
 const props = defineProps<{
-  theme?: "neon";
+  theme?: "synthwave" | "neon";
 }>();
 
 // 状態
-const currentTheme = ref(props.theme || "neon");
+const currentTheme = ref(props.theme || "synthwave");
 const currentSlideNo = ref(1);
 
 // コンポーネント参照
@@ -70,6 +70,6 @@ onMounted(() => {
   <ThemeIndicator
     :current-theme="currentTheme"
     :neon-theme="getCurrentNeonTheme()"
-    @switch-theme="() => {}"
+    @switch-theme="() => neonRef?.switchNeonTheme()"
   />
 </template>