Run everything on edge

app/api/contact/route.js

@@ -1,5 +1,7 @@
 import isEmail from "validator/lib/isEmail";
 
+export const runtime = "edge";
+
 export async function POST(request) {
  const clonedStream = request.clone();
  const { email, name, message } = await clonedStream.json();

app/api/github/repositories/list/route.js

@@ -3,6 +3,8 @@ import { GetRepos } from "lib/graphQl";
 // Type: [private, public]
 // Count: Number of repos to return [min 0, max 50]
 
+export const runtime = "edge";
+
 export async function GET(request) {
  const start = Date.now();
  let { type, count } = Object.fromEntries(new URL(request.url.replaceAll("&amp%3B", "&")).searchParams.entries());

app/api/github/repositories/popular/route.js

@@ -1,5 +1,7 @@
 import { GetPopular } from "lib/graphQl";
 
+export const runtime = "edge";
+
 export async function GET() {
  const start = Date.now();
  const data = await GetPopular();

app/api/github/user/contributions/[...year]/route.js

@@ -1,5 +1,7 @@
 import { getTotalYears, getTotalContributionsForYear } from "lib/graphQl";
 
+export const runtime = "edge";
+
 export async function GET(request, { params }) {
  const start = Date.now();
  const year = params.year;

app/api/github/user/contributions/route.js

@@ -1,5 +1,7 @@
 import { getTotalContributionsForYears } from "lib/graphQl";
 
+export const runtime = "edge";
+
 export async function GET() {
  const start = Date.now();
  const user = await getTotalContributionsForYears();

app/api/github/user/contributions/years/route.js

@@ -1,5 +1,7 @@
 import { getTotalYears } from "lib/graphQl";
 
+export const runtime = "edge";
+
 export async function GET() {
  const start = Date.now();
  const user = await getTotalYears();

app/api/github/user/route.js

@@ -1,5 +1,7 @@
 import { GetUserData } from "/lib/graphQl";
 
+export const runtime = "edge";
+
 export async function GET() {
  const start = Date.now();
  const user = await GetUserData();

app/api/og/route.js

@@ -1,6 +1,8 @@
 import { ImageResponse } from "next/server";
 import { parseISO } from "/lib/utils";
 
+export const runtime = "edge";
+
 const fontPoppinsBold = fetch(new URL("/public/fonts/bold.ttf", import.meta.url)).then((res) => res.arrayBuffer());
 
 export async function GET(request) {
@@ -76,7 +78,3 @@ export async function GET(request) {
  }
  );
 }
-
-export const config = {
- runtime: "edge",
-};

app/api/technologies/route.js

@@ -1,5 +1,7 @@
 import { technologies } from "config";
 
+export const runtime = "edge";
+
 export async function GET() {
  return new Response(JSON.stringify(technologies), {
  status: 200,
@@ -8,7 +10,3 @@ export async function GET() {
  },
  });
 }
-
-export const config = {
- runtime: "edge",
-};

app/page.jsx

@@ -126,12 +126,12 @@ export default async function HomePage() {
  <div className="relative mx-auto before:absolute before:inset-0 before:z-[-1] before:bg-[length:22px_22px] before:bg-center before:bg-repeat-space before:opacity-10 before:bg-grid-[#000] before:gradient-mask-t-0 dark:before:opacity-20 dark:before:bg-grid-[#fff]" id={"repositories"}>
  <h3 className="dark:color-black m-6 bg-gradient-to-r from-[#712af6] to-[#1a8aec] box-decoration-clone bg-clip-text text-center font-inter text-[35px] font-semibold tracking-[-0.03em] duration-300 text-fill-transparent motion-reduce:transition-none dark:from-[#a2facf] dark:to-[#64acff] md:text-[35px] lg:text-[37px] xl:text-[40px]">Most Popular Projects.</h3>
  <div className="relative">
- <GlowEffect className="xl-grid-cols-4 mb-8 grid grid-cols-1 gap-x-6 gap-y-10 pb-4 text-center font-inter text-black dark:text-white md:grid-cols-2 md:gap-x-10 lg:grid-cols-3">
+ <div className="xl-grid-cols-4 mb-8 grid grid-cols-1 gap-x-6 gap-y-10 pb-4 text-center font-inter text-black dark:text-white md:grid-cols-2 md:gap-x-10 lg:grid-cols-3">
  {reposData &&
  reposData.map((repo) => {
  return repo.node.owner.login == "IgorKowalczyk" ? <RepoCard key={repo.node.id} {...repo.node} /> : null;
  })}
- </GlowEffect>
+ </div>
  <div className="pointer-events-visible section-fade absolute inset-x-0 bottom-0 z-20 flex pb-8 pt-32 duration-300">
  <div className="flex flex-1 flex-col items-center justify-center duration-200 motion-reduce:transition-none">
  <Link className="arrow link group pointer-events-auto relative mt-5 inline-block items-center justify-center p-2 pb-1 pl-0 pr-0 font-inter font-semibold duration-200 motion-reduce:transition-none" href="/repositories">

app/repositories/page.jsx

@@ -1,8 +1,9 @@
 import Squares from "components/decorations/Squares";
-import { GlowEffect } from "components/elements/GlowEffect";
 import { RepoCard } from "components/elements/RepoCard";
 import { GetRepos } from "lib/graphQl";
 
+export const runtime = "edge";
+
 export const metadata = {
  title: "Github Repositories",
 };
@@ -22,11 +23,11 @@ export default async function GithubRepositories() {
  </h1>
  <div id="cards">
  {repositories && (
- <GlowEffect className="xl-grid-cols-4 grid grid-cols-1 gap-x-6 gap-y-10 text-center font-inter text-black dark:text-white md:grid-cols-2 md:gap-x-10 lg:grid-cols-3">
+ <div className="xl-grid-cols-4 grid grid-cols-1 gap-x-6 gap-y-10 text-center font-inter text-black dark:text-white md:grid-cols-2 md:gap-x-10 lg:grid-cols-3">
  {repositories?.map((repo) => (
- <RepoCard key={repo.id} {...repo} className="card" />
+ <RepoCard key={repo.id} {...repo} />
  ))}
- </GlowEffect>
+ </div>
  )}
  </div>
  </>

components/elements/GlowEffect.jsx

@@ -1,81 +1,11 @@
 "use client";
 
-import "styles/cards.css";
-import { useEffect, useRef } from "react";
+import Tilt from "react-parallax-tilt";
 
 export function GlowEffect({ children, className }) {
- const cardContainerRef = useRef(null);
-
- useEffect(() => {
- const cardContainerElement = cardContainerRef.current;
- let currentCardElement = null;
-
- function handleMousemove(e) {
- const glowSetting = localStorage.getItem("glow");
- const cardElement = e.target.closest(".card");
- if (!cardElement) return;
-
- if (currentCardElement !== cardElement) {
- if (currentCardElement) {
- currentCardElement.style.transition = "";
- currentCardElement.style.transform = "";
- }
- currentCardElement = cardElement;
- }
-
- if (glowSetting === "false") {
- currentCardElement.style.setProperty("--mouse-x", null);
- currentCardElement.style.setProperty("--mouse-y", null);
- return;
- }
-
- function getTiltX(dy, height) {
- const halfHeight = height / 2;
- const normalizedDy = Math.min(Math.max(dy, -halfHeight), halfHeight);
- return (-normalizedDy / halfHeight) * 2;
- }
-
- function getTiltY(dx, width) {
- const halfWidth = width / 2;
- const normalizedDx = Math.min(Math.max(dx, -halfWidth), halfWidth);
- return (normalizedDx / halfWidth) * -2;
- }
-
- const rect = cardElement.getBoundingClientRect();
- const cardCenterX = rect.left + rect.width / 2;
- const cardCenterY = rect.top + rect.height / 2;
- const dx = e.clientX - cardCenterX;
- const dy = e.clientY - cardCenterY;
-
- const tiltX = getTiltX(dy, rect.height);
- const tiltY = getTiltY(dx, rect.width);
-
- currentCardElement.style.setProperty("--mouse-x", `${e.clientX - rect.left}px`);
- currentCardElement.style.setProperty("--mouse-y", `${e.clientY - rect.top}px`);
- currentCardElement.style.transform = `perspective(700px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
- }
-
- function handleMouseleave() {
- if (currentCardElement) {
- currentCardElement.style.transform = "";
- currentCardElement = null;
- }
- }
-
- if (typeof window !== "undefined" && cardContainerRef.current) {
- cardContainerElement.addEventListener("mousemove", handleMousemove);
- cardContainerElement.addEventListener("mouseleave", handleMouseleave);
- }
-
- return () => {
- cardContainerElement.removeEventListener("mousemove", handleMousemove);
- cardContainerElement.removeEventListener("mouseleave", handleMouseleave);
- };
- }, [cardContainerRef]);
-
  return (
- <div ref={cardContainerRef} className={`${className} card-container`}>
+ <Tilt glareEnable={true} glareMaxOpacity={0.1} glareColor="#ffffff" glarePosition="all" glareBorderRadius="8px" tiltMaxAngleX={5} tiltMaxAngleY={5} className={className}>
  {children}
- </div>
+ </Tilt>
  );
 }

config.js

@@ -166,7 +166,7 @@ export const footer = {
  },
  {
  title: "Contact",
- href: "/#contact",
+ href: "/contact",
  },
  ],
  },

package.json

@@ -1,7 +1,7 @@
 {
  "name": "igorkowalczyk-portfolio",
  "description": "My portfolio built on Next.js",
- "version": "4.1.0",
+ "version": "4.2.0",
  "private": true,
  "scripts": {
  "start": "next start",
@@ -34,6 +34,7 @@
  "plaiceholder": "2.5.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-parallax-tilt": "^1.7.128",
  "react-wrap-balancer": "0.4.0",
  "reading-time": "1.5.0",
  "rehype-autolink-headings": "6.1.1",