boomer

src/styles/main.css

@@ -18,8 +18,8 @@ body {
     --orange: #fd7702;
     --yellow: #ffbb00;
   
-    --background: var(--white);
-    --accent: var(--black);
+    --background: var(--black);
+    --accent: var(--white);
   
     margin: 0;
     padding: 0;
@@ -96,4 +96,8 @@ nav::before {
 
 .wrap {
     word-break: break-word;
+}
+
+.hidden {
+    display: none;
 }

src/styles/sections.css

@@ -27,8 +27,21 @@
 #heroText {
     padding-top: 20vh;
     font-size: 4em;
-    width: 80%;
+    width: 75%;
     text-align: center;
-    margin: 2em auto .5em auto;
+    margin: 0 auto;
+}
+
+#heroImage {
+    max-width: 300px;
+    margin: 0 auto;
+    animation: fadeIn 4s ease-in;
 }
-  
+
+@keyframes fadeIn {
+    0% { opacity: 0 }
+    25% { opacity: .05 }
+    50% { opacity: .10 }
+    75% { opacity: .5 }
+    100% { opacity: 1 }
+}

src/template/Sections.jsx

@@ -2,15 +2,19 @@ import React from 'react';
 import Typewriter from 'react-ts-typewriter';
 
 import { Panel } from "./Panel";
+import Boomer from '../img/unaboomer.png';
 import '../styles/sections.css';
 
 
 export class Section1 extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {title: ''};
+        this.state = {title: '', showImage: false};
         setInterval(() => {
-            this.setState({title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.'});
+            this.setState({
+                title: 'The Web3 Revolution and it\'s consequences have been a disaster for the human race.',
+                showImage: true
+            });
         }, 1200);
     }
 
@@ -20,6 +24,8 @@ export class Section1 extends React.Component {
                 <h1 id="heroText">
                     <Typewriter text={this.state.title} cursor={true} />
                 </h1>
+                <img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} />
+                
             </section>
         )
     }