Skip to content

Commit

Permalink
Merge pull request #9 from n1ved/main
Browse files Browse the repository at this point in the history 
Redesign About Page
  • Loading branch information
@jzf21
jzf21 authored Oct 30, 2024
2 parents c431138 + 3ba5552 commit d074aa8
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 92 deletions.
Binary file added src/app/assets/backgrounds/about/eclipse.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/backgrounds/about/eclipse_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/backgrounds/about/eclipse_fg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/backgrounds/about/eclipse_fg_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/backgrounds/about/eclipse_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 104 additions & 49 deletions src/app/components/About/About.css
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,81 @@
.about-page {
background: url(../../assets/backgrounds/about-bg-pattern.svg) no-repeat;
.about-page,
.eclipse,
.foreground__container,
.eclipse {
background: url(../../assets/backgrounds/about/eclipse_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
}
.eclipse {
background: url(../../assets/backgrounds/about/eclipse.png) center;
opacity: 0;
z-index: 1;
transform: opacity 0.5s ease-in-out;
}

/* .about-page:hover .eclipse {
opacity: 1;
transition: opacity 0.5s ease-in-out;
} */
.foreground-container {
background: url(../../assets/backgrounds/about/eclipse_fg.png) center
no-repeat;
background-size: cover;
padding-top: 20vh;
height: 100vh;
display: flex;
flex-direction: center;
z-index: 2;
opacity: 0;
animation: borderaroura 2s infinite;
}

.visible {
opacity: 1;
transition: opacity 750ms ease-in;
}

.about-container {
width: 70%;
height: 70%;
width: 80%;
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
background: #1e1e1e36;
backdrop-filter: blur(10px);
color: white;
border-radius: 30px;
z-index: 3;
}
.about-title-container {
width: 20%;
width: 50%;
height: 100%;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-end;
align-items: center;
/* background: conic-gradient(
from 127.56deg at 128.67% 74.06%,
#fd95ff -76.17deg,
#2c1b77 103.3deg,
#fd95ff 283.83deg,
#2c1b77 463.3deg
); */
background-color: transparent;

text-align: center;
border-radius: 30px;
opacity: 0;
}

.about-title-container h1 {
font-size: 5rem;
line-height: 90%;
font-size: 3rem;
letter-spacing: 0.5rem;
font-weight: 700;
}

.about-title-container h2 {
font-size: 2.8rem;
line-height: 90%;
font-size: 2rem;
letter-spacing: 2rem;
font-weight: 700;
text-align: center;
}

.about-content-container {
Expand All @@ -53,19 +85,30 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
align-items: center;
overflow: hidden;
background: conic-gradient(
from 127.56deg at 128.67% 74.06%,
#fd95ffd3 -76.17deg,
#3821a2c8 103.3deg,
#f798f9d7 283.83deg,
#2c1b77b7 463.3deg
);
backdrop-filter: blur(10px);
border-radius: 30px;
font-size: 1.3rem;
transition: background 0.5s ease-in-out;
text-align: center;
animation-delay: 0.2s;
opacity: 0;
}

.textSlideIn {
opacity: 1;
//animation: textSlideIn 500ms ease-in;
transition: opacity 750ms ease-in;
}

@keyframes textSlideIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}

.title {
Expand All @@ -75,20 +118,38 @@
}

@media screen and (max-width: 1024px) {
.foreground-.eclipse {
background-position: right;
}
.about-container {
width: 90%;
height: 70%;
font-size: 1.1rem;
}
.about-title-container {
width: 30%;
width: 100%;
height: 20%;
padding: 10px;
}
.about-content-container {
width: 70%;
width: 100%;
height: 80%;
padding: 10px 20px;
font-size: 1.1rem;
}
}

@media screen and (max-width: 768px) {
@media screen and (max-width: 480px) {
.eclipse {
background: url(../../assets/backgrounds/about/eclipse_mobile.png) center;
}
.foreground-container {
background: url(../../assets/backgrounds/about/eclipse_fg_mobile.png) center
no-repeat;
background-size: cover;
padding-top: 20vh;
height: 100vh;
}
.about-container {
width: 100%;
height: 100%;
Expand All @@ -98,28 +159,22 @@
.about-title-container {
width: 100%;
height: 20%;

justify-content: start;
align-items: start;
padding: 10px;
align-items: center;
}
.about-title-container h1 {
font-size: 4rem;
}
.about-title-container h2 {
font-size: 2.5rem;
letter-spacing: 1rem;
margin-left: 1rem;
box-sizing: border-box;
}
.about-content-container {
width: 100%;
height: 100%;
height: 80%;
padding: 10px 20px;
font-size: 1.1rem;
background: conic-gradient(
from 127.56deg at 128.67% 74.06%,
#fd95ffec -76.17deg,
#3921a2f3 103.3deg,
#f798f9f5 283.83deg,
#2c1b77f7 463.3deg
);
color: white;
}
}
100 changes: 57 additions & 43 deletions src/app/components/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,64 @@
import React from "react";
"use client";
import "./About.css";
import { useState } from "react";

const About = () => {
// return (
// <div
// className="container relative m-auto flex flex-col max-h-screen text-our_white pt-10 pb-14 gap-[20px] max-sm:scale-90 z-10"
// data-aos="fade-up"
// data-aos-duration="1100"
// >
// <div className="flex flex-col gap-[42px]">
// <div className="w-[100px] h-[5px] bg-gradient-to-r from-blue-500 to-purple-500"></div>
// <p
// data-aos="fade-up"
// data-aos-duration="1100"
// className="tracking-wide text-[28px] font-[500] max-lg:text-[28px] max-md:text-[28px] w-full text-left max-w-[90w] lg:max-w-[60vw] text"
// >
// Hack for Tomorrow is a vibrant hackathon that empowers young
// innovators to create impactful solutions. Join us to collaborate,
// learn, and showcase your skills in a dynamic, tech-driven environment.
// </p>
// </div>
// </div>
// );
const [visible, setVisible] = useState(false);
const [eclipse, setEclipse] = useState(false);
function animation() {
if (!eclipse) {
setInterval(() => {
setEclipse(true);
}, 100);
setInterval(() => {
setVisible(true);
}, 150);
}
}

return (
<div className="about-page container relative flex flex-col min-h-screen h-[100vh] text-our_white pt-10 pb-14 gap-[20px] max-sm:scale-90 z-10">
<div className="flex flex-col w-[100vw] h-full justify-center items-center gap-[42px]">
<div className="about-container gap-5">
<div className="about-title-container">
<h2>ABOUT</h2>
<h1>HFT</h1>
</div>
<div className="about-content-container">
<p>
Welcome to Hack for Tomorrow, the hackathon where young innovators
come together to create cool, impactful solutions. Whether you’re
a coding whiz, a design genius, or just someone with a big idea,
this is the place to bring your skills to the table and make
something amazing happen.
<br />
<br />
At Hack for Tomorrow, it’s all about collaborating, learning, and
showing off what you can do. You’ll meet awesome people, work on
exciting projects, and maybe even change the world—no big deal,
right? Plus, it’s a great way to dive into the latest tech,
sharpen your skills, and have a ton of fun while you’re at it.
</p>
<div className="about-page">
<div
className={"eclipse " + (eclipse ? "visible" : " ")}
id="eclipse"
onMouseOver={animation}
>
<div
className={"foreground-container " + (visible ? "visible" : " ")}
id="foreground-container"
>
<div className="flex flex-col w-[100vw] h-full justify-center items-center gap-[42px]">
<div className="about-container gap-5">
<div
className={
"about-title-container " + (visible ? "textSlideIn" : "")
}
>
<h2>ABOUT</h2>
{/* <h1>Hack For Tomorrow</h1> */}
</div>
<div
className={
"about-content-container " + (visible ? "textSlideIn" : "")
}
>
<p>
Welcome to Hack for Tomorrow, the hackathon where young
innovators come together to create cool, impactful solutions.
Whether you’re a coding whiz, a design genius, or just someone
with a big idea, this is the place to bring your skills to the
table and make something amazing happen.
<br />
<br />
At Hack for Tomorrow, it’s all about collaborating, learning,
and showing off what you can do. You’ll meet awesome people,
work on exciting projects, and maybe even change the world—no
big deal, right? Plus, it’s a great way to dive into the
latest tech, sharpen your skills, and have a ton of fun while
you’re at it.
</p>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit d074aa8

Please sign in to comment.