{"data":{"featured":{"edges":[{"node":{"frontmatter":{"title":"Tactile Visualization (HCI Resarch)","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAVABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIDBAUG/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwAC/9oADAMBAAIQAxAAAAHX0xyNnBY0fTgnCv/EABoQAAIDAQEAAAAAAAAAAAAAAAACAQMTERL/2gAIAQEAAQUCS3yRHZZOSVuqjv6bKszrM0P/xAAYEQACAwAAAAAAAAAAAAAAAAAAAQIQEf/aAAgBAwEBPwGTZrv/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAcEAABBAMBAAAAAAAAAAAAAAAAAhEykQEQQVH/2gAIAQEABj8Cz3HjbbTkE0QTRBNH/8QAHRABAAEEAwEAAAAAAAAAAAAAAQARITHxQVGhsf/aAAgBAQABPyGlCCMMdavkdy8HNhVnAi9wlH2aPNXmvz//2gAMAwEAAgADAAAAEBPYw//EABcRAAMBAAAAAAAAAAAAAAAAAAAQEVH/2gAIAQMBAT8QgMX/AP/EABcRAQADAAAAAAAAAAAAAAAAAAEAEBH/2gAIAQIBAT8QAGYX/8QAHhAAAgICAgMAAAAAAAAAAAAAAREAIVHwQbFxgcH/2gAIAQEAAT8Qr4gSZi+YVNBUzXtAFYDEKbQELMSkVLI9Q7wDTyjGNjxO60E3z5P/2Q=="},"images":{"fallback":{"src":"/static/60d6bc6e49e19d7dc4c5ba670e143345/e55b7/TactileVisualization.jpg","srcSet":"/static/60d6bc6e49e19d7dc4c5ba670e143345/c7b00/TactileVisualization.jpg 175w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/3cc45/TactileVisualization.jpg 350w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/e55b7/TactileVisualization.jpg 700w","sizes":"(min-width: 700px) 700px, 100vw"},"sources":[{"srcSet":"/static/60d6bc6e49e19d7dc4c5ba670e143345/6e551/TactileVisualization.avif 175w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/b705c/TactileVisualization.avif 350w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/298dc/TactileVisualization.avif 700w","type":"image/avif","sizes":"(min-width: 700px) 700px, 100vw"},{"srcSet":"/static/60d6bc6e49e19d7dc4c5ba670e143345/52832/TactileVisualization.webp 175w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/92dda/TactileVisualization.webp 350w,\n/static/60d6bc6e49e19d7dc4c5ba670e143345/f78ee/TactileVisualization.webp 700w","type":"image/webp","sizes":"(min-width: 700px) 700px, 100vw"}]},"width":700,"height":750}}},"tech":["Python","MatPlotlib","SQLite","BHaptics(Wearable)","UX_Research","HCI"],"github":"https://github.com/Code4Dopamine/Tactile-Visualization","external":"https://drive.google.com/drive/folders/1TA2G5ajKjcHEMOj27HbP7Qv_DaAhKCwi?usp=drive_link","gdrive":null},"html":"<p>Tactile Body-Globe focuses on exploring the potential of wearable haptic technology as a new tool &#x26; method for big data analysis/display via non-visual format. The study provides a new user interface concept of data representation, and improves perception &#x26; understanding through multi-modal sensory infomration (Vision &#x26; Touch).<br>\n[<a href=\"https://drive.google.com/file/d/1SEd6_bP3_7vQzqKag_cQX3G_lNdbHBsP/view?usp=share_link\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Demo video</a>]</p>"}},{"node":{"frontmatter":{"title":"Pix2Pix - Practical ML","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAGPo2DCpH//xAAcEAEAAgIDAQAAAAAAAAAAAAACAQMABBITFCP/2gAIAQEAAQUC0pnudv3IeDWqC81cvgc//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHhAAAQQBBQAAAAAAAAAAAAAAAAECERIiMTJxcoH/2gAIAQEABj8Cd1URs5G5CWtj0vXLk0P/xAAbEAADAQEAAwAAAAAAAAAAAAABESEAMUFxkf/aAAgBAQABPyGAPuwQXZCCF5YrqevHZJEJti+QSrxhSvu//9oADAMBAAIAAwAAABAH/wD/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAMBAAMAAAAAAAAAAAAAAQARITFBkeH/2gAIAQEAAT8QI9CLa5psyHG40Cm/kobwLWG+RINXaEenYVXalyePNQ1q1bd6+5//2Q=="},"images":{"fallback":{"src":"/static/f024ddcd4a5cb18e39066494a0624478/1bc68/Pix2Pix-ML.jpg","srcSet":"/static/f024ddcd4a5cb18e39066494a0624478/03d7d/Pix2Pix-ML.jpg 175w,\n/static/f024ddcd4a5cb18e39066494a0624478/a3237/Pix2Pix-ML.jpg 350w,\n/static/f024ddcd4a5cb18e39066494a0624478/1bc68/Pix2Pix-ML.jpg 700w","sizes":"(min-width: 700px) 700px, 100vw"},"sources":[{"srcSet":"/static/f024ddcd4a5cb18e39066494a0624478/0b4ad/Pix2Pix-ML.avif 175w,\n/static/f024ddcd4a5cb18e39066494a0624478/2ac1b/Pix2Pix-ML.avif 350w,\n/static/f024ddcd4a5cb18e39066494a0624478/2c9d3/Pix2Pix-ML.avif 700w","type":"image/avif","sizes":"(min-width: 700px) 700px, 100vw"},{"srcSet":"/static/f024ddcd4a5cb18e39066494a0624478/e35d6/Pix2Pix-ML.webp 175w,\n/static/f024ddcd4a5cb18e39066494a0624478/15121/Pix2Pix-ML.webp 350w,\n/static/f024ddcd4a5cb18e39066494a0624478/d2948/Pix2Pix-ML.webp 700w","type":"image/webp","sizes":"(min-width: 700px) 700px, 100vw"}]},"width":700,"height":533}}},"tech":["Machine Learning","Pix2Pix","Posenet","Tensorflow"],"github":null,"external":"https://docs.google.com/document/d/1IwhP2azFtgzZn0Dr4gffJnE5oSw7OFM1I6DX4dtKoT4/edit?usp=drive_link","gdrive":"https://drive.google.com/drive/folders/19yY1u_OOih2P0mAMXaLbf3SMY33Ciylk?usp=drive_link"},"html":"<p>Machine Learning App that takes in input of Bone Structure (Dance Poses) from posenet, then generate pixel image (frames) based on another person dancing (trained video).<br>\n[<a href=\"https://youtu.be/ESg_sMoOm1Q\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Demo Video</a>]</p>"}},{"node":{"frontmatter":{"title":"Client Website - Taiwan Da Niou","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVQoz42P60tTARjGzz9Ruts5O2dnZ2ebE6fp5nTzNu8iUlYGBVOirBQiLK9B4ihF1MIyrA996EvQ5yD6E7p86VM3KCLN+9SccxP9xVYRFETPy8Pz8vK878sjpFIp/uTe7h5LWwt8iL0lkUiQTCbZ2dnJ9L80tfv3XpoC/4H4djzD/Z/1LwjLK8vE1pdYWp1jbWOOrW9xllcXWVyZZzu++du590P2U3skEwlWYl+JrS+zuRFjdW2Bj1/esbEZR2i7GOREd4hrUz1cnYowcruX8ZlRLka76RuP8OrFU5Y+z/Pp9RveP3/JsyePePj4FgOTJ5m+O8ad2TGGRweYmBni8vVOhPb+AG0Xyjl7JcLgZJRIXy3HzzfT2XOOU32tDE1EuDc7yf0HUSZnu+idOEZXtINLI2foHuxg8EYvozeH6Y+2E50+jeAO2Cgsy8NX5SHYUEJRZR6uYiuh2gC+Kh9lTUEaWmppOhom2FxAVUsJvrCXnIAbX5UXf7iQ4rAXp99EsKYUwayIHJAOkmU1kC0bsNhFjIoFUZOx6gr2HAeHW49Q11iPt8iLrKfnIrJuIUsyYlCMZFuzMasiFlVEMMomDIoBk2pC0iVUjwNRs6LnufGVlxAKh2hsbqK+qY6K2goClQHcBTloHg1Hro7q1rA6bYgOK4rLhqDoNsw2M2ZVwqQYkfS0QUN22nDn51JaEaK6vob6xjrKq8vI93uxexwoLhXVrSI5lMwhUZOw2C0IkiZhc9qRXTomu4RRtWBxyMhOO6pTI++QF1+Jn0AwQKG/EN3jyMSWnUrmaTqZzWVFtIuYFRPfAcMB5ylNBN0KAAAAAElFTkSuQmCC"},"images":{"fallback":{"src":"/static/ff8031c26fea80bb14845f048fbddc03/2a75d/Client-LandingPage.png","srcSet":"/static/ff8031c26fea80bb14845f048fbddc03/ddc1f/Client-LandingPage.png 175w,\n/static/ff8031c26fea80bb14845f048fbddc03/0f654/Client-LandingPage.png 350w,\n/static/ff8031c26fea80bb14845f048fbddc03/2a75d/Client-LandingPage.png 700w,\n/static/ff8031c26fea80bb14845f048fbddc03/ce577/Client-LandingPage.png 1400w","sizes":"(min-width: 700px) 700px, 100vw"},"sources":[{"srcSet":"/static/ff8031c26fea80bb14845f048fbddc03/b2baf/Client-LandingPage.avif 175w,\n/static/ff8031c26fea80bb14845f048fbddc03/4b7ea/Client-LandingPage.avif 350w,\n/static/ff8031c26fea80bb14845f048fbddc03/c67ab/Client-LandingPage.avif 700w,\n/static/ff8031c26fea80bb14845f048fbddc03/c87e9/Client-LandingPage.avif 1400w","type":"image/avif","sizes":"(min-width: 700px) 700px, 100vw"},{"srcSet":"/static/ff8031c26fea80bb14845f048fbddc03/d8229/Client-LandingPage.webp 175w,\n/static/ff8031c26fea80bb14845f048fbddc03/8ddb9/Client-LandingPage.webp 350w,\n/static/ff8031c26fea80bb14845f048fbddc03/dfc53/Client-LandingPage.webp 700w,\n/static/ff8031c26fea80bb14845f048fbddc03/27c81/Client-LandingPage.webp 1400w","type":"image/webp","sizes":"(min-width: 700px) 700px, 100vw"}]},"width":700,"height":361}}},"tech":["HTML","CSS","Javascript","Styled Components"],"github":null,"external":"https://taiwandaniou.netlify.app/","gdrive":null},"html":"<!-- Having struggled with understanding how the Spotify OAuth flow works, I made the course I wish I could have had.\r\n\r\nUnlike tutorials that only cover a few concepts and leave you with half-baked GitHub repositories, this course covers everything from explaining the principles of REST APIs to implementing Spotify's OAuth flow and fetching API data in a React app. By the end of the course, you’ll have an app deployed to the internet you can add to your portfolio. -->\n<p>This is a paid client project for a local organic farmer in Taiwan.\r\nThe goal is to create a landing page for client's customers to find out about their products and links to other online store channels, such as LINE Store, Google Maps, Youtube, etc.</p>\n<!-- #### Designs\r\nThe website is design to work as a info page for customers to understand more about what the client is doing and along with what their main selling products are. Since the client usually contact the customer via messaging app, this website serves as a useful demo site for providing customers with the necessary info (such as location, how to contact, etc.)\r\n![Client Site](ClientWebsite-Showcase.jpg) -->"}},{"node":{"frontmatter":{"title":"Full Stack App - Kanban Board","cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABrXyKKNCBP//EABsQAAIBBQAAAAAAAAAAAAAAAAECAAMEEBIU/9oACAEBAAEFAjz6lraVmQtHCjH/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAdEAABBAIDAAAAAAAAAAAAAAABABARIiNBQpGh/9oACAEBAAY/AuGkKjpYxAhqj1v/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhEDFBcf/aAAgBAQABPyHLZhtDqF7wgG+0ArYRoFPtuP/aAAwDAQACAAMAAAAQAN//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/ENlb/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qh//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExYXGBwdH/2gAIAQEAAT8QxFhioSrL75gl4A7LivG5gqLANr9QglksEZa/BAJ//9k="},"images":{"fallback":{"src":"/static/ec211c2bedaeddfc2d29e378383a6e9e/7721e/App_Overview.jpg","srcSet":"/static/ec211c2bedaeddfc2d29e378383a6e9e/d67e7/App_Overview.jpg 175w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/9fb4e/App_Overview.jpg 350w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/7721e/App_Overview.jpg 700w","sizes":"(min-width: 700px) 700px, 100vw"},"sources":[{"srcSet":"/static/ec211c2bedaeddfc2d29e378383a6e9e/9aa63/App_Overview.avif 175w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/e6db6/App_Overview.avif 350w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/f47db/App_Overview.avif 700w","type":"image/avif","sizes":"(min-width: 700px) 700px, 100vw"},{"srcSet":"/static/ec211c2bedaeddfc2d29e378383a6e9e/240e7/App_Overview.webp 175w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/faefe/App_Overview.webp 350w,\n/static/ec211c2bedaeddfc2d29e378383a6e9e/d5dc4/App_Overview.webp 700w","type":"image/webp","sizes":"(min-width: 700px) 700px, 100vw"}]},"width":700,"height":438}}},"tech":["EJS","Auth","Express","MongoDB","MVC_Design"],"github":"https://github.com/Code4Dopamine/FS-Kanban","external":"https://distinct-bass-sarong.cyclic.app","gdrive":null},"html":"<p>Created a Full-Stack Kanban-like Task Tracker App that saves different task list based on user's profile. Includes cross-out feature and deletion of cards/single tasks.</p>"}}]}}}