Upgrades (#57)

* remove about page Signed-off-by: cbh778899 <[email protected]> * split home into smaller parts Signed-off-by: cbh778899 <[email protected]> * edit links Signed-off-by: cbh778899 <[email protected]> * add loading animation Signed-off-by: cbh778899 <[email protected]> * adjust mobile view screen width Signed-off-by: cbh778899 <[email protected]> --------- Signed-off-by: cbh778899 <[email protected]>
SkywardAI · Sep 27, 2024 · 82d48e2 · 82d48e2
1 parent 5b5d10b
commit 82d48e2
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 128 deletions.
diff --git a/src/components/About.jsx b/src/components/About.jsx
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -3,9 +3,8 @@ import {
     RouterProvider,
 } from "react-router-dom";
 
-import Home from "./Home"
+import Home from "./home"
 import Navigator from "./Navigator";
-import About from "./About";
 import Chat from "./chat";
 import Projects from "./Projects";
 
@@ -20,10 +19,6 @@ function App() {
                     path: '/',
                     element: <Home />
                 },
-                {
-                    path: 'about',
-                    element: <About />
-                },
                 {
                     path: 'projects',
                     element: <Projects />

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
diff --git a/src/components/Navigator.jsx b/src/components/Navigator.jsx
@@ -15,11 +15,15 @@ export default function Navigator() {
                     <div>SkywardAI</div>
                 </Link>
                 <div className={`links${expandMenu?" expanded":""}`}>
-                    <Link onClick={()=>toggleExpand(false)} to={'/about'} className="link">About</Link>
-                    <Link onClick={()=>toggleExpand(false)} to={'/projects'} className="link">Projects</Link>
-                    <Link onClick={()=>toggleExpand(false)} to={'/chat'} className="link">Chat</Link>
-                    <Link onClick={()=>toggleExpand(false)} to={'/'} className="link">Collaborators</Link>
-                    <Link onClick={()=>toggleExpand(false)} to={'/'} className="link">Links</Link>
+                    {/* <Link onClick={()=>toggleExpand(false)} to={'/about'} className="link">About</Link> */}
+                    <Link onClick={()=>toggleExpand(false)} to={'/projects'} className="link clickable">Projects</Link>
+                    <Link onClick={()=>toggleExpand(false)} to={'/chat'} className="link clickable">Try AI Chat</Link>
+                    {/* <Link onClick={()=>toggleExpand(false)} to={'/'} className="link">Collaborators</Link> */}
+                    {/* <div className="link clickable">More Links</div> */}
+                    <Link to={'https://github.com/skywardai'} target="_blank" rel="noopener noreferrer" className="link clickable">Our GitHub</Link>
+                    <Link to={'https://www.kaggle.com/aisuko'} target="_blank" rel="noopener noreferrer" className="link clickable">Our Kaggle</Link>
+                    <Link to={'https://huggingface.co/aisuko'} target="_blank" rel="noopener noreferrer" className="link clickable">Our HuggingFace</Link>
+
                 </div>
                 <List className="hamburger-menu clickable" onClick={()=>toggleExpand(!expandMenu)} />
             </div>

diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { projects } from "../utils/types";
 import Markdown from 'react-markdown'
 import { useRef } from "react";
-import { ChevronLeft, ChevronRight } from "react-bootstrap-icons";
+import { ArrowRepeat, ChevronLeft, ChevronRight } from "react-bootstrap-icons";
 
 export default function Projects() {
     const [ readme_list, setReadmeList ] = useState([]);
@@ -26,8 +26,6 @@ export default function Projects() {
                         .replace(/\$\\rightarrow\$/g, '&rarr;')
                         .replace(/(<!-- .* -->)/g, '')
                     );
-                } else {
-                    //
                 }
             }
             setReadmeList(readmes)
@@ -60,13 +58,15 @@ export default function Projects() {
             </div>
             <div className="readmes" ref={readme_ref}>
             {
+                readme_list.length ? 
                 readme_list.map((readme, index )=>{
                     return (
                         <div className="readme" key={`readme-${index}`} id={`readme-${index}`}>
                             <Markdown>{ readme }</Markdown>
                         </div>
                     )
-                })
+                }):
+                <ArrowRepeat className="loading" />
             }
             </div>
         </div>

diff --git a/src/components/home/Customers.jsx b/src/components/home/Customers.jsx
@@ -0,0 +1,7 @@
+export default function Customers() {
+    return (
+        <section className="customers">
+            <div className="title">Our Customers</div>
+        </section>
+    )
+}
diff --git a/src/components/home/Projects.jsx b/src/components/home/Projects.jsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { projects } from "../../utils/types";
+import { Link } from "react-router-dom";
+
+export default function Projects() {
+
+    const [display_project, setDisplayProject] = useState(Object.keys(projects)[0]);
+
+    return (
+        <section className="projects">
+        <div className="title">Checkout our projects</div>
+        <div className="project-view">
+            <div className="tickets">
+                {
+                    Object.keys(projects).map(name=>{
+                        return (
+                            <div 
+                                className={`ticket clickable${(display_project===name&&' selected')||""}`}
+                                key={`project-${name}`} onClick={()=>setDisplayProject(name)}
+                            >
+                                <div className="bg">{name}</div>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+            {Object.keys(projects).map(project=>{
+                const { badges, description, urls, images, videos } = projects[project];
+                return (
+                    <div className={`details${(display_project===project&&" show")||""}`} key={`project-details-${project}`}>
+                        <div className="title">{project}</div>
+                        <div className="badges">
+                            {
+                                badges && badges.map((badge, index)=>{
+                                    return <img key={`${project}-badge-${index}`} src={badge} alt="badge" />
+                                })
+                            }
+                        </div>
+                        <div className="description">{description}</div>
+                        <div className="urls">
+                            {urls && urls.map(({name, url})=>{
+                                return (
+                                    <Link 
+                                        key={`${project}-url-${name}`} 
+                                        to={url} target="_blank" className="url"
+                                    >{name}</Link>
+                                )
+                            })}
+                        </div>
+                        {videos && videos.map((url, index) => <video src={url} controls key={`${project}-video-${index}`}/>)}
+                        <div className="images">
+                            { images && images.map((url, index) => <img src={url} alt="" key={`${project}-img-${index}`} />) }
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+        </section>
+    )
+}
diff --git a/src/components/home/Welcome.jsx b/src/components/home/Welcome.jsx
@@ -0,0 +1,8 @@
+export default function Welcome() {
+    return (
+        <section className="welcome">
+            <div className="title">Welcome to SkywardAI!</div>
+            <div className="description">We are working hard to bring AI to everyone in the world, join us for AI revolution!</div>
+        </section>
+    )
+}
diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx
@@ -0,0 +1,13 @@
+import Welcome from "./Welcome";
+import Projects from "./Projects";
+// import Customers from "./Customers";
+
+export default function Home() {
+    return (
+        <div className="home">
+            <Welcome />
+            <Projects />
+            {/* <Customers /> */}
+        </div>
+    )
+}
diff --git a/src/styles/chat.css b/src/styles/chat.css
@@ -159,7 +159,7 @@
     transform: rotate(45deg);
 }
 
-@media screen and (max-width: 765px) {
+@media screen and (max-width: 815px) {
 	.chat-page > .chat-main {
         width: calc(100% - 20px);
     }