Merge pull request #1 from rodude123/header-and-nav

Finished header and nav
2021-07-31 16:48:31 +01:00 · 2021-07-31 16:48:31 +01:00 · 519d38e70d
commit 519d38e70d
parent 61ee7fd583 1321a56547
24 changed files with 3202 additions and 2706 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,72 @@
+
+.idea/*
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/my portfolio.iml" filepath="$PROJECT_DIR$/.idea/my portfolio.iml" />
-    </modules>
-  </component>
-</project>
--- a/portfolio.iml
+++ b/portfolio.iml
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
--- a/.idea/php.xml
+++ b/.idea/php.xml
@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PhpProjectSharedConfiguration" php_language_level="8.0" />
-</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
--- a/dist/css/main.css
+++ b/dist/css/main.css
--- a/dist/imgs/blog.svg
+++ b/dist/imgs/blog.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
--- a/dist/imgs/email.svg
+++ b/dist/imgs/email.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
--- a/dist/imgs/github.svg
+++ b/dist/imgs/github.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
--- a/dist/imgs/hero.jpg
+++ b/dist/imgs/hero.jpg
--- a/dist/imgs/instagram.svg
+++ b/dist/imgs/instagram.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
--- a/dist/imgs/linkedin.svg
+++ b/dist/imgs/linkedin.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
--- a/dist/imgs/phone.svg
+++ b/dist/imgs/phone.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/js/main.js
+++ b/dist/js/main.js
@ -1 +1 @@
-function formHandling(){console.log("Handle Forms")}
+const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n<e[n].length&&t(e[n],0,(function(){o(n+1)}))}(0)}));
--- a/gulpfile.js
+++ b/gulpfile.js
@ -2,21 +2,21 @@ const gulp = require("gulp");
 const browserSync = require("browser-sync").create();
 const htmlMin = require("gulp-htmlmin");
 const cssMin = require("gulp-clean-css")
-const jsMin = require("gulp-uglify");
+const terser = require("gulp-terser");

 gulp.task("minifyHTML", () =>
 {
 	return gulp.src("src/*.html" )
 		.pipe(htmlMin({collapseWhitespace: true}))
 		.pipe(gulp.dest("dist"));
-})
+});

 gulp.task("minifyCSS", () =>
 {
 	return gulp.src("src/css/*.css")
 		.pipe(cssMin({compatibility: "ie8"}))
 		.pipe(gulp.dest("dist/css"));
-})
+});

 gulp.task("minifyJS", () =>
 {
@ -28,11 +28,11 @@ gulp.task("minifyJS", () =>
 	
 	return gulp.src("src/js/*.js")
 	.on("error", createErrorHandler("gulp.src"))
-	.pipe(jsMin())
-	.on("error", createErrorHandler("uglify"))
+	.pipe(terser())
+	.on("error", createErrorHandler("terser"))
 	.pipe(gulp.dest("dist/js"))
 	.on("error", createErrorHandler("gulp.dest"));
-})
+});

 gulp.task("browserSync", () =>
 {
@ -40,11 +40,12 @@ gulp.task("browserSync", () =>
 		server: {
 			baseDir: "dist"
 		}
-	})
+	});
+	
 	gulp.watch("src/*.html", gulp.task("minifyHTML"));
-	gulp.watch("src/css/*.css", gulp.task("minifyCSS"))
-	gulp.watch("src/js/*.js", gulp.task("minifyJS"))
-	gulp.watch("dist/*", browserSync.reload)
+	gulp.watch("src/css/*.css", gulp.task("minifyCSS"));
+	gulp.watch("src/js/*.js", gulp.task("minifyJS"));
+	gulp.watch("dist").on("change", browserSync.reload)
 });

-gulp.task("default", gulp.series("browserSync"))
+gulp.task("default", gulp.series("browserSync"));
--- a/index.html
+++ b/index.html
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,14 +11,14 @@
  ],
  "author": "Rohit Pai",
  "license": "ISC",
-  "devDependencies": {
+  "dependencies": {
    "browser-sync": "^2.26.14",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
-    "gulp-uglify": "^3.0.2"
-  },
-  "dependencies": {
+    "gulp-uglify": "^3.0.2",
    "gulp-htmlmin": "^5.0.1",
-    "require": "^2.4.20"
+    "gulp-terser": "^2.0.1",
+    "normalize.css": "^8.0.1",
+    "require": "^0.4.4"
  }
 }
--- a/src/css/main.css
+++ b/src/css/main.css
@ -1,4 +1,377 @@
-body{
-    margin: 0;
-    padding: 0;
+/******** Imports ********/
+@import "/node_modules/normalize.css/normalize.css";
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+
+/****** Root Style ******/
+:root {
+    /* colours */
+    --primaryDefault: hsla(79, 62%, 51%, 1);
+    --primaryHover: hsla(79, 75%, 41%, 1);
+    --errorDefault: hsla(0, 62%, 51%, 1);
+    --grey: hsla(0, 0%, 39%, 1);
+    --mutedGrey: hsla(0, 0%, 67%, 0.58);
+    --mutedBlack: hsla(0, 0%, 0%, 0.25);
+    --navBack: hsl(0, 0%, 30%);
+
+    /* font sizes */
+    --titleFS: 2.25rem;
+    --generalFS: 1.125rem;
+    --headingFS: 1.5rem;
+}
+
+/*** Template Styles ****/
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: Noto Sans KR, sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 1.125rem;
+    line-height: 1.625rem;
+}
+
+a:visited {
+    color: inherit;
+}
+
+h1, nav {
+    font-family: Share Tech Mono, monospace;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 2.25rem;
+    line-height: 2.5625rem;
+    text-transform: lowercase;
+}
+
+h2 {
+    font-family: Noto Sans KR, sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 1.5rem;
+    line-height: 2.1875rem;
+}
+
+a.btn, form input[type="submit"] {
+    text-decoration: none;
+    display: inline-block;
+    padding: 1rem 2rem;
+    border-radius: 0.625em;
+    border: 0.3215em solid var(--primaryDefault);
+    color: #FFFFFF;
+}
+
+a.btn:hover {
+    border: 0.3215em solid var(--primaryHover);
+}
+
+a.btnPrimary, form input[type="submit"] {
+    background: var(--primaryDefault);
+    cursor: pointer;
+}
+
+a.btnOutline {
+    background: #FFFFFF;
+    color: var(--primaryDefault);
+}
+
+a.btnPrimary:hover, form input[type="submit"]:hover {
+    background: var(--primaryHover);
+
+}
+
+a.btn:active, form input[type="submit"]:active {
+    padding: 0.8rem 1.8rem;
+}
+
+.boxShadowOut:hover {
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
+}
+
+.boxShadowIn:active {
+    box-shadow: inset 0 6px 4px 0 var(--mutedBlack);
+}
+
+.textShadow:hover {
+    text-shadow: 0 6px 4px var(--mutedBlack);
+}
+
+/*** Navigation Styles **/
+
+header {
+    background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
+    background-size: cover;
+    height: 40%;
+    color:  #FFFFFF;
+    backdrop-filter: grayscale(100%);
+    position: relative;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.25em;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    transition: background-color 0.4s ease-in;
+}
+
+nav.scrolled {
+    background-color: var(--navBack);
+}
+
+nav #nav-check {
+    display: none;
+}
+
+nav .nav-btn {
+    display: none;
+}
+
+nav h1 {
+    margin: 0;
+}
+
+nav a {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    margin: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+nav ul li {
+    list-style: none;
+}
+
+nav ul li span {
+    visibility: hidden;
+}
+
+nav ul li a:hover span, nav ul li .active span {
+    visibility: visible;
+}
+
+header div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10em;
+}
+
+header div .btn {
+    margin: 2em 0;
+}
+
+header div button {
+    background: none;
+    border: none;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
+    font-size: 2rem;
+    cursor: pointer;
+}
+
+i.fa-chevron-down {
+    color: var(--mutedGrey);
+    font-size: 3.75em;
+    margin: 1.5rem 0;
+}
+
+div h1 span {
+    visibility: visible;
+    animation: caret 1s steps(1) infinite;
+}
+
+@keyframes caret {
+    50% {
+        visibility: hidden;
+    }
+}
+
+/**** Media Queries *****/
+
+@media screen and (max-width: 75em) {
+    /*** Navigation styles **/
+
+    nav {
+        display: block;
+        height: 50px;
+        width: 100%;
+        background-color: var(--navBack);
+        position: fixed;
+        top: 0;
+        padding: 0;
+    }
+
+    nav a h1{
+        margin-left: 1ch;
+    }
+
+    nav  .nav-btn {
+        display: inline-block;
+        position: absolute;
+        right: 75px;
+        top: -360px;
+    }
+
+    nav ul {
+        position: fixed;
+        display: block;
+        width: 100%;
+        background-color: #333;
+        transition: all 0.4s ease-in;
+        overflow-y: hidden;
+        padding-left: 0;
+        margin-top: 7px;
+    }
+
+    nav ul li a {
+        display: block;
+        width: 100%;
+        transform: translateX(-30px);
+        transition: all 0.4s ease-in;
+        opacity: 0;
+    }
+
+    .nav-btn label {
+        display: inline-block;
+        cursor: pointer;
+        width: 60px;
+        height: 50px;
+        position: fixed;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .5s ease-in;
+        -moz-transition: .5s ease-in;
+        -o-transition: .5s ease-in;
+        transition: .5s ease-in;
+    }
+
+    .nav-btn label span {
+        display: block;
+        position: absolute;
+        height: 5px;
+        width: 100%;
+        background-color: #FFFFFF;
+        opacity: 1;
+        right: 0;
+        top: 20px;
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+        -webkit-transition: .25s ease-in;
+        -moz-transition: .25s ease-in;
+        -o-transition: .25s ease-in;
+        transition: .25s ease-in;
+    }
+
+    /** burger not clicked **/
+
+    nav  #nav-check:not(:checked) ~ ul{
+        height: auto;
+        max-height: 0;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
+        top: 8px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
+        top: 23px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
+        top: 38px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+
+    nav .nav-btn label:hover, nav  #nav-check:checked ~ .nav-btn  label {
+        background-color: rgba(-1, 0, 0, 0.3);
+    }
+
+    /**** burger clicked ****/
+
+    nav #nav-check:checked ~ ul{
+        max-height: 50vh;
+        overflow-y: hidden;
+    }
+
+    nav #nav-check:checked ~ ul li a {
+        opacity: 1;
+        transform: translateX(0px);
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(1) a {
+        transition-delay: 0.15s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(2) a {
+        transition-delay: 0.25s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(3) a {
+        transition-delay: 0.35s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(4) a {
+        transition-delay: 0.45s;
+    }
+
+    nav #nav-check:checked ~ ul li:nth-child(5) a {
+        transition-delay: 0.55s;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:first-child {
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
+        width: 0;
+        opacity: 0;
+    }
+
+    nav #nav-check:checked ~ .nav-btn label span:last-child {
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+    }
+}
+
+@media screen and (max-width: 31em) {
+    /** not to squish name **/
+
+    header div h1{
+        width: min-content;
+    }
 }
--- a/src/imgs/hero.jpg
+++ b/src/imgs/hero.jpg
--- a/src/index.html
+++ b/src/index.html
@ -7,8 +7,157 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
+    <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
+    <script src="js/main.js"></script>
 </head>
 <body>
-   header>nav>h1{rohit pai}+ul>(li>a)*4 Ok after all this it should reload right?
+    <header>
+        <nav>
+            <input type="checkbox" id="nav-check">
+            <a href="/">
+                <h1>rohit pai</h1>
+            </a>
+            <div class="nav-btn">
+                <label for="nav-check">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </label>
+            </div>
+            <ul>
+                <li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li>
+                <li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
+                <li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
+                <li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
+                <li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
+            </ul>
+        </nav>
+        <div>
+            <h1>full stack developer</h1>
+            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
+            <a href="#about"><i class="fas fa-chevron-down"></i></a>
+        </div>
+    </header>
+    <main>
+        <section id="about">
+            <h1>about</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
+                officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
+                nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
+                exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
+                beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
+                nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
+            <a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
+        <section id="curiculumvitae">
+            <h1>curriculum vitae</h1>
+            <div class="cvGrid">
+                <div>
+                    <h2>Education</h2>
+                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div>
+                </div>
+                <div>
+                    <h2>Work</h2>
+                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div>
+                </div>
+            </div>
+        </section>
+        <section id="projects">
+            <div class="mainProj">
+                <h1>project title to be generated</h1>
+                <div><img src="" alt="">
+                    <div class="flexRow">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque
+                            iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
+                            repudiandae.</p>
+                        <div class="flexCol">
+                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
+                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="otherProj">
+                <h1>other projects</h1>
+                <div class="oProjGrid"><img src="" alt="">
+                    <div class="flexCol">
+                        <div>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
+                        </div>
+                        <div>
+                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
+                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="oProjGrid"><img src="" alt="">
+                    <div class="flexCol">
+                        <div>
+                            <p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
+                        </div>
+                        <div>
+                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
+                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="oProjGrid"><img src="" alt="">
+                    <div class="flexCol">
+                        <div>
+                            <p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
+                        </div>
+                        <div>
+                            <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
+                            <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
+                        </div>
+                    </div>
+                </div>
+                <a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
+        </section>
+        <section id="contact">
+            <div id="findme">
+                <h1>find me</h1>
+                <div class="flexRow socialIcons">
+                    <div>
+                        <a href=""><img src="" alt=""></a>
+                        <a href=""><img src="" alt=""></a>
+                        <a href=""><img src="" alt=""></a>
+                    </div>
+                    <div>
+                        <a href=""><img src="" alt=""></a>
+                        <a href=""><img src="" alt=""></a>
+                        <a href=""><img src="" alt=""></a>
+                    </div>
+                </div>
+                <img src="" alt="" class="profile">
+            </div>
+            <div id="sayhello">
+                <h1>say hello</h1>
+                <form action="" id="contactForm">
+                    <div class="flName">
+                        <div class="formControl">
+                            <label for="fName">First Name</label>
+                            <input type="text" name="fName" id="fName">
+                        </div>
+                        <div class="formControl">
+                            <label for="lName">Last Name</label>
+                            <input type="text" name="lName" id="lName">
+                        </div>
+                    </div>
+                    <div class="formControl">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email">
+                    </div>
+                    <div class="formControl">
+                        <label for="message">Message</label>
+                        <textarea name="message" id="message" cols="30" rows="10"></textarea></div>
+                    <input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
+                </form>
+            </div>
+        </section>
+        <footer class="flexRow">
+            <p>&copy; 2021 Rohit Pai all rights reserved</p>
+            <button class="goBackToTop"></button>
+        </footer>
+    </main>
 </body>
 </html>
--- a/src/js/main.js
+++ b/src/js/main.js
@ -1,5 +1,85 @@
-//Handle forms in contact page
-function formHandling()
+// scrolling effect
+const scrollLimit = 150;
+window.onscroll = () =>
 {
-	console.log("Handle Forms");
-}
+	// check if scrolled past limit if so add scrolled class to change background of nav
+	if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
+	{
+		document.querySelector("nav").classList.add("scrolled");
+	}
+	else
+	{
+		document.querySelector("nav").classList.remove("scrolled");
+	}
+
+	let current = ""; //id of current section scrolled to, set to "" if at top
+	// go through all sections and find current section id scrolled to
+	document.querySelectorAll("section").forEach((section) =>
+	{
+		const sectionTop = section.offsetTop;
+		if (window.pageYOffset >= sectionTop - 60)
+		{
+			current = section.getAttribute("id");
+		}
+	});
+
+	// go through all nav links, remove active class and add it to the link whose href matches the current id scrolled
+	// to
+	document.querySelectorAll("nav ul li a").forEach((a) =>
+	{
+		a.classList.remove("active");
+		if (a.href.includes(current) && current !== "")
+		{
+			a.classList.add("active");
+		}
+		else if (current === "")
+		{
+			document.querySelector("nav ul li a").classList.add("active"); // at the top
+		}
+	});
+};
+
+document.addEventListener('DOMContentLoaded', () =>
+{
+	// array with texts to type in typewriter
+	var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
+	
+	// type one text in the typwriter
+	// keeps calling itself until the text is finished
+	function typeWriter(text, i, fnCallback) {
+		// chekc if text isn't finished yet
+		if (i < (text.length)) {
+			// add next character to h1
+			document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>';
+			
+			// wait for a while and call this function again for next character
+			setTimeout(function() {
+				typeWriter(text, i + 1, fnCallback)
+			}, 100);
+		}
+		// text finished, call callback if there is a callback function
+		else if (typeof fnCallback == 'function') {
+			// call callback after timeout
+			setTimeout(fnCallback, 700);
+		}
+	}
+	// start a typewriter animation for a text in the dataText array
+	function StartTextAnimation(i) {
+		if (typeof dataText[i] === 'undefined'){
+			setTimeout(function() {
+				StartTextAnimation(0);
+			}, 1000);
+			// StartTextAnimation(0);
+		}
+		else if (i < dataText[i].length) {
+			// text exists! start typewriter animation
+			typeWriter(dataText[i], 0, function(){
+				// after callback (and whole text has been animated), start next text
+				StartTextAnimation(i + 1);
+			});
+		}
+	}
+	// start the text animation
+	StartTextAnimation(0);
+});
+
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>`