Merge pull request #49 from lukmarcus/v2.2.2-certificates-refactor

V2.2.2 certificates refactor
lukmarcus · Jan 7, 2025 · da92a71 · da92a71
2 parents ed2f9dd + a956d10
commit da92a71
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 82 deletions.
diff --git a/MarekSzumny_CV.pdf b/MarekSzumny_CV.pdf
diff --git a/MarekSzumny_CV_PL.pdf b/MarekSzumny_CV_PL.pdf
diff --git a/data/certificates.json b/data/certificates.json
@@ -0,0 +1,32 @@
+[
+  {
+    "title": "Test Automation with Playwright",
+    "source": "jaktestowac.pl",
+    "link": "./certificates/MarekSzumny_TestAutomationWithPlaywright_JakTestowac.pdf"
+  },
+  {
+    "title": "Playwright 101",
+    "source": "LambdaTest",
+    "link": "./certificates/MarekSzumny_Playwright101_LambdaTest.pdf"
+  },
+  {
+    "title": "Apache JMeter Intro & Pro",
+    "source": "BlazeMeter University",
+    "link": "./certificates/MarekSzumny_ApacheJMeterIntroPro_BlazeMeterUniversity.pdf"
+  },
+  {
+    "title": "The Fundamentals of Software Testing",
+    "source": "QATestLab Training Center",
+    "link": "./certificates/MarekSzumny_TheFundamentalsOfSoftwareTesting_QATestLabTrainingCenter.pdf"
+  },
+  {
+    "title": "Associate Data Analyst",
+    "source": "DataCamp",
+    "link": "./certificates/MarekSzumny_AssociateDataAnalyst_DataCamp.pdf"
+  },
+  {
+    "title": "BaseLinker for Beginners",
+    "source": "base.academy",
+    "link": "./certificates/MarekSzumny_BaseLinkerForBeginners_BaseLinkerAcademy.pdf"
+  }
+]
diff --git a/index.html b/index.html
@@ -880,108 +880,53 @@ <h2>
             <span data-lang="en">Certificates</span>
             <span data-lang="pl">Certyfikaty</span>
           </h2>
-          <div class="aside-noprint">
-            <div>
-              <a href="certificates/MarekSzumny_TestAutomationWithPlaywright_JakTestowac.pdf">
-                <i class="fas fa-file-pdf"></i>
-                Test Automation with Playwright
-              </a>
-              <p class="cert-source">jaktestowac.pl</p>
-            </div>
+          <div id="certificates"></div>
+        </div>
+
+        <div class="aside-block aside-noprint">
+          <h2>
+            <span data-lang="en">Recommendations</span>
+            <span data-lang="pl">Rekomendacje</span>
+          </h2>
+          <div id="recommendations">
             <div>
-              <a href="certificates/MarekSzumny_Playwright101_LambdaTest.pdf">
+              <a href="recommendations/MarekSzumny_IndieBI_MarcinGraczyk.pdf">
                 <i class="fas fa-file-pdf"></i>
