working template

klhftco · Aug 31, 2024 · d6932bb · d6932bb
1 parent c164ad0
commit d6932bb
Show file tree

Hide file tree

Showing 2 changed files with 192 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -6,27 +6,69 @@
     <meta name="description" content="TODO_NAME portfolio">
 		<meta name="keywords" content="TODO_NAME, UC Berkeley">
 
-    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="icon" type = "image/svg+xml" href = "assets/img/logo-transparent.png">
 
-    <title>klhftco</title>
+    <title>TODO_SITE_NAME</title>
   </head>
   <body>
-    <div>
-	     <a href="/button/index.html">Other Work (Button)</a>
-       <br><br>
-       <a href="/website/index.html">My Website (wip)</a>
-       <br><br>
-    </div>
+    <section id="nav">
+      <!-- <img class="logo" src="assets/img/icon/logo-purple.png" /> -->
+      <nav class="nav">
+        <div class="nav-list">
+          <a class="link" href="#home" >home</a>
+          <a class="link" href="#about">about</a>
+          <a class="link" href="#experience">experience</a>
+          <a class="link" href="#education">education</a>
+          <a class="link" href="#project">projects</a>
+          <a class="link" href="TODO_RESUME_LINK">résumé</a>
+        </div>
+      </nav>
+    </section>
+
+    <section id="home">
+      <h1 class="header">Home</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
+    <section id="about">
+      <h1 class="header">About</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
+    <section id="experience">
+      <h1 class="header">Experience</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
+    <section id="education">
+      <h1 class="header">Education</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
+    <section id="project">
+      <h1 class="header">Projects</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
+    <section id="footer">
+      <h1 class="header">Footer</h1>
+      <div class="hero">
+        TODO_CONTENT
+      </div>
+    </section>
+
     <!-- <script src="script.js" defer></script> -->
   </body>
-  <!-- <script>
-		var links = document.body.getElementsByTagName("a")
-		var a = window.location.href.indexOf(".io")
-		var repo_name = window.location.href.substring(a+3)
-		for(var i = 0; i < links.length; i++){
-			var link = links[i]
-			var actual_name = link.href.substring(link.href.indexOf(".io")+4)
-			link.href = repo_name + actual_name
-		}
-	</script> -->
 </html>
diff --git a/style.css b/style.css
@@ -1,3 +1,134 @@
+/*===============
+  global styles
+===============*/
+
+/* @import url('https://fonts.googleapis.com/css2?family=Sen:[email protected]&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+:root {
+  --header-font: 'Courier Prime', serif;
+  --header-font-weight: bold;
+  --body-font: 'Courier Prime', serif;
+  --body-font-weight: normal;
+  --site-width: 40%;
+
+  /* TODO: color scheme */
+  --clr-bg: #444444;
+  --clr-fg: #bebebe;
+  --clr-accent: #2069e0;
+  --clr-medium: #878683;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  width: 100%;
+  font-family: var(--body-font);
+  font-weight: var(--body-font-weight);
+  background-color: var(--clr-bg);
+  color: var(--clr-fg);
+  line-height: 1.5;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--header-font);
+    font-weight: var(--header-font-weight);
+    text-align: center;
+  }
+}
+
 * {
-
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  background-color: inherit;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  box-shadow: none;
+  box-sizing: border-box;
+
+}
+
+section {
+  width: 100%;
+  height: 30vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .hero {
+    width: var(--site-width);
+    padding: 1vw;
+  }
+}
+
+/*===============
+section styles
+===============*/
+
+#nav {
+  height: 10vh;
+  display: inline-block;
+
+  .nav {
+    position: absolute;
+    /* height: 24px; */
+    top: 4vh;
+    right: 4vw;
+
+    a:hover {
+      color: var(--clr-medium);
+    }
+
+    .nav-list {
+      height: inherit;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 20px;
+
+      .link {
+        text-decoration: none;
+        font-family: var(--header-font);
+        font-weight: var(--body-font-weight);
+      }
+    }
+    .hide {
+      display: none;
+    }
+  }
+}
+
+#home {
+
+}
+
+#about {
+
+}
+
+#experience {
+
+}
+
+#education {
+
+}
+
+#project {
+
+}
+
+#footer {
+
 }
+
+/* ----------------------------------------- */
+
+/*===============
+section styles END
+===============*/