adds hella fancy Contact section, first pass

tif-calin · Feb 24, 2023 · 2a0bb21 · 2a0bb21
1 parent a9b98da
commit 2a0bb21
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git a/components/home/Contact.tsx b/components/home/Contact.tsx
@@ -1,3 +1,71 @@
-const Contact = () => <div />;
+interface ContactProps {
+  contentClass?: string;
+}
+
+const m = 20;
+
+const Contact = ({ contentClass }: ContactProps) => (
+  <>
+    <section>
+      <div class={`text-2xl${contentClass}`}>
+        <span>Can we work together?</span>
+        <p class="my-10 relative text-4xl">
+          <svg
+            class="group squiggle absolute bottom-0 left-0 max-h-8"
+            viewBox={`0 0 ${10 * m} 18`}
+          >
+            <style>
+              {`
+              .squiggle path {
+                animation: shift 3s linear infinite;
+                animation-play-state: paused;
+              }
+
+              @prefers-reduced-motion: reduce {
+                animation-duration: 60s;
+              }
+
+              .squiggle:hover path {
+                animation-play-state: running;
+              }
+
+              @keyframes shift {
+                from { 
+                  transform: translateX(-50%);
+                }
+                to { 
+                  transform:translateX(0);
+                }
+              }
+            `}
+            </style>
+            {Array.from({ length: m * 2 }).map((_, i) => (
+              <path
+                key={i}
+                class="opacity-75 group-hover:opacity-100 transition-opacity"
+                fill="none"
+                stroke="currentColor"
+                d={`M${
+                  i * 10
+                } 17.5c2.5 0 2.5-1.5 5-1.5s2.5 1.5 5 1.5 2.5-1.5 5-1.5 2.5 1.5 5 1.5`}
+              />
+            ))}
+          </svg>
+
+          {/* text shadow so squiggle doesn't look bad */}
+          <span
+            class="absolute pointer-events-none text-[var(--amber-100)] z-10"
+            style="-webkit-text-stroke: 3px var(--amber-100);"
+          >
+            Send me a message!
+          </span>
+          <span class="pointer-events-none relative z-20">
+            Send me a message!
+          </span>
+        </p>
+      </div>
+    </section>
+  </>
+);
 
 export default Contact;
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -3,6 +3,7 @@ import AboutSection from "../components/home/sections/AboutSection.tsx";
 import ProjectsSection from "../components/home/sections/ProjectsSection.tsx";
 import ToolsSection from "../components/home/sections/ToolsSection.tsx";
 import Socials from "../components/Socials.tsx";
+import Contact from "../components/home/Contact.tsx";
 
 const sectionContentClass =
   " flex flex-col items-center justify-center max-w-screen-md mx-auto p-4";
@@ -36,6 +37,7 @@ export default function Home() {
         <AboutSection contentClass={sectionClass} />
         <ProjectsSection contentClass={sectionClass} />
         <ToolsSection contentClass={sectionClass} />
+        <Contact contentClass={sectionContentClass} />
       </main>
       <footer>
         <div