From 5a30a9a80a3273ba31fc5c26def53c16567468a6 Mon Sep 17 00:00:00 2001 From: Xevion Date: Thu, 26 Dec 2024 16:14:56 -0600 Subject: [PATCH] animated index, chronark --- src/pages/index.tsx | 110 +++++++++----------------------------------- tailwind.config.cjs | 105 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 122 insertions(+), 93 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 83f11ce..6151753 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,4 @@ -import { readSingleton } from "@directus/sdk"; +import { readItems, readSingleton } from "@directus/sdk"; import { GetStaticPropsResult, type NextPage } from "next"; import Head from "next/head"; import Link from "next/link"; @@ -6,9 +6,9 @@ import { useEffect } from "react"; import Balancer from "react-wrap-balancer"; import AppWrapper from "@/components/AppWrapper"; import ItemCard from "@/components/ItemCard"; -import directus from "@/utils/directus"; +import directus, { type Project } from "@/utils/directus"; import { useBreakpointValue } from "@/utils/helpers"; -import type { Project } from "@/utils/types"; +import Dots from "@/components/Dots"; type IndexProps = { tagline: string; @@ -19,82 +19,12 @@ type IndexProps = { export async function getStaticProps(): Promise< GetStaticPropsResult > { - const metadata = await directus.request(readSingleton("metadata")); + const [metadata, projects] = await Promise.all([directus.request(readSingleton("metadata")), directus.request(readItems("project"))]); + const resumeUrl = `${directus.url}assets/${metadata.resume}/${ metadata.resumeFilename ?? "resume.pdf" }`; - const projects: Project[] = [ - { - title: "Portal", - banner: "/portal/banner.jpeg", - location: "/portal", - longDescription: - "An advanced membership & event management system for my university's premier computer science organization.", - shortDescription: - "Advanced membership & event management system for students", - links: [ - { - icon: "github", - location: "https://github.com/acmutsa/Portal", - }, - { - icon: "external", - location: "https://portal.acmutsa.org/", - }, - ], - }, - { - title: "Phototag", - banner: "/phototag.png", - location: "/phototag", - longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`, - shortDescription: - "Effortlessly add rich & descriptive tags to your photos with Phototag.", - links: [ - { - icon: "github", - location: "https://github.com/Xevion/phototag", - }, - ], - }, - { - title: "Paths", - banner: "/paths.png", - location: "/paths", - shortDescription: - "Discover the power of graph traversal algorithms with my interactive application.", - longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application! - Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.`, - links: [ - { - icon: "github", - location: "https://github.com/Xevion/Paths", - }, - ], - }, - { - title: "Grain", - banner: "/grain/banner.jpeg", - bannerSettings: { quality: 100 }, - location: "/grain", - shortDescription: - "An experimental React app to generate beautiful backgrounds with noise filters.", - longDescription: - "Quickly generate beautiful backgrounds with noise filters. Built with React, hosted on Vercel, and rendered using simple SVG noise filters (just HTML & CSS).", - links: [ - { - icon: "external", - location: "https://grain.xevion.dev", - }, - { - icon: "github", - location: "https://github.com/Xevion/grain", - }, - ], - }, - ]; - return { props: { tagline: metadata.tagline, @@ -133,6 +63,7 @@ const Home: NextPage = ({
+
-
+
+

+ XEVION +

+
+ {/*
Xevion -
-
+
*/} +
{tagline}
+ {/*
+ {tagline} +
+
*/}
= ({ >
- {projects.map((project, index) => ( - - ))} + {projects.map((project) => { + return ( + ); + })}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index bc5e1f1..397a874 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,9 +1,11 @@ +const defaultTheme = require("tailwindcss/defaultTheme"); + /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { - extend: { - colors: { + extend: { + colors: { zinc: { 850: "#1D1D20", }, @@ -11,13 +13,104 @@ module.exports = { fontSize: { "10xl": "10rem", }, - fontFamily: { + typography: { + DEFAULT: { + css: { + "code::before": { + content: '""', + }, + "code::after": { + content: '""', + }, + }, + }, + quoteless: { + css: { + "blockquote p:first-of-type::before": { content: "none" }, + "blockquote p:first-of-type::after": { content: "none" }, + }, + }, + }, + fontFamily: { inter: ['"Inter"', "sans-serif"], roboto: ['"Roboto"', "sans-serif"], mono: ['"Roboto Mono"', "monospace"], hanken: ['"Hanken Grotesk"', "sans-serif"], - }, - }, - }, + // sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans], + // display: ["var(--font-calsans)"], + }, + backgroundImage: { + "gradient-radial": + "radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))", + }, + animation: { + bg: "bg 5s ease-in-out forwards", + "fade-in": "fade-in 3s ease-in-out forwards", + title: "title 3s ease-out forwards", + "fade-left": "fade-left 3s ease-in-out forwards", + "fade-right": "fade-right 3s ease-in-out forwards", + }, + keyframes: { + "fade-in": { + "0%": { + opacity: "0%", + }, + "75%": { + opacity: "0%", + }, + "100%": { + opacity: "100%", + }, + }, + "fade-left": { + "0%": { + transform: "translateX(100%)", + opacity: "0%", + }, + + "30%": { + transform: "translateX(0%)", + opacity: "100%", + }, + "100%": { + opacity: "0%", + }, + }, + "fade-right": { + "0%": { + transform: "translateX(-100%)", + opacity: "0%", + }, + + "30%": { + transform: "translateX(0%)", + opacity: "100%", + }, + "100%": { + opacity: "0%", + }, + }, + title: { + "0%": { + "line-height": "0%", + "letter-spacing": "0.25em", + opacity: "0", + }, + "25%": { + "line-height": "0%", + opacity: "0%", + }, + "80%": { + opacity: "100%", + }, + + "100%": { + "line-height": "100%", + opacity: "100%", + }, + }, + }, + }, + }, plugins: [require("@tailwindcss/typography")], };