Hello, I'm Cleo. welcome to my page.

H e l l o ,
I a m
C l e o .

index.html
script.js

About Me

Learn more, think more, do much more

Personal Photo

許君宜 (Cleo Hsu)

中央大學法語系畢業，熱愛語言與設計

我對前端有高度的熱忱，目前全職投入學習中。樂於學習鑽研技術，喜歡思考如何讓用戶有更好的使用者體驗，以及打造互動式網頁，立志要成為兼具設計思維與開發能力的前端工程師！目前正積極投入 JavaScript 及 Vue.js 的學習。

我畢業後於一家日商公司擔任業務助理，後來發現一陳不變的辦公室生活不是我想要的，我想過的是每天不斷挑戰的日子，於是毅然決然辭掉現在的工作，開啟了我的轉職之路。

在這四個月的學習過程中，每天都在不斷學習技術，超越昨天的自己。到現在已經能完成響應式及有互動效果的多頁式網頁，接下來就是精進自己的 JS 技術，配合前端框架，並讓自己能獨立完成一個 SPA。

My Skills

Keep practicing and stay hungry

Responsive

致力打造響應式網站，讓使用者在各個裝置下都能順暢使用

Bootstrap

利用 Bootstrap 框架讓開發更迅速，客製化提升質感

jQuery

結合 jQuery 打造吸睛的動畫效果，讓網頁呈現內容更豐富

Git

知道如何使用 Git 來達到版本控制，不讓專案毀於一旦

HTML
Excellent

  1. 了解 HTML5 的標籤語意及屬性
  2. 幫助 SEO 優化
  3. 導入格線系統
  4. 配合 Bootstrap 排版
CSS
Excellent

  1. 解決跨瀏覽器相容性
  2. CSS3 動畫效果
  3. 熟悉 CSS Grid 及 Flex
  4. 使用 Sass 讓開發更順暢
  5. Smacss、OOCSS 模組化設計
JavaScript
Good

  1. 操作 DOM 開發互動式功能
  2. Ajax 串接第三方 API
  3. 配合 CSS 讓網頁動起來
Ruby
Basic

了解基本迴圈、函式的操作

Gulp
Basic

前端開發自動化
能自訂專案的任務管理

Illustrator
Basic

能製作頁面所需的 icon

portfolio

Good, better, best. Never let it rest

#JS 實作

To Do List

#JS 實作

BMI 計算

#切版實作

Hextaurant

#BS 實作

後台版型練習

#BS 實作

電商網站版型練習

#VueJS 實作

GitHub API 練習

To Do List 預覽
JavaScript HTML CSS

To Do List

Demo GitHub

這是我接觸 JavaScript 後第一個做出來的作品
配合 localStorage 操作 DOM 的更新
除了基礎的 CRUD 操作之外，還有標籤分類及切換分類頁面的功能，並且可以記錄上次用過的標籤

學習成果：
  • 繪製 fireframe、擬出 User Story
  • DOM 操作方法
  • 結合 CSS 做出動畫效果
  • 如何解決問題的方法
BMI記錄 預覽
JavaScript HTML CSS Sass Responsive Grid System

BMI Calculator

Demo GitHub

六角學院 JS 最終作業之一
第一個嘗試用 Sass 開發的作品，遵循設計稿來排版
對 DOM 的操作更加熟悉，也學會如何動態產生樣式

學習成果：
  • Sass 的開發
  • 了解如何遵循設計稿切版
JavaScript HTML CSS Sass Responsive Grid System

Hextaurant

Demo GitHub

六角學院 RWD 最終作業
同樣是使用剛學成的 Sass 來做開發
運用模組化設計使 CSS 更易於維護，製作了幾個屬於自己的元件
也學會了如何做出加入購物車的拋物線動畫效果

學習成果：
  • 模組化設計模式
  • 開發屬於自己的元件
  • 瀏覽器兼容性
  • 了解動畫效能的問題
JavaScript HTML CSS Bootstrap 4

後台版型切版練習

Demo GitHub

利用 BS 切出一個後台版型
並對其他 DOM 元素有更進一步的操作
列表的部分採用動態生成樣式的方式呈現

學習成果：
  • Chart.js 插入圖表
  • DOM 操作方法
  • BS Modal 動態傳入數據
JavaScript HTML CSS Bootstrap 4

電商網站版型

Demo GitHub

一些基礎電商網站的功能練習
體認到 BS 用法並不局限於文件的範例，還有很多可擴展的空間
掌握 Ajax 抓取所需資料以生成介面

學習成果：
  • 動態生成商品列表
  • 動態生成地址下拉式清單
  • 修改表單驗證 API
  • JSON Server 製作模擬 API
Repos Finder 預覽
Vue.js JavaScript HTML CSS Responsive

GitHub Repos Finder

Demo GitHub

利用 Vue.js 的第一個作品
輸入 GitHub 使用者名稱可以查詢該使用者的所有 repo
捲軸往下滾可以持續載入未顯示的 repo
*為了練習無限滾動而限制一次顯示5筆，每次載入5筆

學習成果：
  • VueJS 的開發
  • GitHub v3 API 的應用
  • 無插件實現無限滾動及視差滾動
  • AJAX

Contact Me

Being connected to others is important