feat: new images

pages/_app.tsx

@@ -29,14 +29,14 @@ export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
 
 			<meta property="og:title" content="Patryk Kuchta's Portfolio"/>
 			<meta property="og:description" content="Explore a showcase of my projects, education and work experience."/>
-			<meta property="og:image" content="https://kuchta.uk/logo.svg"/>
+			<meta property="og:image" content="https://kuchta.uk/white_logo.png"/>
 			<meta property="og:url" content="https://kuchta.uk"/>
 			<meta property="og:type" content="website"/>
 
 			<meta name="twitter:card" content="summary"/>
 			<meta name="twitter:title" content="Patryk Kuchta's Portfolio"/>
 			<meta name="twitter:description" content="Explore a showcase of my projects, education and work experience."/>
-			<meta name="twitter:image" content="https://kuchta.uk/logo.svg"/>
+			<meta name="twitter:image" content="https://kuchta.uk/white_logo.png"/>
 
 			<link rel="icon" type="image/x-icon" href="/portfolio/favicon.ico"/>
 		</Head>

public/manifest.json

@@ -1,8 +1,21 @@
 {
   "name": "Patryk Kuchta's Portfolio",
   "short_name": "Patryk Kuchta",
+  "icons": [
+    {
+      "src": "/portfolio/white_logo.png",
+      "sizes": "785x228",
+      "type": "image/png"
+    },
+    {
+      "src": "/portfolio/favicon.ico",
+      "sizes": "300x300",
+      "type": "image/x-icon"
+    }
+  ],
   "start_url": "/",
   "display": "standalone",
   "background_color": "#fff",
+  "theme_color": "#000000",
   "description": "Patryk Kuchta's portfolio entailing his academic and professional work."
 }

public/portfolio/manifest.json

@@ -1,10 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Patryk Kuchta",
+  "name": "Patryk Kuchta - Portfolio",
   "icons": [
+    {
+      "src": "white_logo.png",
+      "sizes": "785x228",
+      "type": "image/png"
+    },
     {
       "src": "favicon.ico",
-      "sizes": "256x256 64x64 32x32 24x24 16x16",
+      "sizes": "300x300",
       "type": "image/x-icon"
     }
   ],

src/portfolio/sections/Intro/TopBar.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import styles from "../../styling/intro.module.scss";
-import logo from "../../../../public/portfolio/logo.svg";
+import logo from "../../../../public/portfolio/white_logo.png";
 
 const TopBar = (): JSX.Element => {
 	return (

src/portfolio/styling/intro.module.scss

@@ -46,7 +46,7 @@
   }
 
   .logoContainer {
-    width: 2.5em;
+    width: 8.6em;
     height: 2.5em;
     position: relative;