Generate localized .tex files and cv pdfs using content data and i18n files

.github/workflows/build-and-deploy.yml

@@ -6,21 +6,23 @@ jobs:
     steps:
       - name: Set up Git repository
         uses: actions/checkout@v4
-      - name: Compile LaTeX document (de)
-        uses: xu-cheng/latex-action@v3
+      - name: Install dependencies
+        run: npm install
+      - name: Generate localized LaTeX templates
+        run: npm run generate-latex
+      - name: Upload generated LaTeX templates
+        uses: actions/upload-artifact@v4
         with:
-          root_file: cv/cv_hendrik_schmitz_de.tex
-          continue_on_error: "true"
-        env:
-          TEXINPUTS: ".:./cv//:"
-      - name: Compile LaTeX document (en)
+          name: latex-templates
+          path: cv/cv_hendrik_schmitz_*.tex
+      - name: Compile LaTeX documents
         uses: xu-cheng/latex-action@v3
         with:
-          root_file: cv/cv_hendrik_schmitz_en.tex
+          root_file: cv/cv_hendrik_schmitz_*.tex
           continue_on_error: "true"
         env:
           TEXINPUTS: ".:./cv//:"
-      - name: Upload PDF files
+      - name: Upload generated PDF files
         uses: actions/upload-artifact@v4
         with:
           name: cvs
@@ -29,8 +31,6 @@ jobs:
         run: |
           mkdir -p public
           cp -R *.pdf public/
-      - name: Install dependencies
-        run: npm install
       - name: Build Next.js app
         run: npm run build
       - name: Deploy to Netlify

.gitignore

@@ -35,5 +35,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# ignore generated pdf files
+# ignore generated latex and pdf files
+*.tex
 *.pdf

app/[locale]/layout.tsx

@@ -1,15 +1,8 @@
-import type { Metadata } from "next";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.min.css";
 import { supportedLocales } from "@/util/i18n";
 import "../globals.scss";
 
