Merge branch 'main' into dependabot/npm_and_yarn/storybook/addon-esse…

…ntials-8.2.9

README.md

@@ -41,6 +41,10 @@ Components have used storybook for documentation. To see documents and how compo
 npm run storybook
 ```
 
+# Project's Tech Stack
+
+![Tech Stacks](https://skillicons.dev/icons?i=javascript,typescript,nextjs,react,tailwind)
+
 # How to The Project Works?
 
 We have used MDX and `contentlayer` for writing articles and each article is a `.mdx` file. For example, to create a new blog simply create a file in `/src/content`. Such as `sample-article.mdx`.
@@ -206,8 +210,25 @@ If any of the articles in the series is not yet ready to be published or read, j
 
 ## Articles Main Category
 
-If you want to set a main category for your articles and show it in the list of articles, just pass the `category` prop to your articles. It is a string.
+If you want to set a main category for your articles and show it in the list of articles, pass the `category` prop to your articles. It is a string.
 
 ```mdx
 category: "sample category"
 ```
+
+### How to change static content of website
+
+#### File sources
+
+- You can change the static contents of footer, main page and about me page here: `/src/constants/Content.constants.ts`
+- Footer: `/src/components/ui/Footer.tsx`
+- Communication Links (about me page): `/src/constants/CommunicationLinks.constants.tsx`
+- Work Experience Companies Information: `/src/constants/Companies.constants.ts`
+- Toolbar links: `/src/constants/toolbarlinks.constants.tsx`
+- Top Navigation Links: `/src/constants/Navigation.constants.ts`
+
+### How to change Images of Home page and About me page:
+
+To change the hero image of the home page, you just need to replace the import source of `heroImage` with the newly added image in the `/public/images` in this file: `/src/constants/index.ts`
+
+To change the images of the about me page, you need to do the same thing within the same `/src/constants/index.ts` file.

package.json

@@ -20,7 +20,7 @@
  },
  "dependencies": {
  "contentlayer": "^0.3.4",
- "next": "14.2.5",
+ "next": "14.2.8",
  "next-contentlayer": "^0.3.4",
  "next-themes": "^0.3.0",
  "nextjs-toploader": "^1.6.12",

src/app/(about-me)/_components/AboutMeHero.tsx

@@ -5,6 +5,10 @@ import {
  armanSecondImage,
  armanThirdImage,
 } from "@/constants";
+import {
+ ABOUT_ME_PAGE_DESCRIPTION,
+ ABOUT_ME_PAGE_SUB_TITLE,
+} from "@/constants/Content.constants";
 import Image from "next/image";
 
 const AboutMeHeroSection = () => {
@@ -20,7 +24,7 @@ const AboutMeHeroSection = () => {
  className="pt-3 text-body2 text-text-primary"
  data-testid="about-me-subtitle"
  >
- From Backend Engineering to Personal Pursuits
+ {ABOUT_ME_PAGE_SUB_TITLE}
  </span>
  </header>
 
@@ -83,12 +87,7 @@ const AboutMeHeroSection = () => {
  </div>
 
  <p className="text-body2 leading-6 text-text-primary md:text-body1">
- Hi, I'm Arman! I'm based in the Netherlands and work as a backend
- engineer at Onefit/Urban Sports Club. Beyond coding, I really enjoy
- exploring a variety of topics and writing about things that pique my
- interest, whether they're related to technology or beyond. In my free
- time, you'll often find me playing tennis, cycling on my XC bike,
- hitting the gym, and diving into technical books.
+ {ABOUT_ME_PAGE_DESCRIPTION}
  </p>
  </div>
  </section>

src/app/(about-me)/_components/WorkExperienceSection.tsx

@@ -1,13 +1,14 @@
 import SectionHeader from "@/components/ui/SectionHeader";
 import WorkExperienceList from "./WorkExperienceList";
 import Section from "@/components/ui/Section";
+import { ABOUT_ME_WORK_EXPERIENCE_DESCRIPTION } from "@/constants/Content.constants";
 
 const WorkExperienceSection = () => {
  return (
  <Section type="common">
  <SectionHeader
  title="work"
- description="With over 5 years as a backend engineer, I specialize in backend services, microservices architecture, and comprehensive backend development strategies. Skilled in API design, database optimization, and meticulous documentation. Committed to delivering scalable solutions and staying updated with industry trends."
+ description={ABOUT_ME_WORK_EXPERIENCE_DESCRIPTION}
  />
 
  <WorkExperienceList />

src/app/(articles)/articles/[slug]/page.tsx

@@ -50,6 +50,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // finding article data
  const articleData = allArticles?.find((article) => article.slug === slug);
 
+ const baseUrl = articleData?.baseUrl?.replace(/\/$/, ""); // Remove trailing slash
+ const shareLink = articleData?.shareLink?.replace(/^\//, ""); // Remove leading slash
+ const canonicalUrl = `${baseUrl}/${shareLink}`;
+
  return {
  metadataBase: articleData?.baseUrl as unknown as URL,
  title: `Arman Ahmadi - ${articleData?.title}`,
@@ -65,9 +69,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
  },
  robots: articleData?.robots,
  alternates: {
- canonical:
- articleData?.canonical ||
- `${articleData?.baseUrl}${articleData?.shareLink}`,
+ canonical: articleData?.canonical || canonicalUrl,
  },
  twitter: {
  card: "summary_large_image",

src/app/(home)/_components/HomeHeroSection.tsx

@@ -1,6 +1,11 @@
 import Image from "next/image";
 import { heroImage } from "@/constants";
 import { firaCode } from "@/app/fonts";
+import {
+ MAIN_PAGE_DESCRIPTION,
+ MAIN_PAGE_SUB_TITLE,
+ MAIN_PAGE_TITLE,
+} from "@/constants/Content.constants";
 
 const HomeHeroSection = () => {
  return (
@@ -11,17 +16,14 @@ const HomeHeroSection = () => {
  <div
  className={`text-xl md:text-title1 ${firaCode.className} font-bold`}
  >
- <h1>Arman</h1>
+ <h1>{MAIN_PAGE_TITLE}</h1>
  <h2 className={`text-caption1 text-primary md:text-title2`}>
- Back-end Engineer
+ {MAIN_PAGE_SUB_TITLE}
  </h2>
  </div>
 
  <p className="text-body2 text-text-primary md:text-body1">
- Hey there! This is where I share my journey through software
- engineering, personal anecdotes, and articles covering a wide range of
- topics. Dive into tech trends, conquer coding challenges, and discover
- more about life beyond the screen.
+ {MAIN_PAGE_DESCRIPTION}
  </p>
  </article>
 

src/components/ui/Footer.tsx

@@ -6,6 +6,11 @@ import IconLinkedIn from "@/assets/icons/LinkedIcon";
 import IconMedium from "@/assets/icons/MediumIcon";
 import IconRss from "@/assets/icons/RSS";
 import { DARK_LOGO_SVG, WHITE_LOGO_SVG } from "@/constants";
+import {
+ EMAIL_ADDRESS,
+ FOOTER_SUB_TITLE,
+ FOOTER_TITLE,
+} from "@/constants/Content.constants";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
@@ -37,16 +42,16 @@ const Footer = () => {
  )}
 
  <p className="text-body2 font-bold capitalize text-text-primary">
- Arman
+ {FOOTER_TITLE}
  </p>
  <Link
- href={"mailto:[email protected]"}
+ href={`mailto:${EMAIL_ADDRESS}`}
  className={`text-caption2 text-text-primary md:text-body2 ${alexandria.className}`}
  >
- [email protected]
+ {EMAIL_ADDRESS}
  </Link>
  </div>
- <span>back-end engineer</span>
+ <span>{FOOTER_SUB_TITLE}</span>
  </div>
  {/* socials */}
  <div className="w-full max-w-max space-y-4">

src/constants/CommunicationLinks.constants.tsx

@@ -1,6 +1,7 @@
 import IconEmail from "@/assets/icons/EmailIcon";
 import IconLinkedIn from "@/assets/icons/LinkedIcon";
 import { ReactNode } from "react";
+import { EMAIL_ADDRESS } from "./Content.constants";
 
 export interface ICommunicationLinkProps {
  id?: string;
@@ -14,7 +15,7 @@ export const COMMUNICATION_LINKS_DATA: ICommunicationLinkProps[] = [
  {
  id: "1",
  children: "Email",
- href: "mailto:[email protected]",
+ href: `mailto:${EMAIL_ADDRESS}`,
  icon: (
  <IconEmail className="[&_path]:stroke-gray-1 group-hover:[&_path]:stroke-primary" />
  ),