From 9d8b06c8cfd3493fdf4dce86b1af6b5f872b5fa4 Mon Sep 17 00:00:00 2001 From: Peter <36624809+peterlianpi@users.noreply.github.com> Date: Sat, 28 Oct 2023 01:39:44 +0630 Subject: [PATCH] :fire: build(profile): update peterpausianlian profile --- content/profile/peterpausianlian.mdx | 6 + src/components/Contributors/Peter/Peter.jsx | 19 + .../Contributors/Peter/components/About.jsx | 107 ++ .../Contributors/Peter/components/Canvas.jsx | 107 ++ .../Contributors/Peter/components/Footer.jsx | 100 ++ .../Contributors/Peter/components/Home.jsx | 36 + .../Contributors/Peter/components/Loading.jsx | 12 + .../Contributors/Peter/components/NavBar.jsx | 81 + .../Peter/components/PageLayout.jsx | 22 + .../Contributors/Peter/components/Popup.jsx | 205 +++ .../Peter/components/Projects.jsx | 131 ++ src/styles/globals.scss | 1 + src/styles/profiles/_peter.scss | 1596 +++++++++++++++++ 13 files changed, 2423 insertions(+) create mode 100644 src/components/Contributors/Peter/Peter.jsx create mode 100644 src/components/Contributors/Peter/components/About.jsx create mode 100644 src/components/Contributors/Peter/components/Canvas.jsx create mode 100644 src/components/Contributors/Peter/components/Footer.jsx create mode 100644 src/components/Contributors/Peter/components/Home.jsx create mode 100644 src/components/Contributors/Peter/components/Loading.jsx create mode 100644 src/components/Contributors/Peter/components/NavBar.jsx create mode 100644 src/components/Contributors/Peter/components/PageLayout.jsx create mode 100644 src/components/Contributors/Peter/components/Popup.jsx create mode 100644 src/components/Contributors/Peter/components/Projects.jsx create mode 100644 src/styles/profiles/_peter.scss diff --git a/content/profile/peterpausianlian.mdx b/content/profile/peterpausianlian.mdx index 69942e3..1fe5193 100644 --- a/content/profile/peterpausianlian.mdx +++ b/content/profile/peterpausianlian.mdx @@ -8,3 +8,9 @@ tags: - Python - ReactJS --- + +import Peter from "@/components/Contributors/Peter/Peter"; + +
+ +
diff --git a/src/components/Contributors/Peter/Peter.jsx b/src/components/Contributors/Peter/Peter.jsx new file mode 100644 index 0000000..26dbdd9 --- /dev/null +++ b/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 ? : ; +} + +export default Peter; diff --git a/src/components/Contributors/Peter/components/About.jsx b/src/components/Contributors/Peter/components/About.jsx new file mode 100644 index 0000000..2df25f9 --- /dev/null +++ b/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 ( + <> +
+

About

+
+
+
+ peter +
+

+ 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. +

+
+
+
+
+ +
HTML
+
+
+ +
+ REACT +
+
+ {/*
+ +
EXPRESS.JS
+
*/} +
+
+
+ +
JAVASCRIPT
+
+
+ +
CSS
+
+ {/*
+ +
MONGODB
+
*/} +
+ +
GIT
+
+
+
+ {/*
+ +
SASS
+
*/} +
+ +
NEXT.JS
+
+ +
+ +
NODE.JS
+
+
+
+
+
+ + ); +} + +export default About; diff --git a/src/components/Contributors/Peter/components/Canvas.jsx b/src/components/Contributors/Peter/components/Canvas.jsx new file mode 100644 index 0000000..7afa6c5 --- /dev/null +++ b/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 ; +} + +export default Canvas; diff --git a/src/components/Contributors/Peter/components/Footer.jsx b/src/components/Contributors/Peter/components/Footer.jsx new file mode 100644 index 0000000..85b9941 --- /dev/null +++ b/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 ( + + ); +} +export default Footer; diff --git a/src/components/Contributors/Peter/components/Home.jsx b/src/components/Contributors/Peter/components/Home.jsx new file mode 100644 index 0000000..8cfdbd3 --- /dev/null +++ b/src/components/Contributors/Peter/components/Home.jsx @@ -0,0 +1,36 @@ +"use-client"; +import React from "react"; +import Canvas from "./Canvas"; + +function Home() { + return ( +
+ +
+
+ Hello, I'm Peter +
+
+ I'm evolving into a full stack web developer. +
+ +
+ View my work + + arrow-right + + +
+ +
+
+ ); +} +export default Home; diff --git a/src/components/Contributors/Peter/components/Loading.jsx b/src/components/Contributors/Peter/components/Loading.jsx new file mode 100644 index 0000000..76bc779 --- /dev/null +++ b/src/components/Contributors/Peter/components/Loading.jsx @@ -0,0 +1,12 @@ +const Loading = () => { + return ( +
+
+

P

+ +
+
+ ); +}; + +export default Loading; diff --git a/src/components/Contributors/Peter/components/NavBar.jsx b/src/components/Contributors/Peter/components/NavBar.jsx new file mode 100644 index 0000000..ce3685e --- /dev/null +++ b/src/components/Contributors/Peter/components/NavBar.jsx @@ -0,0 +1,81 @@ +"use-client"; +import React, { useState, useEffect } from "react"; + +function NavBar() { + const [showNavBar, setShowNavBar] = useState(false); + const [activeSection, setActiveSection] = useState("hero"); + + useEffect(() => { + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + const handleScroll = () => { + const sections = ["hero", "about", "projects"]; + const scrollPosition = window.scrollY; + + // Determine the active section based on the scroll position + for (let i = sections.length - 1; i >= 0; i--) { + const section = document.getElementById(sections[i]); + if (section && scrollPosition >= section.offsetTop - 200) { + setActiveSection(sections[i]); + break; + } + } + + // Show/hide the navigation bar based on the scroll position + if (scrollPosition > 100) { + setShowNavBar(true); + } else { + setShowNavBar(false); + } + }; + + const handleItemClick = (sectionId) => { + // Scroll to the selected section + const section = document.getElementById(sectionId); + if (section) { + section.scrollIntoView({ behavior: "smooth" }); + } + }; + + return ( + <> +
+
+
+ handleItemClick("hero")}> + Home + +
+
+ handleItemClick("about")}> + About + +
+
+ handleItemClick("projects")}> + Projects + +
+
+
+ + ); +} + +export default NavBar; diff --git a/src/components/Contributors/Peter/components/PageLayout.jsx b/src/components/Contributors/Peter/components/PageLayout.jsx new file mode 100644 index 0000000..dae5ada --- /dev/null +++ b/src/components/Contributors/Peter/components/PageLayout.jsx @@ -0,0 +1,22 @@ +"use-client"; +import React from "react"; +import Home from "./Home"; +import About from "./About"; +import Footer from "./Footer"; +import NavBar from "./NavBar"; +import Projects from "./Projects"; +import Bg from "./Popup"; +function PageLayout() { + return ( + <> + + + + + +