From 6a4b0474208dfed8a681cfc9aea7997339e6f374 Mon Sep 17 00:00:00 2001 From: Triston Date: Sun, 11 Feb 2024 14:27:05 -0600 Subject: [PATCH] remove alien header --- components/portfolio/AlienHeader.tsx | 21 --- components/portfolio/alien_styles.css | 251 -------------------------- pages/_app.tsx | 1 - pages/index.tsx | 1 - 4 files changed, 274 deletions(-) delete mode 100644 components/portfolio/AlienHeader.tsx delete mode 100644 components/portfolio/alien_styles.css diff --git a/components/portfolio/AlienHeader.tsx b/components/portfolio/AlienHeader.tsx deleted file mode 100644 index 675442a..0000000 --- a/components/portfolio/AlienHeader.tsx +++ /dev/null @@ -1,21 +0,0 @@ -export default function AlienHeader() { - - return ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) -} diff --git a/components/portfolio/alien_styles.css b/components/portfolio/alien_styles.css deleted file mode 100644 index 44fe026..0000000 --- a/components/portfolio/alien_styles.css +++ /dev/null @@ -1,251 +0,0 @@ -.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 7d996be..3ef1736 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,5 @@ import '../styles/global.css' import '../styles/prism.css' -import '../components/portfolio/alien_styles.css' import '../styles/thai.css' import type { AppProps } from 'next/app' import type { HomeProps } from './notes' diff --git a/pages/index.tsx b/pages/index.tsx index 976901f..a90d880 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -29,7 +29,6 @@ export default function Landing({ jobs, skills, projects }: LandingProps): React
-

Triston Armstrong 🫰