diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 93ad12b..5d58257 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,7 +2,7 @@ import { type AppType } from "next/app"; import { trpc } from "../utils/trpc"; -import "../styles/globals.css"; +import "../styles/globals.scss"; const MyApp: AppType = ({ Component, pageProps }) => { return ; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1967114..c0860a5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,55 +1,74 @@ -import { type NextPage } from "next"; +import {type NextPage} from "next"; import Head from "next/head"; -import Link from "next/link"; -import { trpc } from "../utils/trpc"; +import {trpc} from "../utils/trpc"; +import Image from "next/image"; +import {ArrowLongRightIcon} from "@heroicons/react/24/outline"; +import SteppedSpan from "../components/SteppedSpan"; + +interface Project { + title: string; + banner: string; + description: React.ReactNode; +} const Home: NextPage = () => { - const hello = trpc.example.hello.useQuery({ text: "from tRPC" }); + const projects: Project[] = [ + { + title: "Phototag", + banner: "/phototag.png", + description: <> + Phototag is a powerful and efficient tool that helps + you quickly and easily describe your photos with + tags. Using Google's advanced Vision API, Phototag can automatically generate tags for your photos, + making it faster and easier to organize and search for your images. + + }, + { + title: "Paths", + banner: "/paths.png", + description: "" + } + ] - return ( - <> - - Create T3 App - - - -
-
-

- Create T3 App -

-
- -

First Steps →

-
- Just the basics - Everything you need to know to set up your - database and authentication. -
- - -

Documentation →

-
- Learn more about Create T3 App, the libraries it uses, and how - to deploy it. -
- -
-

- {hello.data ? hello.data.greeting : "Loading tRPC query..."} -

-
-
- - ); + return ( + <> + + Xevion.dev + + + +
+
+
+ Ryan Walters + { + projects.map((project, index) => +
+ {`Banner +
+
+
{project.title}
+
{project.description}
+
+
+
+ +
+
+
+ ) + } +
+
+
+ + ); }; export default Home; diff --git a/src/styles/globals.css b/src/styles/globals.css deleted file mode 100644 index b5c61c9..0000000 --- a/src/styles/globals.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/src/styles/globals.scss b/src/styles/globals.scss new file mode 100644 index 0000000..943cfac --- /dev/null +++ b/src/styles/globals.scss @@ -0,0 +1,47 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +html, body { + @apply font-manrope; +} + +.item { + @apply w-full aspect-[5/3] h-[12rem] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded; + > img { + @apply rounded transition-all; + } + + .elements { + @apply hidden transition-all delay-100; + } + + &:hover { + .elements { + @apply grid; + } + + > img { + @apply blur-2xl; + } + } +} + +.stepped { + @apply text-white text-8xl; + font-family: monospace; + + > span { + @apply transition-colors delay-300; + + &:hover { + @apply text-black bg-white; + transition-delay: 0s; + } + } +} \ No newline at end of file