Well you made a lot of changes (I think) since it's 2:13am and you ha…

…ve a 10am tomorrow (today). Anyway I think it looks better. It's cleaner. Plus changes were made to .narci so it's positioned better and not completely awful.
VictorIJnr · Nov 6, 2017 · e70c6d6 · e70c6d6
1 parent aee09a1
commit e70c6d6
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 129 deletions.
diff --git a/index.html b/index.html
@@ -1,95 +1,76 @@
 <html>
- <head>
- <script
- src="https://code.jquery.com/jquery-3.2.1.min.js"
- integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
- crossorigin="anonymous"></script>
-
- <!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
- integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
+ <head>
+ <script
+ src="https://code.jquery.com/jquery-3.2.1.min.js"
+ integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
-
- <title>Victor Igodifo</title> 
-
- <script src="./src/js/particles.min.js"></script> 
- <script src="./src/js/index.js"></script>
-
- <link href="./src/css/indexify.css" rel="stylesheet">
- <link href="./src/css/contactify.css" rel="stylesheet">
- <link href="./src/css/navigation.css" rel="stylesheet">
- <link href="./src/css/ionicons.min.css" rel="stylesheet">
- <link href="./src/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet">
- </head>
-
- <body class="no-margin">
-
-
- <section class="splash-screen">
- <div id="particles"></div>
 
- <div class="row">
- <div class="col-md-6 splash-section about-me">
- <img class="back-image" src="./res/images/about-me.png" alt="">
- <button class="section-link about-me" href="">About Me</button>
- </div>
-
- <div class="col-md-6 splash-section my-work">
- <img class="back-image" src="./res/images/my-work.png" alt="">
- <button class="section-link my-work" href="">My Work</button>
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
+ integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
+ crossorigin="anonymous"></script>
+
+ <title>Victor Igodifo</title> 
+
+ <script src="./src/js/particles.min.js"></script> 
+ <script src="./src/js/index.js"></script>
+
+ <link href="./src/css/bootstrap.min.css" rel="stylesheet">
+ <link href="./src/css/indexify.css" rel="stylesheet">
+ <link href="./src/css/contactify.css" rel="stylesheet">
+ <link href="./src/css/navigation.css" rel="stylesheet">
+ <link href="./src/css/ionicons.min.css" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet">
+ </head>
+
+ <body class="no-margin">
+ <section class="splash-screen">
+ <div id="particles"></div>
+
+ <nav class="navigation-container">
+ <ul class="navigation row-nav right">
+ <li><a class="about-me" href="">About Me</a></li>
+ <li><a href="">My Work</a></li>
+ <li><a href="">Blog</a></li>
+ <li><a href="">Contact</a></li>
+ </ul>
+ </nav>
+
+ <p class="narci">VictorIJnr</p>
+
+ </section>
+
+ <section class="blog">
+ <div class="navigation-container">
+ <ul class="navigation tilt">
+ <li><a href="">Home</a></li>
+
+ <li><a href="">Bloopy</a></li>
+ </ul>
  </div>
- </div>
-
- <p class="narci">VictorIJnr</p>
-
- <div class="row">
- <div class="col-md-6 splash-section blog">
- <button class="section-link blog" href="">Blog</button>
+ <section id="current-blog"></section>
+ </section> 
+
+ <section class="contact">
+ <div class="navigation-container">
+ <ul class="navigation tilt">
+ <li><a href="">Home</a></li>
+
+ <li><a href="">Github</a></li>
+
+ <li><a href="">Contact Form</a></li>
+ </ul>
  </div>
-
- <div class="col-md-6 splash-section contact"> 
- <button class="section-link contact">Contact</button>
+
+ <div class="row github no-margin">
+ <img class="background-image" src="./res/images/SlideshowCode.png" alt="Background">
+
+ <a class="contact-icon" href="https://github.com/VictorIJnr" target="_blank">
+ <i class="ion-social-github"></i>
+ </a>
  </div>
- </div>
- </section>
-
- <section class="about-me">
- </section> 
-
- <section class="my-work">
- </section> 
-
- <section class="blog">
- <div class="navigation-container">
- <ul class="navigation tilt">
- <li><a href="">Home</a></li>
-
- <li><a href="">Bloopy</a></li>
- </ul>
- </div>
- <section id="current-blog"></section>
- </section> 
-
- <section class="contact">
- <div class="navigation-container">
- <ul class="navigation tilt">
- <li><a href="">Home</a></li>
-
- <li><a href="">Github</a></li>
-
- <li><a href="">Contact Form</a></li>
- </ul>
- </div>
-
- <div class="row github no-margin">
- <img class="background-image" src="./res/images/SlideshowCode.png" alt="Background">
-
- <a class="contact-icon" href="https://github.com/VictorIJnr" target="_blank">
- <i class="ion-social-github"></i>
- </a>
- </div>
- </section> 
- </body>
-</html>
+ </section> 
+ </body>
+ </html>
+
diff --git a/src/css/indexify.css b/src/css/indexify.css
@@ -27,13 +27,14 @@
  box-sizing: border-box;
 
  font-family: 'Gabriola', sans-serif;
