make styling consistant across site

13 files changed, 99 insertions, 95 deletions

diff --git a/src/components/Apps.tsx b/src/components/Apps.tsx
index 7ecb58a..0035c6b 100644
--- a/src/components/Apps.tsx
+++ b/src/components/Apps.tsx
@@ -1,8 +1,6 @@
-//import { useState, useEffect } from "react";
-//import { Link } from "react-router-dom";
-//import GameCard from "./GameCard";
-//import Button from "./Button";
-//import { GameType } from "../types";
+import { ReactComponent as GameHolsterMD } from '../md/apps_gameholster.md';
+import { ReactComponent as MoreSoonMD } from '../md/apps_moresoon.md';
+
 
 
 export default function Apps () {
@@ -11,20 +9,19 @@ export default function Apps () {
 
 	return(
 		<>
-		<div>
-		<div className="flex flex-col gap-16 max-w-6xl shrink">
-			<div className="title font-bold text-6xl font-title">Apps</div>
-				<div className="jumbotron jumbotron-fluid bg-transparent">
-					<div className="container secondary-color">
-				</div>
-			</div>
-			<div className="prose prose-invert-off">
-			<h1>Game Holster</h1>
-			<p>This is a work in progress thingie</p>
-			<p>talk about your app here</p>
+		<div className="flex flex-col gap-16 w-full items-center max-w-6xl shrink">
+			<div className="title font-bold text-6xl font-title mb-16 dsm:mb-10">Apps</div>
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+						<div className="w-full-after prose prose-invert flex justify-center w-full w-full-after">
+							<GameHolsterMD />
+						</div>
+					</div>
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+						<div className="prose prose-invert flex justify-center w-full w-full-after">
+							<MoreSoonMD />
+						</div>
+					</div>
 			</div>
-		</div>
-		</div>
 		</>
 	);
 }
diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index 7ab05f6..f8d6e9f 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -28,9 +28,9 @@ export default function Games () {
 							<img style={{imageRendering: gameData?.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${gameData?.titleSlug}.png?type=title`} className="gameTitleImg max-w-lg" />
 						</div>
 						<iframe style={{ aspectRatio: 1 }} className="bg-black aspect-square max-h-[90vh] rounded" src={`${import.meta.env.VITE_API_TITLE}/game/realtradam/${game}/index.html`} title={game}></iframe>
-						<div className="flex justify-center mt-4 p-8 overflow-y-auto rounded bg-stone-900 ">
+						<div className="flex justify-center mt-4 px-12 py-16 overflow-y-auto rounded-xl bg-stone-950 ">
 						<ReactMarkdown
-							className="prose prose-invert"
+							className="bg-stone-950 prose prose-invert marker:text-stone-50 dsm:py-10 dsm:px-4 rounded-xl"
 							children={gameData?.description}
 						/>
 						</div>
diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index 1f5e766..49f2cf7 100644
--- a/src/components/GameCard.tsx
+++ b/src/components/GameCard.tsx
@@ -1,5 +1,5 @@
 //import React from "react";
-//import { Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GameCardProps } from "../types";
 
 //game = {
@@ -13,7 +13,7 @@ export default function GameCard ({ link, game }: GameCardProps)
 	
 	return (
 		<>
-		<a href={ link } className="block w-min pt-10 px-1" target="_blank">
+		<Link to={ link } role="button" className="block w-min pt-10 px-1">
 			<div className="gameCard">
 				<div className="gameCardWrapper">
 					<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" />
@@ -21,7 +21,7 @@ export default function GameCard ({ link, game }: GameCardProps)
 					<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" />
 					<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" />
 			</div>
-		</a>
+		</Link>
 		</>
 	);
 }
diff --git a/src/components/Games.tsx b/src/components/Games.tsx
index fd7692e..fb9f88c 100644
--- a/src/components/Games.tsx
+++ b/src/components/Games.tsx
@@ -24,18 +24,12 @@ export default function Games () {
 
 	return(
 		<>
-		<div>
 		<div className="flex flex-col gap-16 max-w-6xl shrink">
-			<div className="title font-bold text-6xl font-title">Games</div>
-				<div className="jumbotron jumbotron-fluid bg-transparent">
-					<div className="container secondary-color">
-				</div>
-			</div>
+			<div className="title text-center font-bold text-6xl font-title">Games</div>
 			<div className="flex flex-row flex-wrap gap-20 justify-around">
 			{ allGames }
 			</div>
 		</div>
-		</div>
 		</>
 	);
 }
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 1dbc574..be778ae 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,20 +1,29 @@
 import { ReactComponent as HomeMD } from '../md/main.md';
+import { ReactComponent as WorkExperienceMD } from '../md/home_workexperience.md';
+import { ReactComponent as ProjectsMD } from '../md/home_projects.md';
+import { ReactComponent as EducationMD } from '../md/home_education.md';
 
 export default function Home () {
 	return(
 		<>
-		<div>
-		<div className="flex flex-col gap-16 max-w-16xl shrink">
+		<div className="flex flex-col gap-16 w-full items-center max-w-6xl shrink">
 			<div className="title font-bold text-6xl font-title mb-16 dsm:mb-10">Welcome</div>
-			<div className="">
-				<div className="jumbotron jumbotron-fluid bg-transparent">
-					<div className="container secondary-color bg-stone-950 prose prose-invert marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl">
-					<HomeMD />
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+						<div className="prose prose-invert flex justify-center w-full w-full-after">
+							<WorkExperienceMD />
+						</div>
+					</div>
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+						<div className="prose prose-invert flex justify-center w-full w-full-after">
+							<ProjectsMD />
+						</div>
+					</div>
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+						<div className="prose prose-invert flex justify-center w-full w-full-after">
+							<EducationMD />
+						</div>
 					</div>
-				</div>
 			</div>
-		</div>
-		</div>
 		</>
 	);
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index fd50710..87b7a20 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -63,9 +63,9 @@ export default function Layout ({userData}: userData)
 								</a>	
 								</div> }/>
 							<div className="socials flex flex-row place-content-center gap-1">
-								<Button link={<a id="contact" href="https://github.com/realtradam" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-github"></i></a>} width={10} height={16} spinner={3}/>
-								<Button link={<a id="contact" href="https://www.linkedin.com/in/adammalczewski/" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-linkedin"></i></a>} width={10} height={16} spinner={3}/>
-								<Button link={<a id="contact" href="https://tradam.itch.io" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-itch-io"></i></a>} width={10} height={16} spinner={3}/>
+								<Button link={<a target="_blank" id="contact" href="https://github.com/realtradam" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-github"></i></a>} width={10} height={16} spinner={3}/>
+								<Button link={<a target="_blank" id="contact" href="https://www.linkedin.com/in/adammalczewski/" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-linkedin"></i></a>} width={10} height={16} spinner={3}/>
+								<Button link={<a target="_blank" id="contact" href="https://tradam.itch.io" className="absolute flex top-0 left-0 w-10 h-16 text-stone-50 bg-transparent justify-center items-center"><i className="fa-brands fa-itch-io"></i></a>} width={10} height={16} spinner={3}/>
 							</div>
 					</div>
 		</div>
diff --git a/src/index.css b/src/index.css
index ff3ab22..6396fdb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,10 @@
 }
  */
 
+.w-full-after div {
+	width: 100%;
+}
+
 @keyframes sidebar-enter {
 	from {
 		left: -16rem;
diff --git a/src/md/apps_gameholster.md b/src/md/apps_gameholster.md
new file mode 100644
index 0000000..bc11f88
--- /dev/null
+++ b/src/md/apps_gameholster.md
@@ -0,0 +1,5 @@
+# Game Holster
+
+this is a work in progress thingie
+
+put more yap here
diff --git a/src/md/apps_moresoon.md b/src/md/apps_moresoon.md
new file mode 100644
index 0000000..f55cf94
--- /dev/null
+++ b/src/md/apps_moresoon.md
@@ -0,0 +1,3 @@
+# More Coming Soon...
+
+### I have many more apps planned and will update this as they are completed. Check back soon!
diff --git a/src/md/home_education.md b/src/md/home_education.md
new file mode 100644
index 0000000..ac76b19
--- /dev/null
+++ b/src/md/home_education.md
@@ -0,0 +1,13 @@
+# Education
+
+## Toronto Metropolitan University
+**Bachelor of Computer Science - 2015**-**2021**
+
+- blah blah add some stuff here
+- yadda yadda
+
+## Programming Courses
+**2013-2015**
+
+- Took some programming courses in High School with a passionate and amazing teacher
+- Learned fundamental and foundational skills which led to my success with learning problem solving in programming.
diff --git a/src/md/home_projects.md b/src/md/home_projects.md
new file mode 100644
index 0000000..5bae8be
--- /dev/null
+++ b/src/md/home_projects.md
@@ -0,0 +1,22 @@
+# Projects
+
+## Game Holster - Ruby on Rails + React
+**Web App for Uploading and Hosting Web Games - 2024**-**Present**
+
+- Still a WIP
+- Frontend is temporarily this page for now
+- its gonna have its own thing eventually
+
+## Some other project
+**its a thing**
+
+- yap
+- yap
+- yap
+
+## Some third project
+**its a thing**
+
+- yap
+- yap
+- yap
diff --git a/src/md/home_workexperience.md b/src/md/home_workexperience.md
new file mode 100644
index 0000000..d8b5508
--- /dev/null
+++ b/src/md/home_workexperience.md
@@ -0,0 +1,10 @@
+# Work Experience
+
+## IFSE - Developer/IT
+
+**June 12, 2023 - Present**
+- Validated website migration project
+- Assisted with meeting compliance for Cyber Security Canada Certification
+    - Patched and modified main WordPress website in order to reach security compliance(according to ZAP scanner)
+    - Administrated computers and servers company wide to ensure compliance
+- add waaaaaay more yap
diff --git a/src/md/main.md b/src/md/main.md
index 7c1712b..e69de29 100644
--- a/src/md/main.md
+++ b/src/md/main.md
@@ -1,53 +0,0 @@
-# Work Experience
-
-## IFSE - Developer/IT
-
-**June 12, 2023 - Present**
-- Validated website migration project
-- Assisted with meeting compliance for Cyber Security Canada Certification
-    - Patched and modified main WordPress website in order to reach security compliance(according to ZAP scanner)
-    - Administrated computers and servers company wide to ensure compliance
-- add waaaaaay more yap
-
----
-
-# Projects
-
-## Game Holster - Ruby on Rails + React
-**Web App for Uploading and Hosting Web Games - 2024**-**Present**
-
-- Still a WIP
-- Frontend is temporarily this page for now
-- its gonna have its own thing eventually
-
-## Some other project
-**its a thing**
-
-- yap
-- yap
-- yap
-
-## Some third project
-**its a thing**
-
-- yap
-- yap
-- yap
-
----
-
-# Education
-
-## Toronto Metropolitan University
-**Bachelor of Computer Science - 2015**-**2021**
-
-- blah blah add some stuff here
-- yadda yadda
-
-## Programming Courses
-**2013-2015**
-
-- Took some programming courses in High School with a passionate and amazing teacher
-- Learned fundamental and foundational skills which led to my success with learning problem solving in programming.
-
----