[update & style] information & clean UI

barrystone · Mar 23, 2024 · 4b98916 · 4b98916
1 parent 307f147
commit 4b98916
Show file tree

Hide file tree

Showing 17 changed files with 236 additions and 427 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
 # barrystone.github.io
 
-This is my personal site.
-Still being code, not yet completed...
+Personal website of Barrystone.
 
 - Link: https://barrystone.github.io/
 

diff --git a/_data/projectShowing.json b/_data/projectShowing.json
@@ -2,7 +2,7 @@
   {
     "name": "online-store",
     "class": "brick-font--big",
-    "image": "reactjs"
+    "image": "nodejs"
   },
   {
     "name": "social_app",
@@ -14,7 +14,8 @@
     "image": "sass"
   },
   {
-    "name": "TV-episodes_nuxtjs",
-    "class": "brick-font--mid"
+    "name": "taiwan-college-app",
+    "class": "brick-font--mid",
+    "image": "reactjs"
   }
 ]
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 const Footer = () => {
   return (
-    <div className='footer'>
-      <p>barrystone</p>
+    <div className="footer">
+      <p>BarryStone</p>
     </div>
   );
 };

diff --git a/components/layout/Header.js b/components/layout/Header.js
@@ -12,7 +12,7 @@ const Header = () => {
         <div className="header-animation header-animation--5"></div>
         <div className="header-animation header-animation--6"></div>
         <h1 className="heading-primary--main " text-shadow="barrystone">
-          barrystone
+          BarryStone
         </h1>
         <div className="header__left">
           <div className="header__button-box">
@@ -37,12 +37,12 @@ const Header = () => {
             <h1 className="heading-primary">
               <p className="animate__animated animate__rotateInDownLeft ">
                 <span className="heading-primary--sub  heading-primary--sub-1 ">
-                  My name is
+                  Software Engineer
                 </span>
               </p>
-              <span className="heading-primary--sub heading-primary--sub-2 animate__animated  animate__bounceInLeft">
+              {/* <span className="heading-primary--sub heading-primary--sub-2 animate__animated  animate__bounceInLeft">
                 Learning & making
-              </span>
+              </span> */}
             </h1>
           </div>
           <div className="header__link-box animate__animated  animate__fadeInUpBig">

diff --git a/components/updating/Skillset.js b/components/updating/Skillset.js
@@ -20,60 +20,75 @@ const Skillset = () => {
     <ul className="skillset">
       <li className="item">
         <CharkmarkIcon />
-        <h4>HTML</h4>
-        <p>
-          Hypertext Markup
-          <br />
-          Language
-        </p>
+        <h4>🏆 &nbsp;TS </h4>
+        <p>Typescript</p>
         <span>
-          <img src="img/tech/html-icon.svg" alt="html-icon" />
+          <img src="img/tech/ts-icon.svg" alt="js-icon" />
         </span>
       </li>
       <li className="item">
         <CharkmarkIcon />
-        <h4>CSS</h4>
-        <p>
-          Cascading Style Sheets
-          <br />
-          &nbsp;
-        </p>
+        <h4>JS</h4>
+        <p>Javascript</p>
         <span>
-          <img src="img/tech/css-icon.svg" alt="css-icon" />
+          <img src="img/tech/js-icon.svg" alt="js-icon" />
         </span>
       </li>
       <li className="item">
         <CharkmarkIcon />
-        <h4>SCSS</h4>
+        <h4>Reactjs</h4>
         <p>
-          Syntactically Awesome
-          <br /> Style Sheets
+          JavaScript library for
+          <br /> building user interfaces
         </p>
         <span>
-          <img src="img/tech/sass-icon.svg" alt="sass-icon" />
+          <img src="img/tech/reactjs-icon.svg" alt="react-icon" />
         </span>
       </li>
       <li className="item">
         <CharkmarkIcon />
-        <h4>🏆 &nbsp;JS </h4>
+        <h4>Nodejs</h4>
         <p>
-          Javascript
-          <br />
-          king of the web dev
+          Back-end JavaScript
+          <br /> runtime environment
         </p>
         <span>
-          <img src="img/tech/js-icon.svg" alt="js-icon" />
+          <img src="img/tech/nodejs-icon.svg" alt="nodejs-icon" />
         </span>
       </li>
       <li className="item">
         <CharkmarkIcon />
-        <h4>Reactjs</h4>
+        <h4>Graphql</h4>
         <p>
-          JavaScript library for
-          <br /> building user interfaces
+          Query language for API <br />
+          &nbsp;
         </p>
         <span>
-          <img src="img/tech/reactjs-icon.svg" alt="react-icon" />
+          <img src="img/tech/graphql-icon.svg" alt="graphql-icon" />
+        </span>
+      </li>
+      <li className="item">
+        <CharkmarkIcon />
+        <h4>MongoDB</h4>
+        <p>No-SQL Database</p>
+        <span>
+          <img src="img/tech/mongodb-icon.svg" alt="nodejs-icon" />
+        </span>
+      </li>
+      <li className="item">
+        <CharkmarkIcon />
+        <h4>Docker</h4>
+        <p>Containerization</p>
+        <span>
+          <img src="img/tech/docker-icon.svg" alt="nodejs-icon" />
+        </span>
+      </li>
+      <li className="item">
+        <CharkmarkIcon />
+        <h4>K8S</h4>
+        <p>Kubernetes, Container orchestration</p>
+        <span>
+          <img src="img/tech/Kubernetes-icon.svg" alt="nodejs-icon" />
         </span>
       </li>
       <li className="item">
@@ -88,6 +103,29 @@ const Skillset = () => {
         </span>
       </li>
       <li className="item">
+        <CharkmarkIcon />
+        <h4>SCSS</h4>
+        <p>
+          Syntactically Awesome
+          <br /> Style Sheets
+        </p>
+        <span>
+          <img src="img/tech/sass-icon.svg" alt="sass-icon" />
+        </span>
+      </li>
+      {/* <li className="item">
+        <CharkmarkIcon />
+        <h4>CSS</h4>
+        <p>
+          Cascading Style Sheets
+          <br />
+          &nbsp;
+        </p>
+        <span>
+          <img src="img/tech/css-icon.svg" alt="css-icon" />
+        </span>
+      </li> */}
+      {/* <li className="item">
         <CharkmarkIcon />
         <h4>Vuejs</h4>
         <p>
@@ -119,41 +157,7 @@ const Skillset = () => {
             }}
           />
         </span>
-      </li>
-      <li className="item">
-        <CharkmarkIcon />
-        <h4>PHP</h4>
-        <p>
-          General-purpose <br />
-          Scripting language
-          <br />
-        </p>
-        <span>
-          <img src="img/tech/php2-icon.svg" alt="graphql-icon" />
-        </span>
-      </li>
-      <li className="item">
-        <CharkmarkIcon />
-        <h4>Nodejs</h4>
-        <p>
-          Back-end JavaScript
-          <br /> runtime environment
-        </p>
-        <span>
-          <img src="img/tech/nodejs-icon.svg" alt="nodejs-icon" />
-        </span>
-      </li>
-      <li className="item">
-        <CharkmarkIcon />
-        <h4>Graphql</h4>
-        <p>
-          Query language for API <br />
-          &nbsp;
-        </p>
-        <span>
-          <img src="img/tech/graphql-icon.svg" alt="graphql-icon" />
-        </span>
-      </li>
+      </li> */}
     </ul>
   );
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,5 +22,8 @@
   "devDependencies": {
     "@svgr/webpack": "^5.5.0",
     "babel-plugin-transform-define": "^2.0.0"
+  },
+  "volta": {
+    "node": "16.20.2"
   }
 }