Merge pull request #208 from johnchoi96/bugfix/204-diploma-fix

Fixed Issues #87 #151 #204 and #205
johnchoi96 · Aug 4, 2024 · ed0b412 · ed0b412
2 parents 8ef828b + 8191467
commit ed0b412
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 16 deletions.
diff --git a/public/assets/files/aws_cloud_practitioner_cert.pdf b/public/assets/files/aws_cloud_practitioner_cert.pdf
diff --git a/src/pages/certificatepage/CertificatePage.jsx b/src/pages/certificatepage/CertificatePage.jsx
@@ -1,7 +1,29 @@
 import React, { useEffect } from 'react'
-import IncompletePageModal from '../../components/modals/IncompletePageModal'
-import { getBackgroundColor } from '../../Utils/colorUtils'
 import { sendPageview } from '../../analytics/useAnalyticsEventTracker'
+import { getBackgroundColor, getFontColorText } from '../../Utils/colorUtils'
+
+function CertificateElement({ data }) {
+    return (
+        <div style={{ paddingBottom: '3rem' }}>
+            <h5 className={`text-${getFontColorText()}`}>
+                {data.title}
+            </h5>
+            <object
+                data={process.env.PUBLIC_URL + data.pdfSrc}
+                type='application/pdf'
+                width='800px'
+                height='650px'
+            >
+                <p className={`text-${getFontColorText()}`}>
+                    Your web browser doesn't have a PDF plugin. Instead you can&nbsp;
+                    <a href={process.env.PUBLIC_URL + data.pdfSrc}>
+                        click here to download the PDF file.
+                    </a>
+                </p>
+            </object>
+        </div>
+    )
+}
 
 export default function CertificatePage() {
 
@@ -13,14 +35,28 @@ export default function CertificatePage() {
         sendPageview('/certificates', 'Certificates Page')
     }, [])
 
-    const ncsu_certification = '/assets/files/Software_Security_Certification_of_Completion_John_Choi_Spring_2017.pdf'
+    const certs = [
+        {
+            title: 'AWS Cloud Practitioner, AWS, 2024',
+            pdfSrc: '/assets/files/aws_cloud_practitioner_cert.pdf'
+        },
+        {
+            title: 'Software Security Certification of Completion, NC State University, 2017',
+            pdfSrc: '/assets/files/Software_Security_Certification_of_Completion_John_Choi_Spring_2017.pdf'
+        }
+    ]
 
     return (
         <div style={{
+            paddingTop: '44px',
+            minHeight: (window.innerHeight - 44),
             backgroundColor: getBackgroundColor()
         }}>
-            <IncompletePageModal />
-            <embed src={process.env.PUBLIC_URL + ncsu_certification} width='800px' height='650px' />
+            {
+                certs.map((cert, i) => {
+                    return <CertificateElement key={i} data={cert} />
+                })
+            }
         </div>
     )
 }
diff --git a/src/pages/diplomapage/DiplomaPage.jsx b/src/pages/diplomapage/DiplomaPage.jsx
@@ -14,21 +14,29 @@ export default function DiplomaPage() {
     const tosu_bs_cse = '/assets/files/tOSU_BSCSE_Diploma_JohnChoi.pdf'
 
     const ratio = 1.5
-    const length1 = Math.max(window.innerWidth, window.innerHeight) * 0.4
+    const length1 = Math.max(window.innerWidth, window.innerHeight) * 0.5
     const length2 = length1 * ratio
 
     return (
         <div style={{
-                paddingTop: '44px',
-                backgroundColor: '#A7B1B7',
-                minHeight: (window.innerHeight - 44)
-            }}>
-            <p>The Ohio State University B.S Computer Science and Engineering</p>
-            <embed
-                src={process.env.PUBLIC_URL + tosu_bs_cse}
+            paddingTop: '44px',
+            backgroundColor: '#A7B1B7',
+            minHeight: (window.innerHeight - 44)
+        }}>
+            <h4>The Ohio State University B.S Computer Science and Engineering</h4>
+            <object
+                data={process.env.PUBLIC_URL + tosu_bs_cse}
+                type='application/pdf'
                 width={Math.max(length1, length2)}
                 height={Math.min(length1, length2)}
-            />
+            >
+                <p>
+                    Your web browser doesn't have a PDF plugin. Instead you can&nbsp;
+                    <a href={process.env.PUBLIC_URL + tosu_bs_cse}>
+                        click here to download the PDF file.
+                    </a>
+                </p>
+            </object>
         </div>
     )
 }
diff --git a/src/pages/error/Error404.jsx b/src/pages/error/Error404.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import errorImage from '../../assets/images/backgrounds/error404_meme.jpg'
 import { sendPageview } from '../../analytics/useAnalyticsEventTracker'
+import { getFontColorText } from '../../Utils/colorUtils'
 
 export default function Error404() {
     useEffect(() => {
@@ -18,8 +19,10 @@ export default function Error404() {
                 minHeight: window.innerHeight
             }}
         >
-            <h1>This page does not exist!</h1>
-            <img src={errorImage} alt='404 meme' />
+            <h1 className={`text-${getFontColorText()}`}>
+                This page does not exist!
+            </h1>
+            <img src={errorImage} alt='404 meme' width='90%' />
         </div>
     )
 }