Skip to content

Commit

Permalink
Merge pull request #24 from CodeWithAloha/16-utilize-vercel-image-opt…
Browse files Browse the repository at this point in the history
…imizations

16 utilize vercel image optimizations
  • Loading branch information
Alexandra-Haynes committed Oct 4, 2023
2 parents 433d02c + c94db9b commit 3000e52
Show file tree
Hide file tree
Showing 38 changed files with 81 additions and 37 deletions.
Binary file added public/chicken.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/deliveredProjects.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/experience.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/experience.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/meet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/meet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/one.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/palm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/progress.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/progress.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/HIERR.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/HawaiiZoningAtlas.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/client1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/client2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/deliveredProjects.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/foodoasis.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/habitat-full.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/historicalprojects.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/projects.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projectsAssets/uipa.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/three.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/timeline-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/timeline-2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/timeline-3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/timeline-4.jpg
Binary file added public/timeline-5.jpg
Binary file added public/timeline-6.png
Binary file added public/timeline-7.png
Binary file added public/two.png
18 changes: 13 additions & 5 deletions src/components/Clients.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react'
import Image from 'next/image'


const Clients = () => {
return (
Expand All @@ -9,16 +11,22 @@ const Clients = () => {
</h2>

<div className="flex items-center justify-center pb-40">
<img
src="./assets/projectsAssets/client1.png"
<Image
alt='Hawaii Zoning Atlus'
src="/./assets/projectsAssets/client1.png"
width={500}
height={500}
className="h-full w-1/3 lg:w-1/4 "
/>
<img
src="./assets/projectsAssets/client2.png"
<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>
</div>
</div>
);
}

Expand Down
8 changes: 6 additions & 2 deletions src/components/HistoricalProjects.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ const HistoricalProjects = () => {
</h2>
<div className=" flex gap-10 flex-col xl:flex-row ">
<ProjectCard
src="./assets/projectsAssets/foodoasis.jpg"
src="/./assets/projectsAssets/foodoasis.jpg"
width={400}
height={300}
title="FOOD OASIS"
text="Resource for Community Food Help"
/>

<ProjectCard
src="./assets/projectsAssets/uipa.jpg"
src="/./assets/projectsAssets/uipa.jpg"
width={400}
height={300}
title="UIPA.ORG"
text="Publishes public records and request"
className="max-h-1/2"
Expand Down
3 changes: 2 additions & 1 deletion src/components/HomePage.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import Image from 'next/image'
import { FaMeetup } from "react-icons/fa";
import NavBar from './NavBar';

Expand All @@ -8,7 +9,7 @@ const HomePage = () => {
<NavBar />
<div className="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">
<img 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>

Expand Down
15 changes: 9 additions & 6 deletions src/components/Logo.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import Link from 'next/link'
import React from 'react'

import Link from 'next/link'
import Image from 'next/image'



const Logo = () => {
return (

<Link href="/" whileHover={{ scale: 1.5 }}>
<img
src="../logo.png"
className="xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"
></img>
<Image
alt='Code with Aloha logo'
src="/../public/logo.png"
width={500}
height={500}
className="w-full xl:max-h-24 max-h-[3rem] cursor-pointer m-2 hover:animate-pulse"
/>
</Link>

);
Expand Down
17 changes: 12 additions & 5 deletions src/components/OurFocus.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from "react";
import Image from 'next/image'

const TextBlock = ({ src, alt, title, text, className = "" }) => {
const TextBlock = ({ src, alt, width, height, title, text, className = "" }) => {
return (
<div
className={`flex items-center justify-between gap-10 px-4 lg:px-10 flex-col xl:flex-row ${className}`}
>
<img 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}
Expand All @@ -28,26 +29,32 @@ const OurFocus = () => {
Our focus{" "}
</h2>
<TextBlock
src="./assets/meet.png"
src="/./assets/meet.png"
alt="meet illustration"
width={500}
height={283}
title="Meet new people"
text="Build with, not for. We are a community of people who are passionate
about helping others. We are here to support each other and
build together."
/>

<TextBlock
src="./assets/progress.png"
src="/./assets/progress.png"
alt="make an impact illustration"
width={500}
height={266}
title="Make a Difference"
text="Nobody is coming to save us. It's up to us to impact our community and drive change.
We are the ones we've been waiting for. We are the change that we seek."
className="xl:flex-row-reverse"
/>

<TextBlock
src="./assets/experience.png"
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
Expand Down
30 changes: 21 additions & 9 deletions src/components/Projects.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useState } from "react";
import Image from 'next/image'
import HistoricalProjects from "./HistoricalProjects";
import Clients from "./Clients";


export const ProjectCard = ({ src, title, text, className = "", handleClick }) => {
export const ProjectCard = ({ src, alt, width, height, title, text, className = "" , handleClick}) => {
return (
<div
className="relative flex-1 flex items-center pb-8 flex-col text-center rounded-xl
"
onClick={handleClick}
>
<img src={src} 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>
Expand Down Expand Up @@ -43,9 +43,12 @@ const Projects = () => {
</div>
) : null}

<img
src="./assets/projectsAssets/projects.png"
className="lg:h-40 h-24 mt-20"
<Image
src="/./assets/projectsAssets/projects.png"
alt=""
width={500}
height={500}
className="lg:h-40 lg:w-40 h-24 mt-20"
/>
<h2 className="text-4xl xl:text-7xl drop-shadow-xl text-center">
Active projects
Expand All @@ -59,15 +62,21 @@ const Projects = () => {

<div className=" flex pt-10 gap-20 flex-col xl:flex-row">
<ProjectCard
src="./assets/projectsAssets/HawaiiZoningAtlas.png"
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."
handleClick={handleClick}
/>

<ProjectCard
src="./assets/projectsAssets/habitat-full.jpg"
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
Expand All @@ -77,7 +86,10 @@ const Projects = () => {
/>

<ProjectCard
src="./assets/projectsAssets/HIERR.png"
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."
Expand Down
3 changes: 2 additions & 1 deletion src/components/Team.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from "react";
import Image from 'next/image'
import { AiOutlineMail } from "react-icons/ai";

const TeamMember = ({ src, name }) => {
return (
<div className='flex flex-col justify-center m-8 text-center hover:scale-105'>
<img
<Image
alt=''
className='self-center flex-shrink-0 w-32 h-32 mb-4 bg-center bg-cover rounded-full dark:bg-gray-500'
src={src}
Expand Down
21 changes: 13 additions & 8 deletions src/components/WhatToExpect.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import Image from 'next/image'


const TextBlock =({src, title, text}) => {
const TextBlock =({src, width, height, title, text}) => {
return (
<div className=" flex-1 h-12 flex items-center flex-col ">
<img src={src} className="h-12" />
<Image src={src} alt='' width={width} height={height} className="h-12 w-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"
Expand All @@ -26,9 +26,11 @@ const WhatToExpect = () => {
What to expect at a meeting{" "}
</h4>

<div className="flex gap-10 flex-col xl:flex-row lg:pb-40">
<div className="flex gap-10 flex-col xl:flex-row lg:pb-40 ">
<TextBlock
src="./assets/one.png"
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
Expand All @@ -37,7 +39,9 @@ const WhatToExpect = () => {
/>

<TextBlock
src="./assets/two.png"
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
Expand All @@ -48,7 +52,9 @@ const WhatToExpect = () => {
/>

<TextBlock
src="./assets/three.png"
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
Expand All @@ -57,7 +63,6 @@ const WhatToExpect = () => {
milestones on the Focus Project or explore projects in our
Discovery Track."
/>


</div>

Expand Down

0 comments on commit 3000e52

Please sign in to comment.