more styling improvements and gamecards added

7 files changed, 213 insertions, 108 deletions

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index c6f1a68..58d9164 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -11,18 +11,112 @@
 }
 
  */
+.gameCard {
+	aspect-ratio: 5/7;
+  width: 300px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  perspective: 2500px;
+}
+
+.gameCardCoverImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.gameCardWrapper {
+  transition: all 0.5s;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75)
+}
+
+.gameCard:hover .gameCardWrapper {
+  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
+  box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
+}
+
+.gameCardWrapper::before,
+.gameCardWrapper::after {
+  content: "";
+  opacity: 0;
+  width: 100%;
+  height: 80px;
+  transition: all 0.5s;
+  position: absolute;
+  left: 0;
+}
+.gameCardWrapper::before {
+  top: 0;
+  height: 100%;
+  background-image: linear-gradient(
+    to top,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+.gameCardWrapper::after {
+  bottom: 0;
+  opacity: 1;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 46%,
+    rgba(12, 13, 19, 0.5) 68%,
+    rgba(12, 13, 19) 97%
+  );
+}
+
+.gameCard:hover .gameCardWrapper::before,
+.gameCardWrapper::after {
+  opacity: 1;
+}
+
+.gameCard:hover .gameCardWrapper::after {
+  height: 120px;
+}
+.gameTitleImg {
+  width: 100%;
+  transition: transform 0.5s;
+}
+.gameCard:hover .gameTitleImg {
+  transform: translate3d(0%, -50px, 100px);
+}
+
+.gameCharacterImg {
+  width: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+  position: absolute;
+  z-index: -1;
+}
+
+.gameCard:hover .gameCharacterImg {
+  opacity: 1;
+  transform: translate3d(0%, -30%, 100px);
+}
 
 @keyframes pan {
 	0% {
 		background-position: 0% 0%;
 	}
 	100% {
-		background-position: 200% -100%;
+		background-position: 340px -170px;
 	}
 }
 
 #radial-wrap {
-	background: linear-gradient(90deg, rgba(251,191,36,1) 0%, rgba(251,191,36,0) 20%, rgba(251,191,36,0) 80%, rgba(251,191,36,1) 100%);
+	background: linear-gradient(90deg, rgba(251,191,36,1) 1%, rgba(251,191,36,0) 10%, rgba(251,191,36,0) 90%, rgba(251,191,36,1) 99%);
+}
+
+.button:hover::before {
+	width: 5000px;
 }
 
 @keyframes buttonSpin {
@@ -43,7 +137,7 @@
 
 @layer utilities {
 	.star {
-		animation: pan 360s linear infinite;
+		animation: pan 80s linear infinite;
 	}
 	.sawtooth-right {
 		clip-path: polygon(0% -1%, -1% 100.0%, 101% 98.0%, -1% 96.0%, 101% 94.0%, -1% 92.0%, 101% 90.0%, -1% 88.0%, 101% 86.0%, -1% 84.0%, 101% 82.0%, -1% 80.0%, 101% 78.0%, -1% 76.0%, 101% 74.0%, -1% 72.0%, 101% 70.0%, -1% 68.0%, 101% 66.0%, -1% 64.0%, 101% 62.0%, -1% 60.0%, 101% 58.0%, -1% 56.0%, 101% 54.0%, -1% 52.0%, 101% 50.0%, -1% 48.0%, 101% 46.0%, -1% 44.0%, 101% 42.0%, -1% 40.0%, 101% 38.0%, -1% 36.0%, 101% 34.0%, -1% 32.0%, 101% 30.0%, -1% 28.0%, 101% 26.0%, -1% 24.0%, 101% 22.0%, -1% 20.0%, 101% 18.0%, -1% 16.0%, 101% 14.0%, -1% 12.0%, 101% 10.0%, -1% 8.0%, 101% 6.0%, -1% 4.0%, 101% 2.0%);
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:[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>
 		</>
 	)
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e7e2040..6f922a3 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,19 +13,26 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Quicksand:[email protected]&display=swap" rel="stylesheet">
 
     <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
     <!-- Google fonts-->
     <!--link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" /-->
     <!--link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" /-->
-<style>
+    <style>
 * {
   font-family: "Quicksand", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
 }
-</style>
+
+.font-title {
+  font-family: "Paytone One", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+    </style>
   </head>
 
   <body if="page-top">
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index ddc2e3e..dfc7f38 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = {
 			fontFamily: {
 				sans: ['Inter var', ...defaultTheme.fontFamily.sans],
 			},
+			padding: {
+				'5%': '5%'
+			},
 		},
 	},
 	plugins: [
@@ -23,5 +26,12 @@ module.exports = {
 		require('@tailwindcss/aspect-ratio'),
 		require('@tailwindcss/typography'),
 		require('@tailwindcss/container-queries'),
+	],
+	safelist: [
+
+		{
+			pattern: /(h|w)-.+/,
+			variants: ['before']
+		},
 	]
 }