More minimal design

4 files changed, 118 insertions, 296 deletions

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index b5c61c9..d8a13bb 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url("https://rsms.me/inter/inter.css");
+html {
+  font-family: "Inter", sans-serif;
+}
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: "Inter var", sans-serif;
+  }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 62afa53..e0e55b2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -20,6 +20,6 @@
         {{- partial "header.html" . -}}
         {{- block "main" . }}{{- end }}
     </div>
-        {{- partial "footer.html" . -}}
+        <!-- {{- partial "footer.html" . -}} -->
     </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index e880df3..183d16d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,10 @@
 {{ define "main" }}
 {{ "<!-- Hexagon Stylesheet -->" | safeHTML }}
 {{ $hexagons := resources.Get "css/hexagon.css" | minify }}
-<link rel="stylesheet" href="{{ $hexagons.Permalink | relURL}}">
-
-
-
-
+<link
+  rel="stylesheet"
+  href="{{ $hexagons.Permalink | relURL }}"
+/>
 
 <!--
   _    _
@@ -17,23 +16,27 @@
 
  -->
 <section class="pt-20">
-    <div class="container mt-6 mx-auto">
-        <div class="text-6xl font-black leading-none tracking-tight w-1/2 mx-auto">
-            <h1 class="inline-block">Hi! I'm</h1>
-            <h1 class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-teal-400 to-blue-400 inline-block">
-                {{ .Site.Data.homepage.banner.title}}
-            </h1>
-            <h1 class="inline-block">I study Computer Science at</h1>
-            <h1 class="text-purple-700 inline-block">
-                Durham University
-            </h1>
-        </div>
-
-  
+  <div class="container mt-6 flex justify-center">
+    <div class="text-6xl font-black leading-none tracking-tight w-1/2">
+      <h1 class="inline-block">Hi! I'm</h1>
+      <h1
+        class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-teal-400 to-blue-400 inline-block"
+      >
+        {{ .Site.Data.homepage.banner.title }}
+
+      </h1>
+      <h1 class="inline-block">I study Computer Science at</h1>
+      <h1 class="text-purple-700 inline-block">Durham University</h1>
     </div>
+  </div>
+</section>
 
-
+<section class="py-10 container mx-auto">
+  <h2 class="text-center text-2xl">
+    I build and contribute to open source software on GitHub, attend Hackathons
+  </h2>
 </section>
+
 <!--
    _____                  _           _     _        _           _
   / ____|                (_)         | |   | |      (_)         | |
@@ -44,281 +47,91 @@
 
 
 -->
