first commit

src/styles/About.module.css

@@ -0,0 +1,36 @@
+.row {
+	display: flex;
+	align-items: center;
+	padding: 20px;
+	gap: 5rem;
+	justify-content: center;
+	width: 100%;
+}
+
+.about {
+	text-align: center;
+	font-size: 1.5em;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 40px;
+}
+
+.textArticle p {
+	margin: 14px 0 40px;
+	max-width: 40rem;
+}
+
+.images a {
+	text-decoration: none;
+}
+
+.images img {
+	width: 200px;
+}
+
+@media (max-width: 1500px) {
+	.row {
+		flex-direction: column;
+	}
+}

src/styles/ButtonLink.module.css

@@ -0,0 +1,17 @@
+.button {
+    display: flex;
+    background: var(--secondary);
+    border: 2px solid var(--text-primary);
+    border-radius: 20px;
+    padding: 20px;
+    text-decoration: none;
+    white-space: nowrap;
+    height: 100%;
+    color: var(--text-primary);
+    justify-content: center;
+}
+
+.button:hover {
+    background: var(--secondary-hover);
+    color: white;
+}

src/styles/Divider.module.css

@@ -0,0 +1,35 @@
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.dividerIcon {
+    margin: 10px 0 15px;
+    position: relative;
+}
+
+.dividerIcon svg {
+    height: 2rem;
+    width: 2rem;
+    color: inherit;
+}
+
+.dividerIcon::before,
+.dividerIcon::after {
+    border-bottom: 0.5rem solid var(--text-primary);
+    border-radius: 5em;
+    content: "";
+    margin: 0 1em;
+    position: absolute;
+    top: 50%;
+    width: 7rem;
+}
+
+.dividerIcon::before {
+    right: 100%;
+}
+
+.dividerIcon::after {
+    left: 100%;
+}

src/styles/Home.module.css

@@ -0,0 +1,3 @@
+#container {
+    width: 100%;
+}

src/styles/Jumbo.module.css

@@ -0,0 +1,18 @@
+#jumbo {
+	color: var(--text-primary);
+	font-size: 2em;
+	padding: 3rem 0 0;
+	text-align: center;
+}
+
+#jumbo img {
+	width: 200px;
+}
+
+#jumbo i {
+	margin: 20px 0 30px;
+}
+
+#jumbo #shortAbout {
+	padding: 20px;
+}

src/styles/Nav.module.css

@@ -0,0 +1,70 @@
+.nav {
+	background: var(--secondary);
+	color: var(--primary-text);
+	padding-top: 1.5rem;
+	overflow: auto;
+	display: flex;
+	font-size: 1.3em;
+	font-weight: bold;
+	transition: padding 0.5s, font-size 0.5s;
+	width: 100%;
+	z-index: 1;
+	top: 0;
+	gap: 20px;
+}
+
+@media (min-width: 600px) {
+	.nav[data-expanded="false"] {
+		padding: 1rem;
+		width: unset;
+		top: 10px;
+		border-radius: 100px;
+		border: 3px solid var(--primary);
+		padding: 0;
+	}
+
+	.nav[data-expanded="true"] {
+		font-size: 1.5em;
+	}
+
+	.nav {
+		position: sticky;
+	}
+}
+
+.links svg {
+	height: 30px;
+}
+
+.nav button {
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	color: inherit;
+}
+
+.nav button:hover {
+	color: var(--secondary-text);
+}
+
+.links {
+	margin: auto;
+	display: flex;
+	align-items: center;
+	list-style: none;
+	padding: 0.7em 1.7em;
+}
+
+.links li {
+	margin: 0 0.5em;
+}
+
+.links a {
+	color: inherit;
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.links a:hover {
+	color: var(--secondary-text);
+}

src/styles/NotFound.module.css

@@ -0,0 +1,33 @@
+#notFound {
+    display: flex;
+    padding: 50px 0px;
+    border-radius: 20px;
+    background: #161f27;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    text-align: center;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+#notFound a {
+    color: var(--text-primary);
+}
+
+#header {
+    font-size: 2.5em;
+}
+
+#description {
+    font-size: 1.2em;
+    width: 50%;
+}
+
+@media (min-width: 800px) {
+    .notFound {
+        width: 60vw;
+        border-radius: 20px;
+        height: 65vh;
+    }
+}

