diff --git a/index.html b/index.html
new file mode 100644
index 0000000..916958e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Notoric's Portfolio
+
+
+
+
+
+ Home
+ Welcome to the home page.
+
+
+
\ No newline at end of file
diff --git a/scripts/homepage.js b/scripts/homepage.js
new file mode 100644
index 0000000..e69de29
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..ccc3458
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');
+
+body {
+ background-color: #111;
+ color: #eee;
+ margin: 0;
+ font-family: "Fira Mono", monospace;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 16px;
+}
+
+header {
+ background-color: black;
+ margin: 0;
+ overflow: hidden;
+ padding-inline: 16px;
+ font-size: 22px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+#logo {
+ font-weight: 500;
+}
+
+header p {
+ margin: 16px;
+ margin-inline: 0;
+}
+
+#links, #nav {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ position: absolute;
+}
+
+#links {
+ right: 0;
+}
+
+#nav {
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+#links a, #nav a {
+ text-decoration: none;
+ color: #eee;
+ margin: 16px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: relative;
+}
+
+#links a:after, #nav a:after {
+ content: "";
+ display: block;
+ border-bottom: solid 3px #f05;
+ position: absolute;
+ right: 0;
+ width: 0;
+ height: 36px;
+ transition: width 0.3s ease;
+}
+
+#links a:hover:after, #nav a:hover:after {
+ width: 100%;
+}
+
+#links a svg {
+ fill: #eee;
+ width: 20px;
+ height: 20px;
+ padding-right: 8px;
+}
+
+main {
+ padding-inline: 20px;
+}
\ No newline at end of file