Contact page

tedgravlin · Jan 20, 2025 · cc1721a · cc1721a
1 parent 1e13b7f
commit cc1721a
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 0 deletions.
diff --git a/assets/images/pixelfed-icon.svg b/assets/images/pixelfed-icon.svg
diff --git a/assets/images/signal-icon.svg b/assets/images/signal-icon.svg
diff --git a/contact.html b/contact.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- Created by Ted Gravlin -->
+
+<head>
+    <!-- Import CSS -->
+    <link rel="stylesheet" href="css/main.css">
+    <!-- Scale page to display width -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Page title and favicons -->
+    <title> Ted Gravlin </title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
+    <!-- Meta -->
+    <meta name="title" property="og:title" content="Ted Gravlin" />
+    <meta name="description" property="og:description"
+        content="Hi, I'm Ted Gravlin. I'm a software developer with an interest in developing things that make people's lives easier and more fun." />
+    <meta name="keywords"
+        content="ted gravlin, gravlin, ted gravlin website, theodore gravlin, theodore gravlin website" />
+    <meta name="image" property="og:image" content="https://tedgravlin.tech/assets/images/ogimage.png" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://tedgravlin.tech/" />
+</head>
+
+<body>
+    <!-- Main -->
+    <main>
+        <!-- Contact Container -->
+        <div class="contact-container main-content">
+            <div class="card contact">
+                <div class="about-button-container">
+                    <a target="_blank" href="https://signal.me/#eu/J4lXfNjLc3iEvphjV5Gn0AB-UKRXkF4g2ER4B5TciHpV9mVoPCxPqaQRAfDMtqx-" class="button-background">
+                        <div class="button-contents">
+                            <img alt="Signal Logo" src="/assets/images/signal-icon.svg">
+                            <p>Signal</p>
+                        </div>
+                    </a>
+                    <a target="_blank" rel="me" href="https://mastodon.world/@tedgravlin" class="button-background">
+                        <div class="button-contents">
+                            <img alt="Mastodon Logo" src="/assets/images/mastodon-icon.svg">
+                            <p>Mastodon</p>
+                        </div>
+                    </a>
+                    <a target="_blank" rel="me" href="https://pixey.org/ted" class="button-background">
+                        <div class="button-contents">
+                            <img alt="Pixelfed Logo" src="/assets/images/pixelfed-icon.svg">
+                            <p>Pixelfed</p>
+                        </div>
+                    </a>
+                    <a target="_blank" href="mailto:theodoregravlin@pm.me" class="button-background">
+                        <div class="button-contents">
+                            <img alt="Email Icon" src="/assets/images/mail-icon.svg">
+                            <p>Email</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <p></p>
+        </footer>
+    </main>
+</body>
+
+</html>
diff --git a/css/main.css b/css/main.css
@@ -325,6 +325,60 @@ div.project-overlay {
   border: 2px solid rgba(255, 255, 255, 0.125);
 }
 
+/* ----- Contact Card ----- */
+div.contact-container {
+  grid-template-columns: 1fr;
+}
+
+.card.contact {
+  height: fit-content;
+  margin-bottom: 0em;
+}
+
+.card.contact .about-button-container .button-contents {
+  column-gap: 0.5em;
+}
+
+@media (max-width: 700px) {
+  .card.contact .about-button-container .button-contents p {
+    font-size: calc(14px + 0.390625vw);
+  }
+
+  .card.contact .about-button-container .button-contents img {
+    width: 5.5vw;
+  }
+}
+
+.contact-container.main-content {
+  margin-bottom: 0em;
+}
+
+.card.contact .about-button-container {
+  grid-template-columns: 1fr;
+}
+
+.card.contact .about-button-container a {
+  padding: 1em;
+}
+
+.card.contact .about-button-container a:nth-child(1) {
+    animation: ease-out enterFromBottom 1s;
+}
+
+.card.contact .about-button-container a:nth-child(2) {
+    animation: ease-out enterFromBottom 1.25s;
+}
+
+.card.contact .about-button-container a:nth-child(3) {
+    animation: ease-out enterFromBottom 1.50s;
+}
+
+.card.contact .about-button-container a:nth-child(4) {
+  animation: ease-out enterFromBottom 1.75s;
+}
+
+
+
 /* Only show hover effects on devices with cursors (not mobile) */
 @media (hover: hover) and (pointer: fine) {
   a.project-card:hover div.project-overlay {