18 changed files with 774 additions and 251 deletions
--- a/19
+++ b/19
@ -1,19 +0,0 @@
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,57 +1,9 @@
-![GitHub issues](https://img.shields.io/github/issues/HangerThem/hangerthem.com)
-![GitHub forks](https://img.shields.io/github/forks/HangerThem/hangerthem.com)
-![GitHub stars](https://img.shields.io/github/stars/HangerThem/hangerthem.com)
-![GitHub license](https://img.shields.io/github/license/HangerThem/hangerthem.com)
-![GitHub last commit](https://img.shields.io/github/last-commit/HangerThem/hangerthem.com)
-![CodeFactor Grade](https://www.codefactor.io/repository/github/HangerThem/hangerthem.com/badge)
-![Lighthouse Accessibility](https://img.shields.io/badge/accessibility-92-green)
-![Lighthouse Best Practices](https://img.shields.io/badge/best%20practices-100-brightgreen)
-![Lighthouse Performance](https://img.shields.io/badge/performance-100-brightgreen)
-![Lighthouse SEO](https://img.shields.io/badge/SEO-100-brightgreen)
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

-# hangerthem.com
+## Getting Started

-Welcome to my personal portfolio repository, **hangerthem.com**. This webpage is a showcase of my skills and projects, providing a glimpse into who I am and what I do.
+First, run the development server:

-## Project Overview
-
-**hangerthem.com** is a fully custom-designed and coded personal portfolio website. It highlights my skills, projects, and personal information in a clean, responsive layout. The site is built with Next.js and styled-components, and it includes a reCaptcha implementation for secure email communication.
-
-## Features
-
- Fully custom design and code
- Built with Next.js and styled-components
- reCaptcha implemented for secure email sending
- Responsive design for all device sizes
- Easy navigation with a fixed navbar
-
-## Installation Instructions
-
-To run this project locally, you will need Node.js (or Bun) installed on your machine. Follow these steps:
-
-1. **Clone the repository:**
-
-	```bash
-	git clone https://github.com/HangerThem/hangerthem.com.git
-	cd hangerthem.com
-	```
-
-2. **Install dependencies:**
-
-	```bash
-	npm install
-	# or
-	yarn install
-	# or
-	pnpm install
-	# or
-	bun install
-	```
-
-3. **Set up environment variables:**
-   Create a `.env` file in the root directory and add the required environment variables. (Contact me if you need specific details about these variables.)
-
-4. **Run the development server:**
 ```bash
 npm run dev
 # or
@ -62,28 +14,23 @@ To run this project locally, you will need Node.js (or Bun) installed on your ma
 bun dev
 ```

-   Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

-## Usage
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-The portfolio is a single-page application with a navbar for easy navigation between sections. It is fully responsive and works well on all device sizes.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

-### Lighthouse Report
+## Learn More

-![Lighthouse Report](https://lighthouse-report-svg.vercel.app/?perf=100&acc=92&best=100&seo=100&pwa=0)
+To learn more about Next.js, take a look at the following resources:

-## Contributing
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

-This is a personal portfolio, so contributions are not expected. However, if you find any issues or have suggestions, feel free to open an issue or contact me directly.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

-## License
+## Deploy on Vercel

-This project is open source and available under the [MIT License](LICENSE).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

-## Contact Information
-
-You can contact me through the contact form on the website or directly via email at [f.borisjuk@hangerthem.com](mailto:f.borisjuk@hangerthem.com).
-
-## Additional Information
-
-For any other information or inquiries, please feel free to reach out through the provided contact methods.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
--- a/app/api/v1/email/route.ts
+++ b/app/api/v1/email/route.ts
@ -2,12 +2,31 @@ import {
 	successResponse,
 	optionsResponse,
 	badRequestResponse,
+	tooManyRequestsResponse,
 	internalServerErrorResponse,
 } from "@/helpers/apiHelper"
 import { NextRequest, NextResponse } from "next/server"
 import { sendEmail } from "@/utils/emailUtils"
+import rateLimit from "express-rate-limit"
+
+const limiter = rateLimit({
+	windowMs: 15 * 60 * 1000,
+	max: 100,
+	message: "Too many requests, please try again later.",
+})

 export async function POST(req: NextRequest, res: NextResponse) {
+	if (process.env.NODE_ENV !== "development") {
+		await new Promise((resolve, reject) => {
+			limiter(req, res, (result: any) => {
+				if (result instanceof Error) {
+					return tooManyRequestsResponse()
+				}
+				resolve(result)
+			})
+		})
+	}
+
 	try {
 		const { email, name, message, recaptchaToken } = await req.json()

@ -37,7 +56,7 @@ export async function POST(req: NextRequest, res: NextResponse) {
 			text: message,
 		})

-		return successResponse({ message: "Email sent successfully" })
+		return successResponse("Email sent successfully")
 	} catch (e) {
 		console.error(e)
 		return internalServerErrorResponse()
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -33,12 +33,12 @@ export const metadata: Metadata = {
 		alternateLocale: ["cs_CZ"],
 		countryName: "Czechia",
 		emails: ["f.borisjuk@hangerthem.com"],
-		images: ["https://hangerthem.com/hangerthem.png"],
 		url: "https://hangerthem.com",
 		determiner: "auto",
 		ttl: 604800,
 		audio: [],
 		faxNumbers: [],
+		images: [],
 		phoneNumbers: [],
 		videos: [],
 	},
--- a/components/about.tsx
+++ b/components/about.tsx
@ -90,7 +90,6 @@ export default function About() {
 					I&apos;ve built{" "}
 					<Link
 						href="https://github.com/HangerThem/linkboard"
-						aria-label="Linkboard a cool alternative to Linktree"
 						referrerPolicy="no-referrer"
 						target="_blank"
 					>
@ -99,7 +98,6 @@ export default function About() {
 					, a cool alternative to Linktree, and I&apos;m currently developing{" "}
 					<Link
 						href="https://github.com/HangerThem/ephemr"
-						aria-label="Ephemr a simple social network"
 						referrerPolicy="no-referrer"
 						target="_blank"
 					>
--- a/components/contact.tsx
+++ b/components/contact.tsx
@ -115,7 +115,6 @@ export default function Contact() {
 					<button
 						type="submit"
 						disabled={!data.name || !data.email || !data.message || loading}
-						aria-label="Send email"
 					>
 						{loading ? "Sending..." : "Send"}
 					</button>
@ -124,7 +123,6 @@ export default function Contact() {
 				<SocialMedia>
 					<Link
 						href="https://www.instagram.com/ferda_borisjuk/"
-						arial-label="Contact Frank Borisjuk on Instagram"
 						target="_blank"
 						rel="noreferrer"
 					>
@ -132,7 +130,6 @@ export default function Contact() {
 					</Link>
 					<Link
 						href="https://github.com/HangerThem"
-						arial-label="Contact Frank Borisjuk on GitHub"
 						target="_blank"
 						rel="noreferrer"
 					>
@ -140,7 +137,6 @@ export default function Contact() {
 					</Link>
 					<Link
 						href="https://discord.com/users/495134242825699328"
-						arial-label="Contact Frank Borisjuk on Discord"
 						target="_blank"
 						rel="noreferrer"
 					>
@ -148,7 +144,6 @@ export default function Contact() {
 					</Link>
 					<Link
 						href="https://www.linkedin.com/in/franti%C5%A1ek-borisjuk-022686225/"
-						arial-label="Contact Frank Borisjuk on LinkedIn"
 						target="_blank"
 						rel="noreferrer"
 					>
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -41,20 +41,12 @@ export default function Footer() {
 			<FooterContent>
 				<p>
 					Made with ❤️ by{" "}
-					<Link
-						href="https://github.com/HangerThem"
-						aria-label="Frank Borisjuk's GitHub"
-					>
-						Frank Borisjuk
-					</Link>
+					<Link href="https://github.com/HangerThem">Frank Borisjuk</Link>
 				</p>
 				<p>&copy; 2024 - All rights reserved</p>
 				<p>
 					Sources available on{" "}
-					<Link
-						href="https://github.com/HangerThem/hangerthem.com"
-						aria-label="This site's repository on GitHub"
-					>
+					<Link href="https://github.com/HangerThem/hangerthem.com">
 						GitHub
 					</Link>
 				</p>
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@ -348,9 +348,7 @@ const Navbar = () => {
 		<NavbarContainer>
 			<Topbar>
 				<Title>
-					<Link href="/" aria-label="HangerThem's Home Page">
-						HangerThem
-					</Link>
+					<Link href="/">HangerThem</Link>
 				</Title>
 				<HamburgerWrapper
 					ref={hanburgerRef}
@ -366,7 +364,6 @@ const Navbar = () => {
 						<li key={link.id}>
 							<Link
 								href={link.href}
-								arial-label={link.text}
 								className={navState.activeTag === link.id ? "active" : ""}
 								onClick={() =>
 									setNavState((prev) => ({ ...prev, activeTag: link.id }))
@ -379,11 +376,7 @@ const Navbar = () => {
 				</LinksContainer>
 				<SocialLinksContainer>
 					{socialLinks.map((socialLink) => (
-						<Link
-							key={socialLink.id}
-							href={socialLink.href}
-							aria-label={socialLink.text}
-						>
+						<Link key={socialLink.id} href={socialLink.href}>
 							{socialLink.icon}
 							{socialLink.text}
 						</Link>
--- a/components/projects.tsx
+++ b/components/projects.tsx
@ -11,12 +11,10 @@ import { Container, Content } from "@/styles/pageStyles"
 const CarouselWrapper = styled.div`
 	display: flex;
 	transition: transform 0.5s ease-in-out;
-	flex-direction: column;
-	width: 100%;
-	gap: 1rem;
+	gap: 2rem;

-	@media (min-width: 1250px) {
-		flex-direction: row;
+	@media (max-width: 1200px) {
+		flex-direction: column;
 		align-items: center;
 	}
 `
@ -27,9 +25,9 @@ const CarouselContainer = styled.div`
 `

 const ProjectCard = styled.div`
-	width: 100%;
-	height: auto;
-	padding: 1rem;
+	padding: 2rem;
+	width: 400px;
+	height: 600px;
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@ -42,7 +40,7 @@ const ProjectCard = styled.div`
 		font-size: 2rem;
 		font-weight: 600;

-		@media (min-width: 1250px) {
+		@media (max-width: 1200px) {
 			font-size: 1.5rem;
 		}
 	}
@ -51,18 +49,20 @@ const ProjectCard = styled.div`
 		font-size: 1.2rem;
 		font-weight: 400;

-		@media (min-width: 1250px) {
+		@media (max-width: 1200px) {
 			font-size: 1rem;
 		}
 	}

 	img {
 		width: 100%;
-		height: auto;
-		min-height: 150px;
-		max-height: 200px;
-		object-fit: contain;
+		height: 200px;
+		object-fit: cover;
 		border-radius: 1rem;
+
+		@media (max-width: 1200px) {
+			height: 150px;
+		}
 	}

 	&:not(.active) {
@ -70,16 +70,15 @@ const ProjectCard = styled.div`
 		transform: scale(0.8);
 	}

-	@media (min-width: 1250px) {
-		padding: 2rem;
-		width: 400px;
-		height: 550px;
+	@media (max-width: 1200px) {
+		width: 100%;
+		height: auto;
+		padding: 1rem;
 	}
 `

 const NavigationButton = styled.button`
 	position: absolute;
-	display: none;
 	top: 50%;
 	transform: translateY(-50%);
 	border: none;
@ -94,17 +93,17 @@ const NavigationButton = styled.button`
 		color: rgb(var(--white));
 	}

-	@media (min-width: 1250px) {
-		display: block;
+	@media (max-width: 1200px) {
+		display: none;
 	}
 `

 const PrevButton = styled(NavigationButton)`
-	left: -0.25rem;
+	left: 0;
 `

 const NextButton = styled(NavigationButton)`
-	right: -0.25rem;
+	right: 0;
 `

 const CarouselIndicator = styled.div`
@ -113,7 +112,7 @@ const CarouselIndicator = styled.div`
 	gap: 0.5rem;
 	margin-top: 1rem;

-	@media (min-width: 1250px) {
+	@media (max-width: 1200px) {
 		margin-top: 0.5rem;
 	}
 `
@ -129,7 +128,7 @@ const IndicatorDot = styled.div`
 		background-color: rgb(var(--white));
 	}

-	@media (min-width: 1250px) {
+	@media (max-width: 1200px) {
 		width: 8px;
 		height: 8px;
 	}
@ -147,7 +146,7 @@ const TechStack = styled.div`
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;

-		@media (min-width: 1250px) {
+		@media (max-width: 1200px) {
 			font-size: 0.7rem;
 			padding: 0.2rem 0.4rem;
 		}
@ -174,10 +173,9 @@ const ViewLink = styled(Link)`

 	&:hover {
 		background-color: rgb(var(--primary));
-		color: rgb(var(--white));
 	}

-	@media (min-width: 1250px) {
+	@media (max-width: 1200px) {
 		font-size: 1rem;
 		padding: 0.4rem 0.8rem;
 	}
@ -193,7 +191,7 @@ const SourceLink = styled(Link)`
 		color: rgb(var(--white));
 	}

-	@media (min-width: 1250px) {
+	@media (max-width: 1200px) {
 		svg {
 			width: 25px;
 			height: 25px;
@ -271,7 +269,6 @@ const Projects = () => {
 											href={project.href}
 											target="_blank"
 											title="View Project"
-											arial-label="View Project"
 										>
 											View Project
 										</ViewLink>
@ -280,7 +277,6 @@ const Projects = () => {
 										href={project.source}
 										target="_blank"
 										title="View Source"
-										arial-label="View Source"
 									>
 										<Git size={30} />
 									</SourceLink>
@ -288,10 +284,10 @@ const Projects = () => {
 							</ProjectCard>
 						))}
 					</CarouselWrapper>
-					<PrevButton onClick={handlePrev} aria-label="Previous Project">
+					<PrevButton onClick={handlePrev}>
 						<CaretLeftFill size={50} />
 					</PrevButton>
-					<NextButton onClick={handleNext} aria-label="Next Project">
+					<NextButton onClick={handleNext}>
 						<CaretRightFill size={50} />
 					</NextButton>
 					<CarouselIndicator>
--- a/components/skills.tsx
+++ b/components/skills.tsx
@ -100,7 +100,7 @@ export default function Skills() {
 				<Categories>
 					{skills.languages && (
 						<SkillCategory>
-							<h3>Languages</h3>
+							<h4>Languages</h4>
 							<ul>
 								{skills.languages.map((language, index) => (
 									<li key={index}>
@ -115,7 +115,7 @@ export default function Skills() {
 					)}
 					{skills.programmingLanguages && (
 						<SkillCategory>
-							<h3>Programming Languages</h3>
+							<h4>Programming Languages</h4>
 							<ul>
 								{skills.programmingLanguages.map(
 									(programmingLanguage, index) => (
@ -132,7 +132,7 @@ export default function Skills() {
 					)}
 					{skills.technologies && (
 						<SkillCategory>
-							<h3>Technologies</h3>
+							<h4>Technologies</h4>
 							<ul>
 								{skills.technologies.map((technology, index) => (
 									<li key={index}>
@ -147,7 +147,7 @@ export default function Skills() {
 					)}
 					{skills.tools && (
 						<SkillCategory>
-							<h3>Tools</h3>
+							<h4>Tools</h4>
 							<ul>
 								{skills.tools.map((tool, index) => (
 									<li key={index}>
--- a/data/projects.ts
+++ b/data/projects.ts
@ -32,7 +32,7 @@ const projects: Project[] = [
 	{
 		title: "HangerThem Portfolio",
 		description: "This very website and my personal portfolio.",
-		image: "/hangerthem.png",
+		// image: "/hangerthem.png",
 		techStack: ["Next.js", "TypeScript", "Styled Components"],
 		href: "https://hangerthem.com",
 		source: "https://github.com/HangerThem/hangerthem.com",
@ -58,16 +58,6 @@ const projects: Project[] = [
 		source: "https://github.com/HangerThem/ephemeris",
 		state: "done",
 	},
-	{
-		title: "Lighthouse SVG report",
-		description: "A simple SVG report generator for Lighthouse reports.",
-		image:
-			"https://lighthouse-report-svg.vercel.app/?perf=100&acc=92&best=100&seo=100&pwa=0",
-		techStack: ["TypeScript", "Node.js", "Express"],
-		href: "https://lighthouse-report-svg.vercel.app",
-		source: "https://github.com/HangerThem/lighthouse-report-svg",
-		state: "done",
-	},
 	{
 		title: "Evolution algorithm Flappy Bird",
 		description:
--- a/helpers/apiHelper.ts
+++ b/helpers/apiHelper.ts
@ -36,6 +36,10 @@ export function badRequestResponse(errorMessage?: string | {}) {
 	return jsonResponse(400, { error: errorMessage ?? "Bad request" })
 }

+export function tooManyRequestsResponse() {
+	return jsonResponse(429, { error: "Too many requests" })
+}
+
 export function internalServerErrorResponse() {
 	return jsonResponse(500, { error: "Internal server error" })
 }
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@ -1,5 +0,0 @@
-/** @type {import('next-sitemap').IConfig} */
-module.exports = {
-	siteUrl: process.env.SITE_URL || "https://example.com",
-	generateRobotsTxt: true,
-}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,14 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-	images: {
-		remotePatterns: [
-			{
-				hostname: "lighthouse-report-svg.vercel.app",
-				protocol: "https",
-			},
-		],
-		dangerouslyAllowSVG: true,
-	},
-}
+const nextConfig = {};

-export default nextConfig
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,16 +5,15 @@
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
-		"postbuild": "next-sitemap",
 		"start": "next start",
 		"lint": "next lint"
 	},
 	"dependencies": {
 		"@vercel/analytics": "^1.3.1",
 		"canvas-confetti": "^1.9.3",
+		"express-rate-limit": "^7.4.0",
 		"next": "14.1.0",
 		"next-recaptcha-v3": "^1.4.1",
-		"next-sitemap": "^4.2.3",
 		"nodemailer": "^6.9.14",
 		"react": "^18",
 		"react-bootstrap-icons": "^1.11.4",
--- a/public/hangerthem.png
+++ b/public/hangerthem.png
--- a/styles/globalStyle.ts
+++ b/styles/globalStyle.ts
@ -4,9 +4,9 @@ import { createGlobalStyle } from "styled-components"

 export const GlobalStyle = createGlobalStyle`
  :root {
-    --primary: 239, 31, 31;
+    --primary: 201, 14, 14;
    --white: 255, 255, 255;
-    --black: 5, 5, 5;
+    --black: 0, 0, 0;
    --background: 217, 217, 217;
    --accent: 104, 104, 104;
  }
@ -56,8 +56,4 @@ export const GlobalStyle = createGlobalStyle`
      color: rgb(var(--primary), 0.8);
    }
  }
-
-  .grecaptcha-badge { 
-    visibility: hidden !important;
-}
 `