diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..b54a0ec
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,21 @@
+{
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:@next/next/recommended",
+ "prettier"
+ ],
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": [
+ "@typescript-eslint"
+ ],
+ "rules": {
+ "@typescript-eslint/no-unused-vars": [
+ "error"
+ ],
+ "@typescript-eslint/no-explicit-any": [
+ "error"
+ ]
+ }
+}
diff --git a/.github/assets/logo.png b/.github/assets/logo.png
new file mode 100644
index 0000000..9e97b53
Binary files /dev/null and b/.github/assets/logo.png differ
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
new file mode 100644
index 0000000..e2d598f
--- /dev/null
+++ b/.github/workflows/testing.yml
@@ -0,0 +1,28 @@
+name: Testing
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ branches:
+ - main
+
+jobs:
+ Build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone
+ uses: actions/checkout@v3
+
+ - name: Setup node
+ uses: actions/setup-node@v3
+ with:
+ node-version: latest
+
+ - name: Install required packages
+ run: npm install
+
+ - name: Run
+ run: npm run build
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3b9e855
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/test
+/coverage
+
+# Build / Production
+/build
+/.next/
+/out/
+tsconfig.tsbuildinfo
+
+# Misc
+.DS_Store
+*.pem
+next-env.d.ts
+
+# Debug / Log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Environment
+.env.*
+.env/
+env/
+
+# IDE
+.idea
+.vscode
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..1c614cb
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "trailingComma": "all",
+ "printWidth": 80,
+ "semi": true,
+ "tabWidth": 4,
+ "singleQuote": false,
+ "useTabs": true
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..ae2ebd5
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,12 @@
+{
+ "extends": [
+ "stylelint-config-standard"
+ ],
+ "ignoreFiles": [
+ "**/*.tsx",
+ "**/*.jsx"
+ ],
+ "rules": {
+ "at-rule-no-unknown": null
+ }
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..78651f6
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,674 @@
+ GNU GENERAL PUBLIC LICENSE
+ Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc.
+ Copyright (C)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see Copyright (C)
+ This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+ This is free software, and you are welcome to redistribute it
+ under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and`show c' should show the appropriate
+parts of the General Public License. Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+ You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..fb4fb7a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,27 @@
+# Check out my page! 📚💻
+
+
+
+Websyte is a personal web portfolio, at the moment it acts only as a simple link hub, with some fun little easter eggs. It is built using React, Next.js, Tailwind and Framer Motion.
+
+## Installation 🛠️
+
+- Clone the repository:
+
+ ```shell
+ git clone https://github.com/Diogu-Simoes/Websyte.git
+ ```
+
+- Install the dependencies:
+
+ ```shell
+ npm install
+ ```
+
+## Usage 🚩
+
+- Quick start the app for testing:
+
+ ```shell
+ npm run dev
+ ```
diff --git a/app/apple-icon.png b/app/apple-icon.png
new file mode 100644
index 0000000..20279c4
Binary files /dev/null and b/app/apple-icon.png differ
diff --git a/app/components/particles.tsx b/app/components/particles.tsx
new file mode 100644
index 0000000..7d07839
--- /dev/null
+++ b/app/components/particles.tsx
@@ -0,0 +1,281 @@
+import React, { useEffect, useRef, useState } from "react";
+
+interface ParticlesProps {
+ className?: string;
+ quantity?: number;
+ staticity?: number;
+ ease?: number;
+ refresh?: boolean;
+}
+
+interface MousePosition {
+ x: number;
+ y: number;
+}
+
+function useMousePosition(): MousePosition {
+ const [mousePosition, setMousePosition] = useState({
+ x: 0,
+ y: 0,
+ });
+
+ useEffect(() => {
+ const handleMouseMove = (event: MouseEvent) => {
+ setMousePosition({ x: event.clientX, y: event.clientY });
+ };
+
+ window.addEventListener("mousemove", handleMouseMove);
+
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, []);
+
+ return mousePosition;
+}
+
+export default function Particles({
+ className = "",
+ quantity = 30,
+ staticity = 50,
+ ease = 50,
+ refresh = false,
+}: ParticlesProps) {
+ const canvasRef = useRef(null);
+ const canvasContainerRef = useRef(null);
+ const context = useRef(null);
+ const circles = useRef([]);
+ const mousePosition = useMousePosition();
+ const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+ const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+ const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+
+ useEffect(() => {
+ if (canvasRef.current) {
+ context.current = canvasRef.current.getContext("2d");
+ }
+
+ initCanvas();
+ animate();
+ window.addEventListener("resize", initCanvas);
+
+ return () => {
+ window.removeEventListener("resize", initCanvas);
+ };
+ }, []);
+
+ useEffect(() => {
+ onMouseMove();
+ }, [mousePosition.x, mousePosition.y]);
+
+ useEffect(() => {
+ initCanvas();
+ }, [refresh]);
+
+ const initCanvas = () => {
+ resizeCanvas();
+ drawParticles();
+ };
+
+ const onMouseMove = () => {
+ if (canvasRef.current) {
+ const rect = canvasRef.current.getBoundingClientRect();
+ const { w, h } = canvasSize.current;
+ const x = mousePosition.x - rect.left - w / 2;
+ const y = mousePosition.y - rect.top - h / 2;
+ const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+
+ if (inside) {
+ mouse.current.x = x;
+ mouse.current.y = y;
+ }
+ }
+ };
+
+ type Circle = {
+ x: number;
+ y: number;
+ translateX: number;
+ translateY: number;
+ size: number;
+ alpha: number;
+ targetAlpha: number;
+ dx: number;
+ dy: number;
+ magnetism: number;
+ };
+
+ const resizeCanvas = () => {
+ if (
+ canvasContainerRef.current &&
+ canvasRef.current &&
+ context.current
+ ) {
+ circles.current.length = 0;
+ canvasSize.current.w = canvasContainerRef.current.offsetWidth;
+ canvasSize.current.h = canvasContainerRef.current.offsetHeight;
+ canvasRef.current.width = canvasSize.current.w * dpr;
+ canvasRef.current.height = canvasSize.current.h * dpr;
+ canvasRef.current.style.width = `${canvasSize.current.w}px`;
+ canvasRef.current.style.height = `${canvasSize.current.h}px`;
+ context.current.scale(dpr, dpr);
+ }
+ };
+
+ const circleParams = (): Circle => {
+ const x = Math.floor(Math.random() * canvasSize.current.w);
+ const y = Math.floor(Math.random() * canvasSize.current.h);
+ const translateX = 0;
+ const translateY = 0;
+ const size = Math.floor(Math.random() * 5) + 0.1;
+ const alpha = 0;
+ const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+ const dx = (Math.random() - 0.5) * 0.2;
+ const dy = (Math.random() - 0.5) * 0.2;
+ const magnetism = 0.1 + Math.random() * 4;
+
+ return {
+ x,
+ y,
+ translateX,
+ translateY,
+ size,
+ alpha,
+ targetAlpha,
+ dx,
+ dy,
+ magnetism,
+ };
+ };
+
+ const drawCircle = (circle: Circle, update = false) => {
+ if (context.current) {
+ const { x, y, translateX, translateY, size, alpha } = circle;
+
+ context.current.translate(translateX, translateY);
+ context.current.beginPath();
+ context.current.arc(x, y, size, 0, 2 * Math.PI);
+ context.current.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+ context.current.fill();
+ context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+ if (!update) {
+ circles.current.push(circle);
+ }
+ }
+ };
+
+ const clearContext = () => {
+ if (context.current) {
+ context.current.clearRect(
+ 0,
+ 0,
+ canvasSize.current.w,
+ canvasSize.current.h,
+ );
+ }
+ };
+
+ const drawParticles = () => {
+ clearContext();
+ const particleCount = quantity;
+
+ for (let i = 0; i < particleCount; i++) {
+ const circle = circleParams();
+
+ drawCircle(circle);
+ }
+ };
+
+ const remapValue = (
+ value: number,
+ start1: number,
+ end1: number,
+ start2: number,
+ end2: number,
+ ): number => {
+ const remapped =
+ ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+
+ return remapped > 0 ? remapped : 0;
+ };
+
+ const animate = () => {
+ clearContext();
+ circles.current.forEach((circle: Circle, i: number) => {
+ // Handle the alpha value
+ const edge = [
+ circle.x + circle.translateX - circle.size, // distance from left edge
+ canvasSize.current.w -
+ circle.x -
+ circle.translateX -
+ circle.size, // distance from right edge
+ circle.y + circle.translateY - circle.size, // distance from top edge
+ canvasSize.current.h -
+ circle.y -
+ circle.translateY -
+ circle.size, // distance from bottom edge
+ ];
+ const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+ const remapClosestEdge = parseFloat(
+ remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
+ );
+
+ if (remapClosestEdge > 1) {
+ circle.alpha += 0.02;
+
+ if (circle.alpha > circle.targetAlpha) {
+ circle.alpha = circle.targetAlpha;
+ }
+ } else {
+ circle.alpha = circle.targetAlpha * remapClosestEdge;
+ }
+
+ circle.x += circle.dx;
+ circle.y += circle.dy;
+ circle.translateX +=
+ (mouse.current.x / (staticity / circle.magnetism) -
+ circle.translateX) /
+ ease;
+ circle.translateY +=
+ (mouse.current.y / (staticity / circle.magnetism) -
+ circle.translateY) /
+ ease;
+
+ // circle gets out of the canvas
+ if (
+ circle.x < -circle.size ||
+ circle.x > canvasSize.current.w + circle.size ||
+ circle.y < -circle.size ||
+ circle.y > canvasSize.current.h + circle.size
+ ) {
+ // remove the circle from the array
+ circles.current.splice(i, 1);
+ // create a new circle
+ const newCircle = circleParams();
+
+ drawCircle(newCircle);
+ // update the circle position
+ } else {
+ drawCircle(
+ {
+ ...circle,
+ x: circle.x,
+ y: circle.y,
+ translateX: circle.translateX,
+ translateY: circle.translateY,
+ alpha: circle.alpha,
+ },
+ true,
+ );
+ }
+ });
+ window.requestAnimationFrame(animate);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..8e00091
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ .text-edge-outline {
+ -webkit-text-stroke: 1px rgb(255 255 255 / 30%);
+ }
+}
diff --git a/app/icon.svg b/app/icon.svg
new file mode 100644
index 0000000..bc2c63d
--- /dev/null
+++ b/app/icon.svg
@@ -0,0 +1,133 @@
+
+ watermark (1)-svg
+
+
+
+
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..5f4cef4
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,31 @@
+import "./globals.css";
+import { Metadata } from "next";
+import React from "react";
+import { Work_Sans } from "next/font/google";
+import { Analytics } from '@vercel/analytics/react';
+
+export const metadata: Metadata = {
+ title: "Dy0gu",
+ description: "Just an individual, writing some code on the internet.",
+ metadataBase: new URL("https://dy0gu.com"),
+};
+
+const font = Work_Sans({
+ subsets: ["latin"],
+ display: "block",
+});
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {children}
+
+
+
+ {navigation.map((item, index) => (
+
+ ●
+ )}
+
+ ))}
+
+
+
+
+
+ DY0GU
+
+
+
+
+
+
+ text changed, crazy...",
+ "Have you heard about the mathematician who's afraid of negative numbers?",
+ "He'll stop at nothing to avoid them.",
+ "Is making your own website a developer cliché already?",
+ "In my school we only learned 25 letters of the alphabet, to this day I still don't know y .",
+ "How come scientists don't trust atoms?",
+ "Because they make up everything!",
+ "Watch my all time favorite video on YouTube!",
+ "Parallel lines have so much in common. It's a shame they'll never meet.",
+ "Hotdogs all look the same because they're in-bread .",
+ "I've been writing a book on procrastination.",
+ "I'll finish it one of these days...",
+ "You should also check out @jtsimoes !",
+ "Do you think I overdid it with the font size?",
+ "Have you ever noticed how the word \"bed\" kinda looks like a bed?",
+ "Ireland is just one sea away from Iceland.",
+ "You're still reading these?",
+ "Come on go home, there is nothing more to see here.",
+ "I'm serious, there are no more quirky or funny messages.",
+ "Okay now you're making me upset.",
+ "Go away .",
+ "You know what? I'm just gonna loop you to the beginning, let's see how you like that!",
+ ],
+ autoStart: true,
+ loop: true,
+ deleteSpeed: 25,
+ delay: 75,
+ }}
+ />
+
+
+
+