adjust website design to use bootstrap grid module and better design …

…having created an initial design with figma.
claire-fletcher · Jul 28, 2024 · fa5d45a · fa5d45a
1 parent 20db1e5
commit fa5d45a
Show file tree

Hide file tree

Showing 14 changed files with 473 additions and 163 deletions.
diff --git a/assets/claire-2.jpg b/assets/claire-2.jpg
diff --git a/assets/golang.png b/assets/golang.png
diff --git a/assets/leadership.png b/assets/leadership.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/sre.png b/assets/sre.png
diff --git a/graveyard/README.md b/graveyard/README.md
@@ -0,0 +1,3 @@
+# Graveyard
+
+This folder will temporarily hold old pages as the website is iterated on using new techniques learnt from the web development course.
diff --git a/pages/edi.html → graveyard/edi.html b/pages/edi.html → graveyard/edi.html
diff --git a/graveyard/index.html b/graveyard/index.html
@@ -0,0 +1,85 @@
+<!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" />
+    <link rel="stylesheet" href="/styles/main.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
+    />
+    <title>Claire FH</title>
+  </head>
+
+  <body>
+    <header>
+      <h1>Claire Fletcher</h1>
+      <nav>
+        <ul>
+          <li><a class="active" href="index.html">Home</a></li>
+          <li>
+            <a href="./pages/sustainability.html"
+              >Environmental Sustainability</a
+            >
+          </li>
+          <li><a href="./pages/edi.html">Accessibility</a></li>
+          <li>
+            <a href="https://github.com/claire-fletcher/claire-fh">GitHub</a>
+          </li>
+          <li><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <div>
+        <h2>About Me</h2>
+        <p>Hi, I'm Claire &#128075;</p>
+        <p>
+          I'm a Software Engineer working in the Site Reliability Engineering
+          team at Pexip. I'm passionate about building reliable and
+          well-instrumented systems which follow best practices. Well-documented
+          code and systems is a must for me!
+        </p>
+        <p>
+          My background started with environmental sustainability so I am
+          currently combining my expertise and passion by contributing to the
+          "CNCF Technical Advisory Group for Environmental Sustainability" as a
+          lead!
+        </p>
+        <img
+          src="assets/whale.webp"
+          alt="CNCF TAG logo. A light green whale sitting on top of a light green image of the earth."
+          title="CNCF TAG Environmental Sustainability logo"
+          style="display: block; margin: 0 auto; max-width: 15%; height: auto"
+        />
+      </div>
+
+      <div>
+        <h2>Isn't this a bit basic?</h2>
+        <p>
+          <strong>Yes, it is!</strong> I am a firm believer in continuous
+          learning and front-end web development is one area of software that I
+          don't have much experience with. I am currently completing the
+          codefirstgirls
+          <a href="https://codefirstgirls.com/courses/coding-kickstarter"
+            >Introduction to Web Development</a
+          >
+          course learning the basics of HTML, CSS, and combining this with
+          JavaScript.
+        </p>
+        <p>One benefit of this simplicity is the reduced carbon impact!</p>
+        <div id="wcb" class="carbonbadge"></div>
+        <script
+          src="https://unpkg.com/[email protected]/b.min.js"
+          defer
+        ></script>
+      </div>
+    </main>
+
+    <footer>
+      <p class="copyright">&copy; 2024 Claire Fletcher</p>
+    </footer>
+  </body>
+</html>
diff --git a/graveyard/main.css b/graveyard/main.css
@@ -0,0 +1,107 @@
+/*Dev!!!*/
+/* * {
+    outline: 1px solid orange;
+} */
+
+
+body {
+    background-color: #f1f2ec;
+    color: #010101;
+    font-family: "Fraunces", sans-serif;
+    min-height: 100vh;
+}
+
+footer {
+    min-height: 50px;
+}
+
+
+/*FlexBoxes*/
+/*NOTE: removed due to use of bootstrap which uses flexboxes and a grid*/
+/* body {
+    display: flex;
+    flex-direction: column;
+}
+  
+main {
+    flex: 1;
+} */
+
+/*Example styling for the box concept*/
+.container {
+    padding: 1%;
+    border: #010101 solid 1px;
+    background-color: #c8bea0;
+    margin: 1%;
+}
+
+/*All for the navigation bar*/
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #28511c;
+}
+
+nav li {
+    float: left;
+}
+
+nav li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+nav li a:hover {
+    background-color: #466d1d;
+}
+
+nav .active {
+    background-color: #466d1d;
+}
+
+nav li {
+    border-right: 1px solid #bbb;
+}
+
+nav li:last-child {
+    border-right: none;
+}
+
+nav a:visited {
+    color: white;
+}
+
+nav a:link {
+    color: white;
+}
+
+/*Styling for all of the links*/
+a:link {
+    color: #28511c;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:visited {
+    color: #28511c;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+/*Styling for the footer*/
+footer {
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    background-color: #f8f9fa;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    margin-top: 1%;
+    text-align: center;
+}
diff --git a/pages/sustainability.html → graveyard/sustainability.html b/pages/sustainability.html → graveyard/sustainability.html