From 15bf3d5848aa1b7aeb5177f8b9ca84eb9ff5799f Mon Sep 17 00:00:00 2001 From: realtradam Date: Wed, 15 May 2024 20:35:42 -0400 Subject: more styling improvements and gamecards added --- app/assets/stylesheets/application.tailwind.css | 100 +++++++++++++++++++++++- app/javascript/components/Button.jsx | 4 +- app/javascript/components/GameCard.jsx | 19 +++++ app/javascript/components/Home.jsx | 98 ++++++++++++----------- app/javascript/components/Layout.jsx | 79 ++++++------------- app/views/layouts/application.html.erb | 11 ++- config/tailwind.config.js | 10 +++ 7 files changed, 213 insertions(+), 108 deletions(-) create mode 100644 app/javascript/components/GameCard.jsx 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 ( <> -
+
{ link }
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 ( + <> + +
+
+ +
+ + +
+ + + ) +}; 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( - <> -
-
-
-

Games!

-

- All the games I have worked on that run on the web! -

-
- - View Games - -
-
- - - - + 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( + <> +
+
+
Get To Know Me a Little
+
+
+
+

Debug!

+

+Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis minus odit quas qui consequuntur dicta reiciendis a. Nihil minima sed aliquam. +

+
+
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + +
+
+
+ + ); }; 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 ( <> -
- -
-
-
-
-
- -
- -
) 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 @@ + - + +.font-title { + font-family: "Paytone One", sans-serif; + font-weight: 400; + font-style: normal; +} + 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'] + }, ] } -- cgit v1.2.3