Skip to content
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

Jump to bottom

Update Hero Design & General Improvements #17

Closed
wants to merge 7 commits into from
Closed

Update Hero Design & General Improvements #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
66f318b
improve and document code
diogogmatos Sep 27, 2023
6bcbae7
bug fix
diogogmatos Sep 27, 2023
f1fa624
update design & add carousel
diogogmatos Sep 28, 2023
24881e5
lint code
diogogmatos Sep 28, 2023
091e90a
improvements
diogogmatos Sep 28, 2023
4138265
fix
diogogmatos Sep 28, 2023
0b6a576
fix build error
diogogmatos Sep 28, 2023
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
8 changes: 4 additions & 4 deletions app/team/page.tsx → app/equipa/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";
import teamData from "@/data/2023.json";
import teamData from "@/data/TeamPageData.json";
import React, { useState } from "react";
import DatePicker from "@/components/DatePicker";
import Teams from "@/components/Team";
import Team from "@/components/Team";

export default function Team() {
export default function Equipa() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a bit weird to have the naming in portuguese 😅
I think the page should be called team and so the component.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, i think it is good having the navbar link in portuguese since the whole website is, but the component and filename (therefor, the url) should stay in english.

const yearDefault = "2023";
const [selectedYear, setSelectedYear] = useState(yearDefault);

Expand All @@ -24,7 +24,7 @@ export default function Team() {
onYearChange={onYearChange}
/>
</div>
{selectedYearData && <Teams yearData={selectedYearData} />}
{selectedYearData && <Team yearData={selectedYearData} />}
</main>
);
}
91 changes: 61 additions & 30 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,85 @@
"use client";
import "/styles/globals.css";

import { Inter, Orbitron } from "@next/font/google";
import Navbar from "@/components/Navbar";
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer";

import { useState, useEffect } from "react";

const inter = Inter({ subsets: ["latin"], variable: "--inter-font" });
const orbitron = Orbitron({ subsets: ["latin"], variable: "--orbitron-font" });

