Merge pull request #3 from KuchtaVR6/update-branding

Update branding

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",
+  "short_name": "Patryk Kuchta",
-  "name": "Create React App Sample",
+  "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

@@ -18,7 +18,7 @@
   flex-wrap: wrap;
   column-gap: $largeGap;
   row-gap: $smallGap;
-  margin: 1em 1.5em;
+  margin: 1.2em 1.8em;
 
   & > div {
     display: flex;
@@ -33,6 +33,9 @@
     a {
       color: $white;
       text-decoration: none;
+      font-size: 1.1em;
+      font-weight: 350;
+      margin-top: 0.5em;
 
       &:hover {
         color: $accent_colour;
@@ -43,12 +46,18 @@
 
   .left{
     margin-left: auto;
+    
+    a {
+      font-size: 1em;
+      font-weight: 300;
+    }
   }
 
   .logoContainer {
-    width: 2.5em;
+    width: 5em;
-    height: 2.5em;
+    height: 1.5em;
     position: relative;
+    margin-right: 0.5em;
 
     @include nextImg;
   }