From 8f10f065e24b3b85c8e19a3d0147092245582515 Mon Sep 17 00:00:00 2001
From: Peter <36624809+peterlianpi@users.noreply.github.com>
Date: Mon, 30 Oct 2023 23:49:11 +0630
Subject: [PATCH] :fire: build(profile): add peterpausianlian profile

---
 .../Contributors/Peter/components/About.jsx   |  1 -
 .../Contributors/Peter/components/Canvas.jsx  |  4 +-
 .../Contributors/Peter/components/Footer.jsx  |  1 +
 .../Contributors/Peter/components/Home.jsx    |  1 -
 .../Contributors/Peter/components/Loading.jsx |  2 +
 .../Peter/components/PageLayout.jsx           |  1 -
 src/styles/profiles/_peter.scss               | 63 ++++++++++++++-----
 7 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/components/Contributors/Peter/components/About.jsx b/src/components/Contributors/Peter/components/About.jsx
index 215e5fa..fd94fcc 100644
--- a/src/components/Contributors/Peter/components/About.jsx
+++ b/src/components/Contributors/Peter/components/About.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 "use-client";
 import React from "react";
 
diff --git a/src/components/Contributors/Peter/components/Canvas.jsx b/src/components/Contributors/Peter/components/Canvas.jsx
index 086781f..cdfbc9f 100644
--- a/src/components/Contributors/Peter/components/Canvas.jsx
+++ b/src/components/Contributors/Peter/components/Canvas.jsx
@@ -1,7 +1,5 @@
 "use-client";
-import { useEffect } from "react";
-// import { unstable_enableLog } from "react-dom";
-// unstable_enableLog("react.dom");
+import React, { useEffect } from "react";
 
 function Canvas() {
   useEffect(() => {
diff --git a/src/components/Contributors/Peter/components/Footer.jsx b/src/components/Contributors/Peter/components/Footer.jsx
index de873a1..d84d52d 100644
--- a/src/components/Contributors/Peter/components/Footer.jsx
+++ b/src/components/Contributors/Peter/components/Footer.jsx
@@ -1,3 +1,4 @@
+"use-client";
 import React from "react";
 import {
   FaYoutube,
diff --git a/src/components/Contributors/Peter/components/Home.jsx b/src/components/Contributors/Peter/components/Home.jsx
index 5c7fdf6..5c4d87a 100644
--- a/src/components/Contributors/Peter/components/Home.jsx
+++ b/src/components/Contributors/Peter/components/Home.jsx
@@ -1,4 +1,3 @@
-"use-client";
 import React from "react";
 import Canvas from "./Canvas";
 
diff --git a/src/components/Contributors/Peter/components/Loading.jsx b/src/components/Contributors/Peter/components/Loading.jsx
index 76bc779..5142ad4 100644
--- a/src/components/Contributors/Peter/components/Loading.jsx
+++ b/src/components/Contributors/Peter/components/Loading.jsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 const Loading = () => {
   return (
     <div className="absolute top-0 left-0 flex flex-col justify-center gap-0 items-center w-full h-screen loader-bg lg-rounded">
diff --git a/src/components/Contributors/Peter/components/PageLayout.jsx b/src/components/Contributors/Peter/components/PageLayout.jsx
index 0e4b59f..cab49f5 100644
--- a/src/components/Contributors/Peter/components/PageLayout.jsx
+++ b/src/components/Contributors/Peter/components/PageLayout.jsx
@@ -1,4 +1,3 @@
-"use-client";
 import React from "react";
 import Home from "./Home";
 import About from "./About";
diff --git a/src/styles/profiles/_peter.scss b/src/styles/profiles/_peter.scss
index f9231f4..ddd19dd 100644
--- a/src/styles/profiles/_peter.scss
+++ b/src/styles/profiles/_peter.scss
@@ -1,14 +1,19 @@
 .peter {
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
   .loader {
     position: relative;
     margin: auto;
     box-sizing: border-box;
-    width: 120px;
-    height: 120px;
+    width: 360px;
+    height: 360px;
     border-radius: 50%;
     border: 4px solid rgba(255, 255, 255, 0.1);
     transform-origin: 50% 50%;
-    transform: perspective(200px) rotateX(66deg);
+    transform: perspective(900px) rotateX(66deg);
     animation: spinner-wiggle 1.2s infinite;
   }
 
@@ -34,12 +39,39 @@
   }
 
   .loaderText {
-    font-size: 5rem;
+    font-size: 11rem;
     margin-bottom: -100px;
     z-index: 99;
     animation: bounce 1.2s infinite;
     top: 0;
-    left: 48%;
+    left: 45%;
+  }
+
+  // position: relative;
+
+  @media (min-width: 768px) {
+    .loaderText {
+      left: 47%;
+    }
+  }
+
+  @media (max-width: 550px) {
+    .loaderText {
+      font-size: 5rem;
+      left: 45%;
+    }
+    .loader {
+      width: 120px;
+      height: 120px;
+      transform: perspective(200px) rotateX(66deg);
+      animation: spinner-wiggle 1.2s infinite;
+    }
+  }
+
+  @media (max-width: 400px) {
+    .loaderText {
+      left: 43%;
+    }
   }
 
   @keyframes spinner-spin {
@@ -66,8 +98,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    gap: 30px;
     width: 100%;
-    height: 150px;
     background-color: #282828;
     border-radius: 10px;
     border: 1px solid white;
@@ -77,10 +109,10 @@
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    padding: 20px;
+    padding: 5px;
     width: 50%;
     height: 50px;
-    margin: 20px auto;
+    margin: 0px auto;
   }
 
   .socials__icons {
@@ -98,13 +130,15 @@
 
   .copyright {
     color: #fafafa;
-    font-size: 14px;
+    font-size: 18px;
     font-weight: 500;
+    padding-bottom: 25px;
   }
 
   @media (max-width: 720px) {
     .footer {
-      height: 100px;
+      height: 150px;
+      gap: 10px;
     }
 
     .socials {
@@ -327,15 +361,15 @@
     font-family: montserrat, sans-serif;
     font-size: 14px;
     width: 100%;
-    overflow-x: hidden;
+    overflow: hidden;
+
     background-color: #1a1a1a;
-    padding: 30px auto;
     outline: 45px solid #1a1a1b;
   }
 
   /* animation */
   .canvas-animation {
-    width: 95%;
+    width: 80%;
     height: 60%;
     position: fixed;
     top: 20%;
@@ -346,7 +380,6 @@
 
   @media (max-width: 450px) {
     .canvas-animation {
-      width: 90%;
       height: 45%;
       top: 25%;
     }
@@ -578,7 +611,7 @@
   .about__content {
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    width: 95%;
   }
 
   @media (max-width: 1300px) {