export const metadata = {
title: "Hydrogen",
description: "CeSIUM landing page",
const Background = ({ width, height }: { width: number; height: number }) => {
const hLinesNr: number = Math.max(Math.round(height / 128) - 1, 0);
const vLinesNr: number = Math.max(Math.round(width / 128), 0);

return (
<>
{/* --> checkered lines */}
<div className="absolute -z-50 h-full w-full">
{/* --> horizontal lines */}
<div>
{[...Array(hLinesNr)].map((_, index) => (
<div
key={index}
className="absolute h-0.5 w-full bg-slate-100 shadow-inner"
style={{ marginTop: `calc(128px * ${index + 1})` }}
/>
))}
</div>
{/* --> vertical lines */}
<div className="flex flex-row">
{[...Array(vLinesNr)].map((_, index) => (
<div
key={index}
className="absolute h-full w-0.5 bg-slate-100 shadow-inner"
style={{ marginLeft: `calc(128px * ${index + 1})` }}
/>
))}
</div>
</div>
{/* --> left to right gradient */}
<div className="absolute -z-40 h-full w-full bg-gradient-to-r from-white/90 to-transparent" />
{/* --> bottom to top gradient */}
<div className="absolute -z-40 mt-[200px] h-full w-full bg-gradient-to-t from-white to-transparent" />
{/* --> top to bottom gradient */}
<div className="absolute -z-40 h-[14rem] w-full bg-gradient-to-b from-white/70 to-transparent" />
</>
);
};

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const [width, setWidth] = useState<number>(0);
const [height, setHeight] = useState<number>(0);

// "Listens" for changes in the window size and updates the nr of lines accordingly
useEffect(() => {
const handleResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};

window.addEventListener("resize", handleResize);

return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

return (
<html lang="en">
<body className={`${inter.variable} ${orbitron.variable}`}>
{/* Top Orange Bar */}
<div className="h-2 w-full bg-cesium-900" />
{/* Background */}
{/* --> checkered lines */}
<div className="absolute -z-50 h-full w-full">
<div>
{[...Array(7)].map((_, index) => (
<div
key={index}
className="absolute h-0.5 w-full bg-gray-50 shadow-inner"
style={{ marginTop: `calc(128px * ${index + 1})` }}
/>
))}
</div>
<div className="flex flex-row">
{[...Array(20)].map((_, index) => (
<div
key={index}
className="absolute h-full w-0.5 bg-gray-50 shadow-inner"
style={{ marginLeft: `calc(128px * ${index + 1})` }}
/>
))}
</div>
</div>
{/* --> left to right gradient */}
<div className="absolute -z-40 h-full w-full bg-gradient-to-r from-white to-transparent" />
{/* --> bottom to top gradient */}
<div className="absolute -z-40 mt-[200px] h-full w-full bg-gradient-to-t from-white to-transparent" />
<Background width={width} height={height} />
{/* Main Content */}
<div className="z-50 m-auto max-w-screen-xl space-y-32 px-20 py-14 text-gray-900">
<div className="z-50 m-auto max-w-screen-xl space-y-40 px-20 py-14 text-gray-900">
<Navbar />
{children}
<Footer />
Expand Down
4 changes: 1 addition & 3 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
"use client";
import Hero from "@/components/Hero";
import Banners from "@/components/Banners";
import CalendariumBenefits from "@/components/CalendariumBenefits";
import NewsAndEvents from "@/components/NewsAndEvents";

export default function Home() {
return (
<main className="space-y-32">
<main className="space-y-40">
<Hero />
<Banners />
{/* <CalendariumBenefits /> */}
<NewsAndEvents />
</main>
Expand Down
115 changes: 0 additions & 115 deletions components/Banners.tsx
View file
Open in desktop

This file was deleted.

47 changes: 47 additions & 0 deletions components/Carousel/Carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
"use client";
import useEmblaCarousel, { EmblaOptionsType } from "embla-carousel-react";
import { useEffect, ReactNode, useState } from "react";

type Props = {
children: ReactNode;
index: number;
} & EmblaOptionsType;

const Carousel = ({ children, index, ...options }: Props) => {
// useEmblaCarousel returns a emblaRef and we must attach the ref to a container.
// EmblaCarousel will use that ref as basis for swipe and other functionality.
const [emblaRef, emblaApi] = useEmblaCarousel(options);
const [scroll, setScroll] = useState<boolean>(true);

useEffect(() => {
// Only scrolls if mouse is not hovering the element
if (scroll) {
const interval = setInterval(
() => {
emblaApi?.scrollNext();
},
6000 + 1500 * index, // Sets a higher scroll interval for the 2nd banner (contains text)
);
return () => clearInterval(interval);
}
}, [emblaApi, scroll, index]);

return (
<div
className={`select-none overflow-hidden shadow-sm shadow-gray-900/20 ${
index === 0 && "rounded-tl-[140px]"
}`}
ref={emblaRef}
>
<div
className="flex"
onMouseEnter={() => setScroll(false)}
onMouseLeave={() => setScroll(true)}
>
{children}
</div>
</div>
);
};

export default Carousel;
1 change: 1 addition & 0 deletions components/Carousel/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./Carousel";
6 changes: 4 additions & 2 deletions components/CeSIUMLogo.tsx → components/CeSIUMLogo/CeSIUMLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ type CeSIUMLogoProps = {
color?: string;
};

export default function CeSIUMLogo(props: CeSIUMLogoProps) {
const CeSIUMLogo = (props: CeSIUMLogoProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -37,4 +37,6 @@ export default function CeSIUMLogo(props: CeSIUMLogoProps) {
/>
</svg>
);
}
};

export default CeSIUMLogo;
1 change: 1 addition & 0 deletions components/CeSIUMLogo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./CeSIUMLogo";
Loading