規劃 Intro Section 作為網站進入後的第一個重點區塊。此區塊主要透過簡短的自我介紹與背景故事，快速讓使用者理解我是誰、我的專業定位與核心價值。

1. 一句話定位（Slogan）

把你最強的特色濃縮成一句話，馬上讓人知道「你是誰、做什麼」。ex: 為什麼選這份工作？

2. 問題驅動（Problem → Role）

從「你要解決的問題」切入，帶出你是誰。ex: 你會什麼專業技能？

3. 故事片段（Why This Path）

用一個小轉折或動機故事，讓人覺得你有溫度。ex: 你重視什麼？

4. 結合願景（Now → Future）

不只講現在在做什麼，也暗示未來方向。ex: 你未來想做什麼？

開始建立元件

把 index.vue 中的區塊都用元件的方式建立起來，這樣之後如果有不同頁面也需要用到相似元件，就可以引用元件來使用。我在 /components 中建立一個新檔案叫 intro.vue。

// components/intro.vue  起始都長這樣

// 畫面部分
<template>
</template>

// 邏輯部分
<script setup> 
</script>

// 樣式部分
// lang="scss" → 表示使用 SCSS 預處理器，可以用巢狀語法、變數等。
// scoped → 樣式只會作用在這個元件，不會影響到全域或其他元件（Vue 會自動加上 data 屬性做隔離）
<style lang="scss" scoped>
</style>

UIUX → FrontEnd

手機版需特別注意字級調整：電腦版標題為 48px，手機版應縮小為 40px，以確保在小螢幕上仍具可讀性與良好排版。（其實也沒有固定要是多少px，依眼睛舒服為主）

// intro.vue
<div class="text-brown"
    **:class**="**isDesktop** ? 'text-h1-semi-bold': 'text-h2-semi-bold'">
    Hi, 我的名字
</div>

// 要記得引用，且 import 和 export 的名稱要一樣
import useInnerWidth from '~/composables/useInnerWidth';
const { isDesktop } = useInnerWidth();

isDesktop 哪來的?

我建立了一個 /composables/useInnerWidth.js ，在此監聽螢幕裝置大小，來做 class 的置換。依據螢幕裝置大小，使得字體有不同大小的設定。

//composables/useInnerWidth.js

import {ref, onMounted, onUnmounted} from 'vue';

export default function UseInnerWidth() {
  const screenWidth = ref(0);
  const isDesktop = ref(true);
  const isPad = ref(true);
  const isMobile = ref(true);

  // onMounted
  onMounted(() => {
    window.addEventListener('resize', resizeWindow);
    resizeWindow();
  });

  // onUnmounted
  onUnmounted(() => {
    window.removeEventListener('resize', resizeWindow);
  });

  // Method
  const resizeWindow = () => {
    if (typeof window !== 'undefined') {
      screenWidth.value = window.innerWidth;
      isDesktop.value = screenWidth.value > 960;
      isPad.value = screenWidth.value <= 960 && screenWidth.value > 600;
      isMobile.value = screenWidth.value <= 600;
    }
  };

  return {
    screenWidth,
    isDesktop,
    isPad,
    isMobile,
  };
}

在桌機版設計中，使用者的視線通常遵循 F 型或 Z 型的排版規律，因此自我介紹與圖片適合左右並置，以橫向的閱讀動線為主。

在手機版，由於使用者的瀏覽習慣是 縱向滑動，內容自然會轉換為直向排列。但這並不代表單純「左右改直向」就完成，仍需考量資訊層級的優先順序。對於此情境而言，文字（如自我介紹）是核心訊息，應優先於圖片呈現，確保第一時間能獲得重要資訊。

在設計網頁時，都要把這些小細節考慮進去，並且記下原因交付給工程師。