",
20 | ],
21 | importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
22 | plugins: [
23 | "@ianvs/prettier-plugin-sort-imports",
24 | "prettier-plugin-tailwindcss",
25 | ],
26 | };
27 |
28 | export default config;
29 |
--------------------------------------------------------------------------------
/app/api/repositories/route.js:
--------------------------------------------------------------------------------
1 | import { config } from "@/main.config";
2 |
3 | export async function GET(request) {
4 | try {
5 | const username = config.github.username;
6 | const token = process.env.GITHUB_TOKEN;
7 | const url = `https://api.github.com/users/${username}/repos?sort=updated&per_page=8`;
8 |
9 | if (!token) throw new Error("No GITHUB_TOKEN in .env file found");
10 |
11 | const response = await fetch(url, {
12 | headers: {
13 | Authorization: `token ${token}`,
14 | },
15 | });
16 |
17 | const repositories = await response.json();
18 | return new Response(JSON.stringify(repositories), {
19 | headers: {
20 | "content-type": "application/json",
21 | },
22 | });
23 | } catch (error) {
24 | console.log(error);
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | images: {
4 | remotePatterns: [
5 | {
6 | protocol: "https",
7 | hostname: "avatars.githubusercontent.com",
8 | port: "",
9 | pathname: "/u/**",
10 | },
11 | {
12 | protocol: "https",
13 | hostname: "opengraph.githubassets.com",
14 | port: "",
15 | pathname: "/**",
16 | },
17 | {
18 | protocol: "https",
19 | hostname: "www.contenthook.dev",
20 | port: "",
21 | pathname: "/**",
22 | },
23 | ],
24 | },
25 | redirects: async () => {
26 | return [
27 | {
28 | source: "/socials/github",
29 | destination: "https://github.com/binary-blazer/portfolio",
30 | permanent: true,
31 | },
32 | ];
33 | },
34 | };
35 |
36 | export default nextConfig;
37 |
--------------------------------------------------------------------------------
/loaders/theme.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | export default function ThemeLoader({ children }) {
6 | const availableThemes = ["blue", "green", "red", "yellow", "purple", "pink"];
7 |
8 | React.useEffect(() => {
9 | setInterval(() => {
10 | if (typeof window !== "undefined") {
11 | const theme = window.localStorage.getItem("theme");
12 | if (theme) {
13 | if (!availableThemes.includes(theme)) {
14 | const set = () => {
15 | window.localStorage.setItem("theme", "blue");
16 | window.document.documentElement.classList.add("theme-blue");
17 | };
18 |
19 | return set();
20 | }
21 |
22 | window.document.documentElement.classList.add(`theme-${theme}`);
23 | } else {
24 | window.localStorage.setItem("theme", "blue");
25 | window.document.documentElement.classList.add("theme-blue");
26 | }
27 | }
28 | }, 100);
29 | }, []);
30 |
31 | return children;
32 | }
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio",
3 | "version": "3.8.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "lint:fix": "next lint --fix",
11 | "format": "prettier --write .",
12 | "format:check": "prettier --check ."
13 | },
14 | "dependencies": {
15 | "@fireworks-js/react": "^2.10.8",
16 | "@headlessui/react": "^2.2.0",
17 | "@sdevs/screen-sizr": "^2.0.0",
18 | "cobe": "^0.6.3",
19 | "dotenv": "^16.4.5",
20 | "framer-motion": "^11.3.7",
21 | "next": "14.2.32",
22 | "react": "^18.3.1",
23 | "react-dom": "^18.3.1"
24 | },
25 | "devDependencies": {
26 | "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
27 | "@tailwindcss/typography": "^0.5.13",
28 | "autoprefixer": "^10.4.19",
29 | "eslint": "^9.7.0",
30 | "eslint-config-next": "14.2.5",
31 | "postcss": "^8.4.39",
32 | "prettier": "3.3.3",
33 | "prettier-plugin-tailwindcss": "^0.6.5",
34 | "tailwindcss": "^3.4.6"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/providers/mobile.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import { config } from "@/main.config";
5 |
6 | export default function MobileProvider({ children }) {
7 | const [isMobile, setIsMobile] = useState(false);
8 |
9 | useEffect(() => {
10 | if (!config.mobileAllowed) return setIsMobile(false);
11 | const userAgent =
12 | typeof window.navigator === "undefined" ? "" : navigator.userAgent;
13 | const mobile = Boolean(
14 | /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
15 | userAgent,
16 | ),
17 | );
18 | setIsMobile(mobile);
19 | }, []);
20 |
21 | return (
22 | <>
23 | {!isMobile ? (
24 | children
25 | ) : (
26 |
27 |
28 | 404
29 |
30 |
31 | This page is not available on mobile at the moment.
32 |
33 |
21 | Something went wrong!
22 |
23 |
24 |
25 | Something really bad happened. Please try again later or contact
26 | support.
27 |
28 |
29 |
30 |
36 |
40 | Contact Support
41 |
42 |
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/app/not-found.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { useRouter } from "next/navigation";
5 | import { config } from "@/main.config";
6 | import { motion } from "framer-motion";
7 |
8 | export default function NotFound() {
9 | const router = useRouter();
10 |
11 | return (
12 |
19 | {config.underConstruction && (
20 |
21 | This page might be under construction!
22 |
23 | )}
24 |
25 |
26 | 404 - Not Found!
27 |
28 |
29 |
30 | The page you're looking for doesn't exist or has been moved.
31 |
32 |
33 |
39 |
43 | Contact Support
44 |
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/app/api/contact/route.js:
--------------------------------------------------------------------------------
1 | export async function POST(request) {
2 | try {
3 | const { email, firstName, lastName, message } = await request
4 | .clone()
5 | .json();
6 |
7 | if (!email || !firstName || !lastName || !message) {
8 | return new Response("Missing required fields", { status: 400 });
9 | }
10 |
11 | const discordWebhook = process.env.DISCORD_WEBHOOK;
12 |
13 | if (!discordWebhook) {
14 | return new Response("Discord webhook is not set", { status: 500 });
15 | }
16 |
17 | const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
18 |
19 | if (!emailRegex.test(email)) {
20 | return new Response("Invalid email, please provide a valid email", {
21 | status: 400,
22 | });
23 | }
24 |
25 | if (message.length > 2000) {
26 | return new Response("Message is too long", { status: 400 });
27 | }
28 |
29 | if (email.length > 100) {
30 | return new Response("Email is too long", { status: 400 });
31 | }
32 |
33 | if (firstName.length > 100) {
34 | return new Response("First name is too long", { status: 400 });
35 | }
36 |
37 | if (lastName.length > 100) {
38 | return new Response("Last name is too long", { status: 400 });
39 | }
40 |
41 | const webhookData = {
42 | content: `**New Contact Form Submission**`,
43 | embeds: [
44 | {
45 | color: 0x2f3136,
46 | fields: [
47 | { name: "Name", value: `${firstName} ${lastName}` },
48 | { name: "Email", value: email },
49 | { name: "Message", value: message },
50 | ],
51 | },
52 | ],
53 | };
54 |
55 | const response = await fetch(discordWebhook, {
56 | method: "POST",
57 | headers: {
58 | "Content-Type": "application/json",
59 | },
60 | body: JSON.stringify(webhookData),
61 | });
62 |
63 | if (!response.ok) {
64 | return new Response("An error occurred while sending the message", {
65 | status: 500,
66 | });
67 | }
68 |
69 | return new Response("Message sent successfully", { status: 200 });
70 | } catch (error) {
71 | console.error(error);
72 | return new Response("An error occurred while sending the message", {
73 | status: 500,
74 | });
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `v3` of my Personal portfolio website
2 |
3 | 
4 |
5 | ## 🖥️ Hosting
6 |
7 | []()
8 |
9 | ## Getting Started
10 |
11 | ## 🛠 Development Server
12 |
13 | ```bash
14 | npm/yarn/pnpm install && npm/yarn/pnpm start dev
15 | ```
16 |
17 | ## 🛠 Production Server
18 |
19 | ```bash
20 | npm/yarn/pnpm install && npm/yarn/pnpm run build && npm/yarn/pnpm run start
21 | ```
22 |
23 | # Format
24 |
25 | ```
26 | npm/yarn/pnpm format
27 | ```
28 |
29 | ### Terms of Use
30 |
31 | By using this website, you agree to the following terms of use:
32 |
33 | ```md
34 | - You are not allowed to sell this website or any part of it.
35 | - You are not allowed to claim this website as your own.
36 | - You are not allowed to change the credits ("Developed with ❤️ by BinaryBlazer") in the footer of the website.
37 | - You are allowed to modify the code of this website as long as you don't sell it or claim it as your own.
38 | - You have the permission to share in writing, but you have to mention me, in the article.
39 | - You can't speak in a "i did it" way.
40 | ```
41 |
42 | ## Learn More
43 |
44 | To learn more about Next.js, take a look at the following resources:
45 |
46 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
47 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
48 |
49 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
50 |
51 | ## ⭐ Star
52 |
53 | - Don't forget to star this repo for support :)
54 |
55 | ## 💫 Credits
56 |
57 | ```bash
58 | Developed with ❤️ by BinaryBlazer
59 | ```
60 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 |
3 | module.exports = {
4 | content: [
5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | colors: {
12 | blue: {
13 | "primary-100": "#F0F4FF",
14 | "primary-200": "#D9E2FF",
15 | "primary-300": "#A6C1FF",
16 | "primary-400": "#598BFF",
17 | "primary-500": "#3366FF",
18 | "primary-600": "#274BDB",
19 | "primary-700": "#1A34B8",
20 | "primary-800": "#102694",
21 | "primary-900": "#091C7A",
22 | },
23 | red: {
24 | "primary-100": "#FFF0F0",
25 | "primary-200": "#FFD9D9",
26 | "primary-300": "#FFA6A6",
27 | "primary-400": "#FF5959",
28 | "primary-500": "#FF3333",
29 | "primary-600": "#DB2727",
30 | "primary-700": "#B81A1A",
31 | "primary-800": "#941010",
32 | "primary-900": "#7A0909",
33 | },
34 | yellow: {
35 | "primary-100": "#FFFDF0",
36 | "primary-200": "#FFF9D9",
37 | "primary-300": "#FFF0A6",
38 | "primary-400": "#FFE259",
39 | "primary-500": "#FFD933",
40 | "primary-600": "#DBB727",
41 | "primary-700": "#B89A1A",
42 | "primary-800": "#948010",
43 | "primary-900": "#7A6D09",
44 | },
45 | green: {
46 | "primary-100": "#F0FFF4",
47 | "primary-200": "#D9FFE2",
48 | "primary-300": "#A6FFC1",
49 | "primary-400": "#59FF8B",
50 | "primary-500": "#33FF66",
51 | "primary-600": "#27DB4B",
52 | "primary-700": "#1AB834",
53 | "primary-800": "#109624",
54 | "primary-900": "#097A1C",
55 | },
56 | purple: {
57 | "primary-100": "#F4F0FF",
58 | "primary-200": "#E2D9FF",
59 | "primary-300": "#C1A6FF",
60 | "primary-400": "#8B59FF",
61 | "primary-500": "#6633FF",
62 | "primary-600": "#4B27DB",
63 | "primary-700": "#341AB8",
64 | "primary-800": "#241094",
65 | "primary-900": "#1C097A",
66 | },
67 | pink: {
68 | "primary-100": "#FFF0F4",
69 | "primary-200": "#FFD9E2",
70 | "primary-300": "#FFA6C1",
71 | "primary-400": "#FF598B",
72 | "primary-500": "#FF3366",
73 | "primary-600": "#DB274B",
74 | "primary-700": "#B81A34",
75 | "primary-800": "#941026",
76 | "primary-900": "#7A091C",
77 | },
78 | },
79 | },
80 | container: {
81 | screens: {
82 | sm: "640px",
83 | md: "768px",
84 | lg: "1024px",
85 | xl: "1280px",
86 | "2xl": "2000px",
87 | },
88 | },
89 | },
90 | plugins: [require("@tailwindcss/typography")],
91 | };
92 |
--------------------------------------------------------------------------------
/components/client/NewYearNotice.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import isNewYearsPeriod from "@/functions/isNewYearsPeriod";
5 |
6 | const newYearMessages = [
7 | "Wishing you a year full of happiness and prosperity.",
8 | "May this year bring you endless opportunities and beautiful moments.",
9 | "Here's to new beginnings and amazing adventures ahead!",
10 | "Cheers to another year of growth, success, and joy.",
11 | "May your dreams take flight in this bright new year.",
12 | "Wishing you 365 days of laughter, love, and achievement.",
13 | "New year, new heights! May you soar through this year.",
14 | "Here's to making this year your most remarkable one yet!",
15 | "May this year sparkle with moments of joy and wonder.",
16 | "Time for fresh starts and brilliant new chapters!",
17 | ];
18 |
19 | export default function NewYearNotice() {
20 | const [show, setShow] = useState(false);
21 | const [message, setMessage] = useState("");
22 |
23 | useEffect(() => {
24 | const randomMessage =
25 | newYearMessages[Math.floor(Math.random() * newYearMessages.length)];
26 | setMessage(randomMessage);
27 |
28 | const today = new Date();
29 | const currentYear = today.getFullYear();
30 | const isDec31 = today.getMonth() === 11 && today.getDate() === 31;
31 | const isJan1 = today.getMonth() === 0 && today.getDate() === 1;
32 |
33 | const newYearNoticeSeen = localStorage.getItem("newYearNoticeSeen");
34 | const lastShownYear = localStorage.getItem("lastShownYear");
35 |
36 | if (!newYearNoticeSeen) {
37 | setShow(true);
38 | localStorage.setItem("newYearNoticeSeen", "true");
39 | localStorage.setItem("lastShownYear", currentYear.toString());
40 | return;
41 | }
42 |
43 | if (isDec31 && lastShownYear !== currentYear.toString()) {
44 | setShow(true);
45 | localStorage.setItem("lastShownYear", currentYear.toString());
46 | return;
47 | }
48 |
49 | if (isJan1 && lastShownYear !== (currentYear - 1).toString()) {
50 | setShow(true);
51 | localStorage.setItem("lastShownYear", currentYear.toString());
52 | return;
53 | }
54 |
55 | if (!isNewYearsPeriod()) {
56 | localStorage.removeItem("lastShownYear");
57 | }
58 | }, []);
59 |
60 | return (
61 | <>
62 | {show && (
63 |
64 |
65 |
66 |
Happy New Year!
67 |
68 |
69 |
{message}
70 |
76 |
77 |
78 |
182 |
196 |
197 | )}
198 | {children}
199 |
200 | );
201 | }
202 |
203 | export const useFireworks = () => React.useContext(FireworksContext);
204 |
--------------------------------------------------------------------------------
/app/contact/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { useRouter } from "next/navigation";
5 | import { motion } from "framer-motion";
6 |
7 | export default function Page() {
8 | const router = useRouter();
9 |
10 | const [email, setEmail] = useState("");
11 | const [firstName, setFirstName] = useState("");
12 | const [lastName, setLastName] = useState("");
13 | const [message, setMessage] = useState("");
14 | const [error, setError] = useState(null);
15 |
16 | const handleSubmit = (e) => {
17 | e.preventDefault();
18 |
19 | fetch("/api/contact", {
20 | method: "POST",
21 | headers: {
22 | "Content-Type": "application/json",
23 | },
24 | body: JSON.stringify({ email, firstName, lastName, message }),
25 | })
26 | .then((res) => res.text())
27 | .then((data) => {
28 | if (data === "Message sent successfully") {
29 | setEmail("");
30 | setFirstName("");
31 | setLastName("");
32 | setMessage("");
33 | setError(null);
34 | } else {
35 | setError(data);
36 | }
37 | });
38 | };
39 |
40 | return (
41 |
48 |
49 |
50 |
66 |
67 | Contact Me.
68 |
69 |
70 |
71 | Do you want to say hi or ask me a question? Feel free to send me a
72 | message!
73 |
74 |
76 |
77 |
97 |
117 |
118 |