Add YT video and execution demo

tamuGPT · May 1, 2024 · 91cd155 · 91cd155
1 parent a17d7f0
commit 91cd155
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 10 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -87,6 +87,25 @@ a:hover {
     font-weight: 600;
 }
 
+.report-item {
+    margin-top: 3em;
+    margin-bottom: 3em;
+}
+
+.video-container {
+    text-align: center;
+}
+
+.video-container iframe {
+    width: 80%;
+    aspect-ratio: 16 / 9;
+}
+
+.video-container video {
+    width: 80%;
+    height: 100%;
+}
+
 @media only screen and (max-width: 800px) {
     .container {
         max-width: 75vw;
@@ -101,6 +120,16 @@ a:hover {
     .team-member-name {
         font-size: 12px;
     }
+
+    .video-container iframe {
+        width: 90%;
+        aspect-ratio: 16 / 9;
+    }
+
+    .video-container video {
+        width: 90%;
+        height: 100%;
+    }
 }
 
 @media only screen and (max-width: 500px) {

diff --git a/assets/execution-demo.mov b/assets/execution-demo.mov
diff --git a/assets/slide-deck.pdf b/assets/slide-deck.pdf
diff --git a/index.html b/index.html
@@ -66,20 +66,51 @@ <h1 style="text-align: center;">tamuGPT</h1>
 
     </div>
 
-    <h2>Overview</h2>
-    <p>tamuGPT is a sophisticated chatbot from Texas A&M, implemented with Retrieval Augmented Generation (RAG) architecture.</p>
+    <div class="report-item">
+        <h2>Overview</h2>
+        <p>tamuGPT is a sophisticated chatbot from Texas A&M, implemented with Retrieval Augmented Generation (RAG) architecture.</p>
+    </div>
 
-    <h2>GitHub Repository</h2>
-    <p><a href="https://github.com/tamuGPT/tamuGPT/" target="_blank">GitHub Link</a></p>
+    <div class="report-item">
+        <h2>Additional Information</h2>
+        <p>[Include any additional information about your project beyond what is covered in the video. This could include key features, technologies used, challenges faced, and any future plans or improvements.]</p>
+    </div>
 
-    <h2>Video Presentation</h2>
-    <p><a href="https://youtu.be/1yWEv_qu_Ek" target="_blank">Watch Video</a></p>
+    <div class="report-item">
+        <h2>GitHub Repository</h2>
+        <p><a href="https://github.com/tamuGPT/tamuGPT/" target="_blank">GitHub Link</a></p>
+    </div>
 
-    <h2>Additional Information</h2>
-    <p>[Include any additional information about your project beyond what is covered in the video. This could include key features, technologies used, challenges faced, and any future plans or improvements.]</p>
+    <div class="report-item">
+        <h2>Video Presentation</h2>
+        <div class="video-container">
+            <iframe
+                    src="https://www.youtube.com/embed/1yWEv_qu_Ek?si=pmLpyXE4qtMODCbr"
+                    title="YouTube video player"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    allowfullscreen>
+            </iframe>
+            <p><a href="https://youtu.be/1yWEv_qu_Ek" target="_blank">Watch Video on YouTube</a></p>
+        </div>
+    </div>
 
-    <h2>Slides</h2>
-    <p>[If you have prepared slides, you can insert them here.]</p>
+    <div class="report-item">
+        <h2>Execution Demo</h2>
+        <div class="video-container">
+            <video controls>
+                <source src="./assets/execution-demo.mov" type="video/mp4">
+                Your browser does not support HTML video.
+            </video>
+            <p><a href="./assets/execution-demo.mov" target="_blank">Download Video</a></p>
+        </div>
+    </div>
+
+    <div class="report-item">
+        <h2>Slides</h2>
+        <p><a href="./assets/slide-deck.pdf" target="_blank">Open Slide Deck</a></p>
+    </div>
 
 </div>