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 tailwind from "@astrojs/tailwind";
|
||||||
import react from "@astrojs/react";
|
import react from "@astrojs/react";
|
||||||
|
|
||||||
|
|
@ -9,7 +13,7 @@ export default defineConfig({
|
||||||
integrations: [tailwind(), react()],
|
integrations: [tailwind(), react()],
|
||||||
output: "hybrid",
|
output: "hybrid",
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
imageService: true,
|
// imageService: true,
|
||||||
webAnalytics: {
|
webAnalytics: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
},
|
},
|
||||||
|
|
@ -18,4 +22,7 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
functionPerRoute: true,
|
functionPerRoute: true,
|
||||||
}),
|
}),
|
||||||
|
image: {
|
||||||
|
service: squooshImageService(),
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
20
package.json
20
package.json
|
|
@ -10,19 +10,27 @@
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/react": "^3.0.4",
|
"@astrojs/react": "3.6.2",
|
||||||
"@astrojs/tailwind": "^5.0.2",
|
"@astrojs/tailwind": "5.1.0",
|
||||||
"@astrojs/vercel": "^5.1.0",
|
"@astrojs/vercel": "7.7.2",
|
||||||
"@icons-pack/react-simple-icons": "^9.1.0",
|
"@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": "^18.0.21",
|
||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
"astro": "^3.4.0",
|
"astro": "4.14.2",
|
||||||
"astro-seo": "^0.8.0",
|
"astro-seo": "^0.8.0",
|
||||||
"react": "^18.0.0",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^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": {
|
"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" />
|
/// <reference types="astro/client" />
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,18 @@
|
||||||
---
|
---
|
||||||
import { Image, getImage } from "astro:assets"
|
import { Image, getImage } from "astro:assets";
|
||||||
import memoji from '../assets/memoji.png'
|
import memoji from "../assets/memoji.png";
|
||||||
import SpotifyNowPlaying from '../components/SpotifyNowPlaying'
|
import SpotifyNowPlaying from "../components/SpotifyNowPlaying";
|
||||||
import SocialNetworks from '../components/SocialNetworks'
|
import SocialNetworks from "../components/SocialNetworks";
|
||||||
import TechStack from '../components/TechStack'
|
import TechStack from "../components/TechStack";
|
||||||
import WAIWO from '../components/WAIWO'
|
import WAIWO from "../components/WAIWO";
|
||||||
import PictureShowcase from '../components/PictureShowcase'
|
import PictureShowcase from "../components/PictureShowcase";
|
||||||
import { SEO } from 'astro-seo'
|
import { SEO } from "astro-seo";
|
||||||
import Pic1 from '../assets/img/DJI_0565.JPG'
|
import Pic1 from "../assets/img/DJI_0565.JPG";
|
||||||
import Pic2 from '../assets/img/DJI_0605.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 Pic4 from '../assets/img/IMG_3942.JPG'
|
import type { Picture } from "../components/Carousel";
|
||||||
import type { Picture } from "../components/Carousel"
|
import AR from "../components/AR";
|
||||||
|
import Layout from "../components/Layout.astro";
|
||||||
|
|
||||||
const pictures = [
|
const pictures = [
|
||||||
{
|
{
|
||||||
|
|
@ -22,10 +23,6 @@ const pictures = [
|
||||||
title: "Drone Picture of Hampshire College (winter)",
|
title: "Drone Picture of Hampshire College (winter)",
|
||||||
image: Pic2,
|
image: Pic2,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Bean!!",
|
|
||||||
image: Pic3,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Ricky!!",
|
title: "Ricky!!",
|
||||||
image: Pic4,
|
image: Pic4,
|
||||||
|
|
@ -35,7 +32,7 @@ const pictures = [
|
||||||
let optimizedImages: Picture[] = [];
|
let optimizedImages: Picture[] = [];
|
||||||
|
|
||||||
for (const picture of pictures) {
|
for (const picture of pictures) {
|
||||||
const image = await getImage(picture.image);
|
const image = await getImage({ src: picture.image });
|
||||||
|
|
||||||
optimizedImages.push({
|
optimizedImages.push({
|
||||||
title: picture.title,
|
title: picture.title,
|
||||||
|
|
@ -44,44 +41,44 @@ for (const picture of pictures) {
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<Layout>
|
||||||
<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">
|
<div class="flex flex-col gap-y-4">
|
||||||
<section class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col">
|
<section
|
||||||
|
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex flex-col"
|
||||||
|
>
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<Image src={memoji} alt="Memoji" width={100} height={100} class="rounded-full" />
|
<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
|
||||||
<span class="flex w-[10px] h-[10px] p-0.5 items-center rounded-full border-2 border-[#267918] bg-[#299417]"></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
|
Available to work
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="font-medium text-2xl">Hey, I'm Jack!</h1>
|
<h1 class="font-medium text-2xl">Hey, I'm Jack!</h1>
|
||||||
<p class="font-light text-sm">
|
<p class="font-light text-sm">
|
||||||
I'm a UI/UX designer and front-end developer
|
I'm a UI/UX designer and front-end developer based in Western
|
||||||
based in Western Massachussetts currently studying
|
Massachussetts currently studying Human-Computer Interaction and
|
||||||
interface design at <a href="https://hampshire.edu" target="_blank" rel="noreferrer" class="underline">Hampshire College</a>.
|
Interface Design at <a
|
||||||
|
href="https://hampshire.edu"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="underline">Hampshire College</a
|
||||||
|
>.
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
I'm a huge transit nerd, and when I'm not
|
I'm a huge transit nerd, and when I'm not programming, I'm
|
||||||
programming, I'm either out on my skateboard or
|
either out on my skateboard or gaming, or occasionally doing drone photography.
|
||||||
gaming, or occasionally doing drone photography.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2 class="font-medium text-lg">What I'm listening to</h2>
|
<h2 class="font-medium text-lg">What I'm listening to</h2>
|
||||||
|
|
@ -91,7 +88,9 @@ for (const picture of pictures) {
|
||||||
<SocialNetworks />
|
<SocialNetworks />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col">
|
<section
|
||||||
|
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-3 flex flex-col"
|
||||||
|
>
|
||||||
<h1 class="font-medium text-2xl">Tech Stack</h1>
|
<h1 class="font-medium text-2xl">Tech Stack</h1>
|
||||||
|
|
||||||
<TechStack />
|
<TechStack />
|
||||||
|
|
@ -101,6 +100,33 @@ for (const picture of pictures) {
|
||||||
<div class="flex flex-col gap-y-4">
|
<div class="flex flex-col gap-y-4">
|
||||||
<WAIWO client:idle />
|
<WAIWO client:idle />
|
||||||
|
|
||||||
|
<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 -->
|
<!-- Cal.com -->
|
||||||
<a
|
<a
|
||||||
href="https://cal.com/jackmerrill"
|
href="https://cal.com/jackmerrill"
|
||||||
|
|
@ -108,17 +134,26 @@ for (const picture of pictures) {
|
||||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#3C42E6] bg-gradient-to-r from-[#4F7FF8] to-[#2A246B]"
|
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">
|
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||||
<h2 class="text-base font-normal">
|
<h2 class="text-base font-normal">Meet with me</h2>
|
||||||
Meet with me
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||||
Find a time on Cal.com
|
Find a time on Cal.com
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -129,17 +164,26 @@ for (const picture of pictures) {
|
||||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#6B6B6B] bg-gradient-to-r from-[#6B6B6B] to-[#959595]"
|
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">
|
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||||
<h2 class="text-base font-normal">
|
<h2 class="text-base font-normal">View my Resume</h2>
|
||||||
View my Resume
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||||
Look at my past experience
|
Look at my past experience
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -152,17 +196,26 @@ for (const picture of pictures) {
|
||||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#FF2323] bg-gradient-to-r from-[#F96C6C] to-[#FF2323]"
|
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">
|
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||||
<h2 class="text-base font-normal">
|
<h2 class="text-base font-normal">Support me</h2>
|
||||||
Support me
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||||
Like what I do? Help me continue!
|
Like what I do? Help me continue!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -173,20 +226,29 @@ for (const picture of pictures) {
|
||||||
class="flex p-4 items-start gap-3 self-stretch rounded-2xl border border-[#C623FF] bg-gradient-to-r from-[#E848CE] to-[#996CF9]"
|
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">
|
<div class="flex flex-col justify-center items-start flex-1 self-stretch">
|
||||||
<h2 class="text-base font-normal">
|
<h2 class="text-base font-normal">The Hamper</h2>
|
||||||
The Hamper
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
<p class="text-white/60 font-light text-xs truncate max-w-[250px]">
|
||||||
Buy my merch
|
Buy my merch
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</body>
|
<!-- <AR /> WIP -->
|
||||||
</html>
|
</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",
|
"extends": "astro/tsconfigs/strict",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"jsxImportSource": "react"
|
"jsxImportSource": "react",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@assets/*": ["src/assets/*"],
|
||||||
|
"@components/*": ["src/components/*"]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user