src/styles/Portfolio.module.css

@@ -0,0 +1,45 @@
+.portfolioItems {
+    display: flex;
+    gap: 30px;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 30px;
+}
+
+.portfolioItems a {
+    color: var(--text-primary);
+}
+
+.portfolioItems a:not(:hover) {
+    text-decoration: none;
+}
+
+.portfolioItems img {
+    border-radius: 1rem;
+    background: #f5f5f5;
+    box-shadow: 0.5em 0.5em 3em 0.7em rgba(0, 0, 0, 0.25),
+        -0.5em -0.5em 3em 0.7em rgba(0, 0, 0, 0.22);
+    height: 13em;
+    width: 13em;
+}
+
+.portfolioItems div {
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    bottom: 0;
+    color: #f5f5f5;
+    font-size: 1em;
+    left: 0%;
+    padding: 0.1em;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+
+.projectName {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 5px;
+}

src/styles/Project.module.css

@@ -0,0 +1,76 @@
+#container {
+	width: 100%;
+}
+
+.overview {
+	width: 100%;
+	padding: 20px;
+	font-size: x-large;
+	text-align: center;
+}
+
+.screenshot {
+	width: 40%;
+	padding: 20px;
+}
+
+#jumbo {
+	padding: 3em 0 0;
+}
+
+.longDescription {
+	font-size: 1.5rem;
+	padding: 20px;
+	text-align: justify;
+	max-width: 700px;
+}
+
+.image {
+	max-width: 900px;
+}
+
+.image img {
+	width: 100%;
+}
+
+.longDescription h2 {
+	display: flex;
+	justify-content: center;
+}
+
+.title {
+	text-align: center;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+	gap: 4rem;
+}
+
+.row > * {
+	flex: 1;
+}
+
+#details {
+	padding: 2rem;
+}
+
+@media (max-width: 1300px) {
+	.row {
+		flex-direction: column;
+	}
+}
+
+.buttonRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+	gap: 1rem;
+	flex-wrap: wrap;
+}
+
+.buttonRow > * {
+	flex: 1;
+}

src/styles/RoundDivider.module.css

@@ -0,0 +1,5 @@
+.roundDivider {
+    left: 0;
+    width: 100%;
+    height: 3rem;
+}

src/styles/index.css

@@ -0,0 +1,73 @@
+:root {
+	color-scheme: dark light;
+	scroll-behavior: smooth;
+
+	--primary: hsl(211, 26%, 39%);
+	--secondary: hsl(209, 28%, 29%);
+	--secondary-hover: hsl(209, 28%, 19%);
+	--text-primary: hsl(0, 0%, 100%);
+	--secondary-text: hsl(211, 26%, 39%);
+}
+
+body {
+	font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
+		"Noto Sans", sans-serif;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	min-height: 100vh;
+	background: var(--secondary);
+	color: var(--text-primary);
+}
+
+body.light {
+	--primary: hsl(220, 27%, 98%);
+	--secondary: hsl(0, 0%, 100%);
+	--secondary-hover: hsl(0, 0%, 80%);
+	--text-primary: hsl(220, 17%, 32%);
+	--secondary-text: hsl(211, 26%, 39%);
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+svg {
+	vertical-align: middle;
+	font-size: 0.75em;
+}
+
+section:not(section section) {
+	background: var(--secondary);
+	padding: 10rem 0;
+}
+
+section:nth-child(2n):not(section section) {
+	background: var(--primary);
+}
+
+section > svg {
+	color: var(--primary);
+}
+
+section:nth-child(2n) > svg {
+	color: var(--secondary);
+}
+
+section > :is(h1, h2) {
+	font-size: 2.5em;
+	margin: 0;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+h1 {
+	margin: 0;
+}
+
+img {
+	max-width: 100%;
+}