Features/workshop page #37

andrewtarnavsky · 2024-03-26T21:46:33Z

Workshop Page

Added Workshops from last year as a template to update later when this years workshops are out and ready.

Created an array for workshop info and added pics for each workshop.

Mapped out all workshops and added a card and modal styling as well as a hover effect

Added the nav bar and footer to the page and changed up some fonts and colors.

Added transition effects to the detailed view when entering and exiting. Changed the font color of the workshop property strings, as well as the detailed view background color, and all other text inside the detailed view to white.

Updated the hover effect to also change the background opacity of the card so that it darkens when hovering over it.

Updated to use NextImage and fixed problem where the aspect ratios of each image werent the same

CooperW824 · 2024-04-02T20:23:55Z

pages/Workshops.tsx

+import workshopMern from "./../public/workshopPics/mern.png";
+import workshopPassword from "./../public/workshopPics/password.jpeg";
+import workshopHacking from "./../public/workshopPics/hacking.jpeg";
+import workshopSafety from "./../public/workshopPics/safety.jpeg";
+import workshopDesign from "./../public/workshopPics/design.jpeg";
+import workshopAI from "./../public/workshopPics/ai.jpeg";
+import workshopAgile from "./../public/workshopPics/agile.jpeg";
+import workshopForge from "./../public/workshopPics/forge.png";
+import workshopMobdev from "./../public/workshopPics/mobdev.png";
+import workshopQuantum from "./../public/workshopPics/quantum.png";
+import workshopSemi from "./../public/workshopPics/semi.jpeg";
+import workshopTechstack from "./../public/workshopPics/techstack.jpeg";


Can you remove this and use NextImage's picture loading from URL like you did for the meet the team page?

CooperW824 · 2024-04-02T20:24:17Z

pages/Workshops.tsx

@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useRef } from "react";


Suggested change

import React, { useState, useEffect, useRef } from "react";

import React, { useState } from "react";

CooperW824 · 2024-04-02T20:25:00Z

pages/Workshops.tsx

+	description: string;
+}
+
+const workshops = [


Can you move this to a JSON file in the public folder? I think that is a better place for information like this.

CooperW824 · 2024-04-02T20:31:17Z

pages/Workshops.tsx

+			<style>{`
+                .workshop-container {
+                    transition: transform 0.3s ease; /* Original transition */
+                    position: relative;
+                }
+
+                .workshop-container:hover .bg-overlay {
+                    background-color: rgba(34, 34, 34, 0.7); /* Darker background color */
+                }
+
+                .bg-overlay {
+                    position: absolute;
+                    inset: 0;
+                    background-color: rgba(34, 34, 34, 0); /* Initial background color */
+                    transition: background-color 0.4s ease; /* Background color transition */
+                    pointer-events: none;
+                    z-index: -1; /* Ensure the overlay is behind the content */
+                }
+
+                .image-container {
+                    width: 100%;
+                    padding-top: 60.25%; /* 16:9 aspect ratio (more rectangular) */
+                    position: relative;
+                    overflow: hidden;
+                }
+            `}</style>


Can you convert this to TailwindCSS? For some of those more arbitrary values check out how to use arbitrary values in Tailwind. Arbitrary Values

CooperW824 · 2024-04-02T20:32:18Z

pages/Workshops.tsx

+				<br />
+				<br />
+				<br />
+				<br />
+				<br />


this is really bad practice, can you find another way to do this maybe using margin or padding?

CooperW824 · 2024-04-02T20:32:54Z

pages/Workshops.tsx

+				<br />
+				<br />
+				<h1 className="font-helvetica text-white text-6xl mb-10 text-center">Checkout our Workshops!</h1>
+				<br />


Also see if you can replace this, you shouldn't use <br> for padding.

CooperW824 · 2024-04-02T20:33:57Z

pages/Workshops.tsx

+
+                .image-container {
+                    width: 100%;
+                    padding-top: 60.25%; /* 16:9 aspect ratio (more rectangular) */


there is a better way to do this using CSS Aspect Ratio

.foo{ aspect-ratio: 16 / 9; }

Tailwind supports this too with aspect-video

CooperW824 · 2024-04-02T20:35:55Z

pages/Workshops.tsx

+				<br />
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-16">
+					{workshops.map((workshop, index) => (
+						<div key={index} className="mb-8 relative">


This div feels unnecessary

CooperW824 · 2024-04-02T20:37:03Z

pages/Workshops.tsx

+							<div className="cursor-pointer" onClick={() => handleShow(workshop)}>
+								<div className="group relative">
+									<div className="workshop-container rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105">
+										<div className="bg-overlay"></div>


This div might also be uncessary and you can move this css to other divs.

CooperW824 · 2024-04-02T20:41:26Z

pages/Workshops.tsx

+					>
+						<h2 className="text-2xl font-bold mb-4">{selectedWorkshop.title}</h2>
+						<p>
+							<strong className="text-green-200 font-bold">Time:</strong>{" "}


can you use one of the HackRPI colors for these text segments maybe the light-blue or light-green?

CooperW824 · 2024-04-02T20:42:08Z

pages/Workshops.tsx

+										<div className="bg-transparent p-4 text-center">
+											<h2 className="text-white">{workshop.title}</h2>
+											<p className="text-sm">
+												<span className="text-green-200 font-bold">Time:</span>{" "}


same with these text segments, can you change the text color?

CooperW824 · 2024-04-02T20:46:35Z

pages/Workshops.tsx

+				<br />
+				<h1 className="font-helvetica text-white text-6xl mb-10 text-center">Checkout our Workshops!</h1>
+				<br />
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-16">


This is a bit jarring to go from 1 col to 3 cols maybe add a sm:grid-cols-2?

CooperW824

Overall, this looks pretty good so far, there are some small changes to make just to improve code clarity and design. Thank you!

Changed pics from being statically loaded to using the Next Image component.

…wn file

…rpi made colors.

… into features/WorkshopPage

…ackRPI-Website-2024 into features/WorkshopPage

… into features/WorkshopPage

…ackRPI-Website-2024 into features/WorkshopPage

-- Added Different Colors for Different types of events

…ackRPI-Website-2024 into features/WorkshopPage

andrewtarnavsky and others added 9 commits March 18, 2024 23:55

Started Workshop Page

5242f14

Created an array for workshop info and added pics for each workshop.

Added Workshop Page to Nav Bar

9acc8fa

Mapped out workshops

adcf2eb

Mapped out all workshops and added a card and modal styling as well as a hover effect

Added Footer and NavBar

a03260a

Added the nav bar and footer to the page and changed up some fonts and colors.

Styled the Detailed View

1a675bd

Added transition effects to the detailed view when entering and exiting. Changed the font color of the workshop property strings, as well as the detailed view background color, and all other text inside the detailed view to white.

Styled the card component

cc0b636

Updated the hover effect to also change the background opacity of the card so that it darkens when hovering over it.

Fixed some issues

ebcb91c

Updated to use NextImage and fixed problem where the aspect ratios of each image werent the same

Updated Transition Time

25fbe72

Prettified Code!

df824f7

CooperW824 reviewed Apr 2, 2024

View reviewed changes

CooperW824 requested changes Apr 2, 2024

View reviewed changes

andrewtarnavsky and others added 8 commits April 24, 2024 20:59

Optimization

dfe3b53

Changed pics from being statically loaded to using the Next Image component.

Removed unnecessary dependencies and moved the workshop info to its o…

8a3a65f

…wn file

Fixed a problem with column structure and changed font colors to hack…

a8c82f3

…rpi made colors.

Merge branch 'main' of https://github.com/hack-rpi/HackRPI-Website-2024…

7bc6ec3

… into features/WorkshopPage

Prettified Code!

7b4a624

Were replacing the workshop page

6b97860

Remove workshop page

6906187

Backend is probably done for now

2aa4165

CooperW824 and others added 28 commits June 7, 2024 15:56

Director Portal Done!

5de9dd1

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

25ec789

…ackRPI-Website-2024 into features/WorkshopPage

sort events after an event is updated

7b01352

remove the hackathonId because its not needed

5c64042

starting the schedule page, still a lot of work to do here

f11217f

Prettified Code!

bc6616a

happening now section is done

daa387f

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

9a8dd61

…ackRPI-Website-2024 into features/WorkshopPage

Prettified Code!

0baf78e

re-adding the visibility filter

8a36492

Prettified Code!

e0a0291

Merge branch 'main' of https://github.com/hack-rpi/HackRPI-Website-2024…

cafee2d

… into features/WorkshopPage

The calendar component is making good progress

3f4b4f6

Prettified Code!

95e59c1

Schedule V1

172e7b3

Remove Unused Workshop Pictures

d5fddc1

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

0065c79

…ackRPI-Website-2024 into features/WorkshopPage

Prettified Code!

dd90c99

Minor Schedule Updates

6ccf2d1

-- Added Different Colors for Different types of events

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

6289625

…ackRPI-Website-2024 into features/WorkshopPage

Prettified Code!

e683050

minor fixes

f9c40bf

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

1b67bfe

…ackRPI-Website-2024 into features/WorkshopPage

Prettified Code!

37c51b0

last few fixes

afd4f7c

Merge branch 'features/WorkshopPage' of https://github.com/hack-rpi/H…

8997e9d

…ackRPI-Website-2024 into features/WorkshopPage

gh action fix

497cdc4

Prettified Code!

173b3d1

CooperW824 merged commit 79391b9 into main Jun 23, 2024

CooperW824 deleted the features/WorkshopPage branch September 3, 2024 13:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Features/workshop page #37

Features/workshop page #37

andrewtarnavsky commented Mar 26, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024 •

edited

Loading

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024 •

edited

Loading

CooperW824 Apr 2, 2024

CooperW824 Apr 2, 2024

CooperW824 left a comment

		@@ -0,0 +1,312 @@
		import React, { useState, useEffect, useRef } from "react";

	import React, { useState, useEffect, useRef } from "react";
	import React, { useState } from "react";

Features/workshop page #37

Features/workshop page #37

Conversation

andrewtarnavsky commented Mar 26, 2024

Workshop Page

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CooperW824 Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CooperW824 Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CooperW824 left a comment

Choose a reason for hiding this comment

CooperW824 Apr 2, 2024 •

edited

Loading

CooperW824 Apr 2, 2024 •

edited

Loading