fix styling issues and add more contentdev

4 files changed, 22 insertions, 6 deletions

diff --git a/src/components/Apps.tsx b/src/components/Apps.tsx
index 0035c6b..beac123 100644
--- a/src/components/Apps.tsx
+++ b/src/components/Apps.tsx
@@ -11,12 +11,12 @@ export default function Apps () {
 		<>
 		<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="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] 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="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] flex justify-center">
 						<div className="prose prose-invert flex justify-center w-full w-full-after">
 							<MoreSoonMD />
 						</div>
diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index f8d6e9f..635c23b 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -28,12 +28,14 @@ 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 px-12 py-16 overflow-y-auto rounded-xl bg-stone-950 ">
+						<div className="flex justify-center w-full">
+						<div className="flex justify-center mt-4 px-12 py-16 overflow-y-auto rounded-xl bg-stone-950 w-full max-w-[65ch]">
 						<ReactMarkdown
 							className="bg-stone-950 prose prose-invert marker:text-stone-50 dsm:py-10 dsm:px-4 rounded-xl"
 							children={gameData?.description}
 						/>
 						</div>
+						</div>
 				</div>
 			</div>
 		</>
diff --git a/src/components/Games.tsx b/src/components/Games.tsx
index fb9f88c..05957c6 100644
--- a/src/components/Games.tsx
+++ b/src/components/Games.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import GameCard from "./GameCard";
 //import Button from "./Button";
 import { GameType } from "../types";
+import { ReactComponent as IntroMD } from '../md/games_intro.md';
 
 
 export default function Games () {
@@ -26,6 +27,13 @@ export default function Games () {
 		<>
 		<div className="flex flex-col gap-16 max-w-6xl shrink">
 			<div className="title text-center font-bold text-6xl font-title">Games</div>
+				<div className="flex justify-center w-full">
+					<div className="marker:text-stone-50 rounded-xl w-full max-w-[65ch] flex justify-center bg-stone-950">
+						<div className="flex justify-center w-full w-full-after w-full max-w-[65ch] text-white p-16">
+							<IntroMD />
+						</div>
+					</div>
+				</div>
 			<div className="flex flex-row flex-wrap gap-20 justify-around">
 			{ allGames }
 			</div>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index a7e81e5..dc544e1 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,3 +1,4 @@
+import { ReactComponent as AboutMeMD } from '../md/home_aboutme.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';
@@ -7,17 +8,22 @@ export default function Home () {
 		<>
 		<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="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full flex justify-center">
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] flex flex-grow justify-center">
+						<div className="prose prose-invert flex justify-center w-full w-full-after">
+							<AboutMeMD />
+						</div>
+					</div>
+					<div className="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] 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="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] 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="bg-stone-950 marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl w-full max-w-[65ch] flex justify-center">
 						<div className="prose prose-invert flex justify-center w-full w-full-after">
 							<EducationMD />
 						</div>