bwc9876.dev
Files for my website
bwc9876.dev
Style overhaul
+285
-157
+2
-2
pnpm-lock.yaml
+2
-2
pnpm-lock.yaml
+45
-19
src/components/projects/ProjectCard.astro
+45
-19
src/components/projects/ProjectCard.astro
···
15
15
);
16
16
---
17
17
18
-
<article>
19
-
<header>
20
-
<a href={`/projects/${project.slug}/`}>
18
+
<a href={`/projects/${project.slug}/`}>
19
+
<div class="card">
20
+
<div class="header">
21
+
<strong class="project-name">{project.data.name}</strong>
21
22
<div>
22
23
<Image
23
24
width={500}
···
28
29
alt={project.data.name}
29
30
/>
30
31
</div>
31
-
<strong class="project-name">{project.data.name}</strong>
32
-
</a>
33
-
</header>
34
-
<span>{project.data.summary}</span>
35
-
<footer>
36
-
<small>{project.data.tags.join(" • ")}</small>
37
-
</footer>
38
-
</article>
32
+
</div>
33
+
<span>{project.data.summary}</span>
34
+
<div class="footer">
35
+
<small>{project.data.tags.join(" • ")}</small>
36
+
</div>
37
+
</div>
38
+
</a>
39
39
40
40
<style>
41
-
article {
42
-
margin-bottom: 0 !important;
43
-
margin-top: 0 !important;
41
+
:not(.project-name) {
42
+
text-decoration: none !important;
43
+
}
44
+
45
+
div.card {
44
46
display: flex;
45
47
flex-direction: column;
48
+
height: 100%;
49
+
background-color: var(--secondary);
50
+
padding: calc(var(--spacing) * 2);
51
+
gap: calc(var(--spacing) * 3);
52
+
border-radius: 5px;
46
53
}
47
54
48
-
article:hover {
55
+
a {
56
+
margin-bottom: 0 !important;
57
+
margin-top: 0 !important;
58
+
}
59
+
60
+
a:hover {
49
61
transform: translateY(calc(var(--spacing) * -0.5));
50
62
transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;
51
63
}
52
64
53
-
article:hover img {
65
+
a:hover img {
54
66
transform: scale(1.06);
55
67
}
56
68
57
-
header > a > div {
69
+
div.header {
70
+
text-align: center;
71
+
display: flex;
72
+
flex-direction: column;
73
+
gap: calc(var(--spacing) * 2);
74
+
}
75
+
76
+
div.header > div {
58
77
overflow: hidden;
59
78
width: 100%;
60
-
margin-bottom: var(--spacing);
61
79
}
62
80
63
-
header > a > strong {
81
+
div.header > strong {
64
82
font-size: larger;
65
83
}
66
84
85
+
div.footer {
86
+
text-align: center;
87
+
}
88
+
67
89
span {
68
90
flex-grow: 1;
91
+
text-align: center;
92
+
display: flex;
93
+
align-items: center;
94
+
justify-content: center;
69
95
}
70
96
71
97
img {
+2
-8
src/components/projects/ProjectGrid.astro
+2
-8
src/components/projects/ProjectGrid.astro
···
9
9
const projectEntries = await getCollection("projects");
10
10
let entries = projectEntries.sort((a, b) => {
11
11
const [yearA, yearB] = [a.data.timespan.from, b.data.timespan.from];
12
-
if (yearA === yearB) {
13
-
return 0;
14
-
} else if (yearA > yearB) {
15
-
return -1;
16
-
} else {
17
-
return 1;
18
-
}
12
+
return yearB - yearA;
19
13
});
20
14
21
15
const { limitTo } = Astro.props;
···
46
40
}
47
41
div {
48
42
display: grid;
49
-
gap: var(--spacing);
43
+
gap: calc(var(--spacing) * 2);
50
44
}
51
45
</style>
-3
src/content/projects/nh-config-editor.mdx
-3
src/content/projects/nh-config-editor.mdx
···
12
12
- outer-wilds
13
13
links:
14
14
github: Outer-Wilds-New-Horizons/nh-config-editor
15
-
other:
16
-
- label: Docs Site
17
-
url: https://nh.outerwildsmods.com/editor.html
18
15
image:
19
16
src: https://user-images.githubusercontent.com/25644444/184557668-6710d0ab-bcc2-410e-af72-8877270bc5c8.png
20
17
width: 500
+62
-18
src/layouts/Layout.astro
+62
-18
src/layouts/Layout.astro
···
78
78
</a>
79
79
</li>
80
80
<li class="brand-name">
81
-
<b>Bwc9876</b>.dev
81
+
<a href="/">
82
+
<b class="gradient-text">Bwc9876</b>.dev
83
+
</a>
82
84
</li>
83
85
<li class="home-link">
84
86
<a href="/">Home</a>
···
117
119
118
120
<style is:global>
119
121
:root {
122
+
--text: #daf1ef;
123
+
--background: #080609;
124
+
--primary: #53d164 !important;
125
+
--secondary: #012d1e !important;
126
+
--accent: #0ee19b;
120
127
--spacing: 0.5rem !important;
121
-
--primary: #32c432 !important;
122
-
--primary-hover: hsl(120 80% 50% / 1) !important;
123
-
--primary-focus: hsl(120deg 85% 41% / 25%) !important;
128
+
--primary-hover: hsl(128, 58%, 45%) !important;
129
+
--primary-focus: hsl(128, 58%, 70%) !important;
130
+
--secondary-hover: hsl(160, 96%, 10%) !important;
131
+
--secondary-focus: hsl(160, 96%, 30%) !important;
124
132
--tooltip-color: var(--muted-color) !important;
125
-
--tooltip-background-color: hsl(120 31% 2% / 1) !important;
126
-
--background-color: #101e10 !important;
127
-
--card-background-color: hsl(120 31% 11% / 1) !important;
128
-
--card-sectionning-background-color: hsl(120 29% 13% / 1) !important;
129
-
--dropdown-background-color: hsl(120, 30%, 15%) !important;
130
-
--dropdown-border-color: hsl(120, 27%, 19%) !important;
131
-
--color: hsl(120, 16%, 77%) !important;
132
-
--h1-color: hsl(120, 20%, 94%) !important;
133
-
--h2-color: hsl(125, 20%, 90%) !important;
134
-
--h3-color: hsl(120, 18%, 86%) !important;
135
-
--h4-color: hsl(121, 17%, 82%) !important;
136
-
--h5-color: hsl(120, 16%, 77%) !important;
137
-
--h6-color: hsl(121, 15%, 73%) !important;
138
-
--muted-color: hsl(120 10% 65% / 1) !important;
133
+
--tooltip-background-color: var(--secondary) !important;
134
+
--background-color: var(--background) !important;
135
+
--card-background-color: var(--secondary) !important;
136
+
--card-sectionning-background-color: var(--secondary) !important;
137
+
--dropdown-background-color: var(--secondary) !important;
138
+
--dropdown-hover-background-color: var(--secondary-hover) !important;
139
+
--dropdown-border-color: var(--secondary) !important;
140
+
--color: var(--text) !important;
141
+
--h1-color: var(--primary) !important;
142
+
--h2-color: var(--text) !important;
143
+
--h3-color: var(--text) !important;
144
+
--h4-color: var(--text) !important;
145
+
--h5-color: var(--text) !important;
146
+
--h6-color: var(--text) !important;
147
+
--muted-color: var(--text) !important;
148
+
}
149
+
150
+
a:not([role="button"]):focus,
151
+
summary:focus {
152
+
background-color: initial;
153
+
border: 2px solid var(--accent);
154
+
border-radius: 5px;
155
+
}
156
+
157
+
.gradient-text {
158
+
background: linear-gradient(120deg, var(--primary), var(--accent) 70%);
159
+
-webkit-background-clip: text;
160
+
-webkit-text-fill-color: transparent;
161
+
}
162
+
163
+
a[role="button"]:not(.secondary) {
164
+
color: black !important;
165
+
}
166
+
167
+
a:not([role="button"]) {
168
+
color: var(--accent);
169
+
}
170
+
171
+
a:not([role="button"]):hover {
172
+
color: hsl(160, 88%, 35%);
139
173
}
140
174
141
175
body {
···
150
184
151
185
.home-link {
152
186
padding-left: calc(var(--spacing) * 2);
187
+
}
188
+
189
+
.brand-name {
190
+
color: var(--accent);
153
191
}
154
192
155
193
@media (width <= 575px) {
···
191
229
192
230
nav .mobile-socials {
193
231
display: none;
232
+
}
233
+
234
+
nav summary {
235
+
color: var(--accent) !important;
236
+
display: flex;
237
+
align-items: center;
194
238
}
195
239
196
240
nav details a {
+87
-50
src/pages/index.astro
+87
-50
src/pages/index.astro
···
1
1
---
2
2
import ProjectGrid from "@components/projects/ProjectGrid.astro";
3
3
import Layout from "@layouts/Layout.astro";
4
+
import { Image } from "@astrojs/image/components";
4
5
---
5
6
6
7
<Layout title="Ben C's Portfolio" appendTitle={false}>
7
-
<h1>Ben C's Portfolio</h1>
8
-
<p>
9
-
Hi there! I'm Ben C, a prospective college student looking to enter the world of software
10
-
development, specifically full-stack web development.
11
-
</p>
12
-
<p>
13
-
I'm currently set to start my college career in Computer Science at West Chester University
14
-
in August.
15
-
</p>
16
-
<p>
17
-
I like to try a lot of things, from <a href="/projects/ow-new-horizons"> modding games</a>
18
-
to building
19
-
<a href="/projects/menagerie">websites</a> and
20
-
<a href="/projects/ow-mod-man">desktop apps</a>. I enjoy pretty much any aspect of software
21
-
development.
22
-
</p>
23
-
<p>On this site you'll find info about me and my projects.</p>
24
-
25
-
<h2>About Me</h2>
26
-
<p>
27
-
I'm an 18-year-old developer from Pennsylvania, USA. I first started programming with Unity
28
-
games but then quickly began doing web development and then expanded into anything I was
29
-
interested in. I've been programming for about six years now and hope that I can continue to
30
-
pursue a career in this industry.
31
-
</p>
32
-
<p>
33
-
I then went to trade school for Information Technology Programming and learned a lot about
34
-
best practices and the software development life cycle. I participated in both SkillsUSA ad
35
-
TSA as well and was awarded 1st place in states for Video Game Design in TSA, as well as 1st
36
-
place in Computer Programming at states and 4th at nationals in SkillsUSA.
37
-
</p>
38
-
<p>
39
-
Throughout my time at trade school, I received my OSHA, IC3, and Pennsylvania State Skills
40
-
(Information Technology Programming) certifications.
41
-
</p>
42
-
<p>
43
-
Also during my time at trade school, I joined an online community of modders for the game
44
-
Outer Wilds. This community helped me go above and beyond with my development, continually
45
-
motivating me to try new things and publish my work.
46
-
</p>
47
-
<p>
48
-
I'll be starting college in August at West Chester University for Computer Science, and hope
49
-
that I can continue to expand my skill set and improve as a dev.
50
-
</p>
51
-
<p>
52
-
My end goal is to work at a semi-big company and continue to contribute to open source while
53
-
working.
54
-
</p>
8
+
<div class="hero">
9
+
<div>
10
+
<h1>Ben C's <span class="gradient-text">Portfolio</span></h1>
11
+
<p>
12
+
Hi there! I'm Ben C, a prospective college student looking to enter the world of
13
+
software development, specifically full-stack web development.
14
+
</p>
15
+
<p>
16
+
I like to try a lot of things, from <a href="/projects/ow-new-horizons">
17
+
modding games</a
18
+
>
19
+
to building
20
+
<a href="/projects/menagerie">websites</a> and
21
+
<a href="/projects/ow-mod-man">desktop apps</a>.<br /> I enjoy pretty much any aspect
22
+
of software development.
23
+
</p>
24
+
<div class="ctas">
25
+
<a href="/projects" role="button">View My Projects</a>
26
+
<a href="#about-me" role="button" class="secondary">About Me</a>
27
+
</div>
28
+
</div>
29
+
<div class="hero-image">
30
+
<Image
31
+
width={150}
32
+
height={150}
33
+
format="webp"
34
+
alt="Ben C's Avatar"
35
+
src="https://avatars.githubusercontent.com/u/25644444?v=4"
36
+
/>
37
+
</div>
38
+
</div>
55
39
56
40
<h2>What I Know</h2>
57
41
<p>
···
82
66
<li>Bash / Zsh / Nushell</li>
83
67
<li>Linux</li>
84
68
</ul>
85
-
<p>Below you can find some of my recent projects where I use these technologies.</p>
69
+
70
+
<h2 id="about-me">About Me</h2>
71
+
<div class="about-section">
72
+
<p>
73
+
I'm an 18-year-old developer from Pennsylvania, USA. I first started programming with
74
+
Unity games but then quickly began doing web development and then expanded into anything
75
+
I was interested in. I've been programming for about six years now and hope that I can
76
+
continue to pursue a career in this industry.
77
+
</p>
78
+
<p>
79
+
After programming on my own for about 3 years, I went to trade school for Information
80
+
Technology Programming and learned about best practices and the software development
81
+
life cycle. I participated in both SkillsUSA and TSA and was awarded 1st place in states
82
+
for Video Game Design in TSA, as well as 1st place in Computer Programming at states and
83
+
4th at nationals in SkillsUSA. Throughout my time at trade school, I received my OSHA,
84
+
IC3, and Pennsylvania State Skills (Information Technology Programming) certifications.
85
+
</p>
86
+
<p>
87
+
Also during my time at trade school, I joined an online community of modders for the
88
+
game Outer Wilds. This community helped me go above and beyond with my development,
89
+
continually motivating me to try new things and publish my work.
90
+
</p>
91
+
<p>I'll be starting college in August, and majoring in Computer Science.</p>
92
+
<p>
93
+
My end goal is to work at a semi-big company and continue to contribute to open source
94
+
while working.
95
+
</p>
96
+
</div>
86
97
87
98
<hgroup>
88
99
<h2>Recent Projects</h2>
···
95
106
</Layout>
96
107
97
108
<style>
109
+
.hero {
110
+
display: flex;
111
+
flex-direction: row;
112
+
gap: calc(var(--spacing) * 5);
113
+
justify-content: space-between;
114
+
align-items: center;
115
+
margin: calc(var(--spacing) * 10) 0;
116
+
height: 50vh;
117
+
}
118
+
119
+
.hero .ctas {
120
+
display: flex;
121
+
gap: var(--spacing);
122
+
}
123
+
124
+
.hero-image {
125
+
display: flex;
126
+
align-items: center;
127
+
}
128
+
129
+
.hero-image img {
130
+
width: 350px;
131
+
clip-path: circle();
132
+
}
133
+
98
134
.view-more {
99
135
margin-top: calc(var(--spacing) * 3);
100
136
display: flex;
···
111
147
.know-list li {
112
148
list-style: none;
113
149
padding: var(--spacing);
114
-
border: 0.01rem solid var(--primary);
150
+
border: 0.1rem solid var(--accent);
151
+
background-color: var(--secondary);
115
152
border-radius: 50px;
116
153
}
117
154
</style>
+86
-56
src/pages/projects/[...slug].astro
+86
-56
src/pages/projects/[...slug].astro
···
4
4
import Layout from "@layouts/Layout.astro";
5
5
import IconLink from "@components/IconLink.astro";
6
6
import getProjectImageSrc from "@images/utils";
7
+
import { Icon } from "astro-icon";
7
8
export async function getStaticPaths() {
8
9
const renameEntries = await getCollection("projects");
9
10
return renameEntries.map((entry) => ({
···
18
19
entry.data.links?.github ?? "Not Found",
19
20
entry.data.image?.src
20
21
);
22
+
23
+
const firstOtherLink = entry.data.links?.other?.[0];
24
+
25
+
const restOther = entry.data.links?.other?.slice(1);
21
26
22
27
const og = {
23
28
src,
···
26
31
---
27
32
28
33
<Layout title={entry.data.name} description={entry.data.summary} keywords={entry.data.tags} og={og}>
29
-
<header>
34
+
<div class="hero">
35
+
<div class="txt">
36
+
<hgroup>
37
+
<h1 class="gradient-text">{entry.data.name}</h1>
38
+
<h2>
39
+
{entry.data.timespan.from}{
40
+
entry.data.timespan.to && <> - {entry.data.timespan.to}</>
41
+
} •
42
+
{entry.data.tags.join(" • ")}
43
+
</h2>
44
+
</hgroup>
45
+
<p>{entry.data.summary}</p>
46
+
<div class="ctas">
47
+
{
48
+
entry.data.links?.github && (
49
+
<span>
50
+
<a href={`https://github.com/${entry.data.links.github}`} role="button">
51
+
<Icon name="bi:github" size={25} /> View On GitHub
52
+
</a>
53
+
</span>
54
+
)
55
+
}
56
+
{
57
+
firstOtherLink && (
58
+
<span>
59
+
<a href={firstOtherLink.url} role="button" class="secondary">
60
+
<Icon
61
+
name={`${firstOtherLink.iconPackOverride ?? "bi"}:${
62
+
firstOtherLink.icon
63
+
}`}
64
+
size={25}
65
+
/>
66
+
{firstOtherLink.label}
67
+
</a>
68
+
</span>
69
+
)
70
+
}
71
+
</div>
72
+
<div class="links">
73
+
{
74
+
restOther &&
75
+
restOther.map((l) => (
76
+
<span>
77
+
<IconLink
78
+
icon={l.icon}
79
+
overridePack={l.iconPackOverride}
80
+
size={25}
81
+
href={l.url}
82
+
placement="bottom"
83
+
label={l.label}
84
+
/>
85
+
</span>
86
+
))
87
+
}
88
+
</div>
89
+
</div>
30
90
<div class="img-container">
31
91
<Image
32
92
fit="inside"
···
39
99
src={src}
40
100
/>
41
101
</div>
42
-
<hgroup>
43
-
<h1>{entry.data.name}</h1>
44
-
<h2>
45
-
{entry.data.timespan.from}{
46
-
entry.data.timespan.to && <> - {entry.data.timespan.to}</>
47
-
} •
48
-
{entry.data.tags.join(" • ")}
49
-
</h2>
50
-
</hgroup>
51
-
<div class="links">
52
-
{
53
-
entry.data.links?.github && (
54
-
<span>
55
-
<IconLink
56
-
icon="github"
57
-
size={25}
58
-
label="GitHub"
59
-
placement="bottom"
60
-
href={`https://github.com/${entry.data.links.github}`}
61
-
/>
62
-
</span>
63
-
)
64
-
}
65
-
{
66
-
entry.data.links?.other &&
67
-
entry.data.links.other.map((l) => (
68
-
<span>
69
-
<IconLink
70
-
icon={l.icon}
71
-
overridePack={l.iconPackOverride}
72
-
size={25}
73
-
href={l.url}
74
-
placement="bottom"
75
-
label={l.label}
76
-
/>
77
-
</span>
78
-
))
79
-
}
80
-
</div>
81
-
</header>
102
+
</div>
82
103
<Content />
83
104
</Layout>
84
105
85
106
<style>
86
-
header > hgroup {
87
-
margin-bottom: var(--spacing);
107
+
.hero {
108
+
display: flex;
109
+
flex-direction: row;
110
+
gap: calc(var(--spacing) * 5);
111
+
justify-content: space-between;
112
+
align-items: center;
113
+
margin: calc(var(--spacing) * 10) 0;
88
114
}
89
115
90
-
header > div.img-container {
116
+
.hero .txt {
91
117
width: 100%;
118
+
flex-grow: 1;
92
119
display: flex;
93
-
justify-content: center;
120
+
flex-direction: column;
121
+
gap: calc(var(--spacing) * 2);
94
122
}
95
123
96
-
header {
97
-
background-color: var(--card-sectionning-background-color);
98
-
padding: var(--spacing);
99
-
border-radius: 5px;
100
-
margin-bottom: calc(var(--spacing) * 5) !important;
101
-
text-align: center;
124
+
.hero .ctas {
125
+
display: flex;
126
+
align-items: center;
127
+
gap: calc(var(--spacing) * 2);
102
128
}
103
129
104
-
.links {
130
+
.hero .ctas a[role="button"] {
105
131
display: flex;
106
-
align-content: center;
107
-
justify-content: center;
132
+
align-items: center;
108
133
gap: var(--spacing);
109
134
}
110
135
111
-
.links > span {
136
+
.hero .img-container {
137
+
flex-grow: 1;
138
+
width: 100%;
139
+
}
140
+
141
+
.links {
112
142
display: flex;
113
-
align-items: center;
143
+
gap: calc(var(--spacing) * 2);
114
144
}
115
145
</style>