Added cool easter egg

chen-robert · Dec 21, 2018 · af95847 · af95847
1 parent 9cfaf09
commit af95847
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 23 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -8,7 +8,7 @@
     <meta name="og:site_name" content="Robert Chen">
     <meta name="og:description" content="A portfolio of sorts. Collection of interests and accomplishments.">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' localhost:* ws://localhost:*; font-src 'self' data:; script-src 'self'; object-src 'none';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' localhost:* ws://localhost:*; font-src https://fonts.gstatic.com 'self' data:; script-src 'self'; object-src 'none';">
   </head>
   <body>
     <header class="header animate-listener">
@@ -70,11 +70,9 @@ <h3 class="title--text title--text__secondary">
       <article class="section animate-listener">
         <div class="section--panel section--panel__center">
           <div class="section--text">
-            <div class="title--container centered">
+            <div class="centered">
               <div class="title--text title--text__secondary collapser">
-                <div>AR</div><div class="collapser--collapse">tific</div><div>IA</div><div class="collapser--collapse">l&nbsp;Intelligence</div>
-                <br>
-                <div class="collapser--circle"></div>
+                <div>Ar</div><div class="collapser--collapse">tific</div><div>ia</div><div class="collapser--collapse">l&nbsp;Intelligence</div>
               </div>
               <div class="collapser--overlay"></div>
             </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "jquery": "^3.3.1",
     "less-loader": "^4.1.0",
     "material-icons": "^0.2.3",
-    "materialize-css": "^1.0.0",
     "postcss-loader": "^3.0.0",
     "style-loader": "^0.23.0",
     "typeface-open-sans": "0.0.54"

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,4 @@
 import "styles/main.less";
-import "materialize-css";
 import $ from "jquery";
 
 $(() => {

diff --git a/src/styles/collapser.less b/src/styles/collapser.less
@@ -20,32 +20,31 @@
   opacity: 0;
 }
 
-.collapser--circle{
-  border-radius: 50%;
-  background-color: white;
-
-  height: 2rem;
-  width: 2rem;
-}
-
 .collapser:hover{
   z-index: 10000;
   position: relative;
+  > div{
+    animation: expand @animation-duration @animation-duration forwards;
+  }
   .collapser--collapse{    
     animation: collapse @animation-duration forwards;
   }
-  & ~.collapser--overlay{
+  ~.collapser--overlay{
     animation: overlay @animation-duration forwards;
     z-index: 9999;
-  }
-
+  }  
 }
 
 @keyframes collapse{
   0% {max-width: 100%;}
   100% {max-width: 0%;}
 }
 
+@keyframes expand{
+  0% {}
+  100% {font-size: 3rem; transform: translateY(-50vh);}
+}
+
 @keyframes overlay{
   0% {opacity: 0;}
   100% {opacity: 1;}