- color: #333;
 }
 
 html, body {
  height: 100vh;
  width: 100vw;
 
+ color: #ddd;
+
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
@@ -99,6 +100,8 @@ section.active {
 }
 
 .splash-screen {
+ display: flex;
+ align-items: center;
  position: relative;
 
  color: #ddd;
@@ -149,18 +152,11 @@ section.active {
 
 .narci {
  display: inline-block;
- position: relative;
 
- margin: 0%;
+ margin-left: 2.5vw;
 
- height: 34vh;
-
- font-size: 600%;
+ font-size: 350%;
  color: #ddd;
- text-align: center;
- vertical-align: middle;
-
- line-height: 34vh; 
 
  -webkit-transition: color 0.5s ease-out;
  -moz-transition: color 0.5s ease-out;

diff --git a/src/css/navigation.css b/src/css/navigation.css
@@ -1,69 +1,125 @@
 .navigation {
- position: absolute;
+ position: fixed;
  display: flex;
  flex-direction: column;
+ justify-content: center;
+ align-items: center;
 
  margin: 0px;
+ padding: 0px;
 
- top: -10vh;
- left: -7vw;
+ top: -5vh;
+ left: -3vw;
 
  color: inherit;
- background-color: #fff;
 
- width: 35%;
+ width: 30vw;
 
  list-style: none;
- font-size: 200%;
+ font-size: 100%;
+
+ z-index: 1000;
+}
+
+.bottom {
+ top: 90vh;
+}
+
+.right {
+ right: 2.5vw;
+ left: initial;
+}
 
- z-index: 100;
+.row-nav {
+ flex-direction: row;
+ width: initial;
 }
 
 .navigation:first-child {
  padding-top: 10vh;
 }
 
+.bottom.navigation:first-child {
+ padding-top: 0vh;
+}
+
+.navigation a {
+ position: relative;
+ line-height: 125%;
+ padding-bottom: -5px;
+}
+
 .navigation a:link, 
 .navigation a:visited {
- display: block;
+ display: inline-block;
 
- color: #555;
- background-color: #fff;
+ color: inherit;
  text-decoration: none;
-
- -webkit-transition: background-color 0.5s ease,
- color 0.5s ease;
- -moz-transition: background-color 0.5s ease,
- color 0.5s ease;
- transition: background-color 0.5s ease,
- color 0.5s ease;
 }
 
-.navigation a:hover {
+/* .navigation a:hover,
+.navigation a.active {
  text-decoration: none;
  color: #fff;
- background-color: #555;
+ background-color: #e5a952;
+} */
+
+.navigation a::after {
+ border-bottom: 1px solid transparent;
+ width: 0%;
+ height: 0%;
+ content: '';
+
+ box-sizing: inherit;
+ position: absolute;
+
+ bottom: 0%;
+ left: 0%;
+
+ -webkit-transition: border-color 0.5s ease-out, 
+ width 0.25s ease-out, 
+ height 0.25s ease-out 0.25s;
+ transition: border-color 0.5s ease-out, 
+ width 0.25s ease-out, 
+ height 0.25s ease-out 0.25s;
+}
+
+.navigation a:hover::after {
+ width: 100%; 
+ /* height: 90%; */
+
+ border-color: #fff;
+}
+
+.row-nav.navigation a:link, 
+.row-nav.navigation a:visited {
+ display: inline-block;
+}
+
+.navigation.row-nav a {
+ margin-left: 5vw;
 }
 
 .navigation-container {
  text-align: center;
 
- color: #333;
+ color: inherit;
  background-color: #fff;
  font-size: inherit;
 }
 
-.top-left {
- right: -7vw;
- left: initial;
-}
-
 .tilt {
- transform-origin: 0 0;
- transform: rotateZ(-40deg) translate(-14vw, 14vh);
+ transform-origin: 0% 0%;
+ /* transform: rotateZ(-45deg) translate(-29.4vw, -55vh); */
+ transform: rotateZ(-45deg) translate(-51vw, 10.705vh); 
+ /* transform: translate(-40.4vw, 9.956vh) rotateZ(-45deg); */
+ /*I used trig to get the translation values, mathematically, ideal values would be approx (-42.4vw, 2.65vw)
+ after using trig to calculate the distance to top corner is 15(root 2)*/
+ width: 100%; 
 }
 
-.top-left.tilt {
- transform-origin: 0 100%;
- transform: rotateZ(40deg) translate(-2vw, -25vh);
+.right.tilt {
+ transform-origin: 100% 0%;
+ /* transform: rotateZ(45deg) translate(26.5vw, -55vh); */
+ transform: rotateZ(45deg) translate(51.5vw, 10.705vh);
 }