diff --git a/components/AlienHeader.tsx b/components/AlienHeader.tsx
new file mode 100644
index 0000000..675442a
--- /dev/null
+++ b/components/AlienHeader.tsx
@@ -0,0 +1,21 @@
+export default function AlienHeader() {
+
+ return (
+
+ )
+}
diff --git a/components/alien_styles.css b/components/alien_styles.css
new file mode 100644
index 0000000..44fe026
--- /dev/null
+++ b/components/alien_styles.css
@@ -0,0 +1,251 @@
+.ufo {
+ font-size: 5rem;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.monster {
+ font-size: 0.7em;
+ width: 1em;
+ height: 1.3em;
+ border-radius: 0.5em 0.5em 0em 0em / 0.6em 0.6em 0em 0em;
+ box-sizing: content-box;
+ border: 0.07em solid transparent;
+ position: relative;
+ user-select: none;
+ cursor: grab;
+}
+
+.monster.small {
+ font-size: 4rem;
+}
+
+.body {
+ width: 100%;
+ height: 100%;
+ background-color: currentColor;
+ border-radius: inherit;
+ position: relative;
+ transform-origin: bottom center;
+ animation: bouncebody alternate infinite 400ms 40ms ease-in-out;
+}
+
+.eyes,
+.eye-lid {
+ text-align: center;
+ display: flex;
+ font-size: 0.65em;
+ width: 1em;
+ height: 1em;
+ position: absolute;
+ left: 0.05em;
+ top: 0.3em;
+ animation: turn infinite 10s ease-in-out;
+}
+
+
+.eye {
+ position: relative;
+ display: inline-block;
+ border-radius: 50%;
+ width: 75%;
+ height: 75%;
+ background-color: black;
+ border-radius: 50%;
+}
+
+.eye-lid {
+ background-color: white;
+ border-radius: 0.5em 0.5em 0.5em 0.5em / 0.6em 0.6em 0.4em 0.4em;
+ box-shadow: 0.03em 0.14em rgba(0, 0, 0, 0.1);
+ animation: blink forwards turn infinite 10s ease-in-out;
+}
+
+.eye:after {
+ /*white shadow*/
+ --pupil-size: 0.2em;
+ position: absolute;
+ top: 0.05em;
+ left: 0.3em;
+ width: var(--pupil-size);
+ height: var(--pupil-size);
+ background: white;
+ border-radius: 50%;
+ content: " ";
+}
+
+.mouth {
+ font-size: 0.2em;
+ width: 1em;
+ height: 0.3em;
+ background: black;
+ border-radius: 1.5em 1.5em 0.5em 0.5em;
+ position: absolute;
+ bottom: 0.8em;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.mouth::before {
+ width: 50%;
+ height: 30%;
+ display: block;
+ content: ' ';
+ background-color: #ff8800;
+ border-radius: 50% / 100% 100% 50% 50%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-10%) translateX(-50%);
+}
+
+.vampi-mouth {
+ position: absolute;
+ background: black;
+ overflow: hidden;
+ font-size: 0.3em;
+ width: 1em;
+ height: 0.7em;
+ left: 50%;
+ bottom: 0.3em;
+ transform: translateX(-50%);
+ border-radius: 0.7em 0.7em 1.2em 1.2em;
+}
+
+.vampi-mouth::before {
+ content: '';
+ display: block;
+ background: #ff8800;
+ width: 100%;
+ height: 0.2em;
+ position: absolute;
+ bottom: 0;
+ border-radius: 50% 50% 0 0;
+}
+
+.vampi-tooth::before,
+.vampi-tooth::after,
+.vampi-tooth {
+ --teeth-size: 0.25em;
+ display: block;
+ width: 0;
+ height: 0;
+ font-size: inherit;
+ border-left: calc(var(--teeth-size) / 2) solid transparent;
+ border-right: calc(var(--teeth-size) / 2) solid transparent;
+ border-top: var(--teeth-size) solid #fff;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.vampi-tooth:before {
+ content: '';
+ transform: translateX(-150%) translateY(-100%);
+}
+
+.vampi-tooth:after {
+ content: '';
+ transform: translateX(50%) translateY(-100%);
+}
+
+.ear {
+ position: absolute;
+ top: -1.2em;
+ transform-origin: bottom center;
+ font-size: 0.3em;
+ width: .8em;
+ height: 1.5em;
+ left: 18%;
+ transform: rotate(-10deg);
+ animation: antena_e 5s infinite;
+}
+
+.ear+.ear {
+ left: auto;
+ right: 18%;
+ transform: rotate(10deg);
+ animation: antena_d 5s infinite;
+}
+
+.ear:before {
+ content: '';
+ display: block;
+ width: .8em;
+ height: .8em;
+ position: absolute;
+ z-index: 2;
+ left: 0;
+ border-radius: 50%;
+ background: currentColor;
+ box-shadow: inset -.1em -.08em rgba(0, 0, 0, .1);
+}
+
+.ear:after {
+ content: '';
+ display: block;
+ width: 0.3em;
+ height: 100%;
+ position: absolute;
+ top: .2em;
+ left: .3em;
+ background: currentColor;
+}
+
+
+@keyframes turn {
+
+ 0% {
+ left: 0.05em;
+ }
+
+ 25% {
+ left: calc((.05em + .65em)/2);
+ }
+
+ 50% {
+ left: .65em
+ }
+}
+
+@keyframes blink {
+
+ 0%,
+ 2%,
+ 60%,
+ 62%,
+ 100% {
+ transform: scaleX(1) scaleY(1);
+ }
+
+ 1%,
+ 61% {
+ transform: scaleX(1.3) scaleY(0.1);
+ }
+}
+
+@keyframes bounce {
+ to {
+ transform: translateY(4%);
+ }
+}
+
+@keyframes bouncebody {
+ to {
+ transform: scaleX(1.03) scaleY(0.97);
+ }
+}
+
+@keyframes antena_d {
+ 50% {
+ transform: rotate(20deg);
+ }
+}
+
+@keyframes antena_e {
+ 50% {
+ transform: rotate(-20deg);
+ }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c467b83..701854e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
import '../styles/global.css'
import '../styles/prism.css'
+import '../components/alien_styles.css'
import type { AppProps } from 'next/app'
import type { HomeProps } from './notes'
import React from 'react'
diff --git a/pages/index.tsx b/pages/index.tsx
index 33ed4a6..f38b6ec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import { UsefulLinksList } from '../components/UsefulLinks/index'
import { SocialLinksList } from '../components/SocialLinks/SocialLinks'
import type { GetStaticProps } from 'next'
import Image from 'next/image'
+import AlienHeader from 'components/AlienHeader'
interface LandingProps {
jobs: JobsType[]
@@ -25,8 +26,8 @@ export default function Landing({ jobs, skills, projects }: LandingProps): React
-
+
+
Triston Armstrong 🫰