Dev/add images (#129)

* Added images to projects page * Added images to some of the about pages * All about pages have image * Added new projects image * Made it so all images take up the same width --------- Co-authored-by: saltyypanda <esh7943@rit.edu>
rit-sse · Apr 27, 2024 · 788e4c1 · 788e4c1
1 parent 6117002
commit 788e4c1
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/next/app/about/AboutUsSlotContent.ts b/next/app/about/AboutUsSlotContent.ts
@@ -4,7 +4,7 @@ const defaultImage = `https://dummyimage.com/${placeholder_w}x${placeholder_h}`
 
 const data: {imageSrc: string, name: string, description: string, alt:string}[] = [
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/mentoring-review-session-1.png",
         name: "All-In-One Hub For Developers",
         description: `GOL-1670 offers weekday Software Engineering mentoring and
                 tutoring. Experience the SSE Winter Ball, partake in trips and
@@ -13,7 +13,7 @@ const data: {imageSrc: string, name: string, description: string, alt:string}[]
         alt: "All-In-One Hub For Developers"
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/tech-committee-1.jpg",
         name: "Hands-On Experience",
         description: `In the Projects Committee, SSE members collaborate on unique
                 software projects, from singing tesla coils to multitouch walls.

diff --git a/next/app/about/committees/CommitteeSlotData.ts b/next/app/about/committees/CommitteeSlotData.ts
@@ -11,37 +11,37 @@ const defaultDescription = `This is a description of the committee. Lorem ipsum
 
 export default [
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/events1.jpg",
         name: 'Events',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/talks-1.jpg",
         name: 'Talks',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/talks-2.jpg",
         name: 'Public Relations',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/mentoring.jpg",
         name: 'Mentoring',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/mentoring-review-session-1.png",
         name: 'Marketing',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/student-involvement-1.jpg",
         name: 'Student Outreach',
         description: defaultDescription
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/tech-committee-1.jpg",
         name: 'Tech Committee',
         description: defaultDescription
     }

diff --git a/next/app/about/get-involved/InvolvementSlotData.ts b/next/app/about/get-involved/InvolvementSlotData.ts
@@ -9,44 +9,44 @@ const defaultDescription = `This is a description of the committee. Lorem ipsum
 
 export default [
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/mentoring-review-session-1.png",
         title: 'Come to General Meeting',
         body: `We have a general meeting every week on Monday at 1 PM in the SSE lab (GOL 1670). Come join us
             to stay up to date with what's happening in the SSE and to meet other members! If you have any questions,
             feel free to reach out to any of the officers (found on the Leadership page). The lab is open every weekday
             from 10 AM to 6 PM. Feel free to stop by and hang out, we love meeting new people!`
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/mentoring.jpg",
         title: 'Come in for Mentoring',
         body: `If you need help with any of your GCCIS or math classes, we have mentors who would love to help! Mentoring is 
         open Monday to Friday from 10AM to 6PM. You can check out the mentoring schedule of the times for each mentor. 
         If you would like to apply to be a mentor, please reach out to our Mentoring Head.`
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/projects-2.gif",
         title: 'Join a Project',
         body: `Collaboration is a core value of the SSE. We have a variety of projects that you can join (including this website!).
             Check out our projects page to see what we're working on. Don't see anything you like? Reach out to our projects head
             to start your own project! An SSE project can be anything with a software component, so get creative!`
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/talks-2.jpg",
         title: 'Attend or Give a Talk',
         body: `We don't always talk about technical software topics, we often delve into diverse topics, such as 
             the amusing appearances of various aquatic creatures. Our enthusiasm for this particular subject matter has led 
             to the establishment of Funny Fish Friday, a designated day for engaging in lively conversations about these quirky 
             aquatic beings. If you would like to give a talk of your own please reach out to our Talk Head!`
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/student-involvement-1.jpg",
         title: 'Help Clean the Lab',
         body: `With all this happening, the lab can get a bit messy. 
             This is a great opportunity to gain membership here by participating 
             in lab cleanup sessions! Check out our calendar for the next lab cleaning, or talk to our Lab Ops Head.`
     },
     {
-        imageSrc: defaultImage,
+        imageSrc: "/images/tech-committee-1.jpg",
         title: 'Come to Tech Committee',
         body: `If you would like to help rebuild the SSE website, come to GOL-1670 on Sundays at 1PM!
         It's a great way to get some experience developing websites, and looks excellent on your resume!

diff --git a/next/app/projects/ProjectCard.tsx b/next/app/projects/ProjectCard.tsx
@@ -1,11 +1,20 @@
 import React from "react";
 import { Project } from "./projects";
+import Image from "next/image";
 
 const ProjectCard = ({logo, title, lead, contact, description, stack, progress}: Project) => {
   return (
     <div className="rounded-lg bg-base-100 w-10/12 py-8 px-12 mx-auto flex flex-row items-center content-center gap-10 my-10">
       {/* Left half */}
-      <img src={logo} />
+      <div className="flex justify-center items-center object-cover w-[400px] h-[240px] overflow-hidden">
+        <Image 
+          src={logo}
+          alt={title}
+          width={400}
+          height={240}
+          objectFit="cover"
+        />
+      </div>
 
       {/* Right half */}                                   
       <div>

diff --git a/next/app/projects/projects.ts b/next/app/projects/projects.ts
@@ -13,7 +13,7 @@ export interface Project{
 
 export const projectsData: Project[] = [
     {
-        logo: defaultImage,
+        logo: "/images/projects-5.jpg",
         title: "Project 1",
         lead: "lead 1",
         contact: "lead1@email.com",
@@ -22,15 +22,15 @@ export const projectsData: Project[] = [
         progress: "In Progress"
     },
     {
-        logo: defaultImage,
+        logo: "/images/projects-3.jpg",
         title: "Project 2",
         lead: "Lead 2",
         contact: "lead2@email.com",
         description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, aliquid. Laudantium veritatis veniam praesentium nesciunt facilis quod quam nihil labore perferendis, qui molestiae ad quibusdam magnam consequatur tempore, hic minus!",
         progress: "Conceptualization"
     },
     {
-        logo: defaultImage,
+        logo: "/images/projects-4.jpg",
         title: "Project 3",
         lead: "Lead 3",
         contact: "lead3@email.com",

diff --git a/next/public/images/projects-5.jpg b/next/public/images/projects-5.jpg