Merge pull request #17 from khoaxuantu/dev

Optimize styling

src/components/button.tsx

@@ -5,11 +5,15 @@ import * as Info from '../lib/general_info';
 
 export function SocialMediaBtnGroup() {
     return (
-        <div className=''>
+        <>
             <div className='btn-contact-overlay'>
             </div>
-            <div className="center body-txt-menu">
-                <div className='btn-grp btn-contact-grp'>
+            <div className="container contact-wrapper center body-txt-menu">
+                <div className="header-txt-contact">
+                    ~ Oi ~<br></br>
+                    Say hello to me by one of the following {":)"}
+                </div>
+                <div className='btn-grp btn-contact-grp mt-5'>
                     {Info.socialMediaInfoList.map((btnProp) => {
                         return <Btn.IconButton
                             url={btnProp.url}
@@ -21,7 +25,7 @@ export function SocialMediaBtnGroup() {
                 </div>
                 <Link to="/" className='btn btn-rect mt-5' id='go-back'>Home</Link>
             </div>
-        </div>
+        </>
     );
 }
 

src/components/menu/contact.tsx

@@ -1,10 +1,13 @@
 import { SocialMediaBtnGroup } from "../button";
+import addOrientationHandler from "../orientation";
 
 function Contact() {
+  addOrientationHandler();
+
   return (
-    <div>
+    <>
       <SocialMediaBtnGroup />
-    </div>
+    </>
   )
 }
 

src/components/menu/header.tsx

@@ -16,11 +16,11 @@ export default function MenuHeaderGrp () {
             let isCur = "";
             if (index === avaIndex) isCur = " is-current";
             return <img key={index} className={'transition-ava avatar'+isCur} src={avaURL}
-              alt="Tuslipid's avatar" height={128} width={128} />;
+              alt="Tuslipid's avatar" height={160} width={160} />;
           })}
         </button>
-        <div className="header-txt-menu"><b>Xuan Khoa Tu Nguyen</b></div>
-        <div className="body-txt-menu mt-3">SWE @ Pixta</div>
+        <div className="header-txt-menu mt-3"><b>Xuan Khoa Tu Nguyen</b></div>
+        <div className="body-txt-menu mt-3"><b>SWE @ Pixta</b></div>
       </div>
     );
 }

src/components/orientation.ts

@@ -15,19 +15,21 @@ function addOrientationHandler(): string {
 
 function orientationHandler(m: MediaQueryListEvent) {
     const PREFIX = "mobile-landscape";
-    const [container, overlay] = processElement();
+    const [container, overlay, contactOverlay] = processElement();
 
     if (m.matches) {
         changeOrientation(container, `${PREFIX}-wrapper`, "center");
         changeOrientation(overlay, `${PREFIX}-overlay`, "");
+        changeOrientation(contactOverlay, `${PREFIX}-overlay`, "");
     } else {
         changeOrientation(container, "center", `${PREFIX}-wrapper`);
         changeOrientation(overlay, "", `${PREFIX}-overlay`);
+        changeOrientation(contactOverlay, "", `${PREFIX}-overlay`);
     }
 }
 
 function processElement(): HTMLElement[] {
-    const CLASS_LIST = ["container", "background-overlay"];
+    const CLASS_LIST = ["container", "background-overlay", "btn-contact-overlay"];
     let arr : HTMLElement[] = [];
     CLASS_LIST.forEach(elem => {
         arr.push(document.getElementsByClassName(elem)[0] as HTMLElement);

src/css/scss/components/_card.scss

@@ -3,7 +3,7 @@
 
 %card-bodering {
     border: 1px solid var.$light-gray;
-    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
 }
 
 .card {
@@ -25,7 +25,7 @@
     z-index: 2;
 
     &:hover {
-        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
     }
 }
 
@@ -69,6 +69,6 @@
 
 @media screen and (min-width: 768px) {
     .card-proj {
-        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
     }
 }

src/css/scss/components/_text.scss

@@ -35,10 +35,15 @@ a {
     @include select-header-txt;
 }
 
-.header-txt-menu {
+.header-txt-menu, .header-txt-contact {
     @include select-header-txt($size: 24px, $font: var.$header-font-menu, $padding: 0.5rem)
 }
 
+.header-txt-contact {
+    color: lightgray;
+    text-align: center;
+}
+
 .header-txt-proj {
     @include select-header-txt($padding: 0.5rem, $size: 20px)
 }

src/css/scss/general/_container.scss

@@ -19,7 +19,7 @@
     @include util.rounded;
 }
 
-.menu-wrapper {
+.menu-wrapper, .contact-wrapper {
     position: relative;
     width: 80%;
     line-height: initial;
@@ -81,3 +81,14 @@
         grid-template-rows: repeat(2, 1fr);
     }
 }
+
+@media (min-width: 1200px) {
+    .project-wrapper {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        column-gap: 2rem;
+        max-width: clamp(900px, 1000px + 10vw, 1400px);
+        width: 90%;
+        align-items: stretch;
+    }
+}

src/css/scss/style.scss

@@ -119,10 +119,6 @@ span {
 }
 
 @media screen and (min-width: 1200px) {
-    .proj-tool-list {
-        flex-wrap: nowrap;
-    }
-
     .content-grp {
         @include util.center-block();
         max-width: 900px;

src/lib/general_info.ts

@@ -1,8 +1,8 @@
 import { IconButtonProps, DefaultButtonProps } from "./factory/buttonBase";
 import { CgMail } from 'react-icons/cg';
-import { BsLinkedin, BsGithub, BsDiscord } from 'react-icons/bs';
+import { BsLinkedin, BsGithub, BsDiscord, BsReddit } from 'react-icons/bs';
 import { ImFacebook2 } from "react-icons/im";
-import { FaCodepen } from "react-icons/fa";
+import { FaCodepen, FaDev } from "react-icons/fa";
 import { ITabProps } from "./factory/tabBase";
 import { IProjCardProps, IBlogCardProps } from "./factory/cardBase";
 import svgs from "./factory/iconBase";
@@ -36,6 +36,16 @@ export const socialMediaInfoList: IconButtonProps[] = [
         url: "https://discordapp.com/users/623530338869837825",
         icon: BsDiscord
     },
+    {
+        id: "reddit",
+        url: "https://www.reddit.com/user/khoaxuantu",
+        icon: BsReddit
+    },
+    {
+        id: "dev-to",
+        url: "https://dev.to/khoaxuantu",
+        icon: FaDev
+    },
     {
         id: "codepen",
         url: "https://codepen.io/khoaxuantu",