Skip to content

Commit

Permalink
several changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@niyashiyas
niyashiyas committed Nov 17, 2024
1 parent 73c8f32 commit c859b75
Show file tree
Hide file tree
Showing 12 changed files with 452 additions and 456 deletions.
4 changes: 2 additions & 2 deletions src/app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import TimelineSection from "../components/Timeline/Timeline";

export default function Home() {
return (
<>
<div className="text-white">
<Navbar />
<BlobAnimation />

Expand All @@ -36,6 +36,6 @@ export default function Home() {
<FAQ />
<Contact />
<Footer />
</>
</div>
);
}
72 changes: 34 additions & 38 deletions src/components/About/About.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,7 @@
}
} */


.about-container{
.about-container {
background-color: #000;
height: 100vh;
width: 100vw;
Expand All @@ -189,27 +188,27 @@
min-height: fit-content;
}

.abouth1{
font-family: 'neue';
.abouth1 {
font-family: "neue";
font-size: 3.5rem;
margin-bottom: -60px;
z-index: 30;
}

.top-left{
.top-left {
position: absolute;
top: 0;
left: 0;
}

.bottom-right{
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
width: 100vw;
}

.circle1{
.circle1 {
position: absolute;
bottom: -500px;
height: 1000px;
Expand All @@ -219,7 +218,7 @@
animation: rotate 15s linear infinite;
}

.circle2{
.circle2 {
position: absolute;
bottom: -400px;
height: 800px;
Expand All @@ -229,7 +228,7 @@
animation: rotate 20s linear infinite;
}

.circle3{
.circle3 {
position: absolute;
bottom: -200px;
height: 400px;
Expand All @@ -239,21 +238,21 @@
animation: rotate 25s linear infinite;
}

svg{
svg {
backdrop-filter: blur(10px);
width: 90%;
height: 90%;
}

.details-container{
.details-container {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}

.abtp{
.abtp {
position: absolute;
width: 60%;
font-size: 1.5rem;
Expand All @@ -271,87 +270,84 @@ svg{
}

@media (max-width: 1390px) {
.abtp{
.abtp {
font-size: 1.2rem;
}
}

@media (max-width: 1300px) {
.details-container {
width: 100%;
height: 85%;
}

.details-container{
width: 100%;
height: 85%;
}

.abtp{
font-size: 1.3rem;
width: 80%;
}

.abtp {
font-size: 1.3rem;
width: 80%;
}
}

@media (max-width: 900px) {
.circle1{
.circle1 {
height: 800px;
width: auto;
bottom: -400px;
left: -400px;
}

.circle2{
.circle2 {
height: 600px;
width: auto;
bottom: -300px;
left: -300px;
}

.abtp{
.abtp {
font-size: 1.1rem;
width: 80%;
}

.abouth1{
.abouth1 {
font-size: 2.5rem;
}
}

@media (max-width: 768px) {
svg{
svg {
display: none;
}

.circle1{
.circle1 {
height: 600px;
width: auto;
bottom: -300px;
left: -300px;
}

.circle2{
.circle2 {
height: 500px;
width: auto;
bottom: -250px;
left: -250px;
}

}

@media (max-width: 530px) {
.circle1{
.circle1 {
height: 450px;
width: auto;
bottom: -225px;
left: -225px;
}

.circle2{
.circle2 {
height: 300px;
width: auto;
bottom: -150px;
left: -150px;
}

.circle3{
.circle3 {
height: 100px;
width: auto;
bottom: -50px;
Expand All @@ -360,18 +356,18 @@ svg{
}

@media (max-width: 420px) {
.circle1{
.circle1 {
display: none;
}

.abtp{
.abtp {
font-size: 0.9rem;
width: 80%;
}
}

@media (max-height: 550px) {
.abtp{
.abtp {
font-size: 1rem;
}
}
}
127 changes: 82 additions & 45 deletions src/components/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,98 @@
"use client";
import "./About.css";
import Image from 'next/image'
import { useState } from "react";
import top_left from '../../assets/backgrounds/about/topleft.png'
import bottom_right from '../../assets/backgrounds/about/bottomright.png'
import circle1 from '../../assets/backgrounds/about/circle1.png'
import circle2 from '../../assets/backgrounds/about/circle2.png'
import circle3 from '../../assets/backgrounds/about/circle3.png'
import Image from "next/image";
import {useState} from "react";
import top_left from "../../assets/backgrounds/about/topleft.png";
import bottom_right from "../../assets/backgrounds/about/bottomright.png";
import circle1 from "../../assets/backgrounds/about/circle1.png";
import circle2 from "../../assets/backgrounds/about/circle2.png";
import circle3 from "../../assets/backgrounds/about/circle3.png";

const About = () => {

return (
<>
<div className="about-container">
<Image
className="top-left"
src={top_left}
/>
<Image
className="bottom-right"
src={bottom_right}
/>
<Image
className="circle1"
src={circle1}
/>
<Image
className="circle2"
src={circle2}
/>
<Image
className="circle3"
src={circle3}
/>
<h1 className="abouth1">ABOUT</h1>
<Image className="top-left" src={top_left} />
<Image className="bottom-right" src={bottom_right} />
<Image className="circle1" src={circle1} />
<Image className="circle2" src={circle2} />
<Image className="circle3" src={circle3} />
<h1 className="abouth1 font-base-neue-bold text-4xl sm:text-6xl">
ABOUT
</h1>
<div className="details-container">

<svg width="1238" height="589" viewBox="0 0 1238 589" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<svg
width="1238"
height="589"
viewBox="0 0 1238 589"
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
>
<g filter="url(#filter0_bd_22_35)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 72C20 43.2812 43.2811 20 71.9999 20H360.56C370.34 20 379.922 22.7582 388.206 27.958L426.573 52.042C434.857 57.2418 444.439 60 454.219 60H789.462C800.009 60 810.307 56.7929 818.989 50.8042L850.314 29.1958C858.996 23.2071 869.294 20 879.841 20H1166C1194.72 20 1218 43.2812 1218 72V477C1218 505.719 1194.72 529 1166 529H838.864C826.677 529 814.876 533.281 805.524 541.095L786.6 556.905C777.248 564.719 765.447 569 753.26 569H487.134C475.766 569 464.711 565.275 455.662 558.394L430.949 539.606C421.9 532.725 410.845 529 399.477 529H72C43.2812 529 20 505.719 20 477V72Z" fill="#4E4848" fill-opacity="0.17" shape-rendering="crispEdges"/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 72C20 43.2812 43.2811 20 71.9999 20H360.56C370.34 20 379.922 22.7582 388.206 27.958L426.573 52.042C434.857 57.2418 444.439 60 454.219 60H789.462C800.009 60 810.307 56.7929 818.989 50.8042L850.314 29.1958C858.996 23.2071 869.294 20 879.841 20H1166C1194.72 20 1218 43.2812 1218 72V477C1218 505.719 1194.72 529 1166 529H838.864C826.677 529 814.876 533.281 805.524 541.095L786.6 556.905C777.248 564.719 765.447 569 753.26 569H487.134C475.766 569 464.711 565.275 455.662 558.394L430.949 539.606C421.9 532.725 410.845 529 399.477 529H72C43.2812 529 20 505.719 20 477V72Z"
fill="#4E4848"
fill-opacity="0.17"
shape-rendering="crispEdges"
/>
</g>
<defs>
<filter id="filter0_bd_22_35" x="0" y="0" width="1238" height="589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="15"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_22_35"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_22_35" result="effect2_dropShadow_22_35"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_22_35" result="shape"/>
</filter>
<filter
id="filter0_bd_22_35"
x="0"
y="0"
width="1238"
height="589"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="15" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_22_35"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="10" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
/>
<feBlend
mode="normal"
in2="effect1_backgroundBlur_22_35"
result="effect2_dropShadow_22_35"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect2_dropShadow_22_35"
result="shape"
/>
</filter>
</defs>
</svg>
<p className="abtp">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><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>
<p className="abtp font-syne-medium">
Level up your coding skills and slay real-world challenges! Whether
you're a seasoned developer or a coding newbie, HFT is the place to
collaborate with like-minded tech enthusiasts to build
groundbreaking solutions.
<br />
Join us for a 24-hour coding marathon filled with caffeine, food,
and endless possibilities. So, gather your squad and let's code a
better tomorrow at Hack for Tomorrow!
</p>
</div>
</div>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/components/BlobAnimation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ const BlobAnimation = () => {
data-aos-duration="1100"
>
<Image
className="hidden sm:block absolute bottom-0 sm:bottom-0 sm:right-[-8rem] z-0"
className="hidden sm:block absolute bottom-0 md:bottom-0 md:right-[-8rem] z-0"
src={astro2}
alt="astro"
/>
Expand Down
Loading

0 comments on commit c859b75

Please sign in to comment.