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

pentagons + resize + animation (all pages) #222

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

pentagons + resize + animation (all pages) #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7f90047
navbar fix
sristii May 3, 2024
387f986
header done
sristii May 3, 2024
a9e6a0f
about + dont know how to do fadeinfadeout comp
sristii May 3, 2024
a65ed3f
about - resize & responsive
sristii May 3, 2024
3b4b696
events - resize & responsive
sristii May 3, 2024
d1a329d
mag page done
sristii May 3, 2024
5e5f10f
resources done
sristii May 3, 2024
fbc875b
done
sristii May 3, 2024
40bb9b2
small footer edits
sristii May 3, 2024
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
10 changes: 5 additions & 5 deletions lantern-club/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@ export default function Footer({ showAdminLogin }: { showAdminLogin: boolean })


{/* Login/Submit column */}
<div className="flex flex-col md:flex-row items-center md:items-end justify-end p-4">
<div className="flex flex-col md:flex-row items-center md:items-end justify-end">
{/* Login and Submit buttons here */}
<div className="font-nunitosans flex flex-col pb-5 md:pb-0 pr-0 md:pr-10 space-y-4 items-start justify-start">
<div className="font-nunitosans flex flex-col pt-5 md:-mt-8 pr-0 md:pr-10 scale-90 space-y-4 items-start justify-start">
{!session ? (
showAdminLogin && (
<Buttonv2 text="Admin Login" action={() => signIn("google")} color="blue" width="w-48" />
Expand All @@ -72,17 +72,17 @@ export default function Footer({ showAdminLogin }: { showAdminLogin: boolean })

</div>

<div className="flex">
<div className="flex scale-90 pb-2">
<a href="https://www.linkedin.com/company/the-lantern-at-tufts-university/about/" target="_blank" rel="noopener noreferrer" className="flex mr-2 hover:#faac4b">
<div className="w-11 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
<div className="w-8 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
{/* <Image src={LinkedIn} alt="linkedin icon"/> */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path className="fill-current "
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
</div>
</a>
<a href="https://www.instagram.com/thelanterntufts/" target="_blank" rel="noopener noreferrer">
<div className="w-11 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
<div className="w-8 h-10 md:w-12 md:h-12 relative transition-all duration-300 hover:text-orange-400">
{/* <Image src={Insta} alt="instagram icon" /> */}
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
16 changes: 7 additions & 9 deletions lantern-club/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,15 @@ export default function Header({title}:{title:string}){
backgroundColor: "#FECB66",
};
return(
<div className="drop-shadow-md">
<div className="flex items-start justify-center bg-center pb-20 bg-cover bg-no-repeat bg-[url('/images/header-bg.png')]" id="header2-pent">
<div className='flex flex-shrink-0'>
<Image src={"/images/short-lantern.png"} height={90} width={90} alt="lantern logo" />
<div className="flex items-start justify-center bg-center pb-40 md:pb-24 bg-cover bg-no-repeat bg-[url('/images/header-bg.png')]" id="header2-pent">
<div className='flex flex-shrink-0 -mt-2 scale-90 md:scale-100'>
<Image src={"/images/short-lantern.png"} height={77} width={77} alt="lantern logo" />
</div>
<h1 className="flex text-4xl flex-shrink md:ml-16 md:mr-16 pt-24 md:text-8xl font-kiona text-center">{title}</h1>
<div className='flex flex-shrink-0'>
<Image src={"/images/short-lantern.png"} height={90} width={90} alt="lantern logo" />
<h1 className="flex text-5xl flex-shrink md:ml-16 md:mr-16 pt-28 md:pt-20 md:text-[5.2rem] font-kiona text-center">{title}</h1>
<div className='flex flex-shrink-0 -mt-2 scale-90 md:scale-100'>
<Image src={"/images/short-lantern.png"} height={77} width={77} alt="lantern logo" />
</div>
</div>
</div>
</div>



Expand Down
10 changes: 5 additions & 5 deletions lantern-club/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@ const NavBar = () => {
];

return (
<div className={nav ? 'fixed flex justify-between bg-white z-50 items-center h-28 w-screen px-4 text-lg font-kiona' : 'flex justify-between z-50 items-center h-28 max-w-screen mx-auto px-4 text-lg font-kiona'}>
<div className={nav ? 'fixed flex justify-between bg-white z-50 items-center w-screen h-28 px-4 text-base font-kiona' : 'flex justify-between z-50 items-center h-[6.5rem] max-w-screen mx-auto px-4 text-lg font-kiona'}>
<div className={nav ? 'fixed z-50 pl-10 md:pl-20 pr-10 md:pr-20 flex-shrink-0 py-0' : 'z-50 pl-10 md:pl-20 pr-10 md:pr-20 flex-shrink-0 py-0'}>
<Link href="/" className="p-4 hover:underline">
<Image src={"/images/lantern-logo-blue.png"} height={82} width={82} alt="lantern logo" layout="intrinsic" />
<Link href="/" className="p-5 hover:underline">
<Image src={"/images/lantern-logo-blue.png"} height={75} width={75} alt="lantern logo" layout="intrinsic" />
</Link>
</div>

<ul className="flex flex-row justify-center z-10 space-x-8 hidden md:flex md:space-x-16 md:pr-20 pt-4 overflow-x-auto pb-4">
<ul className="flex flex-row justify-center z-10 space-x-2 hidden md:flex md:space-x-16 md:pr-16 py-2">
{links.map((link, index) => (
<li key={index}>
<Link href={link.url} className="hover:bg-nav-bg rounded-2xl p-3 relative transition-all duration-500">
<Link href={link.url} className="hover:bg-nav-bg text-base rounded-2xl px-4 py-3 relative transition-all duration-500">
{link.label}
</Link>
</li>
Expand Down
10 changes: 5 additions & 5 deletions lantern-club/src/components/about/AboutUsII.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export default function AboutUsII() {
};

return (
<div>
<div className="-mt-20 yellow-gradient py-40 px-4 md:px-20">
<p className="mb-10 md:mb-20 md:text-8xl text-6xl" style={header_font}>Who are we?</p>
// <div className="">
<div className="-mt-52 md:-mt-20 md:-mt-40 yellow-gradient w-full pb-56 pt-48 md:pt-48 md:pt-36 md:pb-60 px-4 md:px-20" id="pentagon-body">
<p className="mb-10 md:mb-20 md:text-7xl pt-20 md:pt-1.5 text-6xl" style={header_font}>Who are we?</p>

{/* First section */}

Expand Down Expand Up @@ -71,8 +71,8 @@ export default function AboutUsII() {


</div>
<div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>
// <div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>

</div>
// </div>
);
}
10 changes: 4 additions & 6 deletions lantern-club/src/components/about/AboutUsIII.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ export default function AboutUsIII() {
};

return (
<div>
<div className="md:-mt-20 -mt-10 py-40 px-4 md:px-20 orange-gradient" style={background}>
<p className="md:text-8xl text-6xl" style={header_font}> What is STS?</p>
<div className="pb-44 md:-mt-40 -mt-56 pt-40 md:pb-32 px-4 md:px-20 orange-gradient" id="pentagon-body">
<p className="md:text-7xl text-6xl" style={header_font}> What is STS?</p>
<div className="pale-yellow mellow-yellow-border" style={round_box}>
<div className="flex flex-col md:flex-row items-center">
<div className="w-full md:w-1/2 py-5 font-nunito text-lg md:text-xl px-4 md:px-0">
<p>Science, Technology & Society (STS) is an interdisciplinary field of study that seeks to explore and understand the many ways that modern science and technology shape modern culture, values, and institutions, and how modern values shape science and technology. STS examines how science and technology emerge, how they enter society, how they change through social processes, and how society changes in response to science and technology. (<a href="https://majorsandminors.dasa.ncsu.edu/science-technology-society/#:~:text=Science%2C%20Technology%20%26%20Society%20(STS,values%20shape%20science%20and%20technology." target="_blank" rel="noopener noreferrer" className="text-sky-600 underline">NC State University.</a>)</p>
</div>
<div className="w-full md:w-1/2 rounded-3xl relative h-80 md:h-auto ml-0 md:ml-10 mr-0 md:mr-4">
<div className="w-full md:w-1/2 rounded-3xl relative md:h-auto ml-0 md:ml-10 mr-0 md:mr-4">
<Image
src={"/images/sts-resources.png"}
alt="Background"
Expand All @@ -47,7 +47,5 @@ export default function AboutUsIII() {
</div>
</div>

<div className="h-10 md:h-20 w-full" style={triangle} id="triangle"></div>
</div>
);
}
4 changes: 2 additions & 2 deletions lantern-club/src/components/about/AboutUsIV.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default function AboutUsIV() {

return (
<div>
<div className="-mt-10 md:-mt-20 py-20 md:py-40 px-4 md:px-20 blue2-gradient" style={background}>
<p style={header_font} className="md:text-8xl text-6xl"> Our Mission</p>
<div className="-mt-10 -mt-48 md:-mt-32 py-20 pt-56 md:py-40 px-4 md:px-20 blue2-gradient" id="pentagon2">
<p style={header_font} className="md:text-7xl text-6xl"> Our Mission</p>

{/* Two boxes */}
<div className="flex flex-col md:flex-row gap-10">
Expand Down
39 changes: 39 additions & 0 deletions lantern-club/src/components/about/FadeInOutComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// FadeInOutCompoentn.tsx
import React, { ReactNode } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const FadeInOutComponent = ({ children }: { children: ReactNode }) => {
const controls = useAnimation();
const { ref, inView } = useInView({
triggerOnce: false, // Set to true if you want the animation to occur only the first time the component comes into view
threshold: 0.01, // Adjust based on when you want the animation to trigger
});

React.useEffect(() => {
if (inView) {
controls.start('visible');
} else {
controls.start('hidden');
}
}, [controls, inView]);

const variants = {
visible: { opacity: 1, scale: 1 },
hidden: { opacity: 0, scale: 0.75 },
};

return (
<motion.div
ref={ref}
animate={controls}
initial="hidden"
variants={variants}
transition={{ duration: 0.38 }}
>
{children}
</motion.div>
);
};

export default FadeInOutComponent;
6 changes: 2 additions & 4 deletions lantern-club/src/components/contact/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,8 @@ export default function Contact() {

return (
<div>
<div className="h-20 w-full flex-1 mellow-yellow" id="triangle"> </div>
<div className="flex flex-col md:justify-center bg-gradient-to-b from-blue-g1 to-blue-g2 -mt-20">
<div className="h-20 w-full flex-1 mellow-yellow" id="triangle"></div>
<h1 className="mt-20 font-coolvetica text-center md:text-8xl text-6xl md:ml-16 pt-20">
<div className="flex flex-col md:justify-center bg-gradient-to-b from-blue-g1 to-blue-g2 px-4 -mt-48 md:-mt-28" id="pentagon2">
<h1 className="mt-20 font-coolvetica text-left md:text-7xl text-6xl md:ml-16 pt-16 pb-8">
Get in touch!
</h1>
{/* Shows popup when the form is submitted */}
Expand Down
6 changes: 3 additions & 3 deletions lantern-club/src/components/contact/MeetTheEboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ const MeetTheEBoard = ({data}: MeetTheEBoardProps): JSX.Element => {

return(
<div className="z-40">
<div className="flex flex-col -mt-20 pt-32 w-full yellow-gradient">
<div className="flex flex-col -mt-40 md:-mt-28 pt-32 pb-32 w-full yellow-gradient px-4 md:px-4" id="pentagon-body">
<div className="flex md:flex-row flex-col justify-center md:justify-start md:ml-16 md:grid md:grid-cols-2">
<div className="flex md:flex-row flex-col">
<h1 className="font-coolvetica text-6xl text-center md:text-8xl w-12/12">
<h1 className="font-coolvetica text-6xl text-center pt-6 md:text-7xl w-12/12">
Meet the E-Board
</h1>
<div className="mt-14">
<div className="md:mt-14">
{session?.user.isAdmin && (
<p className="font-nunito underline text-center md:text-2xl text-lg md:mb-2 md:mt-0 -mt-6 md:ml-10 cursor-pointer transition-all duration-300 hover:text-orange-400" onClick={handleToggleEditView}>
Edit
Expand Down
6 changes: 3 additions & 3 deletions lantern-club/src/components/events/EventsI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ export default function EventsI({
session={session}
setShowAddModal={setShowAddModal}/>
) : (
<div className="-mt-20 py-40 px-8 md:px-20 bg-gradient-to-t from-contact-g2 to-g-yellow1">
<div className="-mt-32 py-40 px-8 md:px-20 bg-gradient-to-t from-contact-g2 to-g-yellow1" id="pentagon-body">
<div className="flex flex-col md:flex-row mb-10 md:mb-20">
<h1 className={"font-coolvetica md:text-8xl text-6xl flex items-end"}>
<h1 className={"font-coolvetica md:text-7xl pt-6 text-6xl flex items-end"}>
{session?.user.isAdmin && isAdminEdit ? "Edit Upcoming Events" : "Upcoming Events"}
{session?.user.isAdmin && (
<button className="font-nunito underline text-2xl ml-7 mb-2 cursor-pointer relative transition-all duration-300 hover:text-orange-400" onClick={handleEditButtonClick}>Edit</button>
Expand All @@ -94,7 +94,7 @@ export default function EventsI({
ssr={true}
infinite={true}
keyBoardControl={true}
containerClass="carousel-container pt-12 pb-20 mx-auto md:px-16"
containerClass="carousel-container pt-2 pb-6 mx-auto md:px-16"
itemClass="flex justify-center md:justify-start"
arrows={true}
>
Expand Down
4 changes: 2 additions & 2 deletions lantern-club/src/components/events/EventsII.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ export default function EventsII({
// ********* IS ADMIN EDIT BOOLEAN ********
return (
<div>
<div className=" -mt-20 py-40 px-8 md:px-20 blue2-gradient">
<h1 className={"mb-20 font-coolvetica md:text-8xl text-6xl flex"}>
<div className=" -mt-36 pt-28 px-8 md:px-20 blue2-gradient" id="pentagon2">
<h1 className={"mb-8 mt-12 font-coolvetica md:text-7xl text-6xl flex"}>
{session?.user.isAdmin ? "Delete Past Events" : "Past Events"}
</h1>

Expand Down
68 changes: 5 additions & 63 deletions lantern-club/src/components/magazine/MagazineDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import Image from "next/image";
import Link from "next/link"
import { useSession } from 'next-auth/react';
import extractFileNameFromURL from '@/utils/extractFileNameFromURL';

import FadeInOutComponent from "@/components/about/FadeInOutComponent";
// import Lantern from "../../images/bluelatern.png";


Expand Down Expand Up @@ -70,9 +72,9 @@ export default function MagazineDisplay ({ handleToggleAdminView, magazines }: M

return (
<div>
<div className="yellow-gradient -mt-20 py-40 px-2 md:px-20 w-full p-20">
<div className="flex gap-10 md:text-8xl text-6xl">
<p style={headerFont}>Magazine Issues</p>
<div className="yellow-gradient -mt-36 pt-40 pb-56 px-2 md:px-20 w-full p-20" id="pentagon-body">
<div className="flex gap-10 pt-6 md:text-7xl text-6xl">
<p style={headerFont}>Featured Issue</p>
{session?.user.isAdmin && (
<button className="font-nunito underline text-2xl mb-2 -ml-2 cursor-pointer relative transition-all duration-300 hover:text-orange-400" onClick={handleToggleAdminView}>
Edit
Expand All @@ -93,66 +95,6 @@ export default function MagazineDisplay ({ handleToggleAdminView, magazines }: M
</div>

</div>

{/* triangle man */}
<div className="h-20 w-full" style={triangle} id="triangle"></div>


{/* the blue guy */}
{/* <div className="w-full blue2-gradient flex flex-col md:grid md:grid-cols-2 -mt-20 pb-20 pt-20 md:pt-0"> */}
<div className="-mt-20 p-20 pt-40 w-full blue2-gradient flex gap-5 flex-col">
<div className="grid grid-flow-col">
{/* left container */}
<div>
<p className="md:text-8xl text-6xl" style={headerFont}>Read Past Issues</p>
<ul>
{magazines.map((url: string, index) => {
// Extract file name from the URL
// console.log("url: ", url);
let fileName = extractFileNameFromURL(url);
// const keyName = "uploads/" + url.substring(url.lastIndexOf('/') + 1);
// //const key = url.substring(url.lastIndexOf('/') + 1);
// let fileName = keyName.substring(keyName.indexOf('_') + 1);
// fileName = fileName.replace(/\.[^/.]+$/, "");

return (
<li key={index}>

{/* gets rid of the file extension */}
<div className="flex pt-5 align-bottom">
<Link className="w-60 md:w-1/2 hover:underline" href={url} target="_blank" rel="noopener noreferrer" style={{fontWeight: 'normal'}}>
<span style={{transition: 'all 0.3s ease', fontWeight: 'bold', textDecoration: 'none'}}>
{fileName}
</span>
</Link>
</div>

</li>
);
})}
</ul>
</div>
{/* image side */}
<div className="flex justify-center items-center">
<div>
<Image
src={"/images/bluelatern.png"}
height={280}
width={280}
// style={imageStyle}
alt="submission poster"
/>
</div>
</div>



</div>




</div>

</div>

Expand Down
Loading