Merge pull request #131 from peterlianpi/peterpausianlian

Peterpausianlian

content/profile/peterpausianlian.mdx

@@ -8,3 +8,11 @@ tags:
   - Python
   - ReactJS
 ---
+
+import Peter from "@/components/Contributors/Peter/Peter";
+
+<div className="peter">
+  <div id="root">
+    <Peter />
+  </div>
+</div>

src/components/Contributors/Peter/Peter.jsx

@@ -0,0 +1,19 @@
+"use client";
+import React from "react";
+import { useEffect, useState } from "react";
+import Loading from "./components/Loading";
+import PageLayout from "./components/PageLayout";
+
+function Peter() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+  }, []);
+
+  return loading ? <Loading /> : <PageLayout />;
+}
+
+export default Peter;

src/components/Contributors/Peter/components/About.jsx

@@ -0,0 +1,107 @@
+/* eslint-disable @next/next/no-img-element */
+"use-client";
+import React from "react";
+
+function About() {
+  return (
+    <>
+      <section className="container mx-auto about" id="about">
+        <h2 className="about__heading section-heading">About</h2>
+        <div className="about__content">
+          <div className="profile profile__fade-in">
+            <div className="profile__picture ">
+              <img
+                className="trn-4 rounded-full hover:w-[45%] hover:mt-[-150px] hover:h-[45%] w-[100%] h-[50%] hover:rounded-full"
+                src="https://avatars.githubusercontent.com/u/36624809?v=4"
+                alt="peter"
+              />
+            </div>
+            <p className="profile__blurb">
+              Fully committed to the philosophy of life-long learning, I’m a
+              full stack developer with a deep passion for JavaScript, React and
+              all things web development. The unique combination of creativity,
+              logic, technology and never running out of new things to discover,
+              drives my excitement and passion for web development. When I’m not
+              at my computer I like to spend my time reading, keeping fit and
+              playing piano.
+            </p>
+          </div>
+          <div className="skills">
+            <div className="skills__row">
+              <div className="skills__item skills__item--html skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/html.6aa56206be02cf6404844871df1d2da6.png"
+                  alt=""
+                />
+                <div className="skills__item-name">HTML</div>
+              </div>
+              <div className="skills__item skills__item--react skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/react.cb15bfce2a9004ce61c5f79f805b067b.png"
+                  alt=""
+                />
+                <div className="skills__item-name skills__item-fade-in">
+                  REACT
+                </div>
+              </div>
+              {/* <div className="skills__item skills__item--npm skills__item-fade-in">
+              <img src="./img/expressjs.png" alt="" />
+              <div className="skills__item-name skills__item-fade-in">EXPRESS.JS</div>
+            </div> */}
+            </div>
+            <div className="skills__row">
+              <div className="skills__item skills__item--js skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/js.f8a28e905c78dadb79434b7ceebd52a0.png"
+                  alt=""
+                />
+                <div className="skills__item-name">JAVASCRIPT</div>
+              </div>
+              <div className="skills__item skills__item--css skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/css.0ce0f0a2b4c4aa34b64c40e5278af3d1.png"
+                  alt=""
+                />
+                <div className="skills__item-name">CSS</div>
+              </div>
+              {/* <div className="skills__item skills__item--python skills__item-fade-in">
+              <img src="./img/mongo.png" alt="" />
+              <div className="skills__item-name">MONGODB</div>
+            </div> */}
+              <div className="skills__item skills__item--git skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/git.3092b5991e8accb9e7c36817c048a8d5.png"
+                  alt=""
+                />
+                <div className="skills__item-name">GIT</div>
+              </div>
+            </div>
+            <div className="skills__row">
+              {/* <div className="skills__item skills__item--sass skills__item-fade-in">
+              <img src="./img/sass.png" alt="" />
+              <div className="skills__item-name">SASS</div>
+            </div> */}
+              <div className="skills__item skills__item--webpack skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/nextjs.ff373e2ef4f7fdf152425a8c5c30816c.png"
+                  alt=""
+                />
+                <div className="skills__item-name">NEXT.JS</div>
+              </div>
+
+              <div className="skills__item skills__item--r skills__item-fade-in">
+                <img
+                  src="https://benscott.dev/imgs/node.94a06c4b9dd29e984501e6407e77a918.png"
+                  alt=""
+                />
+                <div className="skills__item-name">NODE.JS</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default About;

src/components/Contributors/Peter/components/Canvas.jsx

@@ -0,0 +1,107 @@
+"use-client";
+import { useEffect } from "react";
+// import { unstable_enableLog } from "react-dom";
+// unstable_enableLog("react.dom");
+
+function Canvas() {
+  useEffect(() => {
+    // This code will run on the client side
+    const canvas = document.getElementById("canvas-1");
+    if (!canvas) {
+      console.error("Canvas element not found");
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const particlesArray = [];
+    let hue = 0;
+
+    window.addEventListener("resize", function () {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    });
+
+    const mouse = {
+      x: undefined,
+      y: undefined,
+    };
+
+    canvas.addEventListener("click", function (event) {
+      mouse.x = event.x;
+      mouse.y = event.y;
+      for (let i = 0; i < 10; i++) {
+        particlesArray.push(new Particle());
+      }
+    });
+
+    canvas.addEventListener("mousemove", function (event) {
+      mouse.x = event.x;
+      mouse.y = event.y;
+      for (let i = 0; i < 10; i++) {
+        particlesArray.push(new Particle());
+      }
+    });
+
+    class Particle {
+      constructor() {
+        this.x = mouse.x;
+        this.y = mouse.y;
+        this.size = Math.random() * 5 + 1;
+        this.speedX = Math.random() * 3 - 1.5;
+        this.speedY = Math.random() * 3 - 1.5;
+        this.color = "hsl(" + hue + ", 100%, 50%)";
+      }
+      update() {
+        this.x += this.speedX;
+        this.y += this.speedY;
+        if (this.size > 0.2) this.size -= 0.1;
+      }
+      draw() {
+        ctx.fillStyle = this.color;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    function handleParticles() {
+      for (let i = 0; i < particlesArray.length; i++) {
+        particlesArray[i].update();
+        particlesArray[i].draw();
+        for (let j = i; j < particlesArray.length; j++) {
+          const dx = particlesArray[i].x - particlesArray[j].x;
+          const dy = particlesArray[i].y - particlesArray[j].y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < 100) {
+            ctx.beginPath();
+            ctx.strokeStyle = particlesArray[i].color;
+            ctx.lineWidth = 0.2;
+            ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
+            ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
+            ctx.stroke();
+            ctx.closePath();
+          }
+        }
+        if (particlesArray[i].size <= 0.3) {
+          particlesArray.splice(i, 1);
+          i--;
+        }
+      }
+    }
+
+    function animate() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      //ctx.fillStyle = 'rgba(0,0,0,0.02)';
+      //ctx.fillRect(0, 0, canvas.width, canvas.height);
+      handleParticles();
+      hue += 2;
+      requestAnimationFrame(animate);
+    }
+    animate();
+  }, []);
+
+  return <canvas id="canvas-1" className="container mx-auto"></canvas>;
+}
+
+export default Canvas;

src/components/Contributors/Peter/components/Footer.jsx

@@ -0,0 +1,100 @@
+import React from "react";
+import {
+  FaYoutube,
+  FaFacebook,
+  FaGithub,
+  FaLinkedin,
+  FaEnvelope,
+} from "react-icons/fa6";
+
+import { IconContext } from "react-icons";
+
+function Footer() {
+  return (
+    <footer className="container mx-auto footer" id="contact">
+      <a href="#hero">
+        <div className="return-home">
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            viewBox="0 0 24 24"
+          >
+            <title></title>
+            <path
+              fill="white"
+              d="M17.707 10.293l-5-5c-0.391-0.391-1.024-0.391-1.414 0l-5 5c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l4.293-4.293 4.293 4.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM17.707 17.293l-5-5c-0.391-0.391-1.024-0.391-1.414 0l-5 5c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l4.293-4.293 4.293 4.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+            ></path>
+          </svg>
+        </div>
+      </a>
+      <div className="socials">
+        <a
+          href="https://github.com/peterlianpi"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <IconContext.Provider
+            value={{ color: "white", className: "socials__icons" }}
+          >
+            <div>
+              <FaGithub />
+            </div>
+          </IconContext.Provider>{" "}
+        </a>
+        <a
+          href="mailto:[email protected]"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <IconContext.Provider
+            value={{ color: "white", className: "socials__icons" }}
+          >
+            <div>
+              <FaEnvelope />
+            </div>
+          </IconContext.Provider>
+        </a>
+
+        <a
+          className="text-blue-600 hover:underline my-1"
+          href="https://www.facebook.com/p.lianpi"
+        >
+          <IconContext.Provider
+            value={{ color: "white", className: "socials__icons" }}
+          >
+            <div>
+              <FaFacebook />
+            </div>
+          </IconContext.Provider>
+        </a>
+        <a
+          className="text-blue-600 hover:underline my-1"
+          href="https://www.linkedin.com/in/peter-pau-sian-lian-214092282/"
+        >
+          <IconContext.Provider
+            value={{ color: "white", className: "socials__icons" }}
+          >
+            <div>
+              <FaLinkedin />
+            </div>
+          </IconContext.Provider>{" "}
+        </a>
+        <a
+          className="text-blue-600 hover:underline my-1"
+          href="https://www.youtube.com/@peterpausianlian"
+        >
+          <IconContext.Provider
+            value={{ color: "white", className: "socials__icons" }}
+          >
+            <div>
+              <FaYoutube />
+            </div>
+          </IconContext.Provider>
+        </a>
+      </div>
+      <p className="copyright">Peter ©2023</p>
+    </footer>
+  );
+}
+export default Footer;

src/components/Contributors/Peter/components/Home.jsx

@@ -0,0 +1,36 @@
+"use-client";
+import React from "react";
+import Canvas from "./Canvas";
+
+function Home() {
+  return (
+    <div className="container mx-auto hero" id="hero">
+      <Canvas />
+      <div className="container heading">
+        <div className="heading__line-1">
+          Hello, I&apos;m <span>Peter</span>
+        </div>
+        <div className="heading__line-2">
+          I&apos;m evolving into a full stack web developer.
+        </div>
+        <a href="#about" className="heading__link">
+          <div className="heading-cta">
+            View my work
+            <svg
+              className="heading__arrow"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <title>arrow-right</title>
+              <path d="M11.293 5.707l5.293 5.293h-11.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h11.586l-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l7-7c0.092-0.092 0.166-0.202 0.217-0.324 0.101-0.245 0.101-0.521 0-0.766-0.049-0.118-0.121-0.228-0.217-0.324l-7-7c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
+            </svg>
+          </div>
+        </a>
+      </div>
+    </div>
+  );
+}
+export default Home;

src/components/Contributors/Peter/components/Loading.jsx

@@ -0,0 +1,12 @@
+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">
+      <div className="flex flex-col relative  justify-center items-center w-full  ">
+        <p className="loaderText absolute ">P</p>
+        <span className="loader"></span>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;