路由404notfound

因為發現自己的網站
如果直接在網址列輸入設定的路由，會顯示404notfound。(現在點進去正常，我已經修好了)
https://funnywebsitegoodapi.vercel.app/meme
https://funnywebsitegoodapi.vercel.app/joke
因此這次叫github copilot幫我修改了一下，總之就是在根目錄添加一個vercel.json檔案(PS:我的部署是透過github、vercel)，定義URL重寫規則，這樣路由404notfound的問題就修復了，添加的內容要像下面這樣。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

下方是github copilot對這份json的解釋

說明
rewrites: 這是一個重寫規則的列表。重寫規則允許你將一個 URL 重寫為另一個 URL，而不改變瀏覽器中的顯示 URL。
source: 這是重寫規則的來源模式。"/(.)" 表示匹配所有路徑。(.) 是一個正則表達式，表示任意字符（包括空字符）的任意次數。
destination: 這是重寫規則的目標路徑。"/" 表示所有匹配 source 的路徑都將被重寫為根路徑 /。

實際效果
這段配置的效果是，無論用戶訪問網站的哪個路徑，都會被重寫到根路徑 /。例如：
訪問 /about 會被重寫為 /
訪問 /contact 會被重寫為 /
訪問 /anything/else 也會被重寫為 /
這種配置通常用於單頁應用（SPA），確保所有路徑都由單個入口點（通常是 index.html）處理，然後由前端路由來決定顯示的內容。

readme添加一些說明，幫助我之後推上github。

發現自己因為不太習慣git的指令，所以我這次直接在readme加上說明，這樣以後自己要推上去github的時候，可以透過readme看指令，不用特別去背，用幾次之後對於指令的用法也比較熟悉。

貓咪+修改小細節

1. 想用一個icon，我又不太會畫畫，所以用了可以生成icon的工具Recraft，它可以透過prompt下指令，生成svg、jpg、png等等的檔案，目前還是免費的，還蠻方便，推薦大家使用。
   下面是我透過Recraft生成的icon
   
2. 首頁的部分，我也放了我家的貓咪，滿版的網站看起來比較時尚。
   
3. 在手機上有發現按鈕重疊，所以也請github copilot告訴我怎麼做RWD(Responsive Web Design=響應式網站設計)，就是要在不同的裝置都有良好的使用體驗，我是對我的css進行修改，套用@apply、@media語法，像下面這樣。(基本上都是我叫工具一直修的，所以看看就好，我想我哪一天就會用了XD)

/* Custom styles */
.responsive-text {
    @apply text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl;
}
  
.responsive-bg {
    background-color: white; /* 固定背景顏色 */
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 1rem; /* 間距 */
}

@media (min-width: 640px) {
    .button-container {
        flex-direction: row;
        gap: 1rem; /* 間距 */
    }
}

/* 針對不同螢幕尺寸的額外間距設置 */
@media (min-width: 768px) {
    .button-container {
        gap: 1.5rem; /* 中等螢幕間距 */
    }
}

@media (min-width: 1024px) {
    .button-container {
        gap: 2rem; /* 大螢幕間距 */
    }
}

@media (min-width: 1280px) {
    .button-container {
        gap: 2.5rem; /* 超大螢幕間距 */
    }
}

@media (min-width: 1536px) {
    .button-container {
        gap: 3rem; /* 超超大螢幕間距 */
    }
}

晚安

今天先這樣，已經晚上8點了，我中午的時候花了330台幣買了荒野亂鬥的高級通行卷，我想要先回家解任務，明天繼續。