First commit

karrambs · Dec 2, 2019 · 0b176095583a049ed68e7e653acb50a2ac8ed214 · 0b17609
commit 0b176095583a049ed68e7e653acb50a2ac8ed214
Unified Split

Showing with 152 additions and 0 deletions.

BIN .DS_Store

BIN images/.DS_Store

BIN images/linkedin.png

BIN images/straws.jpg

BIN images/tiles.jpg

+65 −0 index.html

+1 −0 scripts/app.js

+86 −0 styles/main.css
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/straws.jpg b/images/straws.jpg
diff --git a/images/tiles.jpg b/images/tiles.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+  
+<!DOCTYPE html>
+  
+<html lang="en">
+  
+<head>
+  
+    <meta charset="UTF-8">
+  
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  
+    <!-- Google Fonts-->
+  
+    <link href="https://fonts.googleapis.com/css?family=Calistoga|Fredericka+the+Great|Grand+Hotel|Homemade+Apple|Indie+Flower|Lobster|Marck+Script|Merienda+One|Rochester|Satisfy&display=swap" rel="stylesheet">
+  
+    <!--Bootstrap CSS-->
+  
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
+  
+    <!--Main CSS-->
+  
+    <link rel="stylesheet" href="styles/main.css">
+  
+    <title>Karra Batcheller's Portfolio</title>
+  
+</head>
+  
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-light fixed-top nav-fill">
+  
+   <span class="container navbar-brand mb-0 h1">
+  
+       <h1>Karra Batcheller</h1></span>
+  
+    <ul class="nav nav-fill float-right">
+  
+        <li class="nav-item">
+  
+          <a class="nav-link active" href="#home">Home</a>
+  
+        </li>
+  
+        <li class="nav-item">
+  
+          <a class="nav-link active" href="#about">About</a>
+  
+        </li>
+  
+        <li class="nav-item">
+  
+          <a class="nav-link active" href="#projects">My Projects</a>
+  
+        </li>
+  
+        <li class="nav-item">
+  
+          <a class="nav-link active" href="#contact">Contact Me</a>
+  
+        </li>
+  
+    </ul>
+  
+</nav>
+  
+<body>
+  
+    <section id="home" class="container">
+  
+        <h1>Welcome!</h1>
+  
+        <h3>I'm a full stack software engineer in the San Francisco Bay Area with a focus on frontend and beautiful, simple design.</h3>
+  
+        <h3>I love traveling and exploring. I lived in Europe for 4 years and traveled extensively during that time.  I also love learning about people, their cultures, architecture, food and languages.</h3>
+  
+    </section>
+  
+    <section id="about" class="container">
+  
+        <h1>About Me</h1>
+  
+        <h3>After years of childrearing and volunteer work I've switched gears in my life and I have learned software development.  I'm now a full stack engineer and focus on frontend development, primarily with React/Javascript.</h3>
+  
+        <h3>In addition to React and Javascript, I have experience with HTML, CSS, JQuery, AJAX, Python, Django, PostgreSQL, MongoDB, Node, Bootstrap, and Sass CSS.</h3>
+  
+    </section>
+  
+    <section id="projects" class="container">
+  
+        <h1 class="projects-header">My Projects</h1>
+  
+        <div class="row col-md projects">
+  
+            <p class="info">This was my first project and was inspired by conversations with my daughter.</p>
+  
+            <a href="https://pages.git.generalassemb.ly/karrambs/project-zero/">The Adventures of Knight Lilith and George the Duck</a>
+  
+        </div>
+  
+    </section>
+  
+    <section id="contact" class="container">
+  
+        <h1>Want to get in touch?</h1>
+  
+            <h3>Email me at kmbatch77@gmail.com</h3>
+  
+            <h3>Call me at 510.693.1797</h3>
+  
+            <h3>Check out my Linked In</h3>
+  
+            <a href="https://www.linkedin.com/in/kbatcheller/"><img src="./images/linkedin.png" alt="" width="30px" height="30px"></a>
+  
+    </section>
+  
+
+  
+
+  
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
+  
+<script src="scripts/app.js"></script>
+  
+</body>
+  
+</html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1 @@
+  
+console.log(`Karra's website`)
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,86 @@
+  
+* {
+  
+    margin: 0;
+  
+    padding: 0;
+  
+    border: 0;
+  
+}
+  
+
+  
+body {
+  
+    background-image: url(https://images.unsplash.com/photo-1541144605788-327615c66efb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60);
+  
+    width: 100%;
+  
+    height: 100%;
+  
+}
+  
+.navbar {
+  
+    background-color: #4C5355!important;
+  
+}
+  
+
+  
+.nav-item {
+  
+    padding-bottom: 1em;
+  
+    font-family: 'Satisfy', cursive;
+  
+    font-size: 24px;
+  
+}
+  
+
+  
+h1 {
+  
+    padding-bottom: 1em;
+  
+    font-family: 'Satisfy', cursive;
+  
+    font-size: 48px;
+  
+}
+  
+
+  
+#home {
+  
+    background-color: #C44B4F;
+  
+    width: 100vw;
+  
+    height: 80vh;
+  
+    margin-top: 120px;
+  
+    margin-bottom: 130px;
+  
+    padding-top: 180px;
+  
+    padding-bottom: 180px;
+  
+    text-align: center;
+  
+    line-height: 2em;
+  
+}
+  
+
+  
+#about {
+  
+    background-color: #C44B4F;
+  
+    width: 100vw;
+  
+    height: 80vh;
+  
+    margin-top: 120px;
+  
+    margin-bottom: 130px;
+  
+    padding-top: 180px;
+  
+    padding-bottom: 180px;
+  
+    text-align: center;
+  
+    line-height: 2em;
+  
+}
+  
+
+  
+#projects {
+  
+    background-color: #C44B4F;
+  
+    width: 100vw;
+  
+    height: 80vh;
+  
+    margin-top: 120px;
+  
+    margin-bottom: 130px;
+  
+    padding-top: 180px;
+  
+    padding-bottom: 180px;
+  
+}
+  
+
+  
+.projects-header {
+  
+    text-align: center;
+  
+}
+  
+
+  
+#contact {
+  
+    background-color: #C44B4F;
+  
+    width: 100vw;
+  
+    height: 80vh;
+  
+    margin-top: 120px;
+  
+    margin-bottom: 130px;
+  
+    padding-top: 180px;
+  
+    /* padding-bottom: 0px; */
+  
+    text-align: center;
+  
+    line-height: 2em;
+  
+}
+  
+
+  
+h3 {
+  
+    font-family: 'Fredericka the Great', cursive;
+  
+    padding-bottom: 2em;
+  
+}
+  
+
+  
+.projects {
+  
+    font-family: 'Fredericka the Great', cursive;
+  
+    font-size: 24px;
+  
+}