-<section class="pt-24 container mx-auto px-2">
-<h2 class="text-5xl font-semibold">Get in touch here:</h2>
-<div class="flex justify-center gap-4">
-        {{ range .Site.Languages -}}
-        {{ if ne .LanguageName $.Site.Language.LanguageName }}
-        <li><a href="/{{ .Lang }}">{{ .LanguageName }}</a></li>
-        {{ end }}
-        {{ end }}
-        {{ if .Site.Data.homepage.social.twitter }}
-        <a href="https://twitter.com/{{ .Site.Data.homepage.social.twitter }}" class="inline-block"> <img
-                    class="h-12 contain" src="https://cdn.svgporn.com/logos/twitter.svg" alt="Twitter" loading="lazy"></a>
-        {{ end }} {{ if .Site.Data.homepage.social.linkedin }}
-        <a href="https://www.linkedin.com/in/{{ .Site.Data.homepage.social.linkedin }}" class="inline-block">
-            <img class="h-12 contain" src="https://cdn.svgporn.com/logos/linkedin.svg" alt="LinkedIn" loading="lazy" > </a>
-        {{ end }} {{ if .Site.Data.homepage.social.facebook }}
-        ><a href="https://www.facebook.com/{{ .Site.Data.homepage.social.facebook }}" class="inline-block" > <img
-                    class="h-12 contain" src="https://cdn.svgporn.com/logos/facebook.svg" alt="Facebook" loading="lazy"></a>
-        {{ end }} {{ if .Site.Data.homepage.social.instagram }}
-        <a href="https://instagram.com/{{ .Site.Data.homepage.social.instagram }}" class="inline-block"> <img
-                    class="h-12 contain" src="https://cdn.svgporn.com/logos/instagram-icon.svg" alt="Instagram" loading="lazy"></a>
-        {{ end }}{{ if .Site.Data.homepage.social.gmail }}
-        <a href="mailto:{{ .Site.Data.homepage.social.gmail }}@gmail.com" class="inline-block"> <img
-                    class="h-12 contain" src="https://cdn.svgporn.com/logos/google-gmail.svg" alt="Gmail" loading="lazy"></a>
-        {{ end }}
-
-
-</div>
-</section>
-
-<section class="container mx-auto px-2 pt-12">
-<h1 class="text-5xl font-semibold">I love working with these tools:</h1>
-<div class="flex flex-wrap justify-center gap-x-20 gap-y-16 pt-10">
-    {{range .Site.Data.homepage.tools.item}}
-    <img src={{.image}} class="h-16">
-    {{end}}
-</div>
-<p class="text-lg text-gray-800 text-center pt-12">But I've worked with many more</p>
-</section>
-
-
-
-
-<!-- portfolio -->
-{{ if .Site.Data.homepage.portfolio.enable }}
-
-<section>
-    <div class="container mx-auto pt-6">
-        <h1 class="text-3xl text-center underline"><span>Portfolio</span></h1>
-        {{ range .Site.Data.homepage.portfolio.item }}
-        <div>
-        <h2 class="text-center text-xl font-semibold"> {{.title}} </h2>
-        <div class="flex justify-center">
-        <img src="{{.image}}" class="w-2/6 h-64 object-contain" >
-        </div>
-        <p class="text-center">{{.description}}</p>  
-        <div class="flex justify-center">
-            <div class="flex gap-2">
-                {{ range .tools}}
-            <div>
-                <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/{{.}}.svg" />
-            </div>
-            {{end}}
-            </div>
-        </div>
-        <div class="flex justify-center"> 
-        <a href="{{.link}}" class="text-center">Find out more</a>
-        </div>
-        </div>
-        {{end}}
-
-</section>
-{{ end }}
-
-
-
-
-<!--
-
-  ______                                _
- |  ____|                              (_)
- | |__    __  __  _ __     ___   _ __   _    ___   _ __     ___    ___
- |  __|   \ \/ / | '_ \   / _ \ | '__| | |  / _ \ | '_ \   / __|  / _ \
- | |____   >  <  | |_) | |  __/ | |    | | |  __/ | | | | | (__  |  __/
- |______| /_/\_\ | .__/   \___| |_|    |_|  \___| |_| |_|  \___|  \___|
-                 | |
-                 |_|
-
--->
-
-
-
-
-<!-- experience -->
-{{ if .Site.Data.homepage.experience.enable }}
-
-<section class="">
-    <div class="container mx-auto">
-        <h1 class="text-4xl text-center underline"><span>Experience</span></h1>
-
-        <div class="flex flex-wrap gap-4 justify-center">
-
-            {{ range .Site.Data.homepage.experience.item }}
-            <div>
-                <div class="border border-gray-300 p-6">
-                    <div class="flex justify-center">
-                        <img class="contain experience" src="{{.logo}}" alt="" style="padding: 20px" loading="lazy">
-                    </div>
-                    <div class="text-center">
-                        <div style="height: 5em">
-                            <h3 class="text-xl">{{.title}}</h3>
-                        </div>
-                        <p>{{.company}}</p>
-                        <p>{{.duration}}</p>
-                    </div>
-                </div>
-            </div>
-            {{ end }}
-        </div>
-</section>
-{{ end }}
-
-<!-- ./experience -->
-
-
-
-
-
-
-<!-- Certifications -->
-{{ if .Site.Data.homepage.certifications.enable }}
-
-
-<section>
-    <div class="container mx-auto">
-        <h1 class="text-4xl text-center underline"><span>Certifications</span></h1>
-
-        <p class="text-center"><i>Click the images below to view the proof</i></p>
-        <div class="flex flex-wrap justify-center" >
-            {{ range .Site.Data.homepage.certifications.item }}
-            <a href="{{.url}}" class="imagemargin">
-                <img class="contain certs" src="{{.image}}" alt="{{.title}}" loading="lazy" style="cursor: pointer">
-                {{.title}}
-            </a>
-
-            {{ end }}
-        </div>
-
-    </div>
-
-</section>
-
-
-
-
-
-{{ end }}
-
-<!-- /Certifications -->
-
-
-
-<!-- Awards -->
-{{ if .Site.Data.homepage.awards.enable }}
-
-
-<section class="">
-    <div class="container mx-auto">
-        <h1 class="text-4xl text-center underline"><span>Awards and Achievements</span></h1>
-
-        <div class="flex flex-wrap justify-center gap-6 py-6">
-            {{ range .Site.Data.homepage.awards.item }}
-            <div class="imagemargin border border-gray-300 w-1/6 text-center py-4">
-                <img class="contain h-20 mx-auto" src="{{.image}}" alt="{{.title}}" loading="lazy" >
-                <h4>{{.title}}</h4>
-                <p>{{.event}}</p>
-                </div>
-
-            {{ end }}
-        </div>
+<div class="py-10">
+  <section class=" container mx-auto px-2 ">
+    <div class="flex justify-center gap-10">
+      {{ if .Site.Data.homepage.social.twitter }}
+
+      <a
+        href="https://twitter.com/{{ .Site.Data.homepage.social.twitter }}"
+        class="inline-block"
+      >
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/twitter.svg"
+          alt="Twitter"
+          loading="lazy"
+      /></a>
+      {{ end }}{{ if .Site.Data.homepage.social.github }}
+
+      <a href="https://github.com/{{ .Site.Data.homepage.social.github }}">
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/github-icon.svg"
+          alt="GitHub"
+          loading="lazy"
+        />
+      </a>
+      {{ end }} {{ if .Site.Data.homepage.social.gitlab }}
+
+      <a href="https://gitlab.com/{{ .Site.Data.homepage.social.gitlab }}">
+        <img
+          class="object-contain"
+          src="https://cdn.svgporn.com/logos/gitlab.svg"
+          alt="GitLab"
+          loading="lazy"
+      /></a>
+      {{ end }} {{ if .Site.Data.homepage.social.linkedin }}
+
+      <a
+        href="https://www.linkedin.com/in/{{ .Site.Data.homepage.social.linkedin }}"
+        class="inline-block"
+      >
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/linkedin.svg"
+          alt="LinkedIn"
+          loading="lazy"
+        />
+      </a>
+      {{ end }} {{ if .Site.Data.homepage.social.facebook }}
+ ><a
+        href="https://www.facebook.com/{{ .Site.Data.homepage.social.facebook }}"
+        class="inline-block"
+      >
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/facebook.svg"
+          alt="Facebook"
+          loading="lazy"
+      /></a>
+      {{ end }} {{ if .Site.Data.homepage.social.instagram }}
+
+      <a
+        href="https://instagram.com/{{ .Site.Data.homepage.social.instagram }}"
+        class="inline-block"
+      >
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/instagram-icon.svg"
+          alt="Instagram"
+          loading="lazy"
+      /></a>
+      {{ end }}{{ if .Site.Data.homepage.social.gmail }}
+
+      <a
+        href="mailto:{{ .Site.Data.homepage.social.gmail }}@gmail.com"
+        class="inline-block"
+      >
+        <img
+          class="h-12 object-contain"
+          src="https://cdn.svgporn.com/logos/google-gmail.svg"
+          alt="Gmail"
+          loading="lazy"
+      /></a>
+      {{ end }}
 
     </div>