-                Playwright 101
+                IndieBI (#1)
               </a>
-              <p class="cert-source">LambdaTest</p>
             </div>
             <div>
-              <a href="certificates/MarekSzumny_ApacheJMeterIntroPro_BlazeMeterUniversity.pdf">
+              <a href="recommendations/MarekSzumny_IndieBI_RobertBardzinski.pdf">
                 <i class="fas fa-file-pdf"></i>
-                Apache JMeter Intro & Pro
+                IndieBI (#2)
               </a>
-              <p class="cert-source">BlazeMeter University</p>
             </div>
             <div>
-              <a href="certificates/MarekSzumny_TheFundamentalsOfSoftwareTesting_QATestLabTrainingCenter.pdf">
+              <a href="recommendations/MarekSzumny_Meetjs.pdf">
                 <i class="fas fa-file-pdf"></i>
-                The Fundamentals of Software Testing
+                Meet.js 2023-05-25
               </a>
-              <p class="cert-source">QATestLab Training Center</p>
             </div>
             <div>
-              <a href="certificates/MarekSzumny_AssociateDataAnalyst_DataCamp.pdf">
+              <a
+                data-lang="en"
+                href="recommendations/MarekSzumny_NewDeal_DRTrading_BartlomiejRynkiewicz_EN.pdf"
+              >
                 <i class="fas fa-file-pdf"></i>
-                Associate Data Analyst
+                New Deal / DR Trading
               </a>
-              <p class="cert-source">DataCamp</p>
-            </div>
-            <div>
-              <a href="certificates/MarekSzumny_BaseLinkerForBeginners_BaseLinkerAcademy.pdf">
+              <a
+                data-lang="pl"
+                href="recommendations/MarekSzumny_NewDeal_DRTrading_BartlomiejRynkiewicz_PL.pdf"
+              >
                 <i class="fas fa-file-pdf"></i>
-                BaseLinker for Beginners
+                New Deal / DR Trading
               </a>
-              <p class="cert-source">base.academy</p>
             </div>
           </div>
-          <ul class="aside-print">
-            <li>Test Automation with Playwright</li>
-            <p class="cert-source">jaktestowac.pl</p>
-            <li>Playwright 101</li>
-            <p class="cert-source">LambdaTest</p>
-            <li>Apache JMeter Intro & Pro</li>
-            <p class="cert-source">BlazeMeter University</p>
-            <li>The Fundamentals of Software Testing</li>
-            <p class="cert-source">QATestLab Training Center</p>
-            <li>Associate Data Analyst</li>
-            <p class="cert-source">DataCamp</p>
-            <li>BaseLinker for Beginners</li>
-            <p class="cert-source">base.academy</p>
-          </ul>
-        </div>
-
-        <div class="aside-block aside-noprint">
-          <h2>
-            <span data-lang="en">Recommendations</span>
-            <span data-lang="pl">Rekomendacje</span>
-          </h2>
-          <div>
-            <a href="recommendations/MarekSzumny_IndieBI_MarcinGraczyk.pdf">
-              <i class="fas fa-file-pdf"></i>
-              IndieBI (#1)
-            </a>
-          </div>
-          <div>
-            <a href="recommendations/MarekSzumny_IndieBI_RobertBardzinski.pdf">
-              <i class="fas fa-file-pdf"></i>
-              IndieBI (#2)
-            </a>
-          </div>
-          <div>
-            <a href="recommendations/MarekSzumny_Meetjs.pdf">
-              <i class="fas fa-file-pdf"></i>
-              Meet.js 2023-05-25
-            </a>
-          </div>
-          <div>
-            <a
-              data-lang="en"
-              href="recommendations/MarekSzumny_NewDeal_DRTrading_BartlomiejRynkiewicz_EN.pdf"
-            >
-              <i class="fas fa-file-pdf"></i>
-              New Deal / DR Trading
-            </a>
-            <a
-              data-lang="pl"
-              href="recommendations/MarekSzumny_NewDeal_DRTrading_BartlomiejRynkiewicz_PL.pdf"
-            >
-              <i class="fas fa-file-pdf"></i>
-              New Deal / DR Trading
-            </a>
-          </div>
         </div>
       </aside>
     </div>
   </body>
-  <script src="script.js"></script>
+  <script type="module" src="script.js"></script>
 </html>
diff --git a/js/certificates.js b/js/certificates.js
@@ -0,0 +1,29 @@
+export function loadCertificates() {
+  fetch("./data/certificates.json")
+    .then((response) => response.json())
+    .then((certificates) => {
+      const container = document.getElementById("certificates");
+      let normalView = '<div class="aside-noprint">';
+      let printView = '<ul class="aside-print">';
+
+      certificates.forEach((cert) => {
+        normalView += `
+            <div>
+              <a href="${cert.link}">
+                <i class="fas fa-file-pdf"></i> ${cert.title}
+              </a>
+              <p class="cert-source">${cert.source}</p>
+            </div>
+          `;
+        printView += `
+            <li>${cert.title}</li>
+            <p class="cert-source">${cert.source}</p>
+          `;
+      });
+
+      printView += "</ul>";
+      normalView += "</div>";
+      container.innerHTML = normalView + printView;
+    })
+    .catch((error) => console.error("Error loading certificates:", error));
+}
diff --git a/script.js b/script.js
@@ -1,3 +1,5 @@
+import { loadCertificates } from "./js/certificates.js";
+
 window.onload = function () {
   window.parent.postMessage(
     { type: "size", height: document.body.scrollHeight, width: document.body.scrollWidth },
@@ -33,3 +35,6 @@ document.addEventListener("DOMContentLoaded", () => {
     toggleLanguageElements(currentLang);
   });
 });
+
+// Load each section
+loadCertificates();
diff --git a/style.css b/style.css
@@ -225,8 +225,14 @@ aside {
   font-weight: bold;
 }
 
+#certificates .aside-noprint,
+#recommendations {
+  margin-top: 8px;
+}
+
 .cert-source {
   font-size: 10px;
+  font-style: italic;
 }
 
 /* === PRINT === */
@@ -248,7 +254,7 @@ aside {
 }
 
 .aside-print .cert-source {
-  margin-left: 22px;
+  margin-left: 21px;
   line-height: 10px;
 }