Pending changes exported from your codespace

package.json

@@ -1,7 +1,7 @@
 {
   "name": "CWB Hackathon App",
   "version": "1.0.0",
-  "description": "Educator JS Codespace Template",
+  "description": "CWB Hackathon App",
   "source": "src/index.html",
   "homepage": "https://codess-aus.github.io/CWBHackathonApp/",
   "scripts": {
@@ -13,12 +13,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/microsoft/codespaces-teaching-template-js.git"
+    "url": "git+https://github.com/codess-aus/CWBHackathonApp.git"
   },
   "author": "Microsoft",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/microsoft/codespaces-teaching-template-js/issues"
+    "url": "https://github.com/codess-aus/CWBHackathonApp/issues"
   },
   "dependencies": {
     "react": "^18.2.0",

src/App.jsx

@@ -10,7 +10,7 @@ import About from "./Components/About";
 import Footer from "./Components/Footer";
 import Header from "./Components/Header";
 import Home from "./Components/Home";
-import Portfolio from "./Components/Portfolio";
+import Features from "./Components/Features";
 
 import "./styles.css";
 
@@ -44,7 +44,7 @@ const App = () => {
       <Header />
       <Home name={siteProps.name} title={siteProps.title} />
       <About />
-      <Portfolio />
+      <Features />
       <Footer {...siteProps} primaryColor={primaryColor} secondaryColor={secondaryColor} />
     </div>
   );

src/Components/Features.jsx

@@ -0,0 +1,87 @@
+/**
+ * Portfolio component
+ *
+ * Highlights some of  your creations. These can be designs, websites,
+ * open source contributions, articles you've written and more.
+ *
+ * This is a great area for you to to continually add to and refine
+ * as you continue to learn and create.
+ */
+
+import React from "react";
+
+/**
+ * Desk image
+ *
+ * Below is a sample desk image. Feel free to update this to an image of your choice,
+ * updating below imageAltText to string that represents what you see in that image.
+ *
+ * Need an image? Check out https://unsplash.com to download a photo you
+ * freely use on your site.
+ */
+import image from "../images/learningapp.png";
+
+const imageAltText = "image of our learning app";
+
+/**
+ * Project list
+ *
+ * An array of objects that will be used to display for your project
+ * links section. Below is a sample, update to reflect links you'd like to highlight.
+ */
+const projectList = [
+  {
+    title: "Cognitive Semantic Search",
+    description: "Rank courses according to what the user is interested in, grounded in user content.",
+    url: "https://learn.microsoft.com/en-us/azure/architecture/ai-ml/openai/idea/search-and-query-using-openai-service",
+    image: "https://raw.githubusercontent.com/codess-aus/CWBHackathonApp/main/src/images/semanticsearch.png", // replace with your image URL
+  },
+  {
+    title: "Vector Embeddings",
+    description: "Linking meaningful content and ideas",
+    url: "https://learn.microsoft.com/en-us/azure/ai-services/openai/tutorials/embeddings?tabs=python-new%2Ccommand-line&pivots=programming-language-python",
+    image: "https://raw.githubusercontent.com/codess-aus/CWBHackathonApp/main/src/images/designacharacter.png", // replace with your image URL
+  },
+  {
+    title: "Chat Avatar",
+    description: "Human-like avatars to interact with users in a more engaging way.",
+    url: "https://learn.microsoft.com/en-us/azure/ai-services/speech-service/text-to-speech-avatar/what-is-text-to-speech-avatar",
+    image: "https://raw.githubusercontent.com/codess-aus/CWBHackathonApp/main/src/images/character2.png", // replace with your image URL
+    // replace with your image URL
+  },
+  {
+    title: "Speaker Recognition",
+    description: "AI recognises speaker and interacts with them contextually.",
+    url: "https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speaker-recognition-overview",
+    image: "https://raw.githubusercontent.com/codess-aus/CWBHackathonApp/main/src/images/blockchain.png", // replace with your image URL
+  },
+];
+
+const Features = () => {
+  return (
+    <section className="padding" id="features">
+      <h2 style={{ textAlign: "center" }}>Features</h2>
+      <div style={{ display: "flex", flexDirection: "row", paddingTop: "3rem" }}>
+        <div style={{ maxWidth: "40%", alignSelf: "center" }}>
+          <img
+            src={image}
+            style={{ height: "90%", width: "100%", objectFit: "cover" }}
+            alt={imageAltText}
+          />
+        </div>
+        <div className="container">
+          {projectList.map((project) => (
+            <div className="box" key={project.title}>
+              <a href={project.url} target="_blank" rel="noopener noreferrer">
+                <h3 style={{ flexBasis: "40px" }}>{project.title}</h3>
+                <img src={project.image} alt={project.title} style={{ width: "100%", height: "auto" }} /> {/* Add this line */}
+              </a>
+              <p className="small">{project.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+export default Features;

src/Components/Header.jsx

@@ -23,7 +23,7 @@ const Header = () => {
     >
       <a href="#home">Home</a>
       <a href="#about">About</a>
-      <a href="#portfolio">Portfolio</a>
+      <a href="#features">Features</a>
       <a href="#footer">Contact</a>
     </div>
   );

src/Components/Home.bak

@@ -0,0 +1,52 @@
+/**
+ * Home component
+ *
+ * The section at the top of the page to display image of your
+ * choice, name and title that describes your career focus.
+ */
+
+import React from "react";
+import arrowSvg from "../images/down-arrow.svg";
+import PropTypes from "prop-types";
+
+/**
+ * Home background image
+ *
+ * Below is a sample image. Upload the image of your choice into the "images"
+ * directory and import here for use. Then, set imageAltText to string that 
+ * represents what you see in that image.
+ *
+ *
+ * Need an image? Check out https://unsplash.com to download a photo you
+ * freely use on your site.
+ */
+import image from "../images/CWB1.png";
+
+const imageAltText = "Code without Barriers Banner";
+
+const Home = ({ name, title }) => {
+  return (
+    <section id="home" className="min-height" style={{ overflow: 'visible' }}>
+      <img className="background" src={image} alt="" style={{ width: '100%', height: 'auto' }} />
+      <div style={{ position: "absolute", top: "5rem", left: "2rem", width: "17rem" }}>
+        <h1>{name}</h1>
+        <h2>{title}</h2>
+      </div>
+      <div style={{ position: "absolute", bottom: "3rem", left: "50%" }}>
+        <img src={arrowSvg} style={{ height: "3rem", width: "3rem" }} alt={imageAltText} />
+      </div>
+    </section>
+  );
+};
+
+Home.defaultProps = {
+  name: "",
+  title: "",
+};
+
+Home.propTypes = {
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default Home;

src/Components/Home.jsx

@@ -1,33 +1,14 @@
-/**
- * Home component
- *
- * The section at the top of the page to display image of your
- * choice, name and title that describes your career focus.
- */
-
 import React from "react";
 import arrowSvg from "../images/down-arrow.svg";
 import PropTypes from "prop-types";
-
-/**
- * Home background image
- *
- * Below is a sample image. Upload the image of your choice into the "images"
- * directory and import here for use. Then, set imageAltText to string that 
- * represents what you see in that image.
- *
- *
- * Need an image? Check out https://unsplash.com to download a photo you
- * freely use on your site.
- */
 import image from "../images/CWB1.png";
 
 const imageAltText = "Code without Barriers Banner";
 
 const Home = ({ name, title }) => {
   return (
-    <section id="home" className="min-height">
-      <img className="background" src={image} alt="" />
+    <section id="home" className="min-height" style={{ height: '100vh', overflow: 'hidden' }}>
+      <img className="background" src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
       <div style={{ position: "absolute", top: "5rem", left: "2rem", width: "17rem" }}>
         <h1>{name}</h1>
         <h2>{title}</h2>
@@ -49,4 +30,4 @@ Home.propTypes = {
   title: PropTypes.string.isRequired,
 };
 
-export default Home;
+export default Home;

src/Components/Portfolio.jsx

@@ -57,10 +57,10 @@ const projectList = [
   },
 ];
 
-const Portfolio = () => {
+const Features = () => {
   return (
-    <section className="padding" id="portfolio">
-      <h2 style={{ textAlign: "center" }}>Portfolio</h2>
+    <section className="padding" id="features">
+      <h2 style={{ textAlign: "center" }}>Features</h2>
       <div style={{ display: "flex", flexDirection: "row", paddingTop: "3rem" }}>
         <div style={{ maxWidth: "40%", alignSelf: "center" }}>
           <img
@@ -84,4 +84,4 @@ const Portfolio = () => {
     </section>
   );
 };
-export default Portfolio;
+export default Features;

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Educator JS Codespaces Template</title>
+    <title>CWB Hackathon App</title>
     <link rel="stylesheet" href="styles.css" />
 
   </head>