我個人網站上的小東西

最近，我給了我的個人網站刷新 - 一個有趣的獨奏項目！這是我的創意渠道，是自我表達和實驗的空間。這不是一個完整的大修，更像是一件新鮮的油漆。讓我們探索我使用的一些有趣的技術。

用Hoefler字體進行排版

Inkwell字體家庭很棒！我喜歡混合體重，襯線，sans-serifs和資本化風格。當我在以前的設計中使用Inkwell時，我覺得這對於博客文章Body Text來說太有趣了。我的寫作風格是隨意的，但並非總是如此，而且Inkwell的Jovial性質並不適合更嚴肅的話題。以前，我將其與理想的sans配對，但是組合卻失敗了。

這次，我選擇了惠特尼進行身體副本。它保持輕鬆的感覺，但可以與更簡單的內容配合使用。

用Sass造型

斑馬串的表很簡單：

 tr：nth-​​child（偶）{
  背景色：var（ -  color-1）;
}
tr：nth-​​child（奇數）{
  背景色：var（ -  color-2）;
}

但是，騎自行車四種顏色呢？ :nth-child選擇器，帶有偏移，整齊地處理此操作。這是列表項目的一個示例：

 li {
  ＆：nth-​​child（4n）a {
    顏色：$藍色；
  }
  ＆：nth-​​child（4n 1）a {
    顏色：$黃色；
  }
  ＆：nth-​​child（4n 2）a {
    顏色：$紅色；
  }
  ＆：nth-​​child（4n 3）a {
    顏色：$紫色；
  }
}

這種方法創建了顏色的Blogroll。由於Sass在項目中的存在，我使用了Sass； Codekit毫不費力地處理了彙編。是的，Blogrolls再次很酷！

有效的YouTube嵌入

我採用了巧妙的點擊加載YouTube技術。我使用靜態圖像佔位符，而不是嵌入完整的YouTube IFRAME，它加載了許多資源。這在維持類似的用戶體驗的同時大大提高了性能。

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'>▶</a>" title="黑闇騎士升起：出了什麼問題？ -  WISECRACK版" width="560"></iframe>

自定義帖子類型和數據結構

我是結構化數據的堅定擁護者。在WordPress中，這通常涉及自定義帖子類型與諸如高級自定義字段之類的插件結合使用。這允許靈活的數據處理並簡化未來的站點修改。

動態生物發生器

我的簡歷部分並不復雜：我創建了18<div>元素（3個長度<em>2種樣式</em>3種代碼類型），並使用JavaScript在它們之間切換。基於用戶選擇計算類字符串，在隱藏其他人時揭示相應的生物。<pre class="brush:php;toolbar:false"> $（“。生物選擇輸入”）。 on（“ change”，function（）{ var Length Length Class =“ .bio-” $（“輸入[name = length]：checked''）。attr（“ id”）; var styleclass =“ .bio-” $（“輸入[name = style]：checked”）。 attr（“ id”）; var codeclass =“ .bio-” $（“輸入[name = code]：checked'）。attr（“ id”）; var selector =長度流式式CodeClass; $（“。bio”）。 hide（）; $（selector）.show（）; }）;</pre> <p>我之所以使用jQuery，是因為它已經集成到網站中（以及Fitvids）。未來的重寫可能涉及刪除jQuery並簡化生物選項。</p> <h3 id="ztext-js和動畫標題"> ztext.js和動畫標題</h3> <p>標題使用ZTEXT.JS，增加了Webby Flair的觸感。這種動畫水平可能不適合高流量站點，但是它對訪問者頻率較低的站點效果很好。</p> <h3 id="SVG背景和頁腳效果"> SVG背景和頁腳效果</h3> <p>我利用更新的SVG背景站點來創建背景。我選擇了<code>background-attachment: fixed ，並在桌面上包括滑出的頁腳效果。頁腳效應可能需要完善；在動態背景下，它更具影響力。

與過濾器一致的鏈接樣式

不同的部分使用不同的高光顏色，我將部分鏈接鏈接到它們各自的顏色。儘管這可能是值得商bat的（通常優選一致的鏈接顏色），但我發現它在視覺上很吸引人。 filter: brightness(120%);技巧可確保持續的懸停和聚焦樣式中的所有顏色，從而簡化樣式。

答：焦點，丁頓：焦點，
答：懸停，.button：Hover {
  過濾器：亮度（120％）；
}

這是一個相對快速的更新，主要受到Codepen挑戰的啟發。但是，與往常一樣，一個小變化導致了另一個變化，我最終進行了比最初計劃的更大的修改！