bwc9876.dev
Files for my website
bwc9876.dev
Add more projects
+359
-8
+8
-2
src/components/projects/ProjectCard.astro
+8
-2
src/components/projects/ProjectCard.astro
···
3
3
import defaultSrc from "@images/default-project-image.webp";
4
4
import type { CollectionEntry } from "astro:content";
5
5
6
+
export const getGithubOpenGraph = (repoDouble: string) => {
7
+
const hash = Math.random() * 1000;
8
+
return `https://opengraph.githubassets.com/${hash}/${repoDouble}`;
9
+
};
10
+
6
11
export interface Props {
7
12
project: CollectionEntry<"projects">;
8
13
}
···
20
25
format="webp"
21
26
position="center"
22
27
alt={project.data.name}
23
-
src={project.data.image?.src ?? defaultSrc.src}
28
+
src={project.data.image?.src ??
29
+
getGithubOpenGraph(project.data.links?.github ?? "Not Found")}
24
30
/>
25
31
</div>
26
32
<strong class="project-name">{project.data.name}</strong>
···
41
47
}
42
48
43
49
article:hover {
44
-
transform: translateY(calc(var(--spacing) * -1));
50
+
transform: translateY(calc(var(--spacing) * -0.5));
45
51
transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;
46
52
}
47
53
+25
src/content/projects/berks-dental.mdx
+25
src/content/projects/berks-dental.mdx
···
1
+
---
2
+
name: Berks Dental
3
+
summary: A organization website for the Berks Dental Assistants Society
4
+
timespan:
5
+
from: 2021
6
+
to: 2022
7
+
tags:
8
+
- web
9
+
- bootstrap
10
+
- django
11
+
- school
12
+
links:
13
+
github: Bwc9876/BerksDental
14
+
image:
15
+
src: https://github.com/Bwc9876/BerksDental/blob/master/static/base/logo.png?raw=true
16
+
width: 500
17
+
height: 300
18
+
---
19
+
20
+
import ExtLink from "@components/ExtLink.astro";
21
+
export const components = { a: ExtLink };
22
+
23
+
This was a simple website for the Berks Dental Assistant Society. It was made with [Django](https://www.djangoproject.com/) and uses [Bootstrap](https://getbootstrap.com/) for styling. I created a CMS for it as well that allowed admins to edit site content without code.
24
+
25
+
Sadly plans fell through to actually host the project, but otherwise it's fully functional.
+35
src/content/projects/code-review.mdx
+35
src/content/projects/code-review.mdx
···
1
+
---
2
+
name: Code Review
3
+
summary: A classroom workflow that lets students review other student's code
4
+
timespan:
5
+
from: 2021
6
+
to: 2022
7
+
tags:
8
+
- web
9
+
- bootstrap
10
+
- python
11
+
- django
12
+
- active-directory
13
+
- school
14
+
links:
15
+
github: Bwc9876/CodeReview
16
+
image:
17
+
src: https://github.com/Bwc9876/CodeReview/raw/master/Main/static/img/logo.svg
18
+
width: 400
19
+
height: 400
20
+
---
21
+
22
+
import ExtLink from "@components/ExtLink.astro";
23
+
export const components = { a: ExtLink };
24
+
25
+
Code Review was my senior project in my trade school. It's an intranet site that students could use to grade other student's code.
26
+
27
+
It was made because often times students need their code reviewed to continue to the next topic but the instructor may not always be available to do so.
28
+
29
+
It uses Active Directory to authenticate users and auto-syncs with it over time. It also features a leader-board for friendly competition.
30
+
31
+
It was made using [Django](https://www.djangoproject.com/) and [Bootstrap](https://getbootstrap.com/) for styling.
32
+
33
+
This was my first "real" product; that is, something users would need to interact with and use in the real world. It took some time to plan and work out the details with my instructor, and changes were needed after the project was officially done, but it turned out to be very handy. ...Although some of my classmates may have taken the leader-board a bit too seriously 😅.
34
+
35
+
It has many tests, flowcharts, data flow diagrams, and ERDs [available in the GitHub repo](https://github.com/Bwc9876/CodeReview/tree/master/concept).
+37
src/content/projects/do-thing.mdx
+37
src/content/projects/do-thing.mdx
···
1
+
---
2
+
name: Do Thing
3
+
summary: (Yet Another) Cross-Platform To-Do List App
4
+
timespan:
5
+
from: 2019
6
+
to: 2020
7
+
tags:
8
+
- web
9
+
- android
10
+
- cpp
11
+
- python
12
+
- kotlin
13
+
links:
14
+
github: Bwc9876/DoThingServer
15
+
image:
16
+
src: https://github.com/Bwc9876/DoThingWeb/blob/master/Tasks/static/Tasks/img/DoThingWebExample.PNG?raw=true
17
+
width: 700
18
+
height: 600
19
+
---
20
+
21
+
import ExtLink from "@components/ExtLink.astro";
22
+
export const components = { a: ExtLink };
23
+
24
+
Do Thing is (another) cross-platform to do app. This was a pretty simple project where I just wanted to mess around with networking, web dev, and app development.
25
+
26
+
Do Thing Consists Of:
27
+
28
+
- [Do Thing Server](https://github/Bwc9876/DoThingServer)
29
+
- [Do Thing Auth](https://github/Bwc9876/DoThingAuth)
30
+
- [Do Thing Web](https://github/Bwc9876/DoThingWeb)
31
+
- [Do Thing Android](https://github/Bwc9876/DoThingAndroid)
32
+
33
+
The name of each is pretty self explanatory, Server is the main server that stores data, Auth takes care of authentication, and Web and Android act as front-ends.
34
+
35
+
This project was a learning experience in a lot of stuff, It definitely doesn't have many practical uses but it helped me learn a bit about different systems interoperate.
36
+
37
+
It also fulfilled the requirement to make a to-do app as a rite-of-passage to being a developer.
+26
src/content/projects/enigma-machine.mdx
+26
src/content/projects/enigma-machine.mdx
···
1
+
---
2
+
name: Enigma Machine Project
3
+
summary: A informational website about the enigma machine and a digital recreation of it.
4
+
timespan:
5
+
from: 2019
6
+
tags:
7
+
- web
8
+
- python
9
+
- pygame
10
+
- school
11
+
links:
12
+
github: Bwc9876/Enigma-Machine-Recreation
13
+
other:
14
+
Website: https://bwc9876.github.io/Enigma-Machine-Site/index.html
15
+
image:
16
+
src: https://bwc9876.github.io/Enigma-Machine-Site/Resources/enigma_making.jpeg
17
+
width: 500
18
+
height: 400
19
+
---
20
+
21
+
import ExtLink from "@components/ExtLink.astro";
22
+
export const components = { a: ExtLink };
23
+
24
+
This was a social studies project I decided to get creative with. It's a website outlining what the enigma machine is and even has a recreation of it in [PyGame](https://www.pygame.org/).
25
+
26
+
The site itself is pretty simple, no CSS frameworks or anything, but it gets the point across.
+30
src/content/projects/nh-config-editor.mdx
+30
src/content/projects/nh-config-editor.mdx
···
1
+
---
2
+
name: New Horizons Config Editor
3
+
summary: A GUI-based editor for New Horizons configs
4
+
timespan:
5
+
from: 2022
6
+
tags:
7
+
- tauri
8
+
- rust
9
+
- web
10
+
- react
11
+
- bootstrap
12
+
- outer-wilds
13
+
links:
14
+
github: Outer-Wilds-New-Horizons/nh-config-editor
15
+
other:
16
+
Website: https://nh.outerwildsmods.com/editor.html
17
+
image:
18
+
src: https://user-images.githubusercontent.com/25644444/184557668-6710d0ab-bcc2-410e-af72-8877270bc5c8.png
19
+
width: 500
20
+
height: 500
21
+
---
22
+
23
+
import ExtLink from "@components/ExtLink.astro";
24
+
export const components = { a: ExtLink };
25
+
26
+
The config editor is a desktop I made to make editing [New Horizons](https://nh.outerwildsmods.com) config files easier. It uses React for UI and Bootstrap for styling. The forms were create with [React JSON Schema Form](https://github.com/rjsf-team/react-jsonschema-form). The backend was made with Rust and it's all tied together by [Tauri](https://tauri.app).
27
+
28
+
The app auto-generates UI from json schemas, meaning no updates are needed as New Horizons itself updates. In addition to form-based editing, it also support editing text directly with [Monaco](https://microsoft.github.io/monaco-editor/) which provides a VSCode-like experience. It also validates some other things beyond simple type checking that VSCode can't do with a JSON schema.
29
+
30
+
This was my first Tauri app so i definitely made some mistakes, but it made me really like tauri and how it handled everything.
+31
src/content/projects/opal-health.mdx
+31
src/content/projects/opal-health.mdx
···
1
+
---
2
+
name: Healine / Opal Health
3
+
summary: A tele-medicine website
4
+
timespan:
5
+
from: 2020
6
+
to: 2021
7
+
tags:
8
+
- web
9
+
- django
10
+
- web-rtc
11
+
- school
12
+
links:
13
+
github: ElderMicrobe889/Opal-Health
14
+
image:
15
+
src: https://github.com/ElderMicrobe889/Opal-Health/raw/master/static/base/IMG/fav/ms-icon-310x310.png
16
+
width: 400
17
+
height: 400
18
+
---
19
+
20
+
import ExtLink from "@components/ExtLink.astro";
21
+
export const components = { a: ExtLink };
22
+
23
+
_(The logo for this project is for Healine, but the project was renamed from Healine to Opal Health)_
24
+
25
+
Opal Health was a tele-medicine site I contributed to for TSA Webmaster. It featured a fully functional backend that allowed patients to get appointments and doctors to accept those appointments. Once the appointment time came, the patient and doctor could communicate through audio and video with the web interface and also text chat.
26
+
27
+
The backend was made in [Django](https://www.djangoproject.com/) and the frontend was vanilla CSS (not done by me).
28
+
29
+
This project was a great learning experience for me, I got to learn how to use [WebRTC](https://webrtc.org/) which was really interesting. I forwent using any libraries or packages when making the video chat as well so I cold learn how everything worked. The only external I used was [Scale Drone](https://www.scaledrone.com/).
30
+
31
+
My team members made the rest of the site, I just handled backend and the video chat. Overall it was a really fun project, sadly the competition was cancelled due to COVID-19.
+20
src/content/projects/ow-save-editor.mdx
+20
src/content/projects/ow-save-editor.mdx
···
1
+
---
2
+
name: Outer Wilds Save Editor
3
+
summary: A save editor for Outer Wilds
4
+
timespan:
5
+
from: 2022
6
+
tags:
7
+
- c#
8
+
- unity
9
+
- dotnet
10
+
- outer-wilds
11
+
links:
12
+
github: Bwc9876/OW-SaveEditor
13
+
other:
14
+
Mods Website: https://outerwildsmods.com/mods/saveeditor/
15
+
---
16
+
17
+
import ExtLink from "@components/ExtLink.astro";
18
+
export const components = { a: ExtLink };
19
+
20
+
This is a simple mod for Outer Wilds that lets the player edit their save data. It was made in C# with [OWML](https://owml.outerwildsmods.com).
+20
src/content/projects/ow-time-saver.mdx
+20
src/content/projects/ow-time-saver.mdx
···
1
+
---
2
+
name: Outer Wilds Time Saver
3
+
summary: A mod that saves players time in Outer Wilds
4
+
timespan:
5
+
from: 2022
6
+
tags:
7
+
- c#
8
+
- unity
9
+
- dotnet
10
+
- outer-wilds
11
+
links:
12
+
github: Bwc9876/OW-TimeSaver
13
+
other:
14
+
Mods Website: https://outerwildsmods.com/mods/timesaver/
15
+
---
16
+
17
+
import ExtLink from "@components/ExtLink.astro";
18
+
export const components = { a: ExtLink };
19
+
20
+
This is a simple mod for Outer Wilds that lets the player skip some parts of Outer Wilds that get a bit repetetive. It's made in C# and uses [OWML](https://owml.outerwildsmods.com/).
+31
src/content/projects/owml-docs.mdx
+31
src/content/projects/owml-docs.mdx
···
1
+
---
2
+
name: Outer Wilds Mod Loader Docs
3
+
summary: Documentation for the Outer Wilds Mod Loader
4
+
timespan:
5
+
from: 2022
6
+
tags:
7
+
- web
8
+
- bootstrap
9
+
- python
10
+
- jinja
11
+
- outer-wilds
12
+
links:
13
+
github: ow-mods/owml
14
+
other:
15
+
Mods Website: https://owml.outerwildsmods.com/
16
+
image:
17
+
src: https://owml.outerwildsmods.com/images/owmllogo.webp
18
+
width: 500
19
+
height: 500
20
+
---
21
+
22
+
import ExtLink from "@components/ExtLink.astro";
23
+
export const components = { a: ExtLink };
24
+
25
+
The OWML docs were a quick project I did to try and help centralize information about how to use OWML and mod Outer Wilds in general.
26
+
27
+
I found that there wasn't a very good "getting started" guide ad there was outdated information on OWML's README so I decided to go and make a docs site.
28
+
29
+
It features a getting started guide, schemas for configs and manifests, and reference for how to use the `ModHelper` utility.
30
+
31
+
The site was made with [menagerie](/projects/menagerie) and styled a bit with [SASS](https://sass-lang.com/).
+24
src/content/projects/quick-wheel.mdx
+24
src/content/projects/quick-wheel.mdx
···
1
+
---
2
+
name: Quick Wheel
3
+
summary: A weapon-wheel like launcher app to access your apps quickly
4
+
timespan:
5
+
from: 2020
6
+
tags:
7
+
- python
8
+
- tkinter
9
+
links:
10
+
github: Bwc9876/QuickWheel
11
+
image:
12
+
src: https://opengraph.githubassets.com/2b8095f89da6ba998f1e395b0681ec3cd33c345367e01f5131425d8a29de8535/Bwc9876/QuickWheel
13
+
width: 400
14
+
height: 400
15
+
---
16
+
17
+
import ExtLink from "@components/ExtLink.astro";
18
+
export const components = { a: ExtLink };
19
+
20
+
Quick Wheel is an app to quickly access your apps, web shortcuts, and cmd commands fast.
21
+
22
+
It uses a weapon-wheel-like layout that overlays over everything. It support customizing items and sorting them into folders.
23
+
24
+
This was my first desktop app, it was made using [Tkinter](https://docs.python.org/3/library/tkinter.html) in Python. The UI is very simple, but it was a good learning experience in software development.
+36
src/content/projects/qwerty.mdx
+36
src/content/projects/qwerty.mdx
···
1
+
---
2
+
name: Qwerty
3
+
summary: A Discord bot/framework for building bots using Django's ORM
4
+
timespan:
5
+
from: 2021
6
+
to: 2022
7
+
tags:
8
+
- python
9
+
- discord
10
+
- django
11
+
- sympy
12
+
links:
13
+
github: Bwc9876/Qwerty
14
+
image:
15
+
src: https://static.vecteezy.com/system/resources/previews/018/930/500/non_2x/discord-logo-discord-icon-transparent-free-png.png
16
+
width: 200
17
+
height: 200
18
+
---
19
+
20
+
import ExtLink from "@components/ExtLink.astro";
21
+
export const components = { a: ExtLink };
22
+
23
+
Qwerty is a small project I made when I was messing around with the new [PyCord](https://docs.pycord.dev/) library. It uses Django's ORM to provide easy persistent storage.
24
+
25
+
I made a few commands just for fun, they include:
26
+
27
+
- Calculator With Memory
28
+
- Equation Solver
29
+
- Unit Converter
30
+
- Graphing Math Functions
31
+
- Managing A Minecraft Server
32
+
- Getting The Status Of A Website
33
+
- Rolling Dice For DND
34
+
- Generating Stock Candlestick Graphs
35
+
36
+
It was fun just making commands I was interested in and learning libraries like [SymPy](https://www.sympy.org/).
+30
src/content/projects/unity-webgl.mdx
+30
src/content/projects/unity-webgl.mdx
···
1
+
---
2
+
name: Unity WebGL Template
3
+
summary: A GitHub repo template for easily deploying Unity games to GitHub pages.
4
+
timespan:
5
+
from: 2021
6
+
to: 2022
7
+
tags:
8
+
- tauri
9
+
- rust
10
+
- web
11
+
- react
12
+
- outer-wilds
13
+
links:
14
+
github: Bwc9876/UnityWebGLTemplate
15
+
other:
16
+
Example Site: https://bwc9876.github.io/UnityWebGL/
17
+
image:
18
+
src: https://i.ytimg.com/vi/-txXtAfViEQ/maxresdefault.jpg
19
+
width: 700
20
+
height: 500
21
+
---
22
+
23
+
import ExtLink from "@components/ExtLink.astro";
24
+
export const components = { a: ExtLink };
25
+
26
+
This template was a way for game developers to easily deploy their Unity games to GitHub pages.
27
+
28
+
It was mostly a way for me to learn more about GitHub actions and CD in general.
29
+
30
+
An [example game](https://bwc9876.github.io/UnityWebGL/) is available that was made with the action.
src/images/tech-trends.png
src/images/tech-trends.png
This is a binary file and will not be displayed.
+4
-5
src/pages/index.astro
+4
-5
src/pages/index.astro
···
5
5
6
6
<Layout title="Home">
7
7
<h1>Ben C's Portfolio</h1>
8
-
<h2>Hi There!</h2>
9
8
<p>
10
-
I'm Ben C, a highschool student looking to enter the world of software development,
11
-
specifically full-stack web development.
9
+
Hi there! I'm Ben C, a highschool student looking to enter the world of software
10
+
development, specifically full-stack web development.
12
11
</p>
13
12
<p>
14
-
I'm currently enrolled in trade school for information technology programming, but I like to
15
-
program in my spare time as well.
13
+
I'm currently enrolled in trade school for information technology programming, but I mostly
14
+
like to program in my spare time as well.
16
15
</p>
17
16
<p>
18
17
I like to try a lot of things, from <a href="/projects/ow-new-horizons"> modding games</a>
+2
-1
src/pages/projects/[...slug].astro
+2
-1
src/pages/projects/[...slug].astro
···
4
4
import Layout from "@layouts/Layout.astro";
5
5
import IconLink from "@components/IconLink.astro";
6
6
import defaultSrc from "@images/default-project-image.webp";
7
+
import { getGithubOpenGraph } from "@components/projects/ProjectCard.astro";
7
8
export async function getStaticPaths() {
8
9
const renameEntries = await getCollection("projects");
9
10
return renameEntries.map((entry) => ({
···
26
27
width={entry.data.image?.width ?? 474}
27
28
height={entry.data.image?.height ?? 474}
28
29
alt={entry.data.name}
29
-
src={entry.data.image?.src ?? defaultSrc.src}
30
+
src={entry.data.image?.src ?? getGithubOpenGraph(entry.data.links.github)}
30
31
/>
31
32
</div>
32
33
<hgroup>