Ada-C14 · KayKay-git · Oct 25, 2020 · Oct 25, 2020 · Oct 25, 2020 · Oct 26, 2020
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+.idea
diff --git a/content/about.html b/content/about.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="../stylesheets/about.css" rel="stylesheet">
+    <meta charset="utf-8">
+    <title>About</title>
+</head>
+<nav>
+    <ul class = "navbar">
+        <li><a href="./index.html" style="text-decoration: none;">Home</a></li>
+        <li><a href="./about.html" style="text-decoration: none;">About</a></li>
+        <li><a href="./hobby-blog.html" style="text-decoration: none;">Hobby Blog</a></li>
+        <li><a href="./portfolio.html" style="text-decoration: none;">Portfolio</a></li>
+    </ul>
+</nav>
+<body>
+<header>
+    <h1>About</h1>
+        <p> I am currently a Software Engineering Student at ADA!</p>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</header>
+
+<footer>
+    © 2020 Kalki
+</footer>
+
+</body>
+</html>
diff --git a/content/hobby-blog.html b/content/hobby-blog.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zxx">
+<head>
+    <link href="../stylesheets/hobby-blog.css" rel="stylesheet">
+    <meta charset="utf-8">
+    <title>Hobby Blog</title>
+</head>
+
+<nav>
+    <ul class = "navbar">
+        <li><a href="./index.html" style="text-decoration: none;">Home</a></li>
+        <li><a href="./about.html" style="text-decoration: none;">About</a></li>
+        <li><a href="./hobby-blog.html" style="text-decoration: none;">Hobby Blog</a></li>
+        <li><a href="./portfolio.html" style="text-decoration: none;">Portfolio</a></li>
+    </ul>
+</nav>
+
+<body>
+
+<header>
+    <h2>Hobby Blog</h2>
+</header>
+
+
+<div class="hobbies">
+
+    <div class="container">
+        <h3>Reading</h3>
+        <img src="../images/reading.jpg" height="400" width="500" alt="reading"/>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <div class="container">
+        <h3>Gaming</h3>
+        <img src="../images/gaming.jpg" height="400" width="500" alt="gaming"/>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <div class="container">
+        <h3>Hammocking</h3>
+        <img src="../images/hammock.jpg" height="400" width="500" alt="hammocking"/>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+</div>
+
+<footer>
+    © 2020 Kalki
+</footer>
+
+</body>
+
+</html>
diff --git a/content/index.html b/content/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="../stylesheets/index.css" rel="stylesheet">
+    <meta charset="utf-8">
+    <title>Index</title>
+</head>
+
+<nav>
+    <ul class = "navbar">
+        <li><a href="./index.html" style="text-decoration: none;">Home</a></li>
+        <li><a href="./about.html" style="text-decoration: none;">About</a></li>
+        <li><a href="./hobby-blog.html" style="text-decoration: none;">Hobby Blog</a></li>
+        <li><a href="./portfolio.html" style="text-decoration: none;">Portfolio</a></li>
+    </ul>
+</nav>
+
+<body>
+    <header>
+        <h1>Hi, I'm Kalki</h1>
+        <p>A Software Engineering Student</p>
+    </header>
+
+    <footer>
+        © 2020 Kalki
+    </footer>
+
+</body>
+</html>
diff --git a/content/portfolio.html b/content/portfolio.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="../stylesheets/portfolio.css" rel="stylesheet" >
+    <meta charset="utf-8">
+    <title>Portfolio</title>
+</head>
+
+<nav>
+    <ul class = "navbar">
+        <li><a href="./index.html" style="text-decoration: none;">Home</a></li>
+        <li><a href="./about.html" style="text-decoration: none;">About</a></li>
+        <li><a href="./hobby-blog.html" style="text-decoration: none;">Hobby Blog</a></li>
+        <li><a href="./portfolio.html" style="text-decoration: none;">Portfolio</a></li>
+    </ul>
+</nav>
+
+<body>
+
+<header>
+    <h2>Portfolio</h2>
+</header>
+
+<div class="portfolio">
+
+    <div class="container">
+        <h3>Solar System CLI</h3>
+        <p>
+            <a href="https://github.com/KayKay-git/solar-system">
+                <img src="../images/solarsystem.jpg" height="200" width="300" alt="Solar System CLI"/></a> Created a CLI program that interacts with one Solar System and many Planets using OO principles</p>
+    </div>
+
+    <div class="container">
+        <h3>Slack CLI</h3>
+        <p>
+            <a href="https://github.com/KayKay-git/slack-cli">
+                <img src="../images/slacklogo.png" height="200" width="300" alt="Slack CLI"/></a> Collab: Programmed a complete command-line application that interacts with Slack</p>
+    </div>
+
+    <div class="container">
+        <h3>Personal Portfolio Website</h3>
+        <p>
+            <a href="https://github.com/KayKay-git/personal-portfolio-site">
+                <img src="../images/laptop.png" height="200" width="300" alt="Personal Portfolio"/></a> Created a static personal portfolio website using HTML & CSS. The one you are on right now! </p>
+    </div>
+
+</div>
+
+<footer>
+    © 2020 Kalki
+</footer>
+
+</body>
+
+</html>
diff --git a/images/gaming.jpg b/images/gaming.jpg
diff --git a/images/git logo.webp b/images/git logo.webp
diff --git a/images/gitlogo.png b/images/gitlogo.png
diff --git a/images/hammock.jpg b/images/hammock.jpg
diff --git a/images/laptop.png b/images/laptop.png
diff --git a/images/reading.jpg b/images/reading.jpg
diff --git a/images/slacklogo.png b/images/slacklogo.png
diff --git a/images/solarsystem.jpg b/images/solarsystem.jpg
diff --git a/images/zoomphoto.jpg b/images/zoomphoto.jpg
diff --git a/stylesheets/about.css b/stylesheets/about.css
@@ -0,0 +1,98 @@
+html {
+    background-image:url(
+    https://images.unsplash.com/photo-1548611635-b6e7827d7d4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
+    background-size: cover;
+}
+
+/*fix unvisited link color*/
+.navbar {
+    list-style: none;
+    width: 100%;
+    text-align: left;
+    display: flex;
+    margin-right: 2rem;
+    float: left;
+
+}
+
+.navbar a:link {
+    display: block;
+    font-size: 2.2rem;
+    padding: 2.5rem;
+    color: purple;
+}
+
+.navbar a:visited {
+    color: yellow;
+}
+
+.navbar a:hover {
+    background: hotpink;
+}
+
+/*remove margins and padding */
+ul {
+    padding: 0;
+    margin: 0;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    color: pink;
+}
+
+
+header > h1 {
+    width: auto;
+    font-family: Andale Mono, monospace;
+    overflow: hidden;
+    display: inline-block;
+    border-right: .15em solid orange;
+    white-space: nowrap;
+    margin: 0 auto;
+    font-size: 40px;
+    font-weight: 300;
+    letter-spacing: .15em;
+    animation:
+            typing 3s steps(30,end),
+            blink-caret .75s step-end infinite;
+}
+
+@keyframes typing {
+    from { max-width: 0 }
+    to { max-width: 38%; }
+}
+/* alternative header styling*/
+
+/*header > h1 {*/
+/*    font-family: Andale Mono, monospace;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    justify-content: flex-end;*/
+/*    align-items: center;*/
+/*    width: 100%;*/
+/*    height: 100vh;*/
+/*    color: pink;*/
+/*}*/
+
+header > p {
+    font-family: Andale Mono, monospace;
+    justify-content: flex-start;
+    font-weight: 250;
+    text-align: center;
+    font-size: 1rem;
+    color: white;
+}
+
+footer {
+    text-align: right;
+    color: white;
+    font-size: 20px;
+}
+
+
diff --git a/stylesheets/hobby-blog.css b/stylesheets/hobby-blog.css
@@ -0,0 +1,102 @@
+
+/*html {*/
+/*    background-image:url(*/
+/*    https://c4.wallpaperflare.com/wallpaper/327/43/821/colorful-simple-abstract-lines-wallpaper-preview.jpg);*/
+/*    background-size: cover;*/
+/*}*/
+
+html{
+    background-color: black;
+}
+
+/*fix unvisited link color*/
+.navbar {
+    list-style: none;
+    width: 100%;
+    text-align: left;
+    display: flex;
+    margin-right: 2rem;
+    float: left;
+
+}
+
+.navbar a:link {
+    display: block;
+    font-size: 2.2rem;
+    padding: 2.5rem;
+    color: purple;
+}
+
+.navbar a:visited {
+    color: yellow;
+}
+
+.navbar a:hover {
+    background: hotpink;
+}
+
+/*remove margins and padding */
+ul {
+    padding: 0;
+    margin: 0;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 10vh;
+    color: pink;
+}
+
+header > h2 {
+    font-family: Andale Mono, monospace;
+    overflow: hidden;
+    display: inline-block;
+    border-right: .15em solid orange;
+    white-space: nowrap;
+    margin: 0 auto;
+    font-size: 40px;
+    font-weight: 300;
+    letter-spacing: .15em;
+    animation:
+            typing 3s steps(30,end),
+            blink-caret .75s step-end infinite;
+}
+
+@keyframes typing {
+    from { max-width: 0 }
+    to { max-width: 38%; }
+}
+
+.hobbies  {
+    font-family: Andale Mono, monospace;
+    justify-content: center;
+    font-weight: 250;
+    text-align: center;
+    font-size: 1rem;
+    color: white;
+}
+
+.container {
+    margin: auto;
+    width: 60%;
+    border: 5px solid deeppink;
+    padding: 10px;
+    text-align: center;
+}
+
+img {
+    border-radius: 8px;
+}
+
+footer {
+    text-align: right;
+    color: white;
+    font-size: 20px;
+    width: 100%;
+    height : 60px;
+    display: inline-block;
+}