more styling improvements and gamecards added

1 files changed, 22 insertions, 57 deletions

diff --git a/app/javascript/components/Layout.jsx b/app/javascript/components/Layout.jsx
index 0c5d5b6..01ec055 100644
--- a/app/javascript/components/Layout.jsx
+++ b/app/javascript/components/Layout.jsx
@@ -7,76 +7,41 @@ export default function Layout ({userData})
 	//const [userData, setUserData] = useState({ name: "" });
 	return (
 	<>
-		<div id="page" className="star flex flex-row min-h-screen bg-amber-400 text-stone-950 bg-star bg-repeat bg-[length:170px_170px]">
-			<div id="sidebar" className="flex flex-row h-screen fixed w-64 items-center bg-stone-800">
-				<nav id="sidebar-content" className=" text-stone-50 p-6 w-full h-screen">
-					{ userData.name ? <div> Logged in as: {userData.name} </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9"> Login with Github </a> }
-					<div className="text-4xl py-12">Adam Malczewski</div>
+		<div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]">
+			<div id="sidebar" className="flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800">
+				<nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden">
+		<div dir='ltr'>
+					{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9" className="pb-2"> Login with Github </a> }
+					<div className="text-3xl py-10 text-center font-title">Adam Malczewski</div>
 					<div className="flex flex-col items-center gap-1 w-full">
-							<Button link={ <Link to="/" className="text-stone-50 bg-transparent" role="button">Home</Link> }/>
+							<Button link={ <Link to="/" className="text-stone-50 bg-transparent" role="button">About Me</Link> }/>
 							<Button link={ <Link to="/blogs" className="text-stone-50 bg-transparent" role="button">Blog</Link> }/>
 							<Button link={ <Link to="/games" className="text-stone-50 bg-transparent" role="button">Games</Link> }/>
 							<Button link={ <div className="text-stone-50 bg-transparent w-36 h-16 flex justify-center items-center">
-								<a id="contact" href="mailto:[email protected]" className="w-36 h-16 relative text-center whitespace-nowrap flex p-4">
-								<span className="contact pt-1 pl-[27px]">Contact</span>
-								<span className="contact pt-[7px] left-0 pl-3 text-sm">[email protected]</span>
+								<a id="contact" href="mailto:[email protected]" className="w-36 h-16 relative text-center whitespace-nowrap flex justify-center items-center">
+								<div className="contact w-36 h-16 flex items-center justify-center">
+								<span className="h-min">Contact</span>
+								</div>
+								<div className="contact w-36 h-16 flex items-center justify-center">
+								<span className="text-sm h-min">[email protected]</span>
+								</div>
 								</a>	
 								</div> }/>
+							<div className="socials flex flex-row place-content-center gap-1">
+								<Button link={<a id="contact" href="https://github.com/realtradam" className=" w-10 h-10 text-center whitespace-nowrap flex 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=" w-10 h-10 text-center whitespace-nowrap flex 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=" w-10 h-10 text-center whitespace-nowrap flex justify-center items-center"><i className="fa-brands fa-itch-io"></i></a>} width={10} height={16} spinner={3}/>
+							</div>
 					</div>
+		</div>
 				</nav>
 				<div id="sawtooth-wrap" className="sawtooth-left-wrap h-full">
 					<div id="sawtooth" className="sawtooth-left w-4 h-full bg-amber-400"></div>
 				</div>
 			</div>
-			<div id="fake-sidebar" className="w-64 invisible"></div>
-			<div id="radial-wrap" className="flex-grow">
-				<div id="content" className=""></div>
-			</div>
-		</div>
-
-		<div style={{display: 'none'}} className="">
-		<nav className="">
-			<div className="h-full flex flex-col bg-stone-900 text-stone-50">
-		{ userData.name ? <div> Logged in as: {userData.name} </div> : <a href="https://github.com/login/oauth/authorize?client_id=74468ad0847e527262d9"> Login with Github </a> } 
-				<div className="text-4xl py-12">Adam Malczewski</div>
-				<div className="flex flex-row justify-center w-full block grow">
-				<div className="block grow">	
-               	 <ul className="navbar-nav">
-						<li className="text-center">
-							<Link
-							to="/"
-							className="hover:text-slate-100/50 underline"
-							role="button"
-							>
-								Home
-							</Link>
-						</li>
-						<li className="text-center">
-							<Link
-							to="/blogs"
-							className="hover:text-slate-100/50 underline"
-							role="button"
-							>
-								Blog
-							</Link>
-						</li>
-						<li className="text-center">
-							<Link
-							to="/games"
-							className="hover:text-slate-100/50 underline"
-							role="button"
-							>
-								Games
-							</Link>
-						</li>
-					</ul>
-				</div>
-			</div>
-			</div>
-			<div className="sawtooth-right w-6 h-full block bg-zinc-800">
+			<div id="radial-wrap" className="shrink w-full max-h-vh h-vh overflow-auto overflow-x-hidden">
+				<div id="content" className="flex justify-center items-center w-full p-20">	<Outlet /> </div>
 			</div>
-		</nav>
-	<Outlet />
 		</div>
 		</>
 	)