Skip to content

Commit

Permalink
style and feat: fix responsive, ghost animation and implementing erro…
Browse files Browse the repository at this point in the history 
…r pages
  • Loading branch information
@12Gustavo21
12Gustavo21 committed Jan 13, 2024
1 parent ac37149 commit e972da7
Show file tree
Hide file tree
Showing 11 changed files with 647 additions and 154 deletions.
2 changes: 1 addition & 1 deletion src/assets/pages/about/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import AOS from "aos";
import "aos/dist/aos.css";

//Pages
import Error from "../error"
import Error from "../error500";

//Components
import Layout from "../../components/layout";
Expand Down
78 changes: 56 additions & 22 deletions src/assets/pages/contact/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Loading from "../../components/loading";
import Ghost from "../../components/ghost";

//Pages
import Error from "../error";
import Error from "../error500";

//EmailJs
import emailjs from "@emailjs/browser";
Expand All @@ -24,6 +24,7 @@ export default function Index() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [focus, setFocus] = useState(false);

const send = document.querySelector(".button");

Expand Down Expand Up @@ -52,6 +53,7 @@ export default function Index() {
(response) => {
send.classList.add("success");
console.log("SUCCESS!", response.status, response.text);
alert("Email enviado com sucesso!");
setName("");
setEmail("");
setMessage("");
Expand All @@ -70,6 +72,20 @@ export default function Index() {

const { contact } = data;

const handleFocus = () => {
if (!focus) {
setFocus(true);
}
};

document.addEventListener("click", (e) => {
if (e.target.classList.contains("row")) return;
else {
setFocus(false);
}
}
);

return (
<Layout positionFooter="absolute">
<S.CanvasWrapper>
Expand All @@ -89,55 +105,73 @@ export default function Index() {
></p>
</S.DescriptionWrapper>
</S.ContactWrapper>
<S.Conatiner>
<S.Container>
<S.GhostContainer>
<S.Ghost>
<S.GhostFace class="ghost-face">
<div class="ghost-eyes">
<div class="ghost-eyes-l"></div>
<div class="ghost-eyes-r"></div>
<S.Ghost onFocus={handleFocus} className={focus ? "focus" : ""}>
<S.GhostFace className="ghost-face">
<div
onFocus={handleFocus}
className={`ghost-eyes ${focus ? "focus" : ""}`}
>
<div className="ghost-eyes-l"></div>
<div className="ghost-eyes-r"></div>
</div>
<div class="ghost-mouth"></div>
<div className="ghost-mouth"></div>
</S.GhostFace>
<S.GhostTorso class="ghost-torso"></S.GhostTorso>
<S.GhostTorso
onFocus={handleFocus}
className={`ghost-torso ${focus ? "focus" : ""}`}
></S.GhostTorso>
<S.GhostHands
onFocus={handleFocus}
className={`ghost-hands ${focus ? "focus" : ""}`}
>
<div
onFocus={handleFocus}
className={`ghost-hands-l ${focus ? "focus" : ""}`}
></div>
<div
onFocus={handleFocus}
className={`ghost-hands-r ${focus ? "focus" : ""}`}
></div>
</S.GhostHands>
</S.Ghost>
<S.GhostHands class="ghost-hands">
<div class="ghost-hands-l"></div>
<div class="ghost-hands-r"></div>
</S.GhostHands>
</S.GhostContainer>
<S.FormContact>
<input
className="input"
className="input row"
type="text"
placeholder="Digite seu nome"
placeholder="Your name"
onChange={(e) => setName(e.target.value)}
value={name}
onFocus={handleFocus}
required
/>
/>

<input
className="input"
className="input row"
type="text"
placeholder="Digite seu email"
placeholder="Your most spooky email"
onChange={(e) => setEmail(e.target.value)}
value={email}
onFocus={handleFocus}
required
/>
/>

<textarea
className="textarea"
placeholder="Digite sua mensagem..."
className="textarea row"
placeholder="Tell me a spooky thing..."
onChange={(e) => setMessage(e.target.value)}
value={message}
onFocus={handleFocus}
required
/>

<button className="button" type="submit" onClick={sendEmail}>
<span>Send</span>
</button>
</S.FormContact>
</S.Conatiner>
</S.Container>
</S.ContentWrapper>
</S.Main>
</Layout>
Expand Down
66 changes: 40 additions & 26 deletions src/assets/pages/contact/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const Main = styled.main`
align-items: center;
background: #0a0b0c;
@media only screen and (width <= 600px) {
@media only screen and (width <= 650px) {
padding: 6rem 0 0 0;
}
`;
Expand Down Expand Up @@ -53,7 +53,7 @@ export const ContactWrapper = styled.div`
z-index: 0;
gap: 1rem;
@media only screen and (width <= 600px) {
@media only screen and (width <= 650px) {
gap: 0.5rem;
}
`;
Expand All @@ -67,7 +67,7 @@ export const TitleWrapper = styled.div`
font: 400 4rem/3rem "Amatic SC", sans-serif;
color: #ff6000;
@media only screen and (width <= 600px) {
@media only screen and (width <= 650px) {
font-size: 3rem;
}
`;
Expand All @@ -79,13 +79,42 @@ export const DescriptionWrapper = styled.div`
color: #ffa559;
`;

export const Conatiner = styled.div`
export const Container = styled.div`
animation: ${float} 3s infinite alternate;
@media only screen and (width <= 600px) {
@media only screen and (width <= 650px) {
position: relative;
top: 1rem;
}
.focus {
background: rgba(255, 255, 255, 0.2);
color: transparent;
.ghost-torso {
transform: translate(-50%, 42px) scaleY(0.9);
}
.ghost-eyes {
.ghost-eyes-l,
.ghost-eyes-r {
background: rgba(255, 255, 255, 0.6);
}
}
.ghost-face {
transform: translate(-50%, 0.4em);
}
.ghost-mouth {
transform: scaleY(0.6);
border-color: rgba(255, 255, 255, 0.6);
}
.ghost-hands {
transform: translate(-50%, 0.2em);
.ghost-hands-l,
.ghost-hands-r {
background: rgba(255, 255, 255, 0.2);
}
}
}
`;

export const FormContact = styled.form`
Expand All @@ -97,15 +126,13 @@ export const FormContact = styled.form`
flex-direction: column;
gap: 1rem;
padding: 1rem;
position: relative;
backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(34, 39, 42, 0.75);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
z-index: 2;
.input {
width: 14.5rem;
width: 95%;
padding: 1em;
border: none;
border-radius: 0.2em;
Expand All @@ -125,7 +152,7 @@ export const FormContact = styled.form`
}
.textarea {
width: 14.5rem;
width: 95%;
height: 5rem;
min-height: 5rem;
max-height: 8rem;
Expand Down Expand Up @@ -175,7 +202,7 @@ export const FormContact = styled.form`
}
}
@media only screen and (width <= 600px) {
@media only screen and (width <= 650px) {
width: 100%;
}
`;
Expand Down Expand Up @@ -234,11 +261,6 @@ export const GhostFace = styled.div`
border-top-right-radius: 0;
position: relative;
top: 0.5rem;
&--open {
border-top: 0.2em solid ${bg};
height: 0.2em;
}
}
`;

Expand All @@ -264,22 +286,14 @@ export const GhostHands = styled.div`
height: 1.5em;
background: white;
box-shadow: 0 4px 4px rgba(51, 51, 51, 0.3);
top: -0.1rem;
top: -0.15rem;
position: absolute;
}
.ghost-hands-r {
transform: translateX(17em) rotate(15deg);
@media only screen and (width <= 600px) {
transform: translateX(10em) rotate(15deg);
}
transform: translateX(2em) rotate(15deg);
}
.ghost-hands-l {
transform: translateX(12em) rotate(-15deg);
@media only screen and (width <= 600px) {
transform: translateX(5.5em) rotate(-15deg);
}
transform: translateX(-3em) rotate(-15deg);
}
`;
58 changes: 58 additions & 0 deletions src/assets/pages/error404/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from "react";

//React router dom
import { Link } from "react-router-dom";

//Style
import * as S from "./style";

//Components
import Forest from "../../components/forest";

export default function index() {
return (
<>
<S.Main>
<S.Box>
<div class="box_ghost">
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>

<div class="box_ghost-container">
<div class="box_ghost-eyes">
<div class="box_eye left"></div>
<div class="box_eye right"></div>
</div>
<div class="box_ghost-mouth"></div>
<div class="box_ghost-bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="box_ghost-shadow"></div>
</div>

<div class="box_description">
<div class="box_description-container">
<div class="box_description-title">Whoops!</div>
<div class="box_description-text">
It seems like we couldn't find the page you were looking for
</div>
</div>
<Link to="/" class="box_button">
Go back
</Link>
</div>
</S.Box>
<Forest />
</S.Main>
</>
);
}
Loading

0 comments on commit e972da7

Please sign in to comment.