-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
components/Navbar.js: Make navbar work by upping z-values, replace sp…
…ecialized headers with Header component
- Loading branch information
Showing
9 changed files
with
162 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // assets/index.js | ||
| const images = {}; | ||
|
|
||
| function importAll(r) { | ||
| r.keys().forEach((key) => (images[key.replace("./", "")] = r(key))); | ||
| } | ||
|
|
||
| importAll(require.context("./", false, /\.(png|jpe?g|svg)$/)); | ||
|
|
||
| export default images; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from "react"; | ||
| import background from "../assets/hawaii_resting.jpg"; | ||
| import Navbar from "../components/Navbar"; | ||
|
|
||
| function Header({ title, subTitle }) { | ||
| return ( | ||
| <header | ||
| className="relative h-[667px] bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `url('${background}')`, | ||
| backgroundColor: "rgba(0, 0, 0, 0.5)", | ||
| backgroundBlendMode: "darken", | ||
| }} | ||
| > | ||
| <div className="relative z-10"> | ||
| <Navbar /> | ||
| </div> | ||
| <div className="absolute inset-0 flex flex-col justify-center items-center text-white"> | ||
| <h1 className="text-7xl font-bold">{title}</h1> | ||
| {subTitle && <h2 className="text-3xl font-bold">{subTitle}</h2>} | ||
| </div> | ||
| </header> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, {useState} from "react"; | ||
| import Header from "../components/Header"; | ||
|
|
||
| import assets from "../assets"; | ||
|
|
||
| const ImageSection = () => { | ||
| return ( | ||
| <section className="relative max-w-6xl mx-auto py-8"> | ||
| <div className="flex justify-center"> | ||
| <img src={assets["teams.jpg"]} alt="teams" className="w-full object-relative rounded-lg h-relative" /> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| const ImageGrid = ({ openModal }) => { | ||
| const images = [ | ||
| { src: 'boat.jpg', alt: 'Boat at Sea' }, | ||
| { src: 'navigator.jpg', alt: 'Boat Preparing' }, | ||
| { src: 'navigatorams.jpg', alt: 'Testing Equipment' }, | ||
| { src: 'person.jpg', alt: 'Teamwork' }, | ||
| { src: 'hawaii_stc.jpg', alt: 'Teamwork' }, | ||
| { src: 'hawaii_dock.jpg', alt: 'Teamwork' }, | ||
| { src: 'boat_at_alumni_event-min.jpg', alt: 'Teamwork' }, | ||
| { src: 'dec_2015_trial.jpg', alt: 'Teamwork' }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <section className="max-w-6xl mx-auto py-8 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> | ||
| {images.map((image, index) => ( | ||
| <div key={index} className="relative"> | ||
| <img | ||
| src={assets[image.src]} | ||
| alt={image.alt} | ||
| className="w-full object-cover h-[200px] rounded-lg cursor-pointer" | ||
| onClick={() => openModal(assets[image.src])} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| const Modal = ({ modalSrc, isVisible, closeModal }) => { | ||
| return ( | ||
| <div | ||
| id="modal" | ||
| className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-75 ${isVisible ? '' : 'hidden'}`} | ||
| > | ||
| <span className="absolute top-10 right-10 text-white text-3xl cursor-pointer" onClick={closeModal}> | ||
| × | ||
| </span> | ||
| <img alt="modal" src={modalSrc} className="max-w-full max-h-full object-contain" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const PhotosPage = () => { | ||
| // This function shows hidden lines | ||
| const [modalSrc, setModalSrc] = useState(''); | ||
| const [isModalVisible, setIsModalVisible] = useState(false); | ||
|
|
||
| // Open the modal and set the image source | ||
| const openModal = (src) => { | ||
| setModalSrc(src); | ||
| setIsModalVisible(true); | ||
| }; | ||
|
|
||
| // Close the modal | ||
| const closeModal = () => { | ||
| setIsModalVisible(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bg-gray-300" style={{ fontFamily: "Inter, sans-serif" }}> | ||
| <div className="relative"> | ||
| <Header title="Photos" /> | ||
| </div> | ||
| <section className="pt-20 pb-5 bg-gray-300"> | ||
| <ImageSection /> | ||
| <ImageGrid openModal={openModal} /> | ||
| <Modal modalSrc={modalSrc} isVisible={isModalVisible} closeModal={closeModal} /> | ||
| </section> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PhotosPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters