林俊安 Jimmy

前端工程師


 
    

Taipei or Remote

TEL: +886 989588747

Email: [email protected]

  約莫半前開始接觸網頁切版,起初經由網路上的教學影片與 FreeCodeCamp 學習 HTML 、 CSS ,在成長的過程中而對前端產生興趣,並享受完成預想畫面的成就感;而後跟隨著同為前端工程師的朋友學習,慢慢接觸到 Git 、 SCSS 、 JavaScript 與 VUE 框架,近期也在線上課程學習 Bootstrap5 ,未來也將進修並在樂於學習新技術

- 技能 -


前端開發

  • HTML5 / CSS3
  • 語意化標籤的使用
  • RWD 響應式網頁設計
  • Scss 預處理器
  • BEM 命名設計模式
  • JavaScript
  • AJAX / Fetch / Axios 串接 API

前端框架

  • Vue.js
  • Bootstrap 5 
  • Bootstrap 5 自定義 SCSS
  • JQuery(基本入門)
  • antd vue (UI Library )



開發工具

  • Git 基本指令
  • Github 版本控制(GUI)
  • GitHub Pages 靜態網頁部署
  • Git flow 流程
  • npm / yarn 基本指令
  • Vue / Chrome Dev Tool 除錯 

- 作品 -

台北捷運 API 練習

透過 "公共運輸整合資訊流通服務平臺" 所提供 API 製作台北捷運票價查詢的 web APP

  • vue cli 建立專案
  • vue router 設定路由
  • axios 做 webAPI 資料請求
  • vue components 達到元件複用
  • props in, emit out 達到 components 之間的資料傳遞

專案連結:https://jimmyanso.github.io/mrt-price/

Bootstrap-5 Demo

完成 BS5 線上課程後練習的成品

  • 網格系統 (Grid system)
  • 斷點 (Breakpoints)
  • 文字排版 (Typography)
  • 間距 (Spacing)
  • 導覽與頁籤 (Navs and tabs)
  • 工具提示框 (Tooltips)
  • 自定義Bootstrap5 SASS

專案連結:https://jimmyanso.github.io/bootstrap5-demo/

線上課程網站 切版練習

線上課程網站練習

  • 使用 import 引入 Google Fonts 字體與 Font Awesome 的圖示
  • object-fit 與 vertical-align 做圖片的調正
  • background 多層背景練習
  • 偽元素製作破格式設計
  • animation 與 @keyframes 練習
  • transform 搭配 transition 製作浮動卡片效果
  • flex-grow 與 flex-shrink 進行 flex 版面調整

專案連結:https://jimmyanso.github.io/slicing-practice-3/

白頭翁介紹 

  • 監聽滾動實現 Scrollspy製作 
  • 事件委託實現連結選定效果
  • 資料驅動實現行動裝置 -  漢堡選單
  • RWD

專案連結:https://github.com/JimmyAnso/pycnonotus-sinensis

Github API

利用 Github API 實作個人 repositories 頁面

  • 監聽滾動實現
    • 無限滾動
    • 視差滾動

專案連結:https://github.com/JimmyAnso/github-api

生產業網站 切版練習

模擬生產製造業的服務網站製作

  • fixed 浮動按鈕的製作
  • 使用 flex 實現水平置中排版 
  • 在 CSS 加入 media queries 製作 RWD 響應式網頁 
  • 使用偽元素來做樣式的呈現 
  • 偽類搭配 transition 或 animation 以美化使用者在導覽時的效果

專案連結:https://jimmyanso.github.io/slicing-practice/

- 學歷 -

Aug 2013 - Jul 2017

雲林科技大學

資料管理系

Powered by CakeResumePowered by CakeResume