@@ -22,161 +22,11 @@ const Art = () => { document.body.style.overflowY = "scroll"; }; const aiArtTag = () => { return ( <a href="https://github.com/overshard/ai-art" target="_blank" rel="noopener noreferrer" > on GitHub </a> ); }; return ( <Page title="Art" description="Some of my art... what even is art..."> <Background /> <Heading>AI Generated</Heading> <Paragraph> Using a variety of generative adversarial networks, algorithms, and inputs. You can see some of my code for this {aiArtTag()} to try it yourself. </Paragraph> <AICards> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/011.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>011</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/010.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>010</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/009.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>009</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/008.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>008</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/007.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>007</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/006.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>006</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/005.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>005</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/004.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>004</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/003.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>003</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/002.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>002</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/001.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>001</AICardHeading> </AICard> <AICard> <AICardImage> <Image src="/static/images/art/ai-generated/000.webp" width={256} height={256} priority={true} /> </AICardImage> <AICardHeading>000</AICardHeading> </AICard> </AICards> <Heading>Acrylic Pours</Heading> <Paragraph> A bit more traditional than my usual art, acrylics mixed with water,
@@ -467,72 +317,6 @@ const Link = styled.a` }`;const AICards = styled.div` display: flex; width: 100%; flex-wrap: wrap; gap: 50px; justify-content: center;`;const AICard = styled.div` background-color: black; color: white; box-shadow: 0 5px 0 rgba(0, 0, 0, 0); transition-duration: 200ms; transition-property: box-shadow, transform; transition-timing-function: ease-in; width: calc(256px); display: flex; flex-direction: column; position: relative; transform: perspective(600px) rotateX(5deg) rotateY(5deg); z-index: 10; &:hover { box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4); transform: perspective(600px) rotateX(0deg) rotateY(0deg) scale(1.3); z-index: 20; @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { transform: none; } } } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { transform: none; } }`;const AICardHeading = styled.h2` color: black; font-family: monospace; font-weight: 100; font-size: 1.2em; background-color: white; padding: 3px 7px; position: absolute; top: -7px; right: -10px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);`;const AICardImage = styled.span` width: 256px; height: 256px; & img { object-fit: cover; object-position: center; width: 256px; height: 256px; }`;const Cards = styled.div` display: flex; width: 100%;
@@ -42,7 +42,7 @@ const Code = ({ commits }) => { It's a terminal, nothing to see here, no hidden games or anything. </ProjectParagraph> <ProjectCommit> {JSON.stringify(commits.aiart.data, null, 2)} {JSON.stringify(commits.terminal.data, null, 2)} </ProjectCommit> <ProjectButton href="https://www.github.com/overshard/terminal"
@@ -53,23 +53,7 @@ const Code = ({ commits }) => { GitHub </ProjectButton> </Project> <Project> <ProjectHeading>AI-Art</ProjectHeading> <ProjectParagraph> Art generation using VQGAN + CLIP in docker containers. </ProjectParagraph> <ProjectCommit> {JSON.stringify(commits.aiart.data, null, 2)} </ProjectCommit> <ProjectButton href="https://www.github.com/overshard/ai-art" rel="noopener noreferrer" target="_blank" > <GitHubIcon /> GitHub </ProjectButton> </Project> <Project> <ProjectHeading>Analytics</ProjectHeading> <ProjectParagraph>
@@ -312,7 +296,6 @@ export async function getServerSideProps() { }; const getCommits = async () => { const aiart = await getCommit("ai-art"); const alpinefiles = await getCommit("alpinefiles"); const analytics = await getCommit("analytics"); const blog = await getCommit("blog");
@@ -326,7 +309,6 @@ export async function getServerSideProps() { const newtab = await getCommit("newtab"); return { aiart: aiart, alpinefiles: alpinefiles, analytics: analytics, blog: blog,