From 15bf3d5848aa1b7aeb5177f8b9ca84eb9ff5799f Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Wed, 15 May 2024 20:35:42 -0400
Subject: more styling improvements and gamecards added

---
 app/javascript/components/Button.jsx   |  4 +-
 app/javascript/components/GameCard.jsx | 19 +++++++
 app/javascript/components/Home.jsx     | 98 +++++++++++++++++++---------------
 app/javascript/components/Layout.jsx   | 79 ++++++++-------------------
 4 files changed, 97 insertions(+), 103 deletions(-)
 create mode 100644 app/javascript/components/GameCard.jsx

(limited to 'app/javascript')

diff --git a/app/javascript/components/Button.jsx b/app/javascript/components/Button.jsx
index f9505f8..de199d0 100644
--- a/app/javascript/components/Button.jsx
+++ b/app/javascript/components/Button.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export default function Button ({ link }) 
+export default function Button ({ link, width = 36, height = 16, spinner = 4 }) 
 {
 	return (
 		<>
-		<div className="animated_card w-36 h-16 relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-[15%] before:bg-amber-400 before:rotate-[32deg] before:h-[1%] before:transition-all before:duration-500 before:ease-linear before:animate-[buttonSpin_1.5s_linear_infinite] hover:before:h-[2800%] hover:before:transition-all hover:before:duration-0 hover:before:ease-linear after:absolute after:content-[''] after:bg-stone-800 after:rounded-[5px] after:inset-0 after:transition-all after:duration-200 after:ease-in-out hover:after:inset-[5px] hover:after:transition-all hover:after:duration-200 hover:after:ease-in-out">
+		<div className={`w-${ width } h-${ height } relative grid rounded-[5px] cursor-pointer overflow-hidden place-items-center before:content-[''] before:absolute before:w-${ spinner } before:bg-amber-400 before:rotate-[32deg] before:h-[1%] before:transition-all before:duration-500 before:ease-linear before:animate-[buttonSpin_1.5s_linear_infinite] hover:before:h-[2800%] hover:before:transition-all hover:before:duration-0 hover:before:ease-linear after:absolute after:content-[''] after:bg-stone-800 after:rounded-[5px] after:inset-0 after:transition-all after:duration-200 after:ease-in-out hover:after:inset-[5px] hover:after:transition-all hover:after:duration-200 hover:after:ease-in-out`}>
 			<div className="z-[3]">
 				{ link }
 			</div>
diff --git a/app/javascript/components/GameCard.jsx b/app/javascript/components/GameCard.jsx
new file mode 100644
index 0000000..6b79630
--- /dev/null
+++ b/app/javascript/components/GameCard.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+//import { Link } from "react-router-dom";
+
+export default function GameCard ({ link = "./", width = "72" }) 
+{
+	return (
+		<>
+		<a href={ link } className="block w-min pt-10 px-1" target="_blank">
+			<div className="gameCard">
+				<div className="gameCardWrapper">
+					<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" className="gameCardCoverImg" />
+				</div>
+					<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" className="gameTitleImg p-5%" />
+					<img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" className="gameCharacterImg" />
+			</div>
+		</a>
+		</>
+	)
+};
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
index 6ead779..b67571c 100644
--- a/app/javascript/components/Home.jsx
+++ b/app/javascript/components/Home.jsx
@@ -1,52 +1,62 @@
 import React, { } from "react";
-import { Link } from "react-router-dom";
+//import { Link } from "react-router-dom";
+import GameCard from "./GameCard";
 
 //export default () => (
 export default function Home () {
-  var handleSubmit = (e) => {
-    e.preventDefault() //stops submit from happening
+	var handleSubmit = (e) => {
+		e.preventDefault() //stops submit from happening
 
-      const formData = new FormData()
-      formData.append('game[title]', e.target.title.value)
-      formData.append('game[game_file]', e.target.game_file.files[0], e.target.game_file.value)
+		const formData = new FormData()
+		formData.append('game[title]', e.target.title.value)
+		formData.append('game[game_file]', e.target.game_file.files[0], e.target.game_file.value)
 
-for (var pair of formData.entries()) {
-  console.log(pair[0] + ', ' + pair[1])
-};
-
-	fetch('http://127.0.0.1:3000/api/v1/games', {
-		method: 'post',
-		body: formData,
-	});
-  }
-  return(
-	  <>
-	  <div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
-    <div className="jumbotron jumbotron-fluid bg-transparent">
-      <div className="container secondary-color">
-        <h1 className="display-4">Games!</h1>
-        <p className="lead">
-			All the games I have worked on that run on the web!
-        </p>
-        <hr className="my-4" />
-        <Link
-          to="/games"
-          className="btn btn-lg custom-button"
-          role="button"
-        >
-          View Games
-        </Link>
-      </div>
-	<form onSubmit={handleSubmit} action="/upload" method="post">
-		<label>Title</label>
-		<input type="text" name="title" />
-		<label>File</label>
-		<input type="file" name="game_file" />
+		for (var pair of formData.entries()) {
+			console.log(pair[0] + ', ' + pair[1])
+		};
 
-		<button type="submit">submit</button>
-	</form>
-    </div>
-  </div>
-	  </>
-);
+		fetch('http://127.0.0.1:3000/api/v1/games', {
+			method: 'post',
+			body: formData,
+		});
+	}
+	return(
+		<>
+		<div>
+		<div className="flex flex-col gap-16 max-w-6xl shrink">
+			<div className="title font-bold text-6xl font-title">Get To Know Me a Little</div>
+			<div className="">
+				<div className="jumbotron jumbotron-fluid bg-transparent">
+					<div className="container secondary-color">
+						<h1 className="text-2xl">Debug!</h1>
+						<p className="">
+Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis minus odit quas qui consequuntur dicta reiciendis a. Nihil minima sed aliquam.
+		</p>
+						<hr className="my-4" />
+				<form onSubmit={handleSubmit} action="/upload" method="post" className="flex flex-col gap-4">
+				<div>
+				<label>Title</label>
+				<input type="text" name="title" />
+				</div>
+				<div>
+				<label>File</label>
+				<input type="file" name="game_file" />
+				</div>
+				<button type="submit" className="w-32 bg-stone-900 text-stone-50 rounded">submit</button>
+				</form>
+				</div>
+		</div>
+			</div>
+			<div className="flex flex-row flex-wrap gap-20 justify-around">
+				<GameCard />
+				<GameCard />
+				<GameCard />
+				<GameCard />
+				<GameCard />
+				<GameCard />
+			</div>
+		</div>
+		</div>
+		</>
+	);
 };
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:adam@malcz.com" 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">Adam@Malcz.com</span>
+								<a id="contact" href="mailto:adam@malcz.com" 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">Adam@Malcz.com</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>
 		</>
 	)
-- 
cgit v1.2.3