init

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.deploy_git
+.github
+db.json
+.deploy_git

_config.yml

@@ -0,0 +1,110 @@
+# Hexo Configuration
+## Docs: https://hexo.io/docs/configuration.html
+## Source: https://github.com/hexojs/hexo/
+
+# Site
+title: Wei's Blog
+subtitle: "NaN==Not a Nerd"
+description: ""
+keywords:
+author: Wei
+language: zh-TW
+timezone: ""
+
+# URL
+## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
+url: http://example.com
+permalink: :year/:month/:day/:title/
+permalink_defaults:
+pretty_urls:
+  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
+  trailing_html: true # Set to false to remove trailing '.html' from permalinks
+
+# Directory
+source_dir: source
+public_dir: public
+tag_dir: tags
+archive_dir: archives
+category_dir: categories
+code_dir: downloads/code
+i18n_dir: :lang
+skip_render:
+
+# Writing
+new_post_name: :title.md # File name of new posts
+default_layout: post
+titlecase: false # Transform title into titlecase
+external_link:
+  enable: true # Open external links in new tab
+  field: site # Apply to the whole site
+  exclude: ''
+filename_case: 0
+render_drafts: false
+post_asset_folder: true
+relative_link: false
+future: true
+syntax_highlighter: ''
+highlight:
+  enable: false
+  line_number: true
+  auto_detect: true
+  tab_replace: ' ' 
+  wrap: true
+  hljs: true
+prismjs:
+  enable: false
+  preprocess: false
+  line_number: true
+  tab_replace: ''
+
+# Home page setting
+# path: Root path for your blogs index page. (default = '')
+# per_page: Posts displayed per page. (0 = disable pagination)
+# order_by: Posts order. (Order by date descending by default)
+index_generator:
+  path: ''
+  per_page: 10
+  order_by: -date
+
+# Category & Tag
+default_category: uncategorized
+category_map:
+tag_map:
+
+# Metadata elements
+## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+meta_generator: true
+
+# Date / Time format
+## Hexo uses Moment.js to parse and display date
+## You can customize the date format as defined in
+## http://momentjs.com/docs/#/displaying/format/
+date_format: YYYY-MM-DD
+time_format: HH:mm:ss
+## updated_option supports 'mtime', 'date', 'empty'
+updated_option: 'mtime'
+
+# Pagination
+## Set per_page to 0 to disable pagination
+per_page: 10
+pagination_dir: page
+
+# Include / Exclude file(s)
+## include:/exclude: options only apply to the 'source/' folder
+include:
+exclude:
+ignore:
+
+# Extensions
+## Plugins: https://hexo.io/plugins/
+## Themes: https://hexo.io/themes/
+#theme: landscape
+theme: hexo-theme-Claudia
+
+# Deployment
+## Docs: https://hexo.io/docs/one-command-deployment
+deploy:
+- type: git # 使用 Git 部署
+  repo: https://github.com/aliceric27/aliceric27.github.io.git # 你的儲存庫 clone
+  branch: gh-pages # 儲存庫分支
+  message: "Update blog - 2024-11-08 15:24:07" # Commit 訊息

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "hexo-site",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "hexo generate",
+    "clean": "hexo clean",
+    "deploy": "hexo deploy",
+    "server": "hexo server"
+  },
+  "hexo": {
+    "version": ""
+  },
+  "dependencies": {
+    "hexo": "^7.3.0",
+    "hexo-generator-archive": "^2.0.0",
+    "hexo-generator-category": "^2.0.0",
+    "hexo-generator-index": "^4.0.0",
+    "hexo-generator-tag": "^2.0.0",
+    "hexo-renderer-ejs": "^2.0.0",
+    "hexo-renderer-marked": "^6.3.0",
+    "hexo-renderer-stylus": "^3.0.1",
+    "hexo-server": "^3.0.0",
+    "hexo-theme-landscape": "^1.0.0"
+  }
+}

scaffolds/draft.md

