diff --git a/nodejs/week2/.gitignore b/nodejs/week2/.gitignore new file mode 100644 index 00000000..b512c09d --- /dev/null +++ b/nodejs/week2/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/nodejs/week3/.gitignore b/nodejs/week3/.gitignore new file mode 100644 index 00000000..1dcef2d9 --- /dev/null +++ b/nodejs/week3/.gitignore @@ -0,0 +1,2 @@ +node_modules +.env \ No newline at end of file diff --git a/react/react1/week1/.gitignore b/react/react1/week1/.gitignore new file mode 100644 index 00000000..3e161128 --- /dev/null +++ b/react/react1/week1/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +node_modules +.next +jsconfig.json +next.config.mjs +data \ No newline at end of file diff --git a/react/react1/week1/app/about_us/README.md b/react/react1/week1/app/about_us/README.md new file mode 100644 index 00000000..ee4b4656 --- /dev/null +++ b/react/react1/week1/app/about_us/README.md @@ -0,0 +1,47 @@ +# TASK 1 + +Let's finish the "About Us" page! + +## Content to use + +### Our Mission + +At Galactica, our mission is to unlock the wonders of the universe for everyone. We believe that space is the final frontier and that the opportunity to explore it should be within everyone’s reach. Our journeys are designed to inspire, educate, and provide a once-in-a-lifetime experience that transcends the ordinary. + +### Our Values + +Exploration: We are driven by a deep-seated desire to explore the unknown. We believe that the pursuit of discovery is at the heart of human nature, and we are committed to pushing the boundaries of what is possible. + +Innovation: At Galactica, we prioritize cutting-edge technology and innovation. We are constantly evolving our spacecraft, safety protocols, and services to ensure that our travelers experience the most advanced and secure space journeys available. + +Sustainability: We are committed to making space exploration sustainable for future generations. Our space missions are designed to minimize environmental impact, both on Earth and in space, and to foster a spirit of responsibility towards our universe. + +Community: We believe in the power of collective exploration. Our journeys are not just about reaching new destinations; they are about building a community of space enthusiasts who share a passion for the stars. + + +### Our Crew + +#### Description +Our crew is the heart and soul of Galactica. We are a diverse team of seasoned space explorers, engineers, and visionaries who are united by a common goal: to make space travel accessible and exciting for all. + +Captain Sarah Vega: A former NASA astronaut with over 15 years of experience, Captain Vega leads our missions with unparalleled expertise and a passion for space exploration. + +Dr. Leo Redding: Our chief astrophysicist, Dr. Redding, is a renowned scientist who has contributed to major space discoveries. He ensures that every journey is as educational as it is exhilarating. + +Chief Engineer Hana Lee: With her extensive background in aerospace engineering, Hana Lee is responsible for the state-of-the-art technology that powers our spacecraft. Her innovation ensures that our travelers are always in safe hands. + +Mission Specialist Alex Santos: As a mission specialist, Alex’s job is to ensure that every aspect of the journey runs smoothly. With a background in both science and adventure tourism, Alex is the perfect guide for our space travelers. + +Crew Member Maya Patel: Maya brings a unique blend of technical skills and customer service experience to the team. She’s always ready to assist with any needs and to make sure every traveler has an unforgettable experience. + +#### Content + +Use the content saved in the `/public/crew` folder! + +### Our Partners + +We collaborate with some of the most respected names in the space and technology industries to make every journey extraordinary. + +#### Content + +Use the content saved in the `/public/business_partners` folder! \ No newline at end of file diff --git a/react/react1/week1/app/about_us/ourCrew.js b/react/react1/week1/app/about_us/ourCrew.js new file mode 100644 index 00000000..cf0d5a1c --- /dev/null +++ b/react/react1/week1/app/about_us/ourCrew.js @@ -0,0 +1,56 @@ +import styles from "./page.module.css"; + +const crew = [ + { + img: "/crew/image-douglas-hurley.webp", + name: "Captain Douglas Hurley", + description: + "A former NASA astronaut with over 15 years of experience, Captain Douglas leads our missions with unparalleled expertise and a passion for space exploration.", + }, + { + img: "/crew/image-anousheh-ansari.webp", + name: "Chief Engineer Anousheh Ansari", + description: + "With her extensive background in aerospace engineering, Anousheh is responsible for the state-of-the-art technology that powers our spacecraft. Her innovation ensures that our travelers are always in safe hands.", + }, + { + img: "/crew/image-mark-shuttleworth.webp", + name: "Crew Member Mark Shuttleworth", + description: + "Mark brings a unique blend of technical skills and customer service experience to the team. He's always ready to assist with any needs and to make sure every traveler has an unforgettable experience", + }, + { + img: "/crew/image-victor-glover.webp", + name: "Mission Specialist Victor Glover", + description: + "As a mission specialist, Victor's job is to ensure that every aspect of the journey runs smoothly. With a background in both science and adventure tourism, Victor is the perfect guide for our space travelers.", + }, +]; + +const OurCrew = () => { + return ( +
+

