Hi There, my name is

Danilo

I am a Web Developer

我目前在Cienet擔任前端工程師 ...
2023年起在Cienet擔任前端工程師，參與之業務包含既有網頁系統的維護以及網頁功能的開發與測試。熟悉的基礎技術包含HTML, CSS, JS, TS，其中Frame work主要使用Angular以及React，CSS框架則以BootStrap為主。
近期因應嵌入式AI的發展與趨勢，亦研究VSCode Extension的開發，並應用協助團隊操作自動化流程之業務，故熟悉VSCode API, VSCode Extension Development之技術，並足以依相關需求獨立開發VSCode擴展應用程式。

在擔任軟體工程師以前，曾任職於AECOM都市設計師，並於第二年起擔任Key Designer。工作的內容主要帶領團隊成員共同執行專案，管理專案進度執行以及業主(/客戶)的溝通協調，確保項目進度穩定執行。
綜上工作經歷，使我熟悉與他人共同工作，與團隊共同為目標一起精進技術與前進。

技術

The Skills I Utilise

前端相關技術

  • HTML5
  • CSS3
  • JavaScript
  • Bootstrap
  • React.js
  • Angular

後端相關技術

  • Node.js
  • Express
  • EJS
  • MongoDB
  • Mongoose
  • Mongo Atlas

其他技術

  • Illustrator
  • PhotoShop
  • InDesign
  • After Effect
  • Premiere
  • AutoCAD
  • QGIS/ArcGIS
  • SketchUp
  • Lumion
  • MicroSoft Office

語言能力

  • 中文
  • 英文

學歷

  • 2020 城市設計碩士, 紐卡斯爾大學, 英國
  • 2017 都市計劃學系學士, 國立成功⼤學, 臺灣

作品集

My Personal Projects

Project : danilo-shop

專案介紹 :

danilo-shop 是以ReactJs + GoogleFireBase製作的Single web app 網購平台Demo，用戶在web app上可以註冊或登入帳號，將不同類別的產品放置購物車，然後進行結帳。設計此網站的動機是為了實踐對於ReactJS熟悉度並架設相對功能複雜的網站應用程式的能力。

專案連結 :

Netlify

專案涉及工具 :

JSX, SCSS, ReactJS, Redux, GoogleFireBase

專案工作方法 :

  • 透過react-router建構web app url route關係，並透過import "Outlet" 將nav bar 固定於網頁置頂
  • 以noSQL系統的Google FireBase做為網頁數據庫，應用該數據庫製作網站的登入及註冊系統 (包含Google登入系統)
  • 專案前期以Context, 後期改以Redux建立全域性資料(包含用戶, 商品以及購物車產品資料), 避免prop drilling的問題
  • 以Nested Route 建立不同類型商品的網頁 (ex: shop/hats, shop/jackets ...)
  • 透過styled component建立CSSinJS，將過程中的scss style改成styled jsx，避免style重複的課題

Project : Camp.Info

專案介紹 :

Camp.Info 是一個用戶可以瀏覽台灣各地露營地的網站，透過註冊一個新的帳戶，用戶可以創建、評論露營地的資訊與體驗心得，並且可以修改該用戶創建的露營地資訊。設計此網站的動機是為了實踐透過Node.js來架設完善功能的能力。

專案連結 :

Render

專案涉及工具 :

HTML5/EJS, JavaScript, CSS-3, Bootstrap(5.2.3), Nodejs, Express, MongoDB, Joi, MongoAltas, MapBox, Cloudinary, PassPortJs

專案工作方法 :

  • 以fullCRUD建立網頁系統, 建構網頁新增, 瀏覽, 編輯和刪除露營區的功能
  • 以noSQL系統的MongoDB做為網頁數據庫，透過一對多關係模式將Campgrounds, User, Review三種collections的數據進行連結
  • 以PassportJS工具建立網頁的用戶註冊/登入的驗證系統，並將用戶密碼透過該工具導入的Hash Function與 Salting提供用戶密碼基礎的保護措施
  • 透過Cloudinary提供用戶新增露營區相片的雲端儲存
  • 透過MapBox提供用戶瀏覽露營區位置時更佳的空間視覺化體驗

Gizmo : Kittens Rolodex

Detail

該裝置模擬公司成員介紹清單 : 可透過搜尋功能過濾成員，並顯示詳細的成員資訊。網頁同時以ReactJS Class以及Functional (Hook)邏輯編程；風格以手刻CSS進行animate的渲染。

Gizmo : Quote Generator

Detail

透過async fetch reqest 從 web API中抓取隨機的名言與其作者資訊。並從Tweet及Meta的開發者平台中擷取相關指令製作可將名言即時分享到動態中的DOM練習項目。

Gizmo : Score Keeper

Detail

該裝置提供用戶計算桌球比賽的比分。透過設定比賽總分，當其中一方玩家達到分數時，顯示勝利玩家。網頁以Bootstrap框架設計網頁的風格，並以該框架的flex box進行切版，是一個結合styling跟JS DOM的練習項目。

Gizmo : Infinite Scroll

Detail

Infinite Scroll 是利用unsplash api 隨機生成圖片，並使其在網頁上進行無限的loading，是一個結合styling跟JS DOM的練習項目。

free api key : f0iNOGLQjywiYCGHug9ETqTC9ZvHJ5109IIfsf7g2Lc

Gizmo : Auth exercise

Detail

Auth Exercise 是利用Google FireBase中的auth跟firestore SDK透過ReactJS搭建的用戶的註冊與登入系統，用戶除了email註冊外，也可透過google與facebook的第三方帳戶登入系統。

其他

More about me

工作經歷

我是一名IDE擴展和前端開發人員

  • 2023.Apr-Now
    Cienet，前端開發工程師

我曾是城市設計師

  • 2020.Aug-2022.Aug
    AECOM，城市設計師 II
  • 2017.Jul-Aug
    國泰人壽不動產投資部，不動產實習生
  • 2016.Jul
    FAP+DA，都市計畫實習生

參與過的專案

作為一名IDE Extension開發與前端工程師

  • 2023
    與Google團隊合作，不斷提高其產品的品質
  • 2023
    依據團隊與客戶需求，於前期獨立開發VSCode Extension，達成嵌入式擴展app的自動化測試系統

當我是一名城市設計師的時候

  • Assiststant Urban Designer, 2022
    NEOM Regional Plan, Saudi Arabia
  • Key Design, 2021
    North Coast & Guanyinshan National Scenic Area Development Master Plan, Taiwan
  • Urban Designer, 2022
    International Tendering For Phase I Urban Design Of Shenzhen, China
  • Assiststant Urban Designer, 2021
    Chenggong Water Area Recreation Master Plan, Taiwan
  • Key Design, 2021
    Takoham Local Development and Regional Comprehensive Plan, Taiwan

其他經歷

更多關於我

  • 2021
    第九屆台灣景觀大獎 佳作獎 : 大嵙崁計畫
  • 2017
    ATCC全國大專院生商業個案大賽 企業第三名 : ROOT
  • 2017.Oct
    台灣設計展-南風館策展助理
  • 2016-2017
    TEDxTainan 設計部
  • 2016-2017
    成大學生會 公關部副部長
  • 2015.Oct
    臺南海安商圈微電影競賽銅獎
  • 2015.Oct
    2015成大都計人生職涯博覽會 公關
  • 2014.Jul
    美國遊學與打工 (聖地牙哥與紐約)