-
-</section>
-
-
-
-
-
-{{ end }}
-
-<!-- /Awards -->
-
-<!--Hackathons-->
-{{ if .Site.Data.homepage.hackathons.enable }}
-
-<section>
-    <div class="container mx-auto">
-        <h1 class="text-4xl text-center underline "><span>Hackathons</span></h1>
-    </div>
-    <p class="text-center"><i>Hover over the logos to find out more</i></p>
-</section>
-<div class="container mx-auto">
-    <ul id="hexGrid">
-        {{range .Site.Data.homepage.hackathons.item}}
-        <li class="hex">
-            <div class="hexIn">
-                <div class="hexLink">
-                    <img src="{{.image}}" alt="{{.title}}" loading="lazy" />
-                    <div style="all:unset">
-
-                        <h1>
-                            {{.title}}</h1>
-                    </div>
-
-
-                    <div style="all:unset">
-                        <p>
-                            {{.description}}</p>
-                    </div>
-
-                </div>
-            </div>
-        </li>
-        {{end}}
-    </ul>
+  </section>
 </div>
-{{end}}
-
-
-<!--
-
-  ______       _                          _     _
- |  ____|     | |                        | |   (_)
- | |__      __| |  _   _    ___    __ _  | |_   _    ___    _ __
- |  __|    / _` | | | | |  / __|  / _` | | __| | |  / _ \  | '_ \
- | |____  | (_| | | |_| | | (__  | (_| | | |_  | | | (_) | | | | |
- |______|  \__,_|  \__,_|  \___|  \__,_|  \__| |_|  \___/  |_| |_|
-
-
-
--->
-{{ if .Site.Data.homepage.education.enable }}
-<!-- education -->
-<section>
-    <div class="container mx-auto">
-
-        <h1 class="text-4xl text-center underline"><span>Education</span></h1>
-
-
-        <div class="flex flex-wrap justify-center gap-6">
-
-            {{ range .Site.Data.homepage.education.item }}
-            <div class="w-1/4">
-                <div class="uk-card uk-card-default uk-height-max-large">
-                        <img class="contain experience mx-auto" src="{{.image}}" alt="" style="padding: 20px" loading="lazy">
-                    <div class="text-center">
-                            <h3 >{{.academy}}</h3>
-                        <p >{{.title}}</p>
-                        <p>{{.year}}</p>
-                    </div>
-                </div>
-            </div>
-            {{ end }}
-        </div>
-    </div>
-
-
-
-
-
-
-
-
-</section>
 {{ end }}
-
-
-{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 35def7a..975e3dd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -32,7 +32,7 @@
     </nav>
 </div> -->
 
-		<nav class="fixed h-12 p-4 bg-blue-100 border-b border-gray-200 w-full z-20 flex justify-between">
+		<nav class="fixed h-16 p-4 bg-white border-b border-gray-200 w-full z-20 flex justify-between">
 			<div class="flex">
 				<span class="visible mr-6 sm:hidden self-center">
 					<button
@@ -63,7 +63,7 @@
 					<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 				</svg>
             </a> -->
-            <div class="flex gap-4 pr-6 text-lg items-center text-blue-700">
+            <div class="flex gap-4 pr-6 text-lg items-center text-gray-700">
                                 {{if .IsHome}}
                 <p class="font-semibold"><a style="font-size: 18px; text-transform: none"
                         href="{{.Site.BaseURL}}">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a></p>