@@ -0,0 +1,4 @@
+---
+title: {{ title }}
+tags:
+---

scaffolds/page.md

@@ -0,0 +1,4 @@
+---
+title: {{ title }}
+date: {{ date }}
+---

scaffolds/post.md

@@ -0,0 +1,5 @@
+---
+title: {{ title }}
+date: {{ date }}
+tags:
+---

source/_posts/2023-01-31-自傳履歷.md

@@ -0,0 +1,203 @@
+---
+title: 自傳履歷
+date: 2023-01-31 11:45:08
+tags:
+  - [Job]
+categories:
+  - [Job]
+---
+
+
+
+嘗試在 Blog 上更新履歷，如果有錯誤的話也比較好即時修正。
+
+<!-- more -->
+
+## 學歷
+
+**樹德科技大學 - 資訊管理系 2013/09-2017/09**
+
+## 經歷
+
+### 微樂應用科技有限公司 2024.3 - 
+#### 前端工程師
+
+- 前端頁面切版、調整
+- 後端 API 串接測試
+- Vue.js 模板撰寫
+
+
+### 日易人工智慧有限公司 2023.10 - 2024.02
+#### 前端工程師
+
+- 前端切版
+- 前端 Nuxt 框架規劃
+- 前端 API 資料串接
+- Socket 資料串接
+
+### 冠宇數位科技股份有限公司 2023.03 - 2023.08
+#### 前端工程師
+
+- 後臺前端維護建置 Typescript + Vue +  Element UI 架構
+- 遊戲官網獨立架設並串接 API 採 Vue 3 + Vite 打包工具
+- 前端切版與規劃，配合SCSS框架工具與Tailwind進行開發
+
+
+### 資策會-全端工程師就業養成班 2022.10 - 2023.02
+
+#### 培訓技能
+
+- Html、CSS ，前端頁面切版設計
+- JavaScript，網站與使用者互動之程式語言
+- PHP，撰寫簡易後端 API
+- MySQL， 關聯式資料庫架設、 CRUD 指令取得資料
+- ReactJS，前端網頁框架
+
+### 本能娛樂工作室 2019.10-2022.08
+
+#### 遊戲企劃
+
+- 規劃 Android 遊戲流程與計畫，協調工程師修改至符合規格
+- 撰寫遊戲文件、測試遊戲內容、協助處理上架與用戶反饋
+- 公司硬體設備維修與維護
+
+## 簡介
+
+Dear Reviewer， 你好！ 黃育緯，1994/12/15，畢業於國立岡山高中與樹德科技大學-資訊管理系，具企劃及程式設計之技術。
+
+大學製作的畢業專題為 Wordpress 電商網站，使用 WooCommerce 套件製作，出社會後輾轉做了許多的行業，曾在3C 賣場銷售過，也曾經到科技廠擔任 QC 品管人員，有幸見到不同的人事物，也讓我對人生未來的價值觀有一定的影響，最後落腳的工作是在台中，在這二年多的學習，讓我對程式開發流程有滿深的影響，也參與了大小專案的開發過程。
+
+離開上一份工作並尋找轉職的原因是我評估下自己具備的條件，讓我不滿足止步於企劃與溝通，現階段我的追求是"至少讓自己"不要裹足不前，進而在公司期滿後選擇進修前後端技術。
+
+在進修學習的過程中不斷的學到新技術的同時，可以感受到自己在學習上的優勢，以往曾經自行架設遊戲伺服器擅長蒐集資料與閱讀英文文件的習慣讓我尋找資料與解決問題的的經驗要相較其他同學多，在上一份工作團隊使用的技術在我學習的過程中漸漸明白當初與同事溝通之間所使用的工具實際上是如何運作的。
+
+很慶幸自己是在資訊發達的年代出生，運用網路上的資訊解決問題也改變了每個人的生活習慣，對於計算機網路的喜愛也讓我在轉職學習的過程中漸漸找到成就感與樂趣，使用工具不斷解決現有問題就是資訊發展得意義，對於求職路上也期許自己可以不斷精進自己的技能，對於每份工作盡力做到完美。
+
+
+《工作經歷》
+
+**本能工作室 (2019.10-2022.8)**
+
+在本能工作室初期，主要擔任助理工程師一職，負責協同工程師業務需求與團隊人事招募等相關工作，並協助處理完成的程式功能之測試，而團隊人數招募漸滿後被指派到遊戲團隊擔任遊戲企劃，團隊內主要開發 Android App 遊戲，而我在這個職務內負責的內容為企劃發想、溝通協調需求、協助 App 上架等相關事宜，最後遊戲開發完成也有成功上架到 Google Store 上，最後離開原因為公司縮編。
+
+------
+
+**資策會全端班(2022.8-2023.2)**
+
+在上一份工作中，因考量未來職涯發展，故報名資策會全端班級進修技能，在此期間學習到了前端基本切版的技能、與前端 Javascript 程式邏輯撰寫、並且學習了後端語言 PHP ，MySQL資料庫等後端應用，在學習後期也學習了 React 框架，最終和同學組成團隊完成一項專案，而我在這個專案內所負則的部分為購物車的功能頁面包含前端切版與後端資料庫串接等，而我也閱讀了綠界相關 API 文件使用 PHP 完成測試的金流串接。
+
+------
+
+**冠宇數位科技股份有限公司 (2023.3-2023.8)**
+
+冠宇是我的第一份工程師工作，擔任的是前端工程師，在入職初期主要負責後端的相關功能維護與修復功能，在這時碰到的新技術為 Vue 框架、Typescript 等在學習時沒有碰到的相關技術，在下班時會抽空查閱相關文件與其使用方式，在一個禮拜內就上手專案與相關功能新增維護。
+
+在職期間後期，被指派為主導開發 Startluo 遊戲官方網站的前端主工程師，專案前端均由我架構、切版、製作，架構時我採用的是 SPA 方式與 Vue 3 和 Vite 建構工具打包，也學習使用新的 CSS 框架 Tailwind 等相關技術，在架構與製作時一邊使用與學習，主要與美術配合負責前端頁面切版，與後端工程師協同 API 等相關功能串接，其中包含會員功能使用 Firebase OAuth 驗證、金流則與 MyCard 等第三方金流做串接。
+
+最後離開原因為主動離職。
+
+------
+
+**日易人工智慧有限公司 (2023.10-2024.2)**
+
+在日易主要擔任前端工程師一職，負責開發後台介面，主要協同美術進行切版與後端工程師進行 API 資料串接．因開發後台沒有一個主要架構，所以在職的前端開發專案也是由我負責架構、撰寫功能，我在專案中使用較新的 Nuxt 框架，採用 Vue 撰寫，在架構與撰寫中學習與使用，而後碰到新的串接函式庫 socket.io 並學習 socket 相關功能串接。
+
+最後離職原因為主動離職。
+
+------
+
+**微樂應用科技有限公司 (2024.3-)**
+
+目前在職中主要專精 JS 語言開發，與後端 API 串接，VueJs前端模板撰寫
+
+------
+
+《自我期許》
+
+在每一份工作中，我都期待接受新的挑戰，也不會排斥使用新的技術以及學習新的技術，最害怕的是職場太安逸，讓人沒有進步的空間與動力，期許自己可以在每份工作中都可以有一點收穫與回饋，不斷成長精進自己。
+
+## 電商網站 Lu-Shopping - 大學期末專題
+
+使用 Wordpress 搭配 WooCommerce 建置
+
+  <img src="https://i.imgur.com/dW00fox.png" alt="DSC_0253" style="zoom: 40%;"/>
+
+  <img src="https://i.imgur.com/9uOOeFf.jpg" alt="DSC_0254" style="zoom:30%;" />
+
+## 氣炸廚房 - 資策會全端培訓專題
+
+### 緣由
+
+因為平常有運動與飲食控制的習慣，也鑑於此餐廳的形象網站較為簡陋，因此假想此餐廳為用戶，並提出改進形象網站需求而製作此專題。
+
+### 摘要
+
+本專題使用原生 HTML、CSS、Javascript 製作而成。
+使用套件有包含 Chart.js、Swiper 等
+使用 Git 作為版控、並部署到 Github Pages 上
+
+![image-20230205164022292](https://i.imgur.com/OoF0QKA.png)
+
+[網站連結](https://aliceric27.github.io/littleweb/)
+
+## SelectGo - 資策會全端培訓專題
+
+### 緣由
+
+因日本代購盛行，且比較沒有冷門的商品代購，為此而開發的網站，每個用戶可以根據自己需求到許願池發佈文章並且加入購物車購買。
+
+### 摘要
+
+本專題使用原生 React 前端框架與 HTML、CSS、Javascript、製作而成，後端採用 PHP 與 MySQL 實現 API 資料抓取與處理。
+
+我負責得部分為購物車與結帳頁面製作，並串接第三方金流 API ，完成站內購買。
+
+#### 特色功能
+
+- 從資料庫使用 API 獲得用戶購物車資料
+- 前端 UX 設計 ，讓使用者精確知道金額異動
+- 使用匯率 API 獲取即時匯率，並提供快速轉換金額功能
+- 在購物車新增、移除商品資料
+- 折扣碼輸入與改變金額
+- 送出表單錯誤判定
+- 串接第三方金流送出表單資料，並跳轉回網站取得成功或失敗付款提示
+
+[Source](https://aliceric27.github.io/littleweb/)
+
+[演示影片](https://www.youtube.com/watch?v=ud2W5ibur4U)
+
+<img src="https://i.imgur.com/KINoMrc.png" alt="image-20230205174410740" style="zoom:50%;" />
+
+
+## Startluo 官網 - 冠宇數位科技股份有限公司
+
+### 摘要
+
+主要替遊戲設計一個網站、該網站包含排行榜、用戶資料、儲值金額等功能
+
+<img src="https://i.imgur.com/ZTfMxMu.png" alt="image-20230205174410740" style="zoom:100%;" />
+
+- 與美術協同Figma網站規劃切版、功能撰寫
+- 釐清PM與用戶需求並完成、新增功能
+- 採用Vue3撰寫功能、Vite打包工具、Pinia狀態管理
+- 採用SCSS、Tailwind框架
+- 第三方Firebase登入驗證
+- Axios做API後端資料串接與整理
+
+## 中央控制系統 - 日易人工智慧有限公司
+
+### 摘要
+
+飯店內的中央控制系統，可於頁面上查看設備資訊，並控制設備開關
+
+<img src="https://i.imgur.com/6RTpJr4.png" alt="image-20230205174410740" style="zoom:100%;" />
+
+- Nuxt3、Vue3 框架撰寫
+- Figma 與美術對稿切版
+- Socket.io 套件串接 Socket 協議資料
+- Tailwind SCSS 等前端開發開套件進行樣式切版
+
+[Source](https://github.com/aliceric27/FloramosHotel)
+**為公司隱私設為私人專案，可於線下展示**
+
+------

source/_posts/2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容.md

@@ -0,0 +1,32 @@
+---
+title: 使用 Vue 設定偽元素 content
+date: 2024-09-03 11:49:30
+tags:
+  - [Front-end]
+categories:
+  - [Front-end]
+---
+
+
+Vue 從模板傳值到 CSS 偽元素 content 內容
+
+<!-- more -->
+------
+## 使用 Attr()
+
+首先在模板定義`data-*`參數，並使用 Vue 模板傳入對應值
+```html
+<div class="dh-header" :data-title="data.title"></div>
+```
+
+然後在 CSS 中使用`attr()`引入自訂的變數
+```css
+.dh-header:before {
+	content:attr(data-title);
+	display:block;
+}
+```
+
+------
+
+[什麼是 HTML 5 中的資料屬性（data-* attribute）](https://pjchender.dev/html/html-data-attribute/)