many changes :3
This commit is contained in:
parent
4ce242e87e
commit
f806365baa
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
@ -0,0 +1,10 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
[*.{js,json,yml}]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
4
.gitattributes
vendored
Normal file
4
.gitattributes
vendored
Normal file
|
@ -0,0 +1,4 @@
|
|||
/.yarn/** linguist-vendored
|
||||
/.yarn/releases/* binary
|
||||
/.yarn/plugins/**/* binary
|
||||
/.pnp.* binary linguist-generated
|
BIN
.yarn/install-state.gz
vendored
Normal file
BIN
.yarn/install-state.gz
vendored
Normal file
Binary file not shown.
1
.yarnrc.yml
Normal file
1
.yarnrc.yml
Normal file
|
@ -0,0 +1 @@
|
|||
nodeLinker: node-modules
|
|
@ -1,4 +1,8 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import {
|
||||
defineConfig,
|
||||
passthroughImageService,
|
||||
squooshImageService,
|
||||
} from "astro/config";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import react from "@astrojs/react";
|
||||
|
||||
|
@ -9,7 +13,7 @@ export default defineConfig({
|
|||
integrations: [tailwind(), react()],
|
||||
output: "hybrid",
|
||||
adapter: vercel({
|
||||
imageService: true,
|
||||
// imageService: true,
|
||||
webAnalytics: {
|
||||
enabled: true,
|
||||
},
|
||||
|
@ -18,4 +22,7 @@ export default defineConfig({
|
|||
},
|
||||
functionPerRoute: true,
|
||||
}),
|
||||
image: {
|
||||
service: squooshImageService(),
|
||||
},
|
||||
});
|
||||
|
|
20
package.json
20
package.json
|
@ -10,19 +10,27 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^3.0.4",
|
||||
"@astrojs/tailwind": "^5.0.2",
|
||||
"@astrojs/vercel": "^5.1.0",
|
||||
"@astrojs/react": "3.6.2",
|
||||
"@astrojs/tailwind": "5.1.0",
|
||||
"@astrojs/vercel": "7.7.2",
|
||||
"@icons-pack/react-simple-icons": "^9.1.0",
|
||||
"@react-three/drei": "^9.101.0",
|
||||
"@react-three/fiber": "^8.15.19",
|
||||
"@react-three/xr": "^5.7.1",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"astro": "^3.4.0",
|
||||
"astro": "4.14.2",
|
||||
"astro-seo": "^0.8.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"tailwindcss": "^3.0.24"
|
||||
"sharp": "^0.33.5",
|
||||
"squoosh": "^0.0.0",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"three": "^0.162.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5"
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.5.4"
|
||||
}
|
||||
}
|
||||
|
|
BIN
src/assets/img/work/this-website-thumb.png
Normal file
BIN
src/assets/img/work/this-website-thumb.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 624 KiB |
66
src/components/AR.tsx
Normal file
66
src/components/AR.tsx
Normal file
|
@ -0,0 +1,66 @@
|
|||
import { Interactive, XR, ARButton, Controllers } from "@react-three/xr";
|
||||
import { Text } from "@react-three/drei";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { useState, Suspense } from "react";
|
||||
|
||||
function Box({ color, size, scale, children, ...rest }: any) {
|
||||
return (
|
||||
<mesh scale={scale} {...rest}>
|
||||
<boxBufferGeometry args={size} />
|
||||
<meshPhongMaterial color={color} />
|
||||
{children}
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
function Button(props: any) {
|
||||
const [hover, setHover] = useState(false);
|
||||
const [color, setColor] = useState<any>("blue");
|
||||
|
||||
const onSelect = () => {
|
||||
setColor((Math.random() * 0xffffff) | 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<Interactive
|
||||
onHover={() => setHover(true)}
|
||||
onBlur={() => setHover(false)}
|
||||
onSelect={onSelect}
|
||||
>
|
||||
<Box
|
||||
color={color}
|
||||
scale={hover ? [0.6, 0.6, 0.6] : [0.5, 0.5, 0.5]}
|
||||
size={[0.4, 0.1, 0.1]}
|
||||
{...props}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<Text
|
||||
position={[0, 0, 0.06]}
|
||||
fontSize={0.05}
|
||||
color="#000"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
>
|
||||
Hello react-xr!
|
||||
</Text>
|
||||
</Suspense>
|
||||
</Box>
|
||||
</Interactive>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AR() {
|
||||
return (
|
||||
<>
|
||||
<ARButton />
|
||||
<Canvas>
|
||||
<XR referenceSpace="local">
|
||||
<ambientLight />
|
||||
<pointLight position={[10, 10, 10]} />
|
||||
<Button position={[0, 0.1, -0.2]} />
|
||||
<Controllers />
|
||||
</XR>
|
||||
</Canvas>
|
||||
</>
|
||||
);
|
||||
}
|
40
src/components/Layout.astro
Normal file
40
src/components/Layout.astro
Normal file
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
import { SEO } from "astro-seo";
|
||||
import Pride from "./Pride.astro";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="stylesheet" href="/css/sentient.css" />
|
||||
<SEO
|
||||
title="Jack Merrill"
|
||||
description="UI/UX designer and front-end developer based in Western Massachussetts."
|
||||
twitter={{
|
||||
creator: "@jack__merrill",
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
class="font-serif text-white bg-gradient-to-b from-[#060009] to-[#08000B] min-h-[100svh]"
|
||||
>
|
||||
<Pride />
|
||||
<main
|
||||
class="mx-auto max-w-4xl grid md:grid-cols-2 px-2 gap-x-3 gap-y-4 my-6"
|
||||
>
|
||||
<header
|
||||
class="bg-green-700 rounded-lg px-4 py-3 col-span-2 text-lg font-bold"
|
||||
>
|
||||
👋 I'm currently urgently looking for work! If you have any
|
||||
opportunities or know of any, please reach out to me at{" "}
|
||||
<a href="mailto:jobs@jackmerrill.com" class="underline">
|
||||
jobs at jackmerrill dot com
|
||||
</a>
|
||||
</header>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
73
src/components/Pride.astro
Normal file
73
src/components/Pride.astro
Normal file
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<style>
|
||||
.pride {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fff 0%,
|
||||
#fff 10%,
|
||||
#ffafc8 10%,
|
||||
#ffafc8 20%,
|
||||
#74d7ee 20%,
|
||||
#74d7ee 30%,
|
||||
#613915 30%,
|
||||
#613915 40%,
|
||||
#e40303 40%,
|
||||
#e40303 50%,
|
||||
#ff8c00 50%,
|
||||
#ff8c00 60%,
|
||||
#ffed00 60%,
|
||||
#ffed00 70%,
|
||||
#008026 70%,
|
||||
#008026 80%,
|
||||
#24408e 80%,
|
||||
#24408e 90%,
|
||||
#732982 90%,
|
||||
#732982 100%
|
||||
);
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.box::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -10px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fff 0%,
|
||||
#fff 10%,
|
||||
#ffafc8 10%,
|
||||
#ffafc8 20%,
|
||||
#74d7ee 20%,
|
||||
#74d7ee 30%,
|
||||
#613915 30%,
|
||||
#613915 40%,
|
||||
#e40303 40%,
|
||||
#e40303 50%,
|
||||
#ff8c00 50%,
|
||||
#ff8c00 60%,
|
||||
#ffed00 60%,
|
||||
#ffed00 70%,
|
||||
#008026 70%,
|
||||
#008026 80%,
|
||||
#24408e 80%,
|
||||
#24408e 90%,
|
||||
#732982 90%,
|
||||
#732982 100%
|
||||
);
|
||||
filter: blur(18px);
|
||||
transform: translate3d(0px, 0px, -1px);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<hr class="pride w-full h-4 border-transparent pb-4" />
|
||||
</div>
|
50
src/components/WorkCard.astro
Normal file
50
src/components/WorkCard.astro
Normal file
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
import type { MarkdownInstance } from "astro";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
interface Props {
|
||||
post: MarkdownInstance<Record<string, any>>;
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const postId = post.url!.split("/")[2];
|
||||
const images = import.meta.glob<{ default: ImageMetadata }>(
|
||||
"/src/assets/img/work/*-thumb.{jpeg,jpg,png,gif}"
|
||||
);
|
||||
|
||||
if (
|
||||
!images[`/src/assets/img/work/${postId}-thumb.png`] &&
|
||||
post.frontmatter.image
|
||||
)
|
||||
throw new Error(
|
||||
`"/src/assets/img/work/${postId}-thumb.png" does not exist in glob: "/src/assets/work/**/*-thumb.{jpeg,jpg,png,gif}"`
|
||||
);
|
||||
---
|
||||
|
||||
<a
|
||||
href={post.url}
|
||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-row space-x-2">
|
||||
{
|
||||
post.frontmatter.image && (
|
||||
<Image
|
||||
src={images[`/src/assets/img/work/${postId}-thumb.png`]()}
|
||||
class="w-40 h-24 object-contain"
|
||||
alt={post.frontmatter.title}
|
||||
inferSize={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="flex flex-col space-y-1 max-w-96">
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
{post.frontmatter.title}
|
||||
</h2>
|
||||
<p>{post.frontmatter.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold mb-4">View →</h2>
|
||||
</a>
|
92
src/components/WorkLayout.astro
Normal file
92
src/components/WorkLayout.astro
Normal file
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Layout from "./Layout.astro";
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
|
||||
const postId = frontmatter.url!.split("/")[2];
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="col-span-2">
|
||||
<div
|
||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
|
||||
>
|
||||
<a href="/work" class="text-2xl font-bold">← Back</a>
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="1080px"
|
||||
height="1080px"
|
||||
viewBox="0 0 1080 1080"
|
||||
style="enable-background:new 0 0 1080 1080;"
|
||||
xml:space="preserve"
|
||||
class="w-16 h-16 scale-150"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M714.82,280.16l-94.47,163.37l-80.35,7.84l-80.36-7.84l-94.47-163.37L262.55,457.94l129.9,341.89h295.11l129.9-341.89
|
||||
L714.82,280.16z M523.47,766.75h-108.2L299.05,460.87l66.15-114.58l74.32,128.52l83.94,8.19V766.75z M664.73,766.75h-108.2V483
|
||||
l83.94-8.19l74.32-128.52l66.15,114.58L664.73,766.75z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<h2 class="text-2xl font-bold">Jack Merrill</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
frontmatter.image && (
|
||||
<div class="col-span-2 border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8">
|
||||
<Image
|
||||
src={import(`/src/assets/img/work/${postId}-thumb.png`)}
|
||||
alt={frontmatter.title}
|
||||
width={960}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="flex flex-row justify-between items-center col-span-2">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">{frontmatter.title}</h2>
|
||||
<p class="text-lg">{frontmatter.description}</p>
|
||||
</div>
|
||||
|
||||
{
|
||||
frontmatter.link && (
|
||||
<a
|
||||
href={frontmatter.link}
|
||||
target="_blank"
|
||||
class="text-2xl font-bold cursor-pointer text-white bg-blue-500 rounded-md px-4 py-2 items-center flex flex-row gap-x-2"
|
||||
>
|
||||
Visit
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<article
|
||||
class="col-span-2 pb-12 prose max-w-full lg:prose-xl prose-h1:font-bold prose-h2:font-bold prose-invert break-words"
|
||||
>
|
||||
<slot />
|
||||
</article>
|
||||
</Layout>
|
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
|
@ -1 +1,2 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
---
|
||||
import { Image, getImage } from "astro:assets"
|
||||
import memoji from '../assets/memoji.png'
|
||||
import SpotifyNowPlaying from '../components/SpotifyNowPlaying'
|
||||
import SocialNetworks from '../components/SocialNetworks'
|
||||
import TechStack from '../components/TechStack'
|
||||
import WAIWO from '../components/WAIWO'
|
||||
import PictureShowcase from '../components/PictureShowcase'
|
||||
import { SEO } from 'astro-seo'
|
||||
import Pic1 from '../assets/img/DJI_0565.JPG'
|
||||
import Pic2 from '../assets/img/DJI_0605.JPG'
|
||||
import Pic3 from '../assets/img/IMG_0196.JPG'
|
||||
import Pic4 from '../assets/img/IMG_3942.JPG'
|
||||
import type { Picture } from "../components/Carousel"
|
||||
import { Image, getImage } from "astro:assets";
|
||||
import memoji from "../assets/memoji.png";
|
||||
import SpotifyNowPlaying from "../components/SpotifyNowPlaying";
|
||||
import SocialNetworks from "../components/SocialNetworks";
|
||||
import TechStack from "../components/TechStack";
|
||||
import WAIWO from "../components/WAIWO";
|
||||
import PictureShowcase from "../components/PictureShowcase";
|
||||
import { SEO } from "astro-seo";
|
||||
import Pic1 from "../assets/img/DJI_0565.JPG";
|
||||
import Pic2 from "../assets/img/DJI_0605.JPG";
|
||||
import Pic4 from "../assets/img/IMG_3942.JPG";
|
||||
import type { Picture } from "../components/Carousel";
|
||||
import AR from "../components/AR";
|
||||
import Layout from "../components/Layout.astro";
|
||||
|
||||
const pictures = [
|
||||
{
|
||||
|
@ -20,173 +21,234 @@ const pictures = [
|
|||
},
|
||||
{
|
||||
title: "Drone Picture of Hampshire College (winter)",
|
||||
image: Pic2,
|
||||
},
|
||||
{
|
||||
title: "Bean!!",
|
||||
image: Pic3,
|
||||
image: Pic2,
|
||||
},
|
||||
{
|
||||
title: "Ricky!!",
|
||||
image: Pic4,
|
||||
image: Pic4,
|
||||
},
|
||||
];
|
||||
|
||||
let optimizedImages: Picture[] = [];
|
||||
|
||||
for (const picture of pictures) {
|
||||
const image = await getImage(picture.image);
|
||||
const image = await getImage({ src: picture.image });
|
||||
|
||||
optimizedImages.push({
|
||||
title: picture.title,
|
||||
image: image.src,
|
||||
title: picture.title,
|
||||
image: image.src,
|
||||
});
|
||||
}
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="stylesheet" href="/css/sentient.css">
|
||||
<SEO
|
||||
title="Jack Merrill"
|
||||
description="UI/UX designer and front-end developer based in Western Massachussetts."
|
||||
twitter={{
|
||||
creator: "@jack__merrill"
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body class="font-serif text-white bg-gradient-to-b from-[#060009] to-[#08000B] min-h-[100svh] py-6">
|
||||
<main class="mx-auto max-w-4xl grid md:grid-cols-2 px-2 gap-x-3 gap-y-4">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<section class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col">
|
||||
<div class="flex justify-between">
|
||||
<Image src={memoji} alt="Memoji" width={100} height={100} class="rounded-full" />
|
||||
|
||||
<span class="flex h-min px-2 py-1 items-center text-xs gap-2 rounded-full border-2 border-[#248115] bg-[#299417]">
|
||||
<span class="flex w-[10px] h-[10px] p-0.5 items-center rounded-full border-2 border-[#267918] bg-[#299417]"></span>
|
||||
Available to work
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="font-medium text-2xl">Hey, I'm Jack!</h1>
|
||||
<p class="font-light text-sm">
|
||||
I'm a UI/UX designer and front-end developer
|
||||
based in Western Massachussetts currently studying
|
||||
interface design at <a href="https://hampshire.edu" target="_blank" rel="noreferrer" class="underline">Hampshire College</a>.
|
||||
<br />
|
||||
<br />
|
||||
I'm a huge transit nerd, and when I'm not
|
||||
programming, I'm either out on my skateboard or
|
||||
gaming, or occasionally doing drone photography.
|
||||
</p>
|
||||
|
||||
<h2 class="font-medium text-lg">What I'm listening to</h2>
|
||||
|
||||
<SpotifyNowPlaying client:idle />
|
||||
|
||||
<SocialNetworks />
|
||||
</section>
|
||||
|
||||
<section class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col">
|
||||
<h1 class="font-medium text-2xl">Tech Stack</h1>
|
||||
|
||||
<TechStack />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<WAIWO client:idle />
|
||||
<Layout>
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<section
|
||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex flex-col"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<Image
|
||||
src={memoji}
|
||||
alt="Memoji"
|
||||
width={100}
|
||||
height={100}
|
||||
class="rounded-full"
|
||||
/>
|
||||
|
||||
<!-- Cal.com -->
|
||||
<a
|
||||
href="https://cal.com/jackmerrill"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#3C42E6] bg-gradient-to-r from-[#4F7FF8] to-[#2A246B]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">
|
||||
Meet with me
|
||||
</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Find a time on Cal.com
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="flex h-min px-2 py-1 items-center text-xs gap-2 rounded-full border-2 border-[#248115] bg-[#299417]"
|
||||
>
|
||||
<span
|
||||
class="flex w-[10px] h-[10px] p-0.5 items-center rounded-full border-2 border-[#267918] bg-[#299417]"
|
||||
></span>
|
||||
Available to work
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
</a>
|
||||
<h1 class="font-medium text-2xl">Hey, I'm Jack!</h1>
|
||||
<p class="font-light text-sm">
|
||||
I'm a UI/UX designer and front-end developer based in Western
|
||||
Massachussetts currently studying Human-Computer Interaction and
|
||||
Interface Design at <a
|
||||
href="https://hampshire.edu"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="underline">Hampshire College</a
|
||||
>.
|
||||
<br />
|
||||
<br />
|
||||
I'm a huge transit nerd, and when I'm not programming, I'm
|
||||
either out on my skateboard or gaming, or occasionally doing drone photography.
|
||||
</p>
|
||||
|
||||
<!-- Resume -->
|
||||
<a
|
||||
href="/resume.pdf"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#6B6B6B] bg-gradient-to-r from-[#6B6B6B] to-[#959595]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">
|
||||
View my Resume
|
||||
</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Look at my past experience
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="font-medium text-lg">What I'm listening to</h2>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
</a>
|
||||
<SpotifyNowPlaying client:idle />
|
||||
|
||||
<PictureShowcase client:idle pictures={optimizedImages} />
|
||||
<SocialNetworks />
|
||||
</section>
|
||||
|
||||
<!-- Support me -->
|
||||
<a
|
||||
href="https://liberapay.com/jackmerrill/"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#FF2323] bg-gradient-to-r from-[#F96C6C] to-[#FF2323]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">
|
||||
Support me
|
||||
</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Like what I do? Help me continue!
|
||||
</p>
|
||||
</div>
|
||||
<section
|
||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col"
|
||||
>
|
||||
<h1 class="font-medium text-2xl">Tech Stack</h1>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
</a>
|
||||
<TechStack />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- The Hamper -->
|
||||
<a
|
||||
href="https://thehamper.netlify.app"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#C623FF] bg-gradient-to-r from-[#E848CE] to-[#996CF9]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">
|
||||
The Hamper
|
||||
</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Buy my merch
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<WAIWO client:idle />
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<a
|
||||
href="/work"
|
||||
class="flex p-4 items-center gap-3 self-stretch rounded-2xl border border-[#753ce6] bg-gradient-to-r from-[#874ff8] to-[#3c246b]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">What I've Made</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
See the shit I've been up to
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Cal.com -->
|
||||
<a
|
||||
href="https://cal.com/jackmerrill"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#3C42E6] bg-gradient-to-r from-[#4F7FF8] to-[#2A246B]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">Meet with me</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Find a time on Cal.com
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Resume -->
|
||||
<a
|
||||
href="/resume.pdf"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#6B6B6B] bg-gradient-to-r from-[#6B6B6B] to-[#959595]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">View my Resume</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Look at my past experience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<PictureShowcase client:idle pictures={optimizedImages} />
|
||||
|
||||
<!-- Support me -->
|
||||
<a
|
||||
href="https://liberapay.com/jackmerrill/"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#FF2323] bg-gradient-to-r from-[#F96C6C] to-[#FF2323]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">Support me</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Like what I do? Help me continue!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- The Hamper -->
|
||||
<a
|
||||
href="https://thehamper.netlify.app"
|
||||
target="_blank"
|
||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#C623FF] bg-gradient-to-r from-[#E848CE] to-[#996CF9]"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||
<h2 class="text-base font-normal">The Hamper</h2>
|
||||
|
||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||
Buy my merch
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- <AR /> WIP -->
|
||||
</Layout>
|
||||
|
|
49
src/pages/work/index.astro
Normal file
49
src/pages/work/index.astro
Normal file
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Layout from "../../components/Layout.astro";
|
||||
import WorkCard from "@components/WorkCard.astro";
|
||||
|
||||
const posts = await Astro.glob("./**/*.md");
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="col-span-2">
|
||||
<div
|
||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
|
||||
>
|
||||
<a href="/" class="text-2xl font-bold">← Back</a>
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="1080px"
|
||||
height="1080px"
|
||||
viewBox="0 0 1080 1080"
|
||||
style="enable-background:new 0 0 1080 1080;"
|
||||
xml:space="preserve"
|
||||
class="w-16 h-16 scale-150"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M714.82,280.16l-94.47,163.37l-80.35,7.84l-80.36-7.84l-94.47-163.37L262.55,457.94l129.9,341.89h295.11l129.9-341.89
|
||||
L714.82,280.16z M523.47,766.75h-108.2L299.05,460.87l66.15-114.58l74.32,128.52l83.94,8.19V766.75z M664.73,766.75h-108.2V483
|
||||
l83.94-8.19l74.32-128.52l66.15,114.58L664.73,766.75z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<h2 class="text-2xl font-bold">Jack Merrill</h2>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-bold mb-4">My Work</h1>
|
||||
<p class="mb-4">
|
||||
I love making random and cool shit. Here's where I can show it off.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
{posts.map((post) => <WorkCard post={post} />)}
|
||||
</div>
|
||||
</Layout>
|
28
src/pages/work/jacknet/index.md
Normal file
28
src/pages/work/jacknet/index.md
Normal file
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
layout: ../../../components/WorkLayout.astro
|
||||
title: JackNet
|
||||
description: "My various servers and services I host in my dorm room."
|
||||
---
|
||||
|
||||
I host a variety of servers and services on my server, JackNet. These include:
|
||||
|
||||
- [Authentication](https://auth.jackmerrill.com) - A Casdoor server I use for my other services.
|
||||
- Home Assistant - Connected to my various smart home devices. Likely have the "smartest" dorm on campus.
|
||||
- Jellyfin - A media server for my media.
|
||||
- [Gitea](https://git.jackmerrill.com) - A self-hosted Git server.
|
||||
- Various Minecraft Servers - I host a variety of Minecraft servers for my friends and I to play on.
|
||||
- Bitwarden - A self-hosted password manager.
|
||||
- Speedtest Tracker - A speedtest tracker that runs every hour and logs the results. Mainly to detect network issues at my college.
|
||||
- Lubelog - Car maintenance tracker.
|
||||
- [Family Guy Discord Bot](https://discord.com/oauth2/authorize?client_id=839624581055774741&permissions=2048&scope=bot%20applications.commands) - A bot that posts random Family Guy quotes in Discord. \[[GitHub](https://github.com/jackmerrill/FamilyGuyQuotesBot)\]
|
||||
|
||||
| My Rack (15U): |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Cisco Catalyst 3560G w/ Uplink to Unifi Express |
|
||||
| Shelf |
|
||||
| <br>Alienware Steam Machine<br>Dell Optiplex 390 w/ GTX 1650 <br><br> |
|
||||
| \[Empty\] |
|
||||
| <br>Dell Poweredge R710 (Intel Xeon E5540, 128GB DDR3 ECC RAM, running Proxmox <br> |
|
||||
| \[Empty\] |
|
||||
| \[Empty\] |
|
||||
| <br>UnRAID server<br>(Supermicro X9DRi-LN4+, 2x Intel Xeon E5-2650, 368GB DDR3 ECC RAM, 29TB total storage w/Parity)<br><br> |
|
9
src/pages/work/this-website/index.md
Normal file
9
src/pages/work/this-website/index.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: ../../../components/WorkLayout.astro
|
||||
title: This Website
|
||||
description: "The website you're currently on. Built with Astro, Tailwind CSS, and MDX."
|
||||
image: "thumb.png"
|
||||
link: /
|
||||
---
|
||||
|
||||
I created this website using Figma and designed it to be a simple, clean, and fast website. It uses a Bento box design, keeping everything in its own area, separated from everything.
|
|
@ -32,5 +32,5 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
|
|
|
@ -2,6 +2,11 @@
|
|||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@assets/*": ["src/assets/*"],
|
||||
"@components/*": ["src/components/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user