90s aesthetic attempt 1

.gitignore

@@ -3,3 +3,4 @@ node_modules
 /.cache
 /build
 /public/build
+.vercel

app/components/Anchor.tsx

@@ -1,9 +1,25 @@
 export function Anchor({
   children,
+  className,
   ...props
 }: React.ComponentProps<"a">): React.ReactElement {
   return (
-    <a className="hover:underline" {...props}>
+    <a className={`hover:underline ${className}`} {...props}>
+      {children}
+    </a>
+  );
+}
+
+export function BorderedAnchor({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"a">): React.ReactElement {
+  return (
+    <a
+      className={`flex justify-center align-middle py-1 px-3 text-md hover:underline select-none ${className}`}
+      {...props}
+    >
       {children}
     </a>
   );

app/components/Three.tsx

@@ -0,0 +1,64 @@
+import React, { Suspense, SyntheticEvent } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import {
+  Cloud,
+  OrbitControls,
+  Sky,
+  TransformControls,
+} from "@react-three/drei";
+import { proxy, useSnapshot } from "valtio";
+
+import { useRemixBridge } from "remix-three";
+
+const modes = ["translate", "rotate", "scale"];
+const state = proxy({ current: null, mode: 0 });
+
+function Controls() {
+  const snap = useSnapshot(state);
+  const scene = useThree((state) => state.scene);
+  return (
+    <>
+      <OrbitControls
+        makeDefault
+        minPolarAngle={0}
+        maxPolarAngle={Math.PI / 0.1}
+      />
+    </>
+  );
+}
+
+function Rig() {
+  const camera = useThree((state) => state.camera);
+  return useFrame((state) => {
+    camera.position.z = state.clock.getElapsedTime() * -0.001;
+  });
+}
+
+export function SkyBg() {
+  let RemixBridge = useRemixBridge();
+
+  return (
+    <Canvas camera={{ position: [0, 0, 20], fov: 90 }}>
+      <RemixBridge>
+        <ambientLight intensity={1.9} />
+        <pointLight intensity={1.8} position={[0, 100, 500]} />
+        <Suspense fallback={null}>
+          <Cloud position={[-24, -2, -35]} speed={0.4} opacity={0.3} />
+          <Cloud position={[4, 2, -15]} speed={0.2} opacity={0.4} />
+          <Cloud position={[-4, 2, -10]} speed={0.2} opacity={0.2} />
+          <Cloud position={[4, -2, -5]} speed={0.2} opacity={0.2} />
+          <Cloud position={[8, 2, -100]} speed={0.2} opacity={0.1} />
+        </Suspense>
+        <Sky
+          azimuth={3}
+          turbidity={1}
+          rayleigh={0.2}
+          inclination={0.6}
+          distance={3000}
+        />
+        {/* <Controls /> */}
+        <Rig />
+      </RemixBridge>
+    </Canvas>
+  );
+}

app/root.tsx

@@ -30,7 +30,7 @@ export function links() {
 }
 
 export const meta: MetaFunction = () => {
-  return { title: 'CONG VU' };
+  return { title: 'Cong Vu' };
 };
 
 export default function App() {

app/routes/index.tsx

@@ -1,51 +1,70 @@
-import { Anchor } from "~/components/Anchor";
+import { LinksFunction } from "@remix-run/node";
+
+import { BorderedAnchor } from "~/components/Anchor";
+import { SkyBg } from "~/components/Three";
+
+export const links: LinksFunction = () => {
+  return [
+    {
+      rel: "preload",
+      as: "image",
+      href: "/stars.gif",
+    },
+  ];
+};
 
 export default function Index() {
   return (
-    <div className="container p-4 font-serif text-lg">
-      <h1 className="text-3xl font-bold">CONG VU</h1>
-      <div className="h-2" />
-      <ul className="flex gap-4">
-        <li>
-          <Anchor
-            target="_blank"
-            href="mailto:info.congvu@gmail.com"
-            rel="noreferrer"
-          >
-            mail
-          </Anchor>
-        </li>
-        <li>
-          <Anchor
-            target="_blank"
-            href="https://soundcloud.com/cong_vu"
-            rel="noreferrer"
-          >
-            soundcloud
-          </Anchor>
-        </li>
-        <li>
-          <Anchor
-            target="_blank"
-            href="https://instagram.com/cong_vu"
-            rel="noreferrer"
-          >
-            instagram
-          </Anchor>
-        </li>
-        <li>
-          <Anchor
-            target="_blank"
-            href="https://www.youtube.com/channel/UCJE2B7eU86iLhk6p467XcJQ"
-            rel="noreferrer"
-          >
-            youtube
-          </Anchor>
-        </li>
-      </ul>
-      <div>
-        <img src="" />
+    <div className="h-screen w-screen flex flex-col justify-center items-center font-serif text-lg">
+      <div className="absolute z-10">
+        <h1 className="relative font-serif text-9xl text-white text-center pointer-events-none select-none">
+          Cong Vu
+        </h1>
+        <div className="h-8" />
+        <ul className="flex gap-4 flex-wrap justify-center" aria-label="links">
+          <li aria-label="mail link">
+            <BorderedAnchor
+              className="text-sky-400"
+              target="_blank"
+              href="mailto:info.congvu@gmail.com"
+              rel="noreferrer"
+            >
+              mail
+            </BorderedAnchor>
+          </li>
+          <li aria-label="soundcloud link">
+            <BorderedAnchor
+              className="text-red-400"
+              target="_blank"
+              href="https://soundcloud.com/cong_vu"
+              rel="noreferrer"
+            >
+              soundcloud
+            </BorderedAnchor>
+          </li>
+          <li aria-label="instagram link">
+            <BorderedAnchor
+              className="text-orange-400"
+              target="_blank"
+              href="https://instagram.com/cong_vu"
+              rel="noreferrer"
+            >
+              instagram
+            </BorderedAnchor>
+          </li>
+          <li aria-label="youtube link">
+            <BorderedAnchor
+              className="text-red-400"
+              target="_blank"
+              href="https://www.youtube.com/channel/UCJE2B7eU86iLhk6p467XcJQ"
+              rel="noreferrer"
+            >
+              youtube
+            </BorderedAnchor>
+          </li>
+        </ul>
       </div>
+      <SkyBg />
     </div>
   );
 }