Rework translations

.eslintcache

@@ -1 +0,0 @@
-[{"/workspaces/KevinK.dev.js/gatsby-config.js":"1","/workspaces/KevinK.dev.js/gatsby-node.js":"2","/workspaces/KevinK.dev.js/src/components/navigation.js":"3","/workspaces/KevinK.dev.js/src/components/offscreenNav.js":"4","/workspaces/KevinK.dev.js/src/templates/blogListing.js":"5","/workspaces/KevinK.dev.js/src/templates/blogPost.js":"6"},{"size":4779,"mtime":1636241579421,"results":"7","hashOfConfig":"8"},{"size":10589,"mtime":1636241579573,"results":"9","hashOfConfig":"8"},{"size":4215,"mtime":1636240147782,"results":"10","hashOfConfig":"8"},{"size":2072,"mtime":1636240157250,"results":"11","hashOfConfig":"8"},{"size":5807,"mtime":1636241180559,"results":"12","hashOfConfig":"8"},{"size":4539,"mtime":1636240809658,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1eb7dm3",{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/workspaces/KevinK.dev.js/gatsby-config.js",[],"/workspaces/KevinK.dev.js/gatsby-node.js",[],"/workspaces/KevinK.dev.js/src/components/navigation.js",[],"/workspaces/KevinK.dev.js/src/components/offscreenNav.js",[],"/workspaces/KevinK.dev.js/src/templates/blogListing.js",[],"/workspaces/KevinK.dev.js/src/templates/blogPost.js",[]]

locales/de/translation.json

@@ -1,54 +1,62 @@
 {
-  "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
+    "site": {
+        "description": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland."
+    },
+    "layout": {
         "imprint": "Impressum",
         "datasec": "Datenschutz",
-  "disclaimer": "Disclaimer",
+        "disclaimer": "Disclaimer"
-  "projects": "Projekte",
+    },
-  "project": "Projekt",
+    "project": {
-  "social": "Soziales",
+        "title": "Projekt",
-  "homeHello": "Hallo, ich bin",
+        "plural": "Projekte",
-  "homeMe": "Ich bin",
+        "aboutHeader": "Über {{projectName}}",
-  "homeWebDeveloper": "Web Developer",
+        "viewGitHub": "Auf GitHub anschauen",
-  "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
+        "viewWebsite": "Projekt-Website anschauen",
-  "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
+        "description": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
-  "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
+        "view": "Anschauen"
-  "de": "Deutsch",
+    },
-  "en": "Englisch",
+    "home": {
-  "projectAboutHeader": "Über {{projectName}}",
+        "title": "Home",
-  "projectViewGitHub": "Auf GitHub anschauen",
+        "hello": "Hallo, ich bin",
-  "projectViewWebsite": "Projekt-Website anschauen",
+        "me": "Ich bin",
-  "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
+        "webDeveloper": "Web Developer",
-  "projectView": "Anschauen",
+        "imageCredit": "Portrait aufgenommen von Jannik Kiel",
-  "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
+        "myLocation": "Quickborn, Schleswig-Holstein, Deutschland",
-  "socialDescription": "Finde mich auf anderen Plattformen!",
-  "friends": "Freunde",
-  "friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.",
-  "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
-  "donateThanks": "Danke für die Spende!",
-  "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
-  "donate": "Spenden",
-  "featuredProjects": "Vorgestellte Projekte",
-  "seeMore": "Mehr Projekte erkunden",
-  "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
-  "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
-  "sponsorGitHub": "Über GitHub unterstützen",
-  "mySkills": "Meine Fähigkeiten",
-  "about": "Über",
       "explore": "Erkunde",
       "myProjects": "meine Projekte",
       "discover": "Entdecke",
       "mySocials": "meine Accounts",
       "learn": "Erfahre",
-  "moreAboutMe": "mehr über mich",
+      "moreAboutMe": "mehr über mich"
-  "home": "Home",
+    },
+  "about": {
+    "title": "Über",
+    "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
+    "moreProjects": "Mehr Projekte erkunden",
+    "featuredProjects": "Vorgestellte Projekte",
+    "mySkills": "Meine Fähigkeiten"
+  },
+  "social": {
+      "title": "Soziales",
+      "descriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
+      "description": "Finde mich auf anderen Plattformen!"
+  },
+  "friends": {
+    "title": "Freunde",
+    "description": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst."
+  },
+  "donate": {
+    "title": "Spenden",
+    "description": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
+    "thanks": "Danke für die Spende!",
+    "thanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
+    "gitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
+    "payPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
+    "sponsorGitHub": "Über GitHub unterstützen",
+    "donatePayPal": "Über PayPal spenden"
+  },
   "menu": "Menü",
-  "scambox": "Scambox",
-  "scamboxNotice": "Hinweis",
-  "scamboxLanguage": "Scambox ist nicht auf Deutsch verfügbar und wird auf Englisch angezeigt.",
-  "scamboxDescription": "Tauche mit mir ein in die Welt der Scams, die ich tagtäglich so bekomme, und lach ein bisschen mit mir!",
-  "scamboxReadFull": "Ganzen Post lesen »",
-  "scamboxPosted": "Gepostet am {{date}}",
-  "moreSoon": "Bald an dieser Stelle mehr",
   "language": {
       "en": {
           "name": "Englisch"

locales/en/translation.json

@@ -1,54 +1,62 @@
 {
-  "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
+    "site": {
+        "description": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany."
+    },
+    "layout": {
         "imprint": "Imprint",
         "datasec": "Data Protection",
-  "disclaimer": "Disclaimer",
+        "disclaimer": "Disclaimer"
-  "projects": "Projects",
+    },
-  "project": "Project",
+    "project": {
-  "social": "Social",
+        "title": "Project",
-  "homeHello": "Hello, I am",
+        "plural": "Projects",
-  "homeMe": "I am",
+        "aboutHeader": "About {{projectName}}",
-  "homeWebDeveloper": "a web developer",
+        "viewGitHub": "View on GitHub",
-  "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
+        "viewWebsite": "View Project-Website",
-  "donationCatchphrase": "Like what you're seeing? Consider donating.",
+        "description": "This is what I am working on or have worked on.",
-  "homeImageCredit": "Portrait taken by Jannik Kiel",
+        "view": "View"
-  "de": "German",
+    },
-  "en": "English",
+  "home": {
-  "projectAboutHeader": "About {{projectName}}",
+      "title": "Home",
-  "projectViewGitHub": "View on GitHub",
+      "hello": "Hello, I am",
-  "projectViewWebsite": "View Project-Website",
+      "me": "I am",
-  "projectsDescription": "This is what I am working on or have worked on.",
+      "webDeveloper": "a web developer",
-  "projectView": "View",
+      "imageCredit": "Portrait taken by Jannik Kiel",
-  "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+      "myLocation": "Quickborn, Schleswig-Holstein, Germany",
-  "socialDescription": "Find me on other platforms!",
-  "friends": "Friends",
-  "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
-  "donate": "Donate",
-  "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
-  "donateThanks": "Thanks for donating!",
-  "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
-  "featuredProjects": "Featured Projects",
-  "seeMore": "Explore more Projects",
-  "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
-  "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
-  "sponsorGitHub": "Sponsor using GitHub",
-  "mySkills": "My Skills",
-  "about": "About",
     "explore": "Explore",
     "myProjects": "my projects",
     "discover": "Discover",
     "mySocials": "my socials",
     "learn": "Learn",
-  "moreAboutMe": "more about me",
+    "moreAboutMe": "more about me"
-  "home": "Home",
+  },
+  "about": {
+    "title": "About",
+    "donationCatchphrase": "Like what you're seeing? Consider donating.",
+    "moreProjects": "Explore more Projects",
+    "featuredProjects": "Featured Projects",
+    "mySkills": "My Skills"
+  },
+  "social": {
+      "title": "Social",
+      "descriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+      "description": "Find me on other platforms!"
+  },
+  "friends": {
+    "title": "Friends",
+    "description": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects."
+  },
+  "donate": {
+    "title": "Donate",
+    "description": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
+    "thanks": "Thanks for donating!",
+    "thanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
+    "gitHub": "You can very easily support me via GitHub Sponsors using the following button!",
+    "payPal": "If you'd rather support me via PayPal the following button is for you:",
+    "sponsorGitHub": "Sponsor using GitHub",
+    "donatePayPal": "Donate using PayPal"
+  },
   "menu": "Menu",
-  "scambox": "Scambox",
-  "scamboxNotice": "Notice",
-  "scamboxLanguage": "Scambox is only available in English.",
-  "scamboxDescription": "Take a dive with me into all of the scams I get on the daily, and maybe laugh at them a little!",
-  "scamboxReadFull": "Read full post »",
-  "scamboxPosted": "Posted on {{date}}",
-  "moreSoon": "More to come",
   "language": {
       "en": {
           "name": "English"

src/components/languageSwitcher.js

@@ -24,7 +24,7 @@ export default function LanguageSwitcher() {
                     {languages.map((lng) => (
                         <li key={lng}>
                             <Link to={originalPath} language={lng}>
-                                <Trans>{lng}</Trans>
+                                <Trans>language.{lng}.name</Trans>
                             </Link>
                         </li>
                     ))}

src/components/navigation.js

@@ -88,21 +88,21 @@ const Navigation = ({ isHome }) => {
                     to="/about"
                     activeClassName={styles.active}
                 >
-                    <Trans>about</Trans>
+                    <Trans>about.title</Trans>
                 </Link>
                 <Link
                     id="navBtnProjects"
                     to="/projects"
                     activeClassName={styles.active}
                 >
-                    <Trans>projects</Trans>
+                    <Trans>project.plural</Trans>
                 </Link>
                 <Link
                     id="navBtnSocial"
                     to="/social"
                     activeClassName={styles.active}
                 >
-                    <Trans>social</Trans>
+                    <Trans>social.title</Trans>
                 </Link>
                 <Link
                     id="navBtnBlog"

src/components/offscreenNav.js

@@ -24,14 +24,14 @@ const OffScreenNav = ({ active, close }) => {
                     <Trans>menu</Trans>
                 </span>
                 <Link to="/" activeClassName={styles.active}>
-                    <Trans>home</Trans>
+                    <Trans>home.title</Trans>
                 </Link>
                 <Link
                     id="osnavBtnProjects"
                     to="/about"
                     activeClassName={styles.active}
                 >
-                    <Trans>about</Trans>
+                    <Trans>about.title</Trans>
                 </Link>
                 <Link
                     id="osnavBtnProjects"

src/components/seo.js

@@ -22,7 +22,7 @@ function SEO({ description, meta, title, speakable, image, children }) {
         `
     );
 
-    const metaDescription = description || t("siteDescription");
+    const metaDescription = description || t("site.description");
 
     const siteMeta = useSiteMetadata();
     const location = useLocation();

src/layouts/default.js

@@ -28,15 +28,15 @@ class Layout extends React.Component {
                 <footer role="contentinfo">
                     CC-BY 4.0 Kevin Kandlbinder,{" "}
                     <Link to="/legal/about" className="spf-link">
-                        <Trans i18nKey="imprint">Imprint</Trans>
+                        <Trans i18nKey="layout.imprint">Imprint</Trans>
                     </Link>{" "}
                     |{" "}
                     <Link to="/legal/datasec" className="spf-link">
-                        <Trans i18nKey="datasec">Data Protection</Trans>
+                        <Trans i18nKey="layout.datasec">Data Protection</Trans>
                     </Link>{" "}
                     |{" "}
                     <Link to="/legal/disclaimer" className="spf-link">
-                        <Trans i18nKey="disclaimer">Disclaimer</Trans>
+                        <Trans i18nKey="layout.disclaimer">Disclaimer</Trans>
                     </Link>{" "}
                     | <a href="#languageChooser">Language</a>
                 </footer>

src/pages/about.js

@@ -103,8 +103,8 @@ const AboutPage = (props) => {
 
     return (
         <Layout
-            title={t("about")}
+            title={t("about.title")}
-            description={t("siteDescription")}
+            description={t("site.description")}
             image={"/owner.jpg"}
             speakable={{
                 "@type": "SpeakableSpecification",
@@ -118,7 +118,7 @@ const AboutPage = (props) => {
                     </div>
                     <div className={styles.skills}>
                         <h2>
-                            <Trans>mySkills</Trans>
+                            <Trans>about.mySkills</Trans>
                         </h2>
                         <div className={styles.skillList}>
                             {props.data.allSkillsJson.nodes.map((skill) => {
@@ -154,7 +154,7 @@ const AboutPage = (props) => {
             <section>
                 <article>
                     <h1>
-                        <Trans>featuredProjects</Trans>
+                        <Trans>about.featuredProjects</Trans>
                     </h1>
                     <div className={projectStyles.projectList}>
                         {props.data.allProjectsJson.nodes.map((project) => {
@@ -206,14 +206,14 @@ const AboutPage = (props) => {
                         })}
                     </div>
                     <Link to="/projects" className={styles.seeMoreButton}>
-                        <Trans>seeMore</Trans> <ArrowRight />
+                        <Trans>about.moreProjects</Trans> <ArrowRight />
                     </Link>
                 </article>
             </section>
             <Link className={styles.donationSection} to="/donate">
                 <div>
                     <span>
-                        <Trans>donationCatchphrase</Trans>
+                        <Trans>about.donationCatchphrase</Trans>
                     </span>
                     <ArrowRight />
                 </div>

src/pages/donate.js

@@ -45,19 +45,22 @@ const DonatePage = (props) => {
     const { site, file } = props.data;
 
     return (
-        <Layout title={t("donate")} description={t("donationCatchphrase")}>
+        <Layout
+            title={t("donate.title")}
+            description={t("about.donationCatchphrase")}
+        >
             <section>
                 <article>
                     <h1>
-                        <Trans>donate</Trans>
+                        <Trans>donate.title</Trans>
                     </h1>
 
                     <p>
-                        <Trans>donateDescription</Trans>
+                        <Trans>donate.description</Trans>
                     </p>
 
                     <p>
-                        <Trans>donateGitHub</Trans>
+                        <Trans>donate.gitHub</Trans>
                     </p>
 
                     <p style={{ display: "block", textAlign: "center" }}>
@@ -71,12 +74,12 @@ const DonatePage = (props) => {
                             data-size="large"
                             aria-label="Sponsor @Unkn0wnCat on GitHub"
                         >
-                            <Trans>sponsorGitHub</Trans>
+                            <Trans>donate.sponsorGitHub</Trans>
                         </GitHubButton>
                     </p>
 
                     <p>
-                        <Trans>donatePayPal</Trans>
+                        <Trans>donate.payPal</Trans>
                     </p>
 
                     <div className={styles.priceAmount}>
@@ -127,7 +130,9 @@ const DonatePage = (props) => {
                             amount
                         }
                     >
-                        <span>Donate using PayPal</span>
+                        <span>
+                            <Trans>donate.donatePayPal</Trans>
+                        </span>
                         <ArrowRight />
                     </a>
                 </article>

src/pages/friends.js

@@ -50,15 +50,18 @@ const FriendsPage = ({ data }) => {
   }*/
 
     return (
-        <Layout title={t("friends")} description={t("friendsDescription")}>
+        <Layout
+            title={t("friends.title")}
+            description={t("friends.description")}
+        >
             <section>
                 <article>
                     <h1>
-                        <Trans>social</Trans>
+                        <Trans>friends.title</Trans>
                     </h1>
 
                     <p>
-                        <Trans>friendsDescription</Trans>
+                        <Trans>friends.description</Trans>
                     </p>
 
                     <div className={styles.friendsList}>

src/pages/index.js

@@ -85,7 +85,7 @@ const IndexPage = (props) => {
         <Layout
             title="Kevin Kandlbinder"
             transparentTopbar={true}
-            description={t("siteDescription")}
+            description={t("site.description")}
             image={"/owner.jpg"}
             speakable={{
                 "@type": "SpeakableSpecification",
@@ -112,13 +112,13 @@ const IndexPage = (props) => {
                     <div className={styles.profileImageDummy}></div>
                     <div className={styles.profileCard}>
                         <span className={styles.hello}>
-                            <Trans>homeHello</Trans>
+                            <Trans>home.hello</Trans>
                         </span>
                         <span className={styles.name}>Kevin Kandlbinder</span>
                         <span className={styles.description}>
-                            <Trans>homeMe</Trans>{" "}
+                            <Trans>home.me</Trans>{" "}
                             <span id="descriptionType">
-                                <Trans>homeWebDeveloper</Trans>
+                                <Trans>home.webDeveloper</Trans>
                             </span>
                             .
                         </span>
@@ -147,7 +147,7 @@ const IndexPage = (props) => {
                                 target="_blank"
                             >
                                 <MapPin width={20} />
-                                <Trans>homeMyLocation</Trans>
+                                <Trans>home.myLocation</Trans>
                             </a>
                             <a
                                 className={styles.contactLink}
@@ -177,27 +177,27 @@ const IndexPage = (props) => {
                     <Link to={"/projects"}>
                         <div>
                             <span className={styles.ctaAccent}>
-                                {t("explore")}
+                                {t("home.explore")}
                             </span>{" "}
-                            <span>{t("myProjects")}</span>
+                            <span>{t("home.myProjects")}</span>
                         </div>
                         <ArrowRight />
                     </Link>
                     <Link to={"/social"}>
                         <div>
                             <span className={styles.ctaAccent}>
-                                {t("discover")}
+                                {t("home.discover")}
                             </span>{" "}
-                            <span>{t("mySocials")}</span>
+                            <span>{t("home.mySocials")}</span>
                         </div>
                         <ArrowRight />
                     </Link>
                     <Link to={"/about"}>
                         <div>
                             <span className={styles.ctaAccent}>
-                                {t("learn")}
+                                {t("home.learn")}
                             </span>{" "}
-                            <span>{t("moreAboutMe")}</span>
+                            <span>{t("home.moreAboutMe")}</span>
                         </div>
                         <ArrowRight />
                     </Link>
@@ -211,7 +211,7 @@ const IndexPage = (props) => {
             >
                 <div>
                     <span>
-                        <Camera /> <Trans>homeImageCredit</Trans>
+                        <Camera /> <Trans>home.imageCredit</Trans>
                     </span>
                     <ArrowRight />
                 </div>

src/pages/projects.js

@@ -47,8 +47,8 @@ const ProjectsPage = ({ data }) => {
     const meta = useSiteMetadata();
     return (
         <Layout
-            title={t("projects")}
+            title={t("project.plural")}
-            description={t("projectsDescription")}
+            description={t("project.description")}
             seoAdditional={
                 <script type="application/ld+json">
                     {JSON.stringify({
@@ -76,11 +76,11 @@ const ProjectsPage = ({ data }) => {
             <section>
                 <article>
                     <h1>
-                        <Trans>projects</Trans>
+                        <Trans>project.plural</Trans>
                     </h1>
 
                     <p>
-                        <Trans>projectsDescription</Trans>
+                        <Trans>project.description</Trans>
                     </p>
 
                     <div className={styles.projectList}>

src/pages/social.js

@@ -36,15 +36,15 @@ export const query = graphql`
 const SocialPage = ({ data }) => {
     const { t } = useI18next();
     return (
-        <Layout title={t("social")} description={t("socialDescription")}>
+        <Layout title={t("social.title")} description={t("social.description")}>
             <section>
                 <article>
                     <h1>
-                        <Trans>social</Trans>
+                        <Trans>social.title</Trans>
                     </h1>
 
                     <p>
-                        <Trans i18nKey="socialDescriptionWithLink">
+                        <Trans i18nKey="social.descriptionWithLink">
                             socialDescriptionWith<Link to="/friends">Link</Link>
                         </Trans>
                     </p>

src/templates/project.js

@@ -66,7 +66,7 @@ const ProjectTemplate = ({ data }) => {
     return (
         <Layout
             description={project.shortDescription}
-            title={t("project") + ": " + projectName}
+            title={t("project.title") + ": " + projectName}
             transparentTopbar={true}
             image={project.image.publicURL}
         >
@@ -84,7 +84,7 @@ const ProjectTemplate = ({ data }) => {
                     <header>
                         <div className={styles.headerInner}>
                             <h1>
-                                <Trans>project</Trans>: {projectName}
+                                <Trans>project.title</Trans>: {projectName}
                             </h1>
                             <span>{project.shortDescription}</span>
                         </div>
@@ -111,7 +111,7 @@ const ProjectTemplate = ({ data }) => {
                                     rel="noreferrer"
                                 >
                                     <Github height={15} />{" "}
-                                    <Trans>projectViewGitHub</Trans>
+                                    <Trans>project.viewGitHub</Trans>
                                 </a>
                             ) : null}
                             {project.links.website !== null ? (
@@ -121,7 +121,7 @@ const ProjectTemplate = ({ data }) => {
                                     rel="noreferrer"
                                 >
                                     <ExternalLink height={15} />{" "}
-                                    <Trans>projectViewWebsite</Trans>
+                                    <Trans>project.viewWebsite</Trans>
                                 </a>
                             ) : null}
                         </div>