Skip to content

Scaling changes #5

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

Open
marinocj wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Scaling changes #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f83508
Update Home.tsx
marinocj Jun 12, 2024
d23d2f3
Added Page Scaling
marinocj Jun 12, 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
22 changes: 12 additions & 10 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,52 @@
import { Link } from "react-router-dom";


const Footer = () => {
return (
<div className="bg-black text-white py-10 px-0">
<div className="bg-black text-white py-10 px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12">
<div className="container mx-auto">
<div className="my-10">
<h1 className="text-3xl font-bold">Rensselaer Engineering Commons</h1>
<div className="mt-10 flex lg:gap-52 gap-10 sm:flex-col md:flex-row flex-row">
<div>
<h3 className="text-xl">Links</h3>
<div className="flex flex-col mt-5 gap-4">
<Link to="/">
<Link to="/" aria-label="Home">
Home
</Link>
<Link to="/about">
<Link to="/about" aria-label="About">
About
</Link>
<Link to="/contact">
<Link to="/contact" aria-label="Contact">
Contact
</Link>
<Link to="/projects">
<Link to="/projects" aria-label="Projects">
Projects
</Link>
<Link to="/login">
<Link to="/login" aria-label="Login">
Login
</Link>
</div>
</div>
<div>
<h3 className="text-xl">Contact</h3>
<div className="flex flex-col mt-5 gap-4">
<p>Email: info@rpi.edu</p>
<p>Phone: (123) 456-7890</p>
<p>Address: 110 8th St, Troy, NY 12180</p>
</div>
</div>
<div>
<h3 className="text-xl">Social Media</h3>
<div className="flex flex-col mt-5 gap-4">
<a href="https://discord.gg/TKBGYmZEQb" target="_blank">
<a href="https://discord.gg/TKBGYmZEQb" target="_blank" rel="noopener noreferrer" aria-label="Discord">
<figure className="max-w-32">
<img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5493894cf60b300587_full_logo_white_RGB.svg" alt="" />
<img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5493894cf60b300587_full_logo_white_RGB.svg" alt="Discord Logo" />
</figure>
</a>
</div>
</div>
<div className="md:ml-auto mt-auto">
<a href="https://github.com/Rensselaer-Engineering-Commons/REC-Website" className="underline">©REC 2024</a>
<a href="https://github.com/Rensselaer-Engineering-Commons/REC-Website" className="underline" aria-label="GitHub Repository">© REC 2024</a>
</div>
</div>
</div>
Expand Down
21 changes: 10 additions & 11 deletions src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@ const About = () => {
<div>
<header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle">
<div
className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px] px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12"

></div>
<div className="flex flex-col items-center justify-center">
<h1 className="text-5xl font-bold text-white">About Us</h1>
</div>
</header>
<main className="flex flex-col">
<div className="py-52">
<MainSection>
<Title>Who are we?</Title>
<Information>
The Rensselaer Engineering Commons is a community of students, faculty, and staff dedicated to
<section className="mb-8">
<div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
<h2 className="text-3xl font-bold mb-4 text-center">Who are we?</h2>
<p className="text-center max-w-2xl">
The Rensselaer Engineering Commons is a community of students, faculty, and staff dedicated to
creating a welcoming and inclusive environment for all. We believe that diversity and inclusion
are essential to the success of our community and our mission. We are committed to fostering a
culture of respect, empathy, and understanding, and to providing resources and support to help
all members of our community thrive.
</Information>
</MainSection>
</div>
</main>
</p>
</div>
</section>
</div>
)
}
Expand Down
45 changes: 25 additions & 20 deletions src/pages/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Title, MainSection, Information } from '../components/components.ts'
const Contact = () => {
return (
<div>
<header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle">
<header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle px-16">
<div
className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
></div>
Expand All @@ -12,37 +12,42 @@ const Contact = () => {
</div>
</header>
<main className="flex flex-col">
<div className="pt-52 py-44">
<MainSection>
<Title>Discord Community</Title>
<Information>

<section className="mb-8">
<div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
<h2 className="text-3xl font-bold mb-4 text-center">Discord Community</h2>
<p className="text-center max-w-2xl">
Join our vibrant Discord community to connect with like-minded individuals,
share ideas, and collaborate on creative projects. Whether you're a seasoned
creator or just starting out, everyone is welcome! <a className="text-blue-700" target="_blank"
href="https://discord.gg/TKBGYmZEQb">Click here</a> to join our Discord server.
</Information>
</MainSection>
</div>
<div className="py-52 bg-gray-100">
<MainSection>
<Title>
Location
</Title>
<Information>
Our physical headquarters are located at the <a className="text-blue-700" target="_blank"
</p>
</div>
</section>
<section className="mb-8">
<div className="py-8 sm:py-16 md:py-32 lg:py-52 bg-gray-100 flex flex-col items-center justify-center">
<h2 className="text-3xl font-bold mb-4 text-center">Location</h2>
<p className="text-center max-w-2xl">
Our physical headquarters are located at the <a className="text-blue-700" target="_blank"
href="https://mercerxlab.rpi.edu/">Mercer XLab</a>, where creativity thrives
and ideas come to life. Drop by for workshops, meetups, and events, or simply to hang
out with fellow members of our creative community. We'd love to see you there!

Have a question or need assistance? Feel free to reach out to us via Discord or visit
us in person. We're here to help!
</Information>
</MainSection>
</div>
</p>
</div>
</section>
</main>
</div>
)
}

export default Contact
export default Contact

/*Our physical headquarters are located at the <a className="text-blue-700" target="_blank"
href="https://mercerxlab.rpi.edu/">Mercer XLab</a>, where creativity thrives
and ideas come to life. Drop by for workshops, meetups, and events, or simply to hang
out with fellow members of our creative community. We'd love to see you there!

Have a question or need assistance? Feel free to reach out to us via Discord or visit
us in person. We're here to help!*/
94 changes: 36 additions & 58 deletions src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { MainSection, Title, Information } from "../components/components.ts"
import { MainSection, Title, Information } from "../components/components.ts";
import Project from "../components/ProjectCard.tsx";
import React from 'react';

import Project from "../components/ProjectCard.tsx"

let projects = [
const projects = [
{
name: "Line Follower Robot",
description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
Expand All @@ -20,75 +20,53 @@ let projects = [
date: "06/07/24"
},
{
name: "Giant Bridge",
name: "Giant Water Rocket",
description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
link: "https://example.com",
image: "https://assets.editorial.aetnd.com/uploads/2015/02/topic-golden-gate-bridge-gettyimages-177770941.jpg",
department: "CIVIL",
date: "06/07/24"
},
{
name: "Lean Manufacturing for Airplanes",
description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
link: "https://example.com",
image: "https://www.travelandleisure.com/thmb/h97kSvljd2QYH2nUy3Y9ZNgO_pw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/plane-data-BUSYROUTES1217-f4f84b08d47f4951b11c148cee2c3dea.jpg",
department: "IME",
image: "https://scoutlife.org/wp-content/uploads/2018/04/rubegoldberg.jpg",
department: "MANE",
date: "06/07/24"
}
]
];

const Home = () => {
return (
<div>
<header className="h-96 min-h-[600px] relative flex flex-col justify-around align-middle">
<div className="container mx-auto ">

<header className="h-48 min-h-[250px] relative flex flex-col justify-around ">
<div
className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
></div>
<div className="flex flex-col items-center justify-center">
<h1 className="text-5xl font-bold text-white">Rensselaer Engineering Commons</h1>
<p className="text-white text-lg">Lets create together</p>
</div>
</header>
<main className="flex flex-col">
<div className="py-52">
<MainSection>
<Title>Our Mission</Title>
<Information>
Our mission is to inspire creativity through the power of simplicity.
By embracing minimalist design, user-centric innovation, and a collaborative DIY spirit,
we aim to create cool stuff that not only delights but also solves real-world problems.
We believe in the transformative power of iterative improvement, cross-disciplinary inspiration,
and sustainable solutions. Our mission is to embrace imperfection, foster collaboration,
and make a positive impact on the world through our creative endeavors. Join us as we embark on a
journey to create cool sh*t that inspires, innovates, and leaves a lasting legacy of creativity.
</Information>
</MainSection>
</div>
<div className="py-52 relative">
<div
className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
></div>
<MainSection>
<Title><span className="text-white">Featured Projects</span></Title>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10">
{projects.map((project) => (
<Project
name={project.name}
description={project.description}
link={project.link}
image={project.image}
department={project.department}
date={project.date}
/>
))}
</div>

</MainSection>

</div>
</main>
<section className="mb-8">
<div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
<h2 className="text-3xl font-bold mb-4 text-center">Our Mission</h2>
<p className="text-center max-w-2xl">
Our mission is to inspire creativity through the power of simplicity.
By embracing minimalist design, user-centric innovation, and a collaborative DIY spirit,
we aim to create cool stuff that not only delights but also solves real-world problems.
We believe in the transformative power of iterative improvement, cross-disciplinary inspiration,
and sustainable solutions. Our mission is to embrace imperfection, foster collaboration,
and make a positive impact on the world through our creative endeavors. Join us as we embark on a
journey to create cool sh*t that inspires, innovates, and leaves a lasting legacy of creativity.
</p>
</div>
</section>
<section className="mb-8">
<h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-center">Projects</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
{projects.map((project, index) => (
<Project key={index} {...project} />
))}
</div>
</section>

</div>
)
);
}

export default Home
export default Home;
2 changes: 1 addition & 1 deletion src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const Login = () => {
return (
<div className="py-52">
<div className="container mx-auto">
<div className="flex min-h-full flex-col justify-center px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
Expand Down
Loading