Skip to content

general things #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
polmf merged 4 commits into from
Dec 31, 2025
Merged

general things #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3affdf4
general things
polmf Dec 31, 2025
29ce25e
fix test errors
polmf Dec 31, 2025
4fa0842
fix test error
polmf Dec 31, 2025
a356ad4
fix test error
polmf Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
583 changes: 583 additions & 0 deletions public/maons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
148 changes: 45 additions & 103 deletions src/app/components/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useState, useEffect } from "react";
import styled from "styled-components";
import Image from "next/image";
import {
Expand All @@ -12,26 +11,10 @@ import {
SpacingS,
SpacingXS,
} from "@/app/genericComponents/tokens";
import { Section, SectionBackground } from "@/app/genericComponents/General";
import { silkscreen } from "@/app/genericComponents/fonts";
import { Section } from "@/app/genericComponents/General";
import { lora } from "@/app/genericComponents/fonts";

const StyledImage = styled(Image)`
width: 120px; /* Smaller width for the snake image */
height: auto;

@media (max-width: ${MobileBreakpoint}) {
width: 180px;
}
`;

const AppleImage = styled(Image)`
padding-top: 8px;
display: none;

@media (max-width: ${MobileBreakpoint}) {
display: block;
}
`;

const SectionStyled = styled(Section)`
color: ${"#000000"};
Expand Down Expand Up @@ -66,93 +49,52 @@ const ImgSection = styled.div`
`;

export default function About() {
const [currentImageIndex, setCurrentImageIndex] = useState(0);

const images = [
"/snake_0.svg",
"/snake_1.svg",
"/snake_2.svg",
"/snake_3.svg",
"/snake_4.svg",
"/snake_5.svg",
"/snake_6.svg",
"/snake_7.svg",
"/snake_8.svg",
"/snake_7.svg",
"/snake_8.svg",
"/snake_7.svg",
"/snake_8.svg",
];

useEffect(() => {
const interval = setInterval(() => {
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 500);

return () => clearInterval(interval);
}, [images.length]);

return (
<div id="about">
<SectionBackground specialBackground={"#99C11C"}>
<SectionStyled>
<UnderlineTitle className={silkscreen.className}>
HACKUPC: CODING TO THE NEXT LEVEL
</UnderlineTitle>
<Container>
<Col>
<ImgSection>
<StyledImage
src={images[currentImageIndex]}
width={120}
height={120}
alt="Snake"
/>
</ImgSection>
<BlockTitle color={"#000000"} haveMargin>
What is a hackathon?
</BlockTitle>
<Body>
The word hackathon is a combination of the words <b>"HACK"</b>,
standing for creative problem-solving, and <b>"MARATHON"</b>.
These are awesome events full of creativity, technology, and
passionate tech-related students of different skill ranges
collaborating and creating. During a certain period of time,
attendees work in <b>TEAMS</b> to develop apps, games, robots…
literally anything you want to <b>BUILD & LEARN</b> about!
</Body>
</Col>
<Col>
<ImgSection>
<StyledImage
src="/hackupcLogoBlack.svg"
width={120}
height={120}
alt="HackUPC Logo"
/>
</ImgSection>
<BlockTitle color={"#000000"} haveMargin>
About HackUPC
</BlockTitle>
<Body>
HackUPC is the first student hackathon in Spain and the biggest
one in Europe. Once a year, we aim to provide participants of{" "}
<b>all experience levels</b> from <b>all around the world</b>{" "}
with a space where they can improve and learn new skills, meet
amazing people, and have an overall great experience!
</Body>
<ImgSection>
<AppleImage
src="/apple.png"
width={28}
height={30}
alt="manzana snake"
/>
</ImgSection>
</Col>
</Container>
</SectionStyled>
</SectionBackground>
<SectionStyled>
<UnderlineTitle className={lora.className}>
HACKUPC: CODING TO THE NEXT LEVEL
</UnderlineTitle>
<Container>
<Col>

<BlockTitle color={"#000000"} haveMargin>
What is a hackathon?
</BlockTitle>
<Body>
The word hackathon is a combination of the words <b>"HACK"</b>,
standing for creative problem-solving, and <b>"MARATHON"</b>.
These are awesome events full of creativity, technology, and
passionate tech-related students of different skill ranges
collaborating and creating. During a certain period of time,
attendees work in <b>TEAMS</b> to develop apps, games, robots…
literally anything you want to <b>BUILD & LEARN</b> about!
</Body>
</Col>
<Col>
<ImgSection>
<Image
src="/hackupcLogoBlack.svg"
width={120}
height={120}
alt="HackUPC Logo"
/>
</ImgSection>
<BlockTitle color={"#000000"} haveMargin>
About HackUPC
</BlockTitle>
<Body>
HackUPC is the first student hackathon in Spain and the biggest
one in Europe. Once a year, we aim to provide participants of{" "}
<b>all experience levels</b> from <b>all around the world</b>{" "}
with a space where they can improve and learn new skills, meet
amazing people, and have an overall great experience!
</Body>

</Col>
</Container>
</SectionStyled>
</div>
);
}
Loading