diff --git a/main-site/themes/temper/layouts/404.html b/main-site/themes/temper/layouts/404.html
new file mode 100644
index 0000000..e69de29
diff --git a/main-site/themes/temper/layouts/_default/baseof.html b/main-site/themes/temper/layouts/_default/baseof.html
new file mode 100644
index 0000000..5f8e2ec
--- /dev/null
+++ b/main-site/themes/temper/layouts/_default/baseof.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    {{- partial "head.html" . -}}
+    <body>
+        {{- partial "header.html" . -}}
+        <div id="content">
+        {{- block "main" . }}{{- end }}
+        </div>
+        {{- partial "footer.html" . -}}
+    </body>
+</html>
diff --git a/main-site/themes/temper/layouts/_default/list.html b/main-site/themes/temper/layouts/_default/list.html
new file mode 100644
index 0000000..e69de29
diff --git a/main-site/themes/temper/layouts/_default/single.html b/main-site/themes/temper/layouts/_default/single.html
new file mode 100644
index 0000000..e69de29
diff --git a/main-site/themes/temper/layouts/index.html b/main-site/themes/temper/layouts/index.html
new file mode 100644
index 0000000..a7fd190
--- /dev/null
+++ b/main-site/themes/temper/layouts/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-us">
+{{ partial "head.html" . }}
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+	<a href="#" class="navbar-brand"><img src="/img/favicon.png" width="30", height="30" class="d-inline-block align-top" alt="">
+		<strong>Temper.tv</strong>
+	</a>
+	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
+		<span class="navbar-toggler-icon"></span>
+	</button>
+	<div class="collapse navbar-collapse" id="navbarNav">
+		<ul class="navbar-nav">
+            {{ range (.Paginate (.Pages.ByParam "rank")).Pages }}
+			<li class="nav-item">
+				<a class="nav-link" href="#{{trim .RelPermalink "/"}}">
+					{{.Title}}
+				</a>
+			</li>
+			{{ end }}
+		</ul>
+	</div>
+</nav>
+<div class="banner-container">
+    <div class="fade-in-image">
+        <img class="fluid" src="/img/bg.png">
+    </div>
+	<div class="headline">
+		<h1 class="headline-title reveal-text">{{.Site.Title}}</h1>
+		<p class="one-liner reveal-text">{{.Site.Params.Description}}</p>
+		{{ partial "socials.html" . }}
+	</div>
+</div>
+
+<div class="container">
+    {{- partial "experience.html" . -}}
+    {{- partial "projects.html" . -}}
+	{{- partial "education.html" . -}}
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/main-site/themes/temper/layouts/partials/.head.html.swp b/main-site/themes/temper/layouts/partials/.head.html.swp
new file mode 100644
index 0000000..c6de2c5
Binary files /dev/null and b/main-site/themes/temper/layouts/partials/.head.html.swp differ
diff --git a/main-site/themes/temper/layouts/partials/education.html b/main-site/themes/temper/layouts/partials/education.html
new file mode 100644
index 0000000..733109c
--- /dev/null
+++ b/main-site/themes/temper/layouts/partials/education.html
@@ -0,0 +1,22 @@
+{{ with .Site.GetPage "/education" }}
+	<h1 class="section-header" id="education">{{.Title}}</h1>
+	<div class="section">
+		<ul>
+            {{ range (.Paginate (.Pages.ByParam "rank")).Pages }}
+				<li style="list-style-type: none;">
+					<a><strong class="bigger">{{.Params.Institution}}</strong></a>
+					{{ if .Params.Degree }}
+						<p class="text-muted">{{.Params.Degree}} acheived {{.Params.When}}</p>
+					{{ end }}
+					{{ if .Params.Certlink }}
+						<a href="{{.Params.Certlink}}">Certificate Link</a>
+					{{ end }}
+					{{ if .Params.Certid }}
+						<p class="text-muted">Certificate id: {{.Params.Certid}}</p>
+					{{ end }}
+				</li>
+			{{ end }}
+		</ul>
+	</div>
+{{ end }}
+
diff --git a/main-site/themes/temper/layouts/partials/experience.html b/main-site/themes/temper/layouts/partials/experience.html
new file mode 100644
index 0000000..b71b407
--- /dev/null
+++ b/main-site/themes/temper/layouts/partials/experience.html
@@ -0,0 +1,18 @@
+{{ with .Site.GetPage "/experience"}}
+    <h1 class="section-header" id="experience">{{.Title}}</h1>
+    <div class="section">
+        <ul class="timeline">
+            {{ range (.Paginate (.Pages.ByParam "rank")).Pages }}
+                <li>
+                    <a>
+                        <strong class="bigger">{{.Title}}</strong> 
+                        <em class="text-muted">@</em> 
+                        <a class="bigger">{{.Params.Company}}</a>
+                    </a>
+                    <p class="badge badge-dark float-right media-float">{{.Params.When}}</p>
+                    <p>{{.Content}}</p>
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+{{ end }}
diff --git a/main-site/themes/temper/layouts/partials/footer.html b/main-site/themes/temper/layouts/partials/footer.html
new file mode 100644
index 0000000..e69de29
diff --git a/main-site/themes/temper/layouts/partials/head.html b/main-site/themes/temper/layouts/partials/head.html
new file mode 100644
index 0000000..d87db8d
--- /dev/null
+++ b/main-site/themes/temper/layouts/partials/head.html
@@ -0,0 +1,15 @@
+<head>
+
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <link rel="shortcut icon" type="image/png" href="{{ .Site.BaseURL }}/images/favicon.png">
+	<title>{{.Site.Params.Title}}</title>
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta property="og:title" content="{{ .Site.Params.Title }}">
+    <meta property="og:description" content="{{ .Site.Params.description }}">
+    <meta property="og:site_name" content="{{ .Site.Params.name }}">
+    <meta property="og:url" content="{{ .Site.BaseURL }}">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/images/ogbanner.jpg">
+</head>
diff --git a/main-site/themes/temper/layouts/partials/header.html b/main-site/themes/temper/layouts/partials/header.html
new file mode 100644
index 0000000..e69de29
diff --git a/main-site/themes/temper/layouts/partials/projects.html b/main-site/themes/temper/layouts/partials/projects.html
new file mode 100644
index 0000000..e0b3ac7
--- /dev/null
+++ b/main-site/themes/temper/layouts/partials/projects.html
@@ -0,0 +1,23 @@
+{{ with .Site.GetPage "/projects" }}
+    <h1 class="section-header" id="projects">{{.Title}}</h1>
+	{{ if .Page.Params.Subtitle }}
+		<p>
+		{{.Page.Params.Subtitle}}
+		{{ if .Page.Params.Gitpage }}
+			<a href="{{.Page.Params.Gitpage}}">
+				<i class="fab fa-gitlab"></i>
+			</a>
+		{{ end }}
+		</p>
+	{{ end }}
+    <div class="section">
+        {{ range .Pages }}
+            <div class="card">
+                <a href="{{.Params.Link}}"><h1 class="card-title title-link">{{.Title}}</h1></a>
+                <h6 class="card-subtitle mb-2 text-muted">{{.Params.Slogan}}</h6>
+                <a href="{{.Params.Link}}" class="card-img"><img src="{{.Params.Img}}" class="card-img"></a>
+                <div class="card-body"> {{.Content}} </div>
+            </div>
+        {{ end }}
+    </div>
+{{ end }}
diff --git a/main-site/themes/temper/layouts/partials/socials.html b/main-site/themes/temper/layouts/partials/socials.html
new file mode 100644
index 0000000..a46dbb5
--- /dev/null
+++ b/main-site/themes/temper/layouts/partials/socials.html
@@ -0,0 +1,21 @@
+{{ if .Site.Params.Gitlab }}
+<a class="socials" href="{{.Site.Params.Gitlab}}">
+	<i class="fab fa-gitlab"></i>
+</a>
+{{ end }}
+{{ if .Site.Params.Linkedin }}
+<a class="socials" href="{{.Site.Params.Linkedin}}">
+	<i class="fab fa-linkedin-in"></i>
+</a>
+{{ end }}
+{{ if .Site.Params.Twitch }}
+<a class="socials" href="{{.Site.Params.Twitch}}">
+	<i class="fab fa-twitch"></i>
+</a>
+{{ end }}
+{{ if .Site.Params.Mastodon }}
+<a class="socials" href="{{.Site.Params.Mastodon}}">
+	<i class="fab fa-mastodon"></i>
+</a>
+{{ end }}
+
