diff --git a/homepage/index.html b/homepage/index.html
index 297690b60..008f71af9 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -4,258 +4,7 @@
uutils
-
+
diff --git a/homepage/style.css b/homepage/style.css
new file mode 100644
index 000000000..9347d654e
--- /dev/null
+++ b/homepage/style.css
@@ -0,0 +1,250 @@
+/* All these styles are adapted from oranda to match their look */
+@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap");
+:root {
+ --dark-fg-color: #fff;
+ --light-fg-color: #141414;
+ --light-bg-color: var(--dark-fg-color);
+ --dark-bg-color: var(--light-fg-color);
+ --fg-color: var(--light-fg-color);
+ --bg-color: var(--light-bg-color);
+ --light-link-color: #0284c7;
+ --dark-link-color: #8bb9fe;
+ --link-color: var(--light-link-color);
+ --light-highlight-bg-color: #ededed;
+ --light-highlight-fg-color: #595959;
+ --dark-highlight-bg-color: #27272a;
+ --dark-highlight-fg-color: #ededed;
+ --highlight-fg-color: var(--light-highlight-fg-color);
+ --highlight-bg-color: var(--light-highlight-bg-color);
+ --font-face: "Fira Sans", sans-serif;
+}
+
+*,
+::after,
+::before {
+ border: 0 solid #e5e7eb;
+ box-sizing: border-box;
+}
+
+html {
+ font-feature-settings: normal;
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+ Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+ Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ font-variation-settings: normal;
+ line-height: 1.5;
+ tab-size: 4;
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+ margin: 0;
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: inherit;
+}
+
+/* PAGE LAYOUT */
+html,
+body {
+ font-family: var(--font-face);
+ height: 100%;
+ scroll-behavior: smooth;
+}
+
+body {
+ line-height: inherit;
+ margin: 0;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+}
+
+.page-body {
+ flex-grow: 1;
+}
+
+/* REPO BANNER */
+.repo_banner {
+ background-color: var(--fg-color);
+ color: var(--bg-color);
+ padding-bottom: 0.375rem;
+ padding-top: 0.375rem;
+}
+
+.repo_banner > a {
+ align-items: flex-start;
+ display: flex;
+ gap: 0.5rem;
+ height: 20px;
+ justify-content: center;
+}
+.repo_banner > a,
+.repo_banner > a:hover {
+ color: rgb(248 250 252);
+}
+.repo_banner > a:hover {
+ text-decoration-color: #f8fafc;
+ text-decoration-line: underline;
+ text-underline-offset: 1px;
+}
+
+/* HEADER */
+.logo {
+ display: block;
+ height: 170px;
+ margin: auto;
+}
+.title {
+ font-size: 3.75rem;
+ line-height: 1;
+ text-align: center;
+ padding-bottom: 0.5rem;
+}
+@media (min-width: 640px) {
+ .title {
+ font-size: 6rem;
+ line-height: 1;
+ }
+}
+
+/* MAIN */
+main {
+ margin: 6rem auto;
+ max-width: 80%;
+}
+
+@media (min-width: 1024px) {
+ main {
+ max-width: 56rem;
+ }
+}
+
+h1 {
+ font-size: 1.875rem;
+ font-weight: 900;
+ line-height: 2.25rem;
+ line-height: 1.25;
+ margin-bottom: 2rem;
+}
+
+p {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ line-height: 1.625;
+ margin-bottom: 2rem;
+}
+
+@media (min-width: 640px) {
+ h1 {
+ font-size: 3.75rem;
+ line-height: 1;
+ }
+
+ p {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ }
+}
+
+h2 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 2rem;
+ line-height: 1.25;
+ margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+ h2 {
+ font-size: 3rem;
+ line-height: 1;
+ }
+}
+
+h2,
+h3 {
+ margin-top: 3rem;
+}
+
+@media (min-width: 640px) {
+ li {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ }
+}
+
+ul {
+ margin-top: 0;
+ margin-bottom: 2rem;
+}
+
+/* FOOTER */
+footer {
+ align-items: center;
+ background-color: var(--fg-color);
+ color: var(--bg-color);
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 1;
+ font-size: 0.75rem;
+ justify-content: space-between;
+ line-height: 1rem;
+ padding: 0.5rem 1rem;
+ width: 100%;
+}
+
+.github-icon {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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'/%3E%3C/svg%3E");
+ height: 1.25rem;
+ width: 1.25rem;
+}
+
+.projects {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ width: 100%;
+ gap: 1rem;
+}
+
+.project {
+ flex-basis: 20rem;
+ flex-grow: 1;
+ border: 3px solid #888;
+ border-radius: 6px;
+ padding: 2rem;
+ text-decoration: none;
+ color: var(--fg-color);
+ font-size: 2rem;
+ font-weight: 700;
+ transition: text-decoration 0.3s;
+ transition: border-color 0.3s;
+}
+.project > span {
+ color: transparent;
+ transition: color 0.3s;
+}
+.project:hover > span {
+ color: black;
+}
+.project:hover {
+ border-color: black;
+}