-// export const metadata: Metadata = {
-//   title: "Hendrik Schmitz | Portfolio",
-//   description:
-//     "Experienced Fullstack Software Engineer with a strong focus on Frontend Development. Explore my portfolio showcasing innovative web solutions and cutting-edge technology expertise.",
-// };
-
 //function to generate the routes for all the locales
 export async function generateStaticParams() {
   return supportedLocales.map((locale) => ({ locale }));

app/[locale]/page.tsx

@@ -1,6 +1,6 @@
-import { notFound } from "next/navigation";
 import { Metadata } from "next";
-import { Locale, Messages } from "@/util/i18n";
+import { Locale, getMessages } from "@/util/i18n";
+import about from "@/content/about.json";
 
 import About from "@/components/About";
 import Banner from "@/components/Banner";
@@ -18,7 +18,10 @@ export async function generateMetadata({
   params: { locale: Locale };
 }): Promise<Metadata> {
   const messages = await getMessages(params.locale);
-  return messages.metadata;
+  return {
+    ...messages.metadata,
+    title: messages.metadata.title.replace("{name}", about.name)
+  }
 }
 
 export default async function Home({
@@ -38,17 +41,9 @@ export default async function Home({
       <Experience messages={messages} locale={params.locale} />
       <Education messages={messages} locale={params.locale} />
       <Projects messages={messages} locale={params.locale} />
-      <Skills messages={messages} />
+      <Skills messages={messages} locale={params.locale} />
       <Contact messages={messages} />
       <Footer />
     </>
   );
 }
-
-async function getMessages(locale: string): Promise<Messages> {
-  try {
-    return (await import(`../../messages/${locale}.json`)).default;
-  } catch (error) {
-    notFound();
-  }
-}

components/About.tsx

@@ -1,11 +1,12 @@
 import Image from "next-export-optimize-images/image";
 import experience from "@/content/experience.json";
+import about from "@/content/about.json";
 import profilePic from "@/cv/profile_picture.jpg";
 import styles from "./About.module.scss";
 import { formatDate } from "@/util/date-time";
-import { Locale, Messages } from "@/util/i18n";
+import { Locale, Messages, getMultilingualContent } from "@/util/i18n";
 
-const birthDate = new Date("1998-06-30");
+const birthDate = new Date(about.birthday);
 const currentDate = new Date();
 const difference = currentDate.getTime() - birthDate.getTime();
 const ageDate = new Date(difference);
@@ -26,8 +27,8 @@ export default function About({
       "{startDate}",
       formatDate(new Date(currentJob.startDate), locale, messages)
     )
-    .replace("{jobTitle}", String(currentJob.title))
-    .replace("{company}", currentJob.company);
+    .replace("{jobTitle}", getMultilingualContent(currentJob.title, locale))
+    .replace("{company}", getMultilingualContent(currentJob.company, locale));
 
   return (
     <div id="about" className={styles.about}>
@@ -38,7 +39,7 @@ export default function About({
             <Image
               className={styles.profilePicture}
               src={profilePic}
-              alt="Hendrik Schmitz"
+              alt={about.name}
             />
           </div>
           <div className="col-md-8">

components/Banner.tsx

@@ -1,4 +1,5 @@
 import { Locale, Messages } from "@/util/i18n";
+import about from "@/content/about.json";
 import styles from "./Banner.module.scss";
 
 export default function Banner({
@@ -11,7 +12,7 @@ export default function Banner({
   return (
     <div className={styles.banner}>
       <div className={styles.bannerContent}>
-        <h1>Hendrik Schmitz</h1>
+        <h1>{about.name}</h1>
         <h2>{messages.banner.jobTitle}</h2>
         <a
           href={`/cv_hendrik_schmitz_${locale}.pdf`}

components/Footer.tsx

@@ -1,3 +1,4 @@
+import about from "@/content/about.json";
 import styles from "./Footer.module.scss";
 
 const currentYear = new Date().getFullYear();
@@ -8,7 +9,9 @@ export default function Footer() {
       <div className="container">
         <div className="row">
           <div className={`col-sm-5 ${styles.copyright}`}>
-            <p>Copyright &copy; {currentYear} Hendrik Schmitz</p>
+            <p>
+              Copyright &copy; {currentYear} {about.name}
+            </p>
           </div>
           <div className={`col-sm-2 ${styles.top}`}>
             <a id="to-top" href="#">
@@ -17,33 +20,39 @@ export default function Footer() {
           </div>
           <div className={`col-sm-5 ${styles.social}`}>
             <ul>
-              <li>
-                <a
-                  href="https://github.com/drik98"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <i className="fa fa-github" aria-hidden="true"></i>
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.linkedin.com/in/hendriksmtz"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <i className="fa fa-linkedin" aria-hidden="true"></i>
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.xing.com/profile/Hendrik_Schmitz29"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <i className="fa fa-xing" aria-hidden="true"></i>
-                </a>
-              </li>
+              {about.github ? (
+                <li>
+                  <a
+                    href={`https://github.com/${about.github}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <i className="fa fa-github" aria-hidden="true"></i>
+                  </a>
+                </li>
+              ) : null}
+              {about.linkedIn ? (
+                <li>
+                  <a
+                    href={`https://www.linkedin.com/in/${about.linkedIn}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <i className="fa fa-linkedin" aria-hidden="true"></i>
+                  </a>
+                </li>
+              ) : null}
+              {about.xing ? (
+                <li>
+                  <a
+                    href={`https://www.xing.com/profile/${about.xing}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <i className="fa fa-xing" aria-hidden="true"></i>
+                  </a>
+                </li>
+              ) : null}
             </ul>
           </div>
         </div>

components/Projects.module.scss

@@ -10,18 +10,17 @@
 }
 
 .project {
-  position: relative;
   max-width: 900px;
   margin: 0 auto 30px auto;
-  overflow: hidden;
   background: #fff;
   border-radius: 4px;
+  display: flex;
 }
 
 .projectImage {
-  float: left;
-  max-width: 300px;
-  height: 300px;
+  width: 30%;
+  min-width: 300px;
+  aspect-ratio: 1;
   overflow: hidden;
 
   img {
@@ -32,11 +31,11 @@
 }
 
 .projectInfo {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 300px;
   padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   h3 {
     font-size: 1.5em;
@@ -52,15 +51,17 @@
   }
 
   a {
+    padding: 0 0.5rem;
+    vertical-align: middle;
     i {
       margin-right: 0.5rem;
-      vertical-align: middle;
     }
   }
 }
 
 .projectLogos {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   padding: 10px;
 }
@@ -82,7 +83,17 @@
 
 @media only screen and (max-width: 768px) {
   .projectImage {
-    display: none;
+    width: 100%;
+    height: 20vh;
+    aspect-ratio: unset;
+
+    img {
+      height: unset;
+      width: 100%;
+    }
+  }
+  .project {
+    flex-direction: column;
   }
   .projectInfo {
     position: relative;

components/Projects.tsx

@@ -82,18 +82,20 @@ function ProjectItem({
         <h3>{translatedTitle}</h3>
         <p>{getMultilingualContent(description, locale)}</p>
         <Technologies technologies={technologies} messages={messages} />
-        {projectUrl ? (
-          <a href={projectUrl} target="_blank" rel="noopener noreferrer">
-            <i className="fa fa-external-link"></i>
-            {messages.projects.viewProject}
-          </a>
-        ) : null}
-        {sourceCodeUrl ? (
-          <a href={sourceCodeUrl} target="_blank" rel="noopener noreferrer">
-            <i className="fa fa-code"></i>
-            {messages.projects.viewCode}
-          </a>
-        ) : null}
+        <span>
+          {projectUrl ? (
+            <a href={projectUrl} target="_blank" rel="noopener noreferrer">
+              <i className="fa fa-external-link"></i>
+              {messages.projects.viewProject}
+            </a>
+          ) : null}
+          {sourceCodeUrl ? (
+            <a href={sourceCodeUrl} target="_blank" rel="noopener noreferrer">
+              <i className="fa fa-code"></i>
+              {messages.projects.viewCode}
+            </a>
+          ) : null}
+        </span>
       </div>
     </div>
   );

components/Skills.tsx

@@ -1,10 +1,23 @@
 import rawSkills from "@/content/skills.json";
-import { Messages } from "@/util/i18n";
+import categories from "@/content/skill-categories.json";
+import { Locale, Messages, getMultilingualContent } from "@/util/i18n";
 import styles from "./Skills.module.scss";
 
-const skills = rawSkills.map((skill) => skill.name).sort();
+export default function Skills({
+  messages,
+  locale,
+}: {
+  messages: Messages;
+  locale: Locale;
+}) {
+  const displayedSkillCategories = Object.entries(categories)
+    .filter(([id, category]) => category.displayOnWebpage)
+    .map(([id]) => id);
+  const skills = rawSkills
+    .filter((skill) => displayedSkillCategories.includes(skill.category))
+    .map((skill) => getMultilingualContent(skill.name, locale))
+    .sort();
 
-export default function Skills({ messages }: { messages: Messages }) {
   return (
     <div id="skills" className={styles.skills}>
       <h2 className="heading">{messages.header.sections.skills}</h2>

content/about.json

@@ -0,0 +1,11 @@
+{
+    "name": "Hendrik Schmitz",
+    "birthday": "1998-06-30",
+    "phoneNumber": "+49 151 70013949",
+    "address": "Pontstr. 137, 52062 Aachen",
+    "website": "smtz.dev",
+    "linkedIn": "hendriksmtz",
+    "xing": "Hendrik_Schmitz29",
+    "github": "drik98",
+    "mail": "[email protected]"
+}

content/education.json

@@ -36,7 +36,7 @@
     "image": "/images/experience/wzl.png",
     "keyPoints": {
       "de": [
-        "Entwicklung von Java-Webanwendungen für industrielle Anwendungen, mit Schwerpunkt auf Frontend-Entwicklung von Software- Demonstratoren in Industrie 4.0",
+        "Entwicklung von Java-Webanwendungen für industrielle Anwendungen, mit Schwerpunkt auf Frontend-Entwicklung von Software- Demonstratoren in Industrie 4.0",
         "Nutzung von Technologien wie JavaScript, HTML, CSS, Java, PostgreSQL und Hibernate",
         "Erfassung von Anforderungen und Konzeption von Anwendungen",
         "Betreuung von Auszubildenden"