Meet our talented crew

+

+ Our crew is the heart and soul of Galactica. We are a diverse team of + seasoned space explorers, engineers, and visionaries who are united by a + common goal: to make space travel accessible and exciting for all. +

+
+ {crew.map((member, index) => ( +
+ {member.name} +

{member.name}

+

{member.description}

+
+ ))} +
+
+ ); +}; + +export default OurCrew; diff --git a/react/react1/week1/app/about_us/ourPartners.js b/react/react1/week1/app/about_us/ourPartners.js new file mode 100644 index 00000000..b2e173e4 --- /dev/null +++ b/react/react1/week1/app/about_us/ourPartners.js @@ -0,0 +1,39 @@ +import styles from "@/app/about_us/page.module.css"; + +const partners = [ + { name: "alphabet", img: "/business_partners/alphabet-logo.png" }, + { name: "amazon", img: "/business_partners/amazon_logo.png" }, + { name: "cbc", img: "/business_partners/CBC_Logo_White.png" }, + { name: "microsoft", img: "/business_partners/Microsoft-Logo-white.png" }, + { name: "nyu", img: "/business_partners/nyu-logo.png" }, + { name: "queen", img: "/business_partners/QueensLogo_white.png" }, + { name: "samsung", img: "/business_partners/samsung-logo.png" }, + { name: "sodexo", img: "/business_partners/sodexo-logo.png" }, +]; + +const OurPartners = () => { + return ( +
+

OUR PARTNERS

+

+ We collaborate with some of the most respected names in the space and + technology industries to make every journey extraordinary. +

+
+ {partners.map((partner, index) => { + return ( +
+ {partner.name} +
+ ); + })} +
+
+ ); +}; + +export default OurPartners; diff --git a/react/react1/week1/app/about_us/ourValues.js b/react/react1/week1/app/about_us/ourValues.js new file mode 100644 index 00000000..0b6f0365 --- /dev/null +++ b/react/react1/week1/app/about_us/ourValues.js @@ -0,0 +1,28 @@ +const values = [ + { + number: "01", + title: "Exploration", + description: + "We are driven by a deep-seated desire to explore the unknown. We believe that the pursuit of discovery is at the heart of human nature, and we are committed to pushing the boundaries of what is possible.", + }, + { + number: "02", + title: "Innovation", + description: + "At Galactica, we prioritize cutting-edge technology and innovation. We are constantly evolving our spacecraft, safety protocols, and services to ensure that our travelers experience the most advanced and secure space journeys available.", + }, + { + number: "03", + title: "Sustainability", + description: + "We are committed to making space exploration sustainable for future generations. Our space missions are designed to minimize environmental impact, both on Earth and in space, and to foster a spirit of responsibility towards our universe", + }, + { + number: "04", + title: "Community", + description: + "We believe in the power of collective exploration. Our journeys are not just about reaching new destinations; they are about building a community of space enthusiasts who share a passion for the stars.", + }, +]; + +export default values; diff --git a/react/react1/week1/app/about_us/page.js b/react/react1/week1/app/about_us/page.js new file mode 100644 index 00000000..e4b49048 --- /dev/null +++ b/react/react1/week1/app/about_us/page.js @@ -0,0 +1,45 @@ +import styles from "./page.module.css"; +import values from "./ourValues"; +import OurCrew from "./ourCrew.js"; +import OurPartners from "./ourPartners"; + +const OurValues = () => { + return ( +
+

+ Our Values +

+
+ {values.map((value, index) => ( +
+ {value.number} +

{value.title}

+

{value.description}

+
+
+ ))} +
+
+ ); +}; + +export const Crew = () => { + return ( +
+
+

About us

+
+ +
+
+ +
+
+ +
+
+
+ ); +}; + +export default Crew; diff --git a/react/react1/week1/app/about_us/page.module.css b/react/react1/week1/app/about_us/page.module.css new file mode 100644 index 00000000..7f3d1cec --- /dev/null +++ b/react/react1/week1/app/about_us/page.module.css @@ -0,0 +1,134 @@ +.app { + background-color: black; + width: 100vw; + height: 100vh; +} + +.OurValues { + background-color: #121212; + color: #fff; + padding: 4rem 2rem; + text-align: center; +} +.OurValues h2 { + font-size: 1rem; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 2px; + opacity: 0.8; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + max-width: 900px; + margin: 0 auto; +} + +.card { + text-align: left; + padding: 2rem; + background-color: #1a1a1a; + border-radius: 8px; + position: relative; +} + +.number { + font-size: 3rem; + font-weight: bold; + display: block; + margin-bottom: 1rem; +} + +.title { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.description { + font-size: 1rem; + opacity: 0.8; +} + +.divider { + width: 100%; + height: 1px; + background-color: #333; + margin-top: 2rem; +} + +.card:hover { + transform: scale(1.02); + transition: transform 0.3s ease-in-out; +} + +.ourCrew { + padding: 2rem; + text-align: center; + background-color: #111; +} + +.ourCrew p { + padding: 2rem; +} + +.crewList { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + justify-items: center; +} + +.crewMember { + background-color: #f9f9f9; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease-in-out; + max-width: 250px; +} + +.crewMember:hover { + transform: scale(1.05); +} + +.crewImage { + width: 180px; + height: 180px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 10px; + align-self: center; +} + +.ourPartners { + background-color: #111; + padding: 50px; + color: white; +} + +.gridStyle { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 60px; + align-items: center; + justify-content: center; + padding: 50px; + text-align: center; +} + +.logoContainer { + display: flex; + align-items: center; + justify-content: center; + height: 100px; +} + +.imageStyle { + max-width: 120px; + max-height: 80px; + object-fit: contain; + filter: brightness(0) invert(1); +} diff --git a/react/react1/week1/app/destination/README.md b/react/react1/week1/app/destination/README.md new file mode 100644 index 00000000..58a9252d --- /dev/null +++ b/react/react1/week1/app/destination/README.md @@ -0,0 +1,13 @@ +## Descriptions for the planets + +### Europa +Europa, one of Jupiter’s moons, is an icy world with a hidden ocean beneath its surface. This mysterious moon is a prime candidate for the search for extraterrestrial life, making it a thrilling destination for space explorers. + +### Mars +Mars, the Red Planet, is a barren yet fascinating world with vast deserts, towering volcanoes, and the deepest canyon in the solar system. As humanity’s next frontier, Mars invites us to dream of colonization and the possibilities of life beyond Earth. + +### Moon +Our closest celestial neighbor, the Moon, is a silent witness to Earth's history. With its stunning craters and desolate landscapes, the Moon offers a unique glimpse into space exploration's past and future, making it a perfect destination for lunar adventurers. + +### Titan +Titan, Saturn's largest moon, is a world of dense atmosphere and liquid methane lakes. This enigmatic moon is shrouded in a thick orange haze, concealing a landscape that is both alien and strangely familiar, beckoning explorers to uncover its secrets. \ No newline at end of file diff --git a/react/react1/week1/app/destination/page.js b/react/react1/week1/app/destination/page.js new file mode 100644 index 00000000..006037be --- /dev/null +++ b/react/react1/week1/app/destination/page.js @@ -0,0 +1,114 @@ +"use client"; + +import { useState } from 'react'; + +import styles from '@/components/destination/destination.module.css'; +import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; + +// TASK - React 1 week 2 +// Move this to its own file +const PlanetWishlistItem = ({ + name, + onRemove, + thumbnail, +}) => { + return ( +
+ + {name.toUpperCase()} + +
+ ); +} + + +export const Destinations = () => { + const [selectedPlanets, onAddPlanet] = useState([]); + + let isPlanetSelected = false; + let numberOfPlanets = 0; + + const onAddOrRemovePlanet = (name, index) => { + // TASK - React 1 week 2 + // Implement this function + // If you press the "ADD PLANET" the selected planet should display "SELECTED" + // And the counter should update, how many planets are selected (numberOfPlanets) + console.log(`You seleceted the following planet: ${name}, with the index of ${index}`); + } + + return ( +
+
+

Travel destinations

+
+

Wishlist

+ {/* TASK - React 1 week 2 */} + {/* Display the number Of selected planets */} + {/* Display the "no planets" message if it is empty! */} +

No planets in wishlist :(

+

You have {numberOfPlanets} in your wishlist

+ List coming soon after lesson 3! + + {/* STOP! - this is for week 3!*/} + {/* TASK - React 1 week 3 */} + {/* Import the AddWishlistItem react component */} + {/* */} + {/* TASK - React 1 week 3 */} + {/* Convert the list, so it is using selectedPlanets.map() to display the items */} + {/* Implement the "REMOVE" function */} + {/* uncomment the following code snippet: */} + {/* +

Your current wishlist

+
+ removeFromWishlist('europa')} + thumbnail="/destination/image-europa.png" + /> + removeFromWishlist('europa')} + thumbnail="/destination/image-europa.png" + /> +
*/} +
+
+

Possible destinations

+ {/* TASK - React 1 week 2 */} + {/* Add all 4 planets! Europa, Moon, Mars, Titan */} + {/* Use the README.md file for descriptions */} + {/* Create a component, which accepts the following properties: */} + {/* name, description, thumbnail, isSelected, onAddOrRemovePlanet */} +
+ +
+

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

+

Lorem ipsum...

+
+ +
+
+ +
+

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

+

Lorem ipsum...

+
+ +
+
+
+
+ ); +} + +export default Destinations; diff --git a/react/react1/week1/app/favicon.ico b/react/react1/week1/app/favicon.ico new file mode 100644 index 00000000..53ae0d7b Binary files /dev/null and b/react/react1/week1/app/favicon.ico differ diff --git a/react/react1/week1/app/globals.css b/react/react1/week1/app/globals.css new file mode 100644 index 00000000..de0f6718 --- /dev/null +++ b/react/react1/week1/app/globals.css @@ -0,0 +1,217 @@ +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", + "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", + "Fira Mono", "Droid Sans Mono", "Courier New", monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-background-color: #000; + --primary-text-color: #fff; + --border-color: #eee; + --card-bg-color: rgba(100, 100, 100, 0.3); + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; + + --spacing-04: 0.25rem; + --spacing-08: 0.5rem; + --spacing-12: 0.75rem; + --spacing-16: 1rem; + --spacing-20: 1.25rem; + --spacing-24: 1.5rem; + --spacing-32: 2rem; + --spacing-40: 2.5rem; + --spacing-48: 3rem; + --spacing-64: 4rem; + + --font-size-3xl: 2.5rem; + --font-size-2xl: 2rem; + --font-size-xl: 1.5rem; + --font-size-lg: 1.25rem; + --font-size-md: 1rem; + --font-size-sm: 0.875rem; + --font-size-xs: 0.75rem; + --font-size-2xs: 0.6875rem; + --font-size-3xs: 0.625rem; + --font-size-base: 0.8125rem; + --font-size-jumbo: 3rem; + --font-size-huge: 2rem; + --font-size-large: 0.9375rem; + --font-size-lead: 0.875rem; + --font-size-small: 0.6875rem; + --font-size-tiny: 0.5625rem; + + --header-height: 100px; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} + +a { + color: inherit; + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + margin-block-end: var(--spacing-08); + color: var(--primary-text-color); +} + +p, b, i { + margin-block-end: var(--spacing-08); +} + +button { + cursor: pointer; + text-transform: uppercase; + padding: var(--spacing-08); + border: none; + background-color: white; + font-weight: 600; + letter-spacing: 2px; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} + +.mainContent { + max-width: var(--max-width); + margin: auto; + padding-block-start: var(--header-height); + color: #fff; +} + + +.card { + position: relative; + padding: var(--spacing-12); + margin: var(--spacing-16); +} + +.card::before { + background-color: var(--card-bg-color); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + backdrop-filter: blur(10px); +} + +.card > * { + position: relative; + z-index: 2; +} + +.roundButtonJumbo { + padding: unset; + height: 250px; + width: 250px; + min-height: 250px; + min-width: 250px; + line-height: 250px; + background-color: white; + border-radius: 50%; + font-size: 30px; + font-weight: 200; + letter-spacing: 4px; +} + +.roundButton { + padding: unset; + height: 100px; + width: 100px; + min-height: 100px; + min-width: 100px; + line-height: 100px; + cursor: pointer; + background-color: white; + border-radius: 50%; + font-size: 8px; + font-weight: 800; + letter-spacing: 3px; +} + +.fullBGpicture { + /* background: url('/destination/background-destination-desktop.jpg') no-repeat; */ + /* background-color: #000; */ + top: 0; + bottom: 0; + left: 0; + right: 0; + width: auto; + height: 100%; +} + +.fullBGpicture::before { + content: ""; + background: url('/destination/background-destination-desktop.jpg') no-repeat; + background-color: #000; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + position: fixed; + z-index: -1; +} + +.fullBGpicture > main { + overflow: auto; +} \ No newline at end of file diff --git a/react/react1/week1/app/layout.js b/react/react1/week1/app/layout.js new file mode 100644 index 00000000..1d6b9fba --- /dev/null +++ b/react/react1/week1/app/layout.js @@ -0,0 +1,29 @@ +import { Inter } from "next/font/google"; +import "./globals.css"; + +import { Navbar } from "@/components/ui/Navbar"; +import { Footer } from "@/components/ui/Footer"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata = { + title: "Galactica", + description: "Your space travel agency", +}; + +export const RootLayout = ({ children }) => { + return ( + + + + {children} + {/* TASK - React 1 week 1 */} + {/* Import and use the Footer component here */} +