all files include the proper width and height dimensions (currently u…

…sing the ='' format)
CodeWithAloha · Sep 20, 2023 · f023d4b · f023d4b
1 parent ed32e95
commit f023d4b
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 8 deletions.
diff --git a/src/components/Clients.js b/src/components/Clients.js
@@ -14,11 +14,15 @@ const Clients = () => {
         <Image
           alt='Hawaii Zoning Atlus'
           src="./assets/projectsAssets/client1.png"
+          width='500'
+          height='500'
           className="h-full  w-1/3 lg:w-1/4 "
         />
         <Image
           alt='The Civil Beat - Law Center For Public Interest'
           src="./assets/projectsAssets/client2.png"
+          width='500'
+          height='500'
           className="h-full w-1/3 lg:w-1/4 "
         />
       </div>

diff --git a/src/components/HomePage.js b/src/components/HomePage.js
@@ -9,7 +9,7 @@ const HomePage = () => {
       <NavBar />
       <div className="max-h-full flex items-center justify-center flex-col lg:flex-row">
         <div className="scale-[80%]  2xl:scale-90 xl:pl-20 flex flex-col items-center">
-          <Image alt='' src="hero-image.png" className="w-full max-w-[900px] animate-float" />
+          <Image alt='' src="hero-image.png" width='1300' height='1300' className="w-full max-w-[900px] animate-float" />
           <div className='w-1/3 h-4 mt-12 rounded-full blur-2xl bg-gradient-to-t bg-black'></div>
         </div>
 

diff --git a/src/components/Logo.js b/src/components/Logo.js
@@ -11,6 +11,8 @@ const Logo = () => {
         <Image
           alt='Code with Aloha logo'
           src="../logo.png"
+          width='500'
+          height='500'
           className="xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"
         />
       </Link>

diff --git a/src/components/OurFocus.js b/src/components/OurFocus.js
@@ -6,7 +6,7 @@ const TextBlock = ({ src, alt, title, text, className = "" }) => {
     <div
       className={`flex items-center justify-between gap-10 px-4 lg:px-10 flex-col xl:flex-row ${className}`}
     >
-      <Image src={src} alt={alt} className="h-100 xl:p-10 pt-20" />
+      <Image src={src} alt={alt} width={width} height={height} className="h-100 xl:p-10 pt-20" />
       <div className="max-w-lg">
         <h4 className="xl:text-5xl text-3xl font-semibold mb-10 text-center font-satisfy">
           {title}
@@ -31,6 +31,8 @@ const OurFocus = () => {
         <TextBlock
           src="./assets/meet.png"
           alt="meet illustration"
+          width='500'
+          height='283'
           title="Meet new people"
           text="Meet supportive people like you who care. If you are passionate
               about helping others, Code With Aloha is perfect to support you."
@@ -39,6 +41,8 @@ const OurFocus = () => {
         <TextBlock
           src="./assets/progress.png"
           alt="make an impact illustration"
+          width='500'
+          height='266'
           title="Make a Difference"
           text="Make a difference contributing to Hawaiian social impact projects.
               Leverage technology to help organizations solve problems."
@@ -48,6 +52,8 @@ const OurFocus = () => {
         <TextBlock
           src="./assets/experience.png"
           alt="gain experience illustration"
+          width='500'
+          height='215'
           title="Gain Experience"
           text="Gain experience as a beginner, pay it forward as a mentor. We help
               each other grow and together we make a difference in our

diff --git a/src/components/Projects.js b/src/components/Projects.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Image from 'next/image'
 import HistoricalProjects from "./HistoricalProjects";
 import Clients from "./Clients";
+import { headers } from "next/dist/client/components/headers";
 
 
 export const ProjectCard = ({ src, title, text, className = "" , handleClick}) => {
@@ -11,7 +12,7 @@ export const ProjectCard = ({ src, title, text, className = "" , handleClick}) =
      "
       onClick={handleClick}
     >
-      <Image src={src} alt={alt} className={`${className}  w-2/3 rounded-lg`} />
+      <Image src={src} alt={alt} width={width} height={height} className={`${className}  w-2/3 rounded-lg`} />
       <h5 className="font-semibold text-3xl py-6">{title} </h5>
       <p className=" w-3/5  text-md xl:text-xl">{text}</p>
     </div>
@@ -44,6 +45,8 @@ const Projects = () => {
       <Image
         alt=""
         src="./assets/projectsAssets/projects.png"
+        width='500'
+        headers='500'
         className="lg:h-40 h-24 mt-20"
       />
       <h2 className="text-4xl xl:text-7xl drop-shadow-xl text-center">
@@ -60,6 +63,8 @@ const Projects = () => {
         <ProjectCard
           src="./assets/projectsAssets/HawaiiZoningAtlas.png"
           alt="hawaii zoning atlas illustration"
+          width='1325'
+          height='985'
           title="Hawaii Zoning Atlas"
           text="An interactive map exploring how restrictive zoning laws can make it
             difficult to build diverse, affordable housing."
@@ -68,6 +73,8 @@ const Projects = () => {
         <ProjectCard
           src="./assets/projectsAssets/habitat-full.jpg"
           alt="habitat for humanity illustration"
+          width='1080'
+          height='1080'
           title="Habitat for Humanity"
           text=" A nonprofit organization that helps people
             in your community and around the world build or improve a place they
@@ -78,6 +85,8 @@ const Projects = () => {
         <ProjectCard
           src="./assets/projectsAssets/HIERR.png"
           alt="HIERR illustration"
+          width='1126'
+          height='873'
           title="HIERR"
           text="The HIERR Project aims to enable actions toward a more resilient,
             equitable, and sustainable economy."

diff --git a/src/components/Team.js b/src/components/Team.js
@@ -7,6 +7,9 @@ const TeamMember = ({ src, name }) => {
     <div className='flex flex-col justify-center m-8 text-center hover:scale-105'>
       <Image
         alt=''
+        width={width}
+        height={height}
+
         className='self-center  flex-shrink-0 w-32 h-32 mb-4 bg-center bg-cover rounded-full dark:bg-gray-500'
         src={src}
       />
@@ -39,10 +42,10 @@ const Team = () => {
       <h2 className='text-md xl:text-xl px-2'>codewithaloha@gmail.com</h2>{" "}
       <div className='container flex flex-col items-center justify-center  mx-auto pt-10 pb-20'>
         <div className='flex flex-row flex-wrap justify-center '>
-          <TeamMember src='./assets/TreyGordner.jpeg/' name='Trey Gordner' />
-          <TeamMember src='./assets/TylerChong.jpeg/' name='Tyler Chong' />
-          <TeamMember src='./assets/MikeAvendano.jpeg/' name='Mike Avendano' />
-          <TeamMember src='./assets/KurtMalley.jpeg/' name='Kurt Malley' />
+          <TeamMember width='450' height='450' src='./assets/TreyGordner.jpeg/' name='Trey Gordner' />
+          <TeamMember width='460' height='460' src='./assets/TylerChong.jpeg/' name='Tyler Chong' />
+          <TeamMember width='517' height='517' src='./assets/MikeAvendano.jpeg/' name='Mike Avendano' />
+          <TeamMember width='200' height='200' src='./assets/KurtMalley.jpeg/' name='Kurt Malley' />
         </div>
       </div>
     </>

diff --git a/src/components/WhatToExpect.js b/src/components/WhatToExpect.js
@@ -4,7 +4,7 @@ import Image from 'next/image'
 const TextBlock =({src, title, text}) => {
     return (
       <div className=" flex-1 h-12 flex items-center flex-col ">
-        <Image alt='' src={src} className="h-12" />
+        <Image alt='' src={src} width={width} height={height} className="h-12" />
         <h5
           className="font-extrabold py-8 text-transparent lg:text-3xl text-xl
           font-montserat bg-clip-text bg-gradient-to-r from-red-400 to-yellow-400"
@@ -29,6 +29,8 @@ const WhatToExpect = () => {
       <div className="flex gap-10 flex-col xl:flex-row lg:pb-40">
         <TextBlock
           src="./assets/one.png"
+          width='500'
+          height='500'
           title="Meet & Greet"
           text="We start each meeting with a land acknowledgement, Code for
             Americaʻs Code of Conduct, and a full round of introductions
@@ -38,6 +40,8 @@ const WhatToExpect = () => {
 
         <TextBlock
           src="./assets/two.png"
+          width='500'
+          height='500'
           title="Debrief on projects and announcements"
           text="  We will share key milestones, updates, and blockers on projects as
             well as relevant news from Code for America including participating
@@ -49,6 +53,8 @@ const WhatToExpect = () => {
 
         <TextBlock
           src="./assets/three.png"
+          width='500'
+          height='500'
           title="Participate in breakout rooms"
           text="Each month the brigade selects a Focus Project that we all work on
             together as a brigade. We also work on developing several other