feat: home component done

src/app/app.css

@@ -1,4 +0,0 @@
-main {
-    margin-top: 120px; /* Space for nav and ticker */
-}
-

src/app/app.html

@@ -1,9 +1,9 @@
-<div class="fixed top-0 left-0 w-full h-full z-30">
+<div class="fixed top-0 left-0 w-full z-30">
     <app-nav></app-nav>
     <app-ticker></app-ticker>
 </div>
 <app-disclaimer></app-disclaimer>
-<main>
+<main class="text-center">
     <router-outlet></router-outlet>
 </main>
 <app-footer></app-footer>

src/app/home/home.css

@@ -0,0 +1,61 @@
+pre {
+    background-color: var(--color-secondary);
+    color: var(--color-accent);
+    border: 2px dashed var(--color-accent);
+}
+
+.typing-container {
+    display: block;
+}
+
+.typing-line {
+    display: block;
+    overflow: hidden;
+    white-space: pre;
+    width: 0;
+    animation: typing-line 0.8s steps(30, end) forwards;
+}
+
+.line-1 {
+    animation-delay: 0s;
+}
+
+.line-2 {
+    animation-delay: 0.8s;
+}
+
+.line-3 {
+    animation-delay: 1.6s;
+}
+
+.line-4 {
+    animation-delay: 2.4s;
+}
+
+.line-5 {
+    animation-delay: 3.2s;
+}
+
+.typing-cursor {
+    display: inline-block;
+    margin-left: 2px;
+    animation: blink 1s infinite;
+    animation-delay: 4s;
+    opacity: 0;
+    animation-fill-mode: forwards;
+}
+
+@keyframes typing-line {
+    to {
+        width: 100%;
+    }
+}
+
+@keyframes blink {
+    0%, 50% {
+        opacity: 1;
+    }
+    51%, 100% {
+        opacity: 0;
+    }
+}

src/app/home/home.html

@@ -1 +1,19 @@
-<p>home works!</p>
+<h1 class="text-4xl font-bold">NHCarrigan</h1>
+<p class="text-2xl italic">Solutions for the Digital Age. And the Ages Before That.</p>
+<p>
+  <span class="font-bold">We are NHCarrigan.</span> Most consulting firms operate on a quarterly basis. We operate on a centennial
+  one. Whether you are fighting a hostile takeover, a DDoS attack, or a curse buried in your source
+  code, we provide the permanence you need in a transient world.
+</p>
+<p class="text-xl font-bold">Private. Precise. Permanent.</p>
+<div>
+    <pre class="text-left pl-10 mx-3">
+<code class="typing-container">
+<span class="typing-line line-1">SYSTEM STATUS:</span>
+<span class="typing-line line-2">  > NETWORKS: ONLINE</span>
+<span class="typing-line line-3">  > COFFEE: CRITICAL</span>
+<span class="typing-line line-4">  > SUNLIGHT: 5%</span>
+<span class="typing-line line-5">  > HUMANS: 0</span>
+</code><span class="typing-cursor">|</span>
+    </pre>
+</div>

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Quintessential&display=swap" rel="stylesheet">
 </head>
 <app-root></app-root>
 </html>

src/styles.css

@@ -8,6 +8,11 @@
     --color-accent: #00ff9d;
     --color-ticker: #8a0000;
     --color-background: #12121288;
+    font-size: 1.1rem;
+}
+
+* {
+    font-family: "Quintessential", sans-serif;
 }
 
 body::before {
@@ -33,6 +38,8 @@ main {
     margin: 0 auto;
     background-color: var(--color-background);
     color: var(--color-primary);
+    margin-top: 100px; /* Space for nav and ticker */
+    margin-bottom: 100px; /* Space for footer */
 }
 
 a {
@@ -55,3 +62,7 @@ button {
 button:hover {
     background-color: var(--color-primary);
 }
+
+p {
+    @apply my-1;
+}