Giter Site home page Giter Site logo

I'm Yuki (⁎^◑ᴗ◑^⁎)👍🌟🐈

#UI/UX  #Front-end  #視覺美感  #邏輯思考

你好,我是黃映慈! 
想成為具設計美感,程式又簡潔易懂的工程師🌟

學程式的契機...

Intro

在對職涯徬徨時,共事五年的主管基於我視覺表現的能力,及善於邏輯思考獨立作業的人格特質,建議我去了解網頁的製作。
從Udemy線上課程中萌發對前端工程的興趣,便在2023年報名相關職訓課程,發想出貓知識測驗小遊戲「貓奴檢定」,於今年1月自學 React 將此專案實現,並加以摸索網頁動畫製作平台 Rive 將所畫的貓貓動態化,為「貓奴檢定」建立一個有互動效果的介紹網頁。 期許能在重視覺表現的公司裡,發揮己長,參與一件件酷炫網頁的製作!

使用技術

Toolbox

⭐Front-end⭐

 

⭐UI/UX⭐

 

專案

Projects

⭐UI/UX⭐

喵起來 - 貓貓咖啡廳預約、認養複合式平台 🖼前期發想 🎨網頁 Layout (製作中)

⭐Front-end⭐

🐈貓奴檢定 - 貓知識測驗小遊戲 🎮Link 🖥Github

#React  #useState  #useEffect  #SCSS

每次遊玩都從題庫隨機取題,以 React 各式 hook 完成進度切換、成績計算及題目解析等功能,並使用 html2canvas 達成測驗結果下載。

🐈貓奴檢定 - 設計發想介紹網頁 🎮Link 🖥Github

#React  #SCSS  #Rive

介紹貓奴檢定的視覺設計及看不到的程式小巧思,將本來置於 Behance 等平台的平面內容,使用 Rive 及 CSS 加上一個有互動性的登陸頁,並監聽滾動事件,以優化使用者體驗。

🥇React Quiz - React 知識測驗 🎮Link 🖥Github

#React  #useReducer  #json-server

搭配線上課程所提供的 CSS 所建立的 React 測驗小遊戲 ,利用 Json-server 建立 Fake api 串接測驗題目,及 React useReducer 更新及管理複數 state 。

🎬Usepopcorn - 電影搜尋 🎮Link 🖥Github

#React  #useEffect  #Data fetching  #Custom hooks  #Local storage

搭配線上課程所提供的 CSS ,使用 React 串接電影資訊 api ,供使用者英文輸入搜尋電影,並提供評分電影、加入片單至 Local storage 等功能,且嘗試製作 Custom hooks ,利於工作上與他人共同開發。

🌞Classy Weather - 一週天氣預報 🎮Link 🖥Github

#React  #Data fetching  #Class components

搭配線上課程所提供的 CSS ,使用React 串接氣象 api ,供使用者英文輸入指定地區,即時顯示一週天氣預報,並採用Class components撰寫,利於工作上維護 React 16 前的專案。

🎒Travel List - 旅行打包清單 🎮Link 🖥Github

#React  #useState  #篩選  #狀態管理

搭配線上課程所提供的 CSS ,使用 React 建立一個簡易旅行打包清單,供使用者輸入品項及數量,並隨著打包過程勾選或刪除項目,也可以利用篩選功能選擇排序方式

Yuki's Projects

catquizoxo icon catquizoxo

你自認是專業貓奴嗎?貓奴檢定考,等你來挑戰!🐈

friendfin icon friendfin

輕鬆記錄飯局,誰買單、誰欠誰?” 🍽️💰

voxovb icon voxovb

Config files for my GitHub profile.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.