version 2 of my website
updated some styles and layout
+202
-182
+15
-1
bun.lock
+15
-1
bun.lock
···
28
28
},
29
29
"devDependencies": {
30
30
"@types/bun": "^1.3.11",
31
+
"prettier": "^3.8.1",
32
+
"prettier-plugin-astro": "^0.14.1",
31
33
},
32
34
},
33
35
},
34
36
"packages": {
35
-
"@astrojs/compiler": ["@astrojs/compiler@3.0.1", "", {}, "sha512-z97oYbdebO5aoWzuJ/8q5hLK232+17KcLZ7cJ8BCWk6+qNzVxn/gftC0KzMBUTD8WAaBkPpNSQK6PXLnNrZ0CA=="],
37
+
"@astrojs/compiler": ["@astrojs/compiler@2.13.1", "", {}, "sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg=="],
36
38
37
39
"@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.8.0", "", { "dependencies": { "picomatch": "^4.0.3" } }, "sha512-J56GrhEiV+4dmrGLPNOl2pZjpHXAndWVyiVDYGDuw6MWKpBSEMLdFxHzeM/6sqaknw9M+HFfHZAcvi3OfT3D/w=="],
38
40
···
1526
1528
1527
1529
"precinct": ["precinct@12.2.0", "", { "dependencies": { "@dependents/detective-less": "^5.0.1", "commander": "^12.1.0", "detective-amd": "^6.0.1", "detective-cjs": "^6.0.1", "detective-es6": "^5.0.1", "detective-postcss": "^7.0.1", "detective-sass": "^6.0.1", "detective-scss": "^5.0.1", "detective-stylus": "^5.0.1", "detective-typescript": "^14.0.0", "detective-vue2": "^2.2.0", "module-definition": "^6.0.1", "node-source-walk": "^7.0.1", "postcss": "^8.5.1", "typescript": "^5.7.3" }, "bin": { "precinct": "bin/cli.js" } }, "sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w=="],
1528
1530
1531
+
"prettier": ["prettier@3.8.1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
1532
+
1533
+
"prettier-plugin-astro": ["prettier-plugin-astro@0.14.1", "", { "dependencies": { "@astrojs/compiler": "^2.9.1", "prettier": "^3.0.0", "sass-formatter": "^0.7.6" } }, "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw=="],
1534
+
1529
1535
"prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
1530
1536
1531
1537
"process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
···
1628
1634
1629
1635
"run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
1630
1636
1637
+
"s.color": ["s.color@0.0.15", "", {}, "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA=="],
1638
+
1631
1639
"safe-array-concat": ["safe-array-concat@1.1.3", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "get-intrinsic": "^1.2.6", "has-symbols": "^1.1.0", "isarray": "^2.0.5" } }, "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q=="],
1632
1640
1633
1641
"safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
···
1637
1645
"safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="],
1638
1646
1639
1647
"safe-stable-stringify": ["safe-stable-stringify@2.5.0", "", {}, "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA=="],
1648
+
1649
+
"sass-formatter": ["sass-formatter@0.7.9", "", { "dependencies": { "suf-log": "^2.5.3" } }, "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw=="],
1640
1650
1641
1651
"sax": ["sax@1.4.3", "", {}, "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ=="],
1642
1652
···
1723
1733
"style-to-js": ["style-to-js@1.1.17", "", { "dependencies": { "style-to-object": "1.0.9" } }, "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA=="],
1724
1734
1725
1735
"style-to-object": ["style-to-object@1.0.9", "", { "dependencies": { "inline-style-parser": "0.2.4" } }, "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw=="],
1736
+
1737
+
"suf-log": ["suf-log@2.5.3", "", { "dependencies": { "s.color": "0.0.15" } }, "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow=="],
1726
1738
1727
1739
"supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
1728
1740
···
1987
1999
"archiver-utils/glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="],
1988
2000
1989
2001
"archiver-utils/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
2002
+
2003
+
"astro/@astrojs/compiler": ["@astrojs/compiler@3.0.1", "", {}, "sha512-z97oYbdebO5aoWzuJ/8q5hLK232+17KcLZ7cJ8BCWk6+qNzVxn/gftC0KzMBUTD8WAaBkPpNSQK6PXLnNrZ0CA=="],
1990
2004
1991
2005
"better-ajv-errors/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
1992
2006
+3
-1
package.json
+3
-1
package.json
+2
-2
src/components/lastfm.tsx
+2
-2
src/components/lastfm.tsx
···
21
21
}, [])
22
22
23
23
if (loading) return (
24
-
<div className="border border-solid rounded-lg p-6">
24
+
<div className="surface">
25
25
<div className='skeleton h-6 w-32 mb-2' />
26
26
<div className=' flex gap-3 items-center'>
27
27
<div className='skeleton size-16 rounded-full' />
···
33
33
if (error) return null;
34
34
35
35
return (
36
-
<div className="border border-solid rounded-lg p-6">
36
+
<div className="surface">
37
37
<h2 className="text-2xl mb-2">
38
38
{track.nowplaying ? "Now playing" : "Recently Played"}
39
39
</h2>
+44
-43
src/components/links.astro
+44
-43
src/components/links.astro
···
6
6
import Bluesky from "../assets/icons/bluesky.svg";
7
7
import { Mail } from "@lucide/astro";
8
8
9
-
const {className} = Astro.props;
9
+
const { className } = Astro.props;
10
10
---
11
-
<div class={`border-1 border-solid rounded-lg p-4 ${className}`}>
12
-
<h1 class="text-2xl">Where to find me</h1>
13
-
<div class="flex gap-3 h-8 items-center">
14
-
<a
15
-
href="https://bsky.app/profile/dustycode.dev"
16
-
aria-label="Bluesky"
17
-
target="_blank"
18
-
>
19
-
<Bluesky class="h-4 fill-blue" />
20
-
</a>
21
-
<a
22
-
href="https://github.com/DustinsCode"
23
-
aria-label="Github"
24
-
target="_blank"
25
-
>
26
-
<Github class="h-4 fill-blue" />
27
-
</a>
28
-
<a
29
-
href="https://discordapp.com/users/195312689839341569"
30
-
aria-label="Discord"
31
-
target="_blank"
32
-
>
33
-
<Discord class="h-4 w-fit fill-blue" />
34
-
</a>
35
-
<a
36
-
href="https://www.last.fm/user/dustycode"
37
-
aria-label="last.fm"
38
-
target="_blank"
39
-
>
40
-
<LastFM class="h-4 w-fit fill-blue" />
41
-
</a>
42
-
<a
43
-
href="https://www.linkedin.com/in/dustycode/"
44
-
aria-label="LinkedIn"
45
-
target="_blank"
46
-
>
47
-
<LinkedIn class="h-4 w-fit fill-blue" />
48
-
</a>
49
-
<a href="mailto:dustin@dustycode.dev" aria-label="email">
50
-
<Mail class="h-4 w-fit text-blue" />
51
-
</a>
52
-
</div>
11
+
12
+
<div class={`surface ${className}`}>
13
+
<h1 class="text-2xl">Where to find me</h1>
14
+
<div class="flex gap-3 h-8 items-center">
15
+
<a
16
+
href="https://bsky.app/profile/dustycode.dev"
17
+
aria-label="Bluesky"
18
+
target="_blank"
19
+
>
20
+
<Bluesky class="h-4 fill-blue" />
21
+
</a>
22
+
<a
23
+
href="https://github.com/DustinsCode"
24
+
aria-label="Github"
25
+
target="_blank"
26
+
>
27
+
<Github class="h-4 fill-blue" />
28
+
</a>
29
+
<a
30
+
href="https://discordapp.com/users/195312689839341569"
31
+
aria-label="Discord"
32
+
target="_blank"
33
+
>
34
+
<Discord class="h-4 w-fit fill-blue" />
35
+
</a>
36
+
<a
37
+
href="https://www.last.fm/user/dustycode"
38
+
aria-label="last.fm"
39
+
target="_blank"
40
+
>
41
+
<LastFM class="h-4 w-fit fill-blue" />
42
+
</a>
43
+
<a
44
+
href="https://www.linkedin.com/in/dustycode/"
45
+
aria-label="LinkedIn"
46
+
target="_blank"
47
+
>
48
+
<LinkedIn class="h-4 w-fit fill-blue" />
49
+
</a>
50
+
<a href="mailto:dustin@dustycode.dev" aria-label="email">
51
+
<Mail class="h-4 w-fit text-blue" />
52
+
</a>
53
+
</div>
53
54
</div>
+20
-18
src/components/whoami.astro
+20
-18
src/components/whoami.astro
···
3
3
import me from "../assets/me.jpeg";
4
4
---
5
5
6
-
<div class="border border-solid rounded-lg p-6">
7
-
<div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
8
-
<div class="flex-1 space-y-2">
9
-
<h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
10
-
<p class="text-lg">
11
-
I'm a full stack software engineer from Michigan!
12
-
</p>
13
-
<p>
14
-
You can often find me on the computer, out in nature, on the
15
-
tennis courts, or wherever there will be some cool cars, and almost always with my camera :)
16
-
</p>
17
-
</div>
18
-
<Image
19
-
class="rounded-full size-40 flex-shrink-0"
20
-
loading="eager"
21
-
src={me}
22
-
alt="Me smiling in my snowboarding jacket on a sunny winter day"
23
-
/>
6
+
<div class="border border-solid rounded-lg p-6 surface">
7
+
<div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
8
+
<div class="flex-1 space-y-2">
9
+
<h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
10
+
<p class="text-lg">
11
+
I'm a senior full stack software engineer from Michigan, currently
12
+
working on some cool stuff at Zenimax Online Studios!
13
+
</p>
14
+
<p>
15
+
Lately you can find me out in nature, at cars and coffees taking
16
+
pictures, or at home playing around with my homelab or enjoying some
17
+
video games, shows, or movies!
18
+
</p>
24
19
</div>
20
+
<Image
21
+
class="rounded-full size-40 shrink-0"
22
+
loading="eager"
23
+
src={me}
24
+
alt="Me smiling in my snowboarding jacket on a sunny winter day"
25
+
/>
26
+
</div>
25
27
</div>
+20
-20
src/layouts/Layout.astro
+20
-20
src/layouts/Layout.astro
···
11
11
---
12
12
13
13
<html lang="en" class="dark">
14
-
<CommonHead title={title} />
15
-
<body
16
-
class="min-h-screen transition-colors duration-200 lg:mx-10 mx-3 flex flex-col justify-between"
17
-
>
18
-
<div class="">
19
-
<Header />
20
-
<div
21
-
class="grid grid-flow-col xl:grid-cols-4 auto-rows-auto gap-4 xl:max-w-2/3 mx-auto"
22
-
>
23
-
<div class="col-span-3">
24
-
<slot />
25
-
</div>
26
-
<div class="flex flex-col gap-4">
27
-
<Nav className="row-span-2" />
28
-
<Links className="" />
29
-
</div>
30
-
</div>
14
+
<CommonHead title={title} />
15
+
<body
16
+
class="min-h-screen transition-colors duration-200 lg:mx-10 mx-3 flex flex-col justify-between"
17
+
>
18
+
<div class="">
19
+
<Header />
20
+
<div
21
+
class="grid grid-flow-col xl:grid-cols-4 auto-rows-auto gap-4 xl:max-w-2/3 mx-auto"
22
+
>
23
+
<div class="flex flex-col gap-4">
24
+
<Nav className="row-span-2" />
25
+
<Links className="" />
31
26
</div>
32
-
<div class="self-center">
33
-
<Footer />
27
+
<div class="col-span-3">
28
+
<slot />
34
29
</div>
35
-
</body>
30
+
</div>
31
+
</div>
32
+
<div class="self-center">
33
+
<Footer />
34
+
</div>
35
+
</body>
36
36
</html>
+8
-13
src/pages/index.astro
+8
-13
src/pages/index.astro
···
2
2
import LastFM from "../components/lastfm.tsx";
3
3
import Whoami from "../components/whoami.astro";
4
4
import Layout from "../layouts/Layout.astro";
5
-
6
-
7
5
---
8
6
9
7
<Layout title="dustycode">
10
-
<div
11
-
class="flex gap-4 justify-center flex-col md:flex-row"
12
-
>
13
-
<div class="flex-col flex mx-auto w-full gap-3">
14
-
<Whoami />
15
-
<div class="grid grid-cols-3 gap-4">
16
-
<div class="col-span-1">
17
-
<LastFM client:load />
18
-
</div>
19
-
</div>
8
+
<div class="flex gap-4 justify-center flex-col md:flex-row">
9
+
<div class="flex-col flex mx-auto w-full gap-3">
10
+
<Whoami />
11
+
<div class="grid grid-cols-3 gap-4">
12
+
<div class="col-span-2">
13
+
<LastFM client:load />
20
14
</div>
21
-
15
+
</div>
22
16
</div>
17
+
</div>
23
18
</Layout>
+56
-57
src/pages/work.astro
+56
-57
src/pages/work.astro
···
2
2
import Layout from "../layouts/Layout.astro";
3
3
4
4
const jobs = [
5
-
{
6
-
company: "Zenimax Online Studios",
7
-
title: "Applications Engineer",
8
-
notes: [
9
-
"Architected and built web app to bring studio knowledge and communication to one place and automate workflows across different teams - React, Fastify, BullMQ, MySQL",
10
-
"Worked on web app to search and review both 2D and 3D game assets - React, Fastify, ArangoDB",
11
-
"Worked on web app to aggregate in-game market performance data and various BI data - React, Fastify, MySQL",
12
-
"Managed and automated deployments for web applications and set up hosting infrastrucure - Ubuntu, Docker, Nginx, Github Actions",
13
-
"Worked on UX improvement features in desktop application that automates 3D asset pipeline from 3DS Max to game ready assets - Python, PyQT"
14
-
],
15
-
startYear: "2023",
16
-
endYear: "Present"
17
-
},
18
-
{
19
-
company: "Ford Motor Company",
20
-
title: "Software Engineer Technical Lead",
21
-
notes: [
22
-
"Modernized legacy manufacturing quality software, leading the development effort as the team technical lead",
23
-
"Worked with designers and product managers to plan out features in order to meet deliverable expectations",
24
-
25
-
],
26
-
startYear: "2022",
27
-
endYear: "2023"
28
-
},
29
-
{
30
-
company: "Ford Motor Company",
31
-
title: 'Software Engineer - "Ford College Graduate (FCG)"',
32
-
notes: [
33
-
"Helped automate internal application onboarding into various monitoring tools, like Splunk and Dynatrace in a single self-serve web application",
34
-
"Worked on FordPass Android application",
35
-
"Built various web applications used to train and onboard engineers to company coding standards"
36
-
],
37
-
startYear: "2019",
38
-
endYear: "2022"
39
-
}
5
+
{
6
+
company: "Zenimax Online Studios",
7
+
title: "Applications Engineer",
8
+
notes: [
9
+
"Architected and built web app to bring studio knowledge and communication to one place and automate workflows across different teams - React, Fastify, BullMQ, MySQL",
10
+
"Worked on web app to search and review both 2D and 3D game assets - React, Fastify, ArangoDB",
11
+
"Worked on web app to aggregate in-game market performance data and various BI data - React, Fastify, MySQL",
12
+
"Managed and automated deployments for web applications and set up hosting infrastrucure - Ubuntu, Docker, Nginx, Github Actions",
13
+
"Worked on UX improvement features in desktop application that automates 3D asset pipeline from 3DS Max to game ready assets - Python, PyQT",
14
+
],
15
+
startYear: "2023",
16
+
endYear: "Present",
17
+
},
18
+
{
19
+
company: "Ford Motor Company",
20
+
title: "Software Engineer Technical Lead",
21
+
notes: [
22
+
"Modernized legacy manufacturing quality software, leading the development effort as the team technical lead",
23
+
"Worked with designers and product managers to plan out features in order to meet deliverable expectations",
24
+
],
25
+
startYear: "2022",
26
+
endYear: "2023",
27
+
},
28
+
{
29
+
company: "Ford Motor Company",
30
+
title: 'Software Engineer - "Ford College Graduate (FCG)"',
31
+
notes: [
32
+
"Helped automate internal application onboarding into various monitoring tools, like Splunk and Dynatrace in a single self-serve web application",
33
+
"Worked on FordPass Android application",
34
+
"Built various web applications used to train and onboard engineers to company coding standards",
35
+
],
36
+
startYear: "2019",
37
+
endYear: "2022",
38
+
},
40
39
];
41
40
---
42
41
43
42
<Layout title="dustycode - work">
44
-
<div class="flex flex-col gap-3 [&>*]:mx-auto">
45
-
<h1 class="font-semibold text-5xl">Work Experience</h1>
46
-
<div class="[&>*]:mb-3">
47
-
{
48
-
jobs.map((job) => (
49
-
<div class="border border-solid rounded-lg p-6">
50
-
<h2 class="text-2xl">{job.title}</h2>
51
-
<div class="text-lg flex gap-2 items-center">
52
-
{job.company}
53
-
<span class="text-gray-0 text-sm">
54
-
{job.startYear} - {job.endYear}
55
-
</span>
56
-
</div>
57
-
<ul class="list-disc ml-3 [&>li]:mb-2 text-md">
58
-
{job.notes.map((note) => (
59
-
<li>{note}</li>
60
-
))}
61
-
</ul>
62
-
</div>
63
-
))
64
-
}
65
-
</div>
43
+
<div class="flex flex-col gap-3 *:mx-auto">
44
+
<h1 class="font-semibold text-5xl">Resume</h1>
45
+
<div class="*:mb-3">
46
+
{
47
+
jobs.map((job) => (
48
+
<div class="surface">
49
+
<h2 class="text-2xl">{job.title}</h2>
50
+
<div class="text-lg flex gap-2 items-center">
51
+
{job.company}
52
+
<span class="text-gray-0 text-sm">
53
+
{job.startYear} - {job.endYear}
54
+
</span>
55
+
</div>
56
+
<ul class="list-disc ml-3 [&>li]:mb-2 text-md">
57
+
{job.notes.map((note) => (
58
+
<li>{note}</li>
59
+
))}
60
+
</ul>
61
+
</div>
62
+
))
63
+
}
66
64
</div>
65
+
</div>
67
66
</Layout>