[feat] RWD & update info

barrystone · Jun 14, 2024 · f41ba84 · f41ba84
1 parent e9b6b8f
commit f41ba84
Show file tree

Hide file tree

Showing 17 changed files with 344 additions and 115 deletions.
diff --git a/components/AboutSection.js b/components/AboutSection.js
@@ -15,11 +15,11 @@ const AboutSection = () => {
     const enterAnimation = () => {
       const aboutElement = document
         .getElementById('aboutSection')
-        .getBoundingClientRect();
+        ?.getBoundingClientRect();
       if (
-        aboutElement.top >= 0 - aboutElement.height / 4 &&
-        aboutElement.top <=
-          window.innerHeight - aboutElement.height + aboutElement.height / 4
+        aboutElement?.top >= 0 - aboutElement?.height / 4 &&
+        aboutElement?.top <=
+          window.innerHeight - aboutElement?.height + aboutElement?.height / 4
       ) {
         window.requestAnimationFrame(() => {
           skillsetClasslist.add('skillset--show');
@@ -90,7 +90,7 @@ const AboutSection = () => {
         </div>
 
         <div className="section-about__textbox-1">
-          <p className=" paragraph-big--3">NPTU Computer Science</p>
+          <p className=" paragraph-big--3">Research & Development Engineer</p>
         </div>
         <div className="section-about__textbox-2">
           <h3 className="heading-tertiary paragraph-big--4" id="skill">

diff --git a/components/RepoSection.js b/components/RepoSection.js
@@ -13,7 +13,7 @@ const RepoSection = ({ reposData: staticReposData }) => {
     slidesToScroll: 3,
     arrows: false,
     autoplay: true,
-    autoplaySpeed: 3000
+    autoplaySpeed: 3000,
   };
 
   const [reposData, setReposData] = useState([]);
@@ -31,22 +31,22 @@ const RepoSection = ({ reposData: staticReposData }) => {
           ...sliderSettings,
           slidesToShow: 1,
           slidesToScroll: 1,
-          speed: 1000
+          speed: 1000,
         });
       } else {
         setRwdSlideSettings({
           ...sliderSettings,
           slidesToShow: 2,
           slidesToScroll: 2,
-          speed: 2000
+          speed: 2000,
         });
       }
     } else {
       return setRwdSlideSettings({
         ...sliderSettings,
         slidesToShow: 3,
         slidesToScroll: 3,
-        speed: 2000
+        speed: 2000,
       });
     }
   };
@@ -92,61 +92,65 @@ const RepoSection = ({ reposData: staticReposData }) => {
       </div>
       <div className="section-repo__repos">
         <Slider {...RwdSlideSettings}>
-          {reposData.map((repo, index) => (
-            <div className="repo-wrapper" key={index}>
-              <div className="repo">
-                <div className="repo__title">
-                  <a href={repo.html_url} target="_blank">
-                    {repo.name}
-                  </a>
-                </div>
-                <div className="repo__content">
-                  <div className="repo-description">
-                    <div className="repo-description--title">
-                      <span>
-                        <p>簡介</p>
-                      </span>
-                      {/* <div className="repo-language"> */}
+          {reposData &&
+            reposData.length > 1 &&
+            reposData.map((repo, index) => (
+              <div className="repo-wrapper" key={index}>
+                <div className="repo">
+                  <div className="repo__title">
+                    <a href={repo.html_url} target="_blank">
+                      {repo.name}
+                    </a>
+                  </div>
+                  <div className="repo__content">
+                    <div className="repo-description">
+                      <div className="repo-description--title">
+                        <span>
+                          <p>簡介</p>
+                        </span>
+                        {/* <div className="repo-language"> */}
 
-                      {/* </div> */}
-                      <img
-                        src={`img/tech/${languageImg(
-                          repo.language ? repo.language.toLowerCase() : 'coding'
-                        )}.svg`}
-                        alt={`${repo.language}`}
-                      />
-                    </div>
+                        {/* </div> */}
+                        <img
+                          src={`img/tech/${languageImg(
+                            repo.language
+                              ? repo.language.toLowerCase()
+                              : 'coding'
+                          )}.svg`}
+                          alt={`${repo.language}`}
+                        />
+                      </div>
 
-                    <article className="repo-description--text">
-                      <p>
-                        {repo.description
-                          ? repo.description.toString().length <= 60
-                            ? repo.description
-                            : repo.description.slice(0, 60) + ' ...'
-                          : ' 尚未有簡介  !'}
-                      </p>
-                    </article>
-                  </div>
-                  <div className="repo-star">
-                    <div className="repo-star--icon">
-                      <img src="/img/design/star-icon.svg" alt="" />
-                    </div>
-                    <div className="repo-star--number">
-                      X<span>{repo.stargazers_count}</span>
+                      <article className="repo-description--text">
+                        <p>
+                          {repo.description
+                            ? repo.description.toString().length <= 60
+                              ? repo.description
+                              : repo.description.slice(0, 60) + ' ...'
+                            : ' 尚未有簡介  !'}
+                        </p>
+                      </article>
                     </div>
-                  </div>
-                  <div className="repo-fork">
-                    <div className="repo-fork--icon">
-                      <img src="/img/design/fork-icon.svg" alt="" />
+                    <div className="repo-star">
+                      <div className="repo-star--icon">
+                        <img src="/img/design/star-icon.svg" alt="" />
+                      </div>
+                      <div className="repo-star--number">
+                        X<span>{repo.stargazers_count}</span>
+                      </div>
                     </div>
-                    <div className="repo-fork--number">
-                      X <span>{repo.forks}</span>
+                    <div className="repo-fork">
+                      <div className="repo-fork--icon">
+                        <img src="/img/design/fork-icon.svg" alt="" />
+                      </div>
+                      <div className="repo-fork--number">
+                        X <span>{repo.forks}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
         </Slider>
       </div>
     </section>

diff --git a/components/VirtualSpace.js b/components/VirtualSpace.js
@@ -1,10 +1,11 @@
-import { Canvas } from "@react-three/fiber";
+import { Canvas } from '@react-three/fiber';
+import { Html, useProgress } from '@react-three/drei';
 import {
   Fisheye,
   CameraControls,
   PerspectiveCamera,
   Environment,
-} from "@react-three/drei";
+} from '@react-three/drei';
 import {
   Level,
   Sudo,
@@ -16,29 +17,46 @@ import {
   SkillBoard,
   AboutBoard,
   Cabinet,
-} from "./VirtualSpaceScene";
+} from './VirtualSpaceScene';
+import { Suspense } from 'react';
+
+function Loader() {
+  const { active, progress } = useProgress();
+  return active ? (
+    <Html
+      center
+      style={{
+        fontSize: '5rem',
+        textAlign: 'center',
+        lineHeight: '10rem',
+      }}
+    >{`Loading ${progress.toFixed(2)}%`}</Html>
+  ) : null;
+}
 
 export default function Main() {
   return (
     <Canvas flat>
-      <Fisheye zoom={0}>
-        <CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 1.6} />
-        <ambientLight intensity={Math.PI / 2} />
-        <group scale={20} position={[5, -11, -5]}>
-          <Level />
-          <Plane />
-          <HeaderBoard />
-          <SkillBoard />
-          <AboutBoard />
-          <Sudo />
-          <Camera />
-          <Cabinet />
-          {/* <Cactus /> */}
-          <Basketball />
-        </group>
-        <Environment preset="apartment" background blur={2} />
-        <PerspectiveCamera makeDefault position={[0, 0, 18.5]} />
-      </Fisheye>
+      <Suspense fallback={<Loader />}>
+        <Fisheye zoom={0}>
+          <CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 1.6} />
+          <ambientLight intensity={Math.PI / 2} />
+          <group scale={20} position={[5, -11, -5]}>
+            <Level />
+            <Plane />
+            <HeaderBoard />
+            <SkillBoard />
+            <AboutBoard />
+            <Sudo />
+            <Camera />
+            <Cabinet />
+            {/* <Cactus /> */}
+            <Basketball />
+          </group>
+          <Environment preset="apartment" background blur={2} />
+          <PerspectiveCamera makeDefault position={[0, 0, 18.5]} />
+        </Fisheye>
+      </Suspense>
     </Canvas>
   );
 }
diff --git a/components/layout/Header.js b/components/layout/Header.js
@@ -1,5 +1,5 @@
-import React from "react";
-import Link from "next/link";
+import React from 'react';
+import Link from 'next/link';
 
 const Header = () => {
   return (
@@ -18,7 +18,7 @@ const Header = () => {
           <div className="header__button-box">
             <Link
               href="/about"
-              as={process.env.BACKEND_URL + "/about"}
+              as={process.env.BACKEND_URL + '/about'}
               className="btn-primary"
             >
               <p>
@@ -28,7 +28,7 @@ const Header = () => {
             </Link>
             <Link
               href="/space"
-              as={process.env.BACKEND_URL + "/space"}
+              as={process.env.BACKEND_URL + '/space'}
               className="btn-primary btn-primary--2"
             >
               <p>
@@ -65,7 +65,11 @@ const Header = () => {
           <div className="header__info-textbox-2">
             {/* <p>網站還在開發中...</p>
             <p>更多功能敬請期待！</p> */}
-            <p>Software Engineer</p>
+            <p>
+              A Software Development
+              <br />
+              Enthusiast
+            </p>
           </div>
         </div>
       </div>

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,5 +1,6 @@
 // import '../styles/globals.css'
 import '../styles/css/main.css';
+// import "../assets/css/main.css";
 import '../node_modules/slick-carousel/slick/slick.css';
 import '../node_modules/slick-carousel/slick/slick-theme.css';
 

diff --git a/pages/about.js b/pages/about.js
@@ -1,6 +1,6 @@
-import React from "react";
-import Link from "next/link";
-import Head from "next/head";
+import React from 'react';
+import Link from 'next/link';
+import Head from 'next/head';
 
 const about = () => {
   return (
@@ -13,7 +13,7 @@ const about = () => {
           <div className="about__top-buttonsbox">
             <Link
               href="/"
-              as={process.env.BACKEND_URL + "/"}
+              as={process.env.BACKEND_URL + '/'}
               className="btn-tertiary"
             >
               Home
@@ -92,7 +92,7 @@ const about = () => {
                     <p>暱稱： Barrystone</p>
                   </li>
                   <li>
-                    <p>職稱： Software Engineer</p>
+                    <p>職稱： Engineer</p>
                   </li>
                   {/* <li>
                     <p>畢業： NPTU</p>
@@ -130,13 +130,13 @@ const about = () => {
               </div>
               <div className="about__mid_left-buttonbox">
                 <Link
-                  href={"https://wakatime.com/@barry"}
+                  href={'https://wakatime.com/@barry'}
                   target="_blank"
                   // href="/#aboutSection"
                   // as={process.env.BACKEND_URL + "/#aboutSection"}
                   className="btn-show"
                 >
-                  Coding time
+                  Code Dist.
                 </Link>
               </div>
               <div className="about__mid_left-textbox--2">

diff --git a/pages/space.js b/pages/space.js
@@ -1,20 +1,20 @@
-import React from "react";
-import Link from "next/link";
-import Head from "next/head";
-import VirtualSpace from "../components/VirtualSpace";
+import React from 'react';
+import Link from 'next/link';
+import Head from 'next/head';
+import VirtualSpace from '../components/VirtualSpace';
 
 const space = () => {
   return (
     <div
       style={{
-        display: "flex",
-        color: "#fff",
-        fontSize: "10rem",
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        height: "100vh",
-        width: "100%",
+        display: 'flex',
+        color: '#fff',
+        fontSize: '10rem',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        height: '100vh',
+        width: '100%',
       }}
     >
       <Head>
@@ -23,11 +23,11 @@ const space = () => {
       <VirtualSpace />
       <Link
         href="/"
-        as={process.env.BACKEND_URL + "/"}
+        as={process.env.BACKEND_URL + '/'}
         style={{
-          position: "absolute",
-          top: "5rem",
-          left: "10rem",
+          position: 'absolute',
+          top: '3rem',
+          left: '3rem',
         }}
         className="btn-tertiary"
       >