From 41022fd07807d68974097191dc70f9025d7b76e8 Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Sat, 22 Jun 2024 19:39:23 -0400
Subject: make styling consistant across site

---
 src/components/Apps.tsx     | 33 +++++++++++++++------------------
 src/components/Game.tsx     |  4 ++--
 src/components/GameCard.tsx |  6 +++---
 src/components/Games.tsx    |  8 +-------
 src/components/Home.tsx     | 27 ++++++++++++++++++---------
 src/components/Layout.tsx   |  6 +++---
 6 files changed, 42 insertions(+), 42 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3