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.

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 added 3 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.

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

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

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

Are you sure you want to change the base?

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

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

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

CooperW824 Apr 2, 2024 •

edited