diff --git a/_notes/cmes-mobile.md b/_notes/cmes-mobile.md index 94dd493..d7609ee 100644 --- a/_notes/cmes-mobile.md +++ b/_notes/cmes-mobile.md @@ -12,8 +12,8 @@ The app's front-end uses Capacitor and Angular, with several Capacitor plugins i This app is actively used in medical facilities in Uganda and Nepal, to name a few. -[App Store](https://apps.apple.com/us/app/cmes/id1276335909){: .primary-action } -[Google Play](https://play.google.com/store/apps/details?id=org.cmesworld.www.cmes_piandroid_app){: .primary-action } -[Techies Without Borders](https://techieswithoutborders.us/){: .secondary-action } -[CMES Project](https://cmesworld.org/){: .secondary-action } -{: .horizontal-wrapper } +- [App Store](https://apps.apple.com/us/app/cmes/id1276335909) +- [Google Play](https://play.google.com/store/apps/details?id=org.cmesworld.www.cmes_piandroid_app) +- [Techies Without Borders](https://techieswithoutborders.us/) +- [CMES Project](https://cmesworld.org/) + diff --git a/_notes/dont-wake-sandie.md b/_notes/dont-wake-sandie.md index 0e01427..31207cf 100644 --- a/_notes/dont-wake-sandie.md +++ b/_notes/dont-wake-sandie.md @@ -16,5 +16,5 @@ UI development, artwork integration, and version control. There were so many moving parts, and I really aimed to get as much input for the gameplay design as I could from the team. -[itch.io (play the game!)](https://bchendev.itch.io/dont-wake-sandie){: .primary-action } -{: .horizontal-wrapper } +[Play the game on itch.io!](https://bchendev.itch.io/dont-wake-sandie) + diff --git a/_notes/interchange.md b/_notes/interchange.md index 6c8cce2..bce0cf3 100644 --- a/_notes/interchange.md +++ b/_notes/interchange.md @@ -9,7 +9,7 @@ View routes, shuttle locations, and estimated arrival times in a sleek, easy-to-use interface. I built this app using SwiftUI, Node.js and Apollo GraphQL, with Redis as a primary storage mechanism. -[Download on the App Store](https://apps.apple.com/us/app/interchange-college-commute/id6739968742){: .primary-action } -[Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW){: .secondary-action } -[Website](https://interchange.bchen.dev/){: .secondary-action } -{: .horizontal-wrapper } +- [Download on the App Store](https://apps.apple.com/us/app/interchange-college-commute/id6739968742) +- [Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW) +- [Website](https://interchange.bchen.dev/) + diff --git a/_notes/power-to-the-people.md b/_notes/power-to-the-people.md index 1702c06..790a063 100644 --- a/_notes/power-to-the-people.md +++ b/_notes/power-to-the-people.md @@ -7,9 +7,9 @@ title: Power to the People **An iPhone app designed to make traffic stops safer for marginalized communities.** Record interactions with police, assign and text emergency contacts, and be informed of your rights. I worked in a student team of 4, including [David Sohn](https://www.linkedin.com/in/sohn-david/), [Jacob Zamore](https://www.linkedin.com/in/jacob-zamore/), and [Patrick Smith](https://www.linkedin.com/in/patrick-smith-ld/), to prototype and build a proof of concept in 36 hours. The app was selected for the **President's Pick award** at [CruzHacks 2024](https://cruzhacks.com/), the premier hackathon of UC Santa Cruz. -[GitHub](https://github.com/brendan-ch/PowerToThePeople){: .primary-action } -[Devpost](https://devpost.com/software/power-to-the-people-lbhxyd){: .secondary-action } -{: .horizontal-wrapper } +- [GitHub](https://github.com/brendan-ch/PowerToThePeople) +- [Devpost](https://devpost.com/software/power-to-the-people-lbhxyd) + My contribution was the iOS app prototype, of which a demo is shown below. I built the primary user flow of recording a police interaction, simultaneously using the front and back iPhone cameras to capture all angles. Activating the recording also displays the "Know Your Rights" screen, displaying basic dos and don'ts. Finally, I built a way to view previous recordings and share the files using the iOS share sheet. diff --git a/_notes/sourcebook.md b/_notes/sourcebook.md index a497f1f..c5c6dde 100644 --- a/_notes/sourcebook.md +++ b/_notes/sourcebook.md @@ -12,5 +12,5 @@ I designed an entity-relationship diagram, MySQL database schema, and HTML/CSS high-fidelity prototype to support the project and show to professors. I then built a lightweight full-stack application using Python, Flask, and MySQL. -[GitHub](https://github.com/brendan-ch/sourcebook){: .primary-action } -{: .horizontal-wrapper } +[GitHub](https://github.com/brendan-ch/sourcebook) + diff --git a/_notes/tad-pool.md b/_notes/tad-pool.md index b7f9907..f4e1f2a 100644 --- a/_notes/tad-pool.md +++ b/_notes/tad-pool.md @@ -13,8 +13,11 @@ design using Figma and FigJam, in a period of 24 hours for The project reached the finalist judging stage. -[High-fidelity design](https://www.figma.com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=13-1837&node-type=canvas&t=YKuVvM6RAPs4hTIo-11){: .primary-action } -[Low-fidelity design](https://www.figma.com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&node-type=canvas&t=YKuVvM6RAPs4hTIo-11){: .secondary-action } -[FigJam board](https://www.figma.com/board/Dct7GuhKFYq8maw0KoAVBV/Product-Brainstorm-FullyBeyond?node-id=0-1&node-type=canvas&t=g7RKLLo5IoU84ndk-11){: .secondary-action } -[Devpost](https://devpost.com/software/tad-pool){: .secondary-action } -{: .horizontal-wrapper } +- [High-fidelity design](https://www.figma. +com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=13-1837&node-type=canvas&t=YKuVvM6RAPs4hTIo-11) +- [Low-fidelity design](https://www.figma. + com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&node-type=canvas&t=YKuVvM6RAPs4hTIo-11) +- [FigJam board](https://www.figma. + com/board/Dct7GuhKFYq8maw0KoAVBV/Product-Brainstorm-FullyBeyond?node-id=0-1&node-type=canvas&t=g7RKLLo5IoU84ndk-11) +- [Devpost](https://devpost.com/software/tad-pool) + diff --git a/_notes/teech-ai-cal-hacks-12.md b/_notes/teech-ai-cal-hacks-12.md index 7376f22..c40c18f 100644 --- a/_notes/teech-ai-cal-hacks-12.md +++ b/_notes/teech-ai-cal-hacks-12.md @@ -12,7 +12,7 @@ I built a native proof-of-concept using SwiftUI, AVFoundation, and other native The app was built in 48 hours for **Cal Hacks 12.0**, the world's largest collegiate hackathon. -[GitHub](https://github.com/brendan-ch/teecher-ios){: .primary-action } -[Devpost](https://devpost.com/software/teech-ai){: .secondary-action } -[Cal Hacks](https://www.calhacks.io){: .secondary-action } -{: .horizontal-wrapper } +- [GitHub](https://github.com/brendan-ch/teecher-ios) +- [Devpost](https://devpost.com/software/teech-ai) +- [Cal Hacks](https://www.calhacks.io) + diff --git a/_notes/the-farmers-dog-trivia.md b/_notes/the-farmers-dog-trivia.md index c962f91..7e0f513 100644 --- a/_notes/the-farmers-dog-trivia.md +++ b/_notes/the-farmers-dog-trivia.md @@ -14,5 +14,4 @@ screens for the app using React Native for Windows. for web/app development. He’s knowledgeable and efficient, and his task management skills make him an ideal project member." — Walter Cheng, project overseer -[The Farmer’s Dog](https://thefarmersdog.com/){: .primary-action } -{: .horizontal-wrapper } +[The Farmer’s Dog](https://thefarmersdog.com/) diff --git a/_notes/timestamp.md b/_notes/timestamp.md index 9c50180..acd821c 100644 --- a/_notes/timestamp.md +++ b/_notes/timestamp.md @@ -6,6 +6,5 @@ title: Timestamp A simple, unintrusive Pomodoro timer for macOS which lives in the menu bar. I built it with SwiftUI and made it open source. -[Download the app](https://github.com/brendan-ch/timestamp/releases){: .primary-action } -[View the code](https://github.com/brendan-ch/timestamp){: .secondary-action } -{: .horizontal-wrapper } \ No newline at end of file +[Download the app](https://github.com/brendan-ch/timestamp/releases) +[View the code](https://github.com/brendan-ch/timestamp) diff --git a/assets/css/colors.css b/assets/css/colors.css index 688a78a..f62c534 100644 --- a/assets/css/colors.css +++ b/assets/css/colors.css @@ -2,13 +2,17 @@ --color-background-1: #f4f4f4; --color-background-2: #e4e4e4; --color-primary-1: #000000; + --color-accent: #008891; + --color-accent-hover: #539397; } @media (prefers-color-scheme: dark) { :root { - --color-background-1: #111111; + --color-background-1: #171616; --color-background-2: #222222; --color-primary-1: #eeeeee; + --color-accent: #00B7C3; + --color-accent-hover: #70c1c6; } } diff --git a/assets/css/content.css b/assets/css/content.css deleted file mode 100644 index 85fd83b..0000000 --- a/assets/css/content.css +++ /dev/null @@ -1,36 +0,0 @@ -/* Custom classes for styling elements on a page, such as links */ - -.horizontal-wrapper { - display: flex; - flex-direction: row; - gap: 8px; - align-items: flex-start; -} - -.primary-action { - background: var(--color-primary-1); - padding: 0.8em; - color: var(--color-background-1); - text-decoration-line: unset; - border-radius: 4px; - border-style: solid; - border-width: 1px; - border-color: var(--color-primary-1); - box-sizing: border-box; -} - -.secondary-action { - border-width: 1px; - border-style: solid; - border-color: var(--color-primary-1); - padding: 0.8em; - text-decoration-line: unset; - border-radius: 4px; - box-sizing: border-box; -} - -@media screen and (max-width: 768px) { - .horizontal-wrapper { - flex-direction: column; - } -} diff --git a/assets/css/global.css b/assets/css/global.css index cd04fe2..f9e895d 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,7 +1,6 @@ @import url('fonts.css'); @import url('navigation.css'); @import url('colors.css'); -@import url('content.css'); @import url('note.css'); html { @@ -39,7 +38,11 @@ footer { } a { - color: unset; + color: var(--color-accent); +} + +a:hover { + color: var(--color-accent-hover); } /* Improve readability for smaller text, especially in long paragraphs */ diff --git a/assets/css/navigation.css b/assets/css/navigation.css index eaf1443..3425172 100644 --- a/assets/css/navigation.css +++ b/assets/css/navigation.css @@ -12,18 +12,11 @@ .nav-title { text-decoration: none; + color: unset; } -.nav-logo { - display: flex; - align-items: center; - text-decoration: none; - color: var(--color-primary-1); -} - -.nav-logo-icon { - height: 48px; - width: 48px; +.nav-title:hover { + color: unset; } .nav-menu { @@ -33,134 +26,3 @@ padding: 0; gap: 32px; } - -.nav-item { - display: flex; -} - -.nav-link { - text-decoration: none; - color: var(--color-primary-1); -} - -.nav-link:hover { - color: #666; -} - -/* Hamburger Menu */ -.hamburger-toggle { - display: none; -} - -.hamburger { - display: none; - flex-direction: column; - cursor: pointer; - width: 64px; - height: 64px; - justify-content: center; - align-items: center; - background-color: var(--color-primary-1); - gap: 4px; -} - -.hamburger-line { - width: 20px; - height: 2px; - background-color: var(--color-background-1); -} - -.menu-overlay { - position: fixed; - top: 80px; - left: 0; - width: 100%; - height: calc(100% - 80px); - background-color: rgba(0, 0, 0, 0.5); - z-index: 999; - opacity: 0; - visibility: hidden; - cursor: pointer; -} - -/* Mobile Navigation */ -@media screen and (max-width: 768px) { - .hamburger { - display: flex; - } - - .nav-menu { - position: fixed; - left: -100%; - top: 80px; - flex-direction: column; - background-color: var(--color-background-1); - width: 100%; - z-index: 1000; - gap: 0; - } - - .hamburger-toggle:checked ~ .nav-menu { - left: 0; - } - - .hamburger-toggle:checked ~ .menu-overlay { - opacity: 1; - visibility: visible; - } - - .nav-menu .nav-link { - padding: 16px; - width: 100%; - } -} - -.project-header { - position: relative; - display: inline-block; - margin-top: 96px; -} - -.project-header h1 { - margin-top: 0; -} - -.project-header .breadcrumb-wrapper { - position: absolute; - left: 0; - bottom: 100%; - margin-bottom: 0.5rem; - display: flex; - flex-direction: row; - gap: 8px; -} - -.project-header .breadcrumb-wrapper a { - display: inline-block; -} - -.project-header .breadcrumb-wrapper p { - margin: 0; - display: inline-block; -} - -.project-footer { - box-sizing: border-box; - display: flex; - flex-direction: row; - justify-content: space-between; - - height: 64px; - border-top: 1px solid var(--color-primary-1); - border-bottom: 1px solid var(--color-primary-1); - - padding-top: 16px; - padding-bottom: 16px; - margin-top: 96px; -} - -.project-footer div { - display: flex; - flex-direction: row; - align-items: center; -}