HackBeanpot 2024
![](https://freight.cargo.site/t/original/i/f60744d4e42c6a0d0a1a73fc0dbdb05bea5363d136d95579180a0cc70665a322/realistic_laptop_with_smartphone_Realistic-Laptop-WIth-Smartphone.png)
Overview
As a Software Engineer and UI/UX Designer in HackBeanpot, I am developing and designing the main and live event sites.
Both sites are designed and implemented to be desktop and mobile-friendly.
As a Software Engineer and UI/UX Designer in HackBeanpot, I am developing and designing the main and live event sites.
Both sites are designed and implemented to be desktop and mobile-friendly.
Type
UI/UX, Web Design
Tools
Figma, Typescript, React.js, Emotion
UI/UX, Web Design
Tools
Figma, Typescript, React.js, Emotion
Main Site Design and Development
︎ View the deployed site here.Main Site Design and Development
Main Site Design and Development
︎ Check out the GitHub repo here.
All illustrations were created in Figma by me and four other designers (check out the ones I created more closely here!). Website designs were created by me and another UI/UX designer.
Light Mode (desktop and mobile)
![](https://freight.cargo.site/t/original/i/605f2338420224003b51a0c223a3652ff76ea0f10f2f046ba5ea3ffae3719b8b/Hi-fi-V5.png)
![](https://freight.cargo.site/t/original/i/e11d092077c8904a97e703ceaa69707e941e90fa82946ac2a13584269cd2235a/Mobile-Hi-fi-light.png)
Dark Mode (desktop and mobile)
![](https://freight.cargo.site/t/original/i/f4422ae2e49fd05212017210638023fd75f10d247aa6e7c0f35b56ecdff09d04/Hi-fi-V5-dark-mode.png)
![](https://freight.cargo.site/t/original/i/411f412cd592cec163a7dcdeffea158d85f55384465a6c7a1ee36e0cc8eebd23/Mobile-Hi-fi-dark.png)
Live Site Designs
Live Site Designs
Live Site Designs
Desktop - Light Mode
![](https://freight.cargo.site/t/original/i/8224389db6afecf9930dd8549eda18f6ef7161b5774ae04af6cd45e1a7c2cc4a/Live-Site---Light-v5.png)
Desktop - Dark Mode
![](https://freight.cargo.site/t/original/i/cbe666975c61cea91d108fc33f6c9f5ca7ff4b6ee2773afca7338fab3a942896/Live-Site---Dark-v4.png)