[feat] fix favicons, cleanup

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
4 years ago · eaef991f8c
5 changed files with 23 additions and 42 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,25 +3,20 @@

 <head>
 	<meta charset="utf-8" />
-	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<meta name="theme-color" content="#ff5555" />
 	<meta name="description" content="Personal website of MKRhere" />
-	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-	<!--
-			manifest.json provides metadata used when your web app is installed on a
-			user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-		-->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-	<!--
-			Notice the use of %PUBLIC_URL% in the tags above.
-			It will be replaced with the URL of the `public` folder during the build.
-			Only files inside the `public` folder can be referenced from the HTML.

-			Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-			work correctly both with client-side routing and a non-root public URL.
-			Learn how to configure a non-root public URL by running `npm run build`.
-		-->
+	<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon/android-chrome-192x192.png">
+	<link rel="manifest" href="%PUBLIC_URL%/favicon/site.webmanifest">
+	<meta name="theme-color" content="#ff5555">
+	<link rel="mask-icon" href="%PUBLIC_URL%/favicon/safari-pinned-tab.svg" color="#5bbad5">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico">
+	<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
+	<meta name="msapplication-config" content="%PUBLIC_URL%/favicon/browserconfig.xml">
+	<meta name="msapplication-TileColor" content="#ff5555">
+
 	<link rel="stylesheet" href="/fonts.css" />
 	<title>MKRhere</title>
 </head>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,25 +0,0 @@
-{
-	"short_name": "React App",
-	"name": "Create React App Sample",
-	"icons": [
-		{
-			"src": "favicon.ico",
-			"sizes": "64x64 32x32 24x24 16x16",
-			"type": "image/x-icon"
-		},
-		{
-			"src": "logo192.png",
-			"type": "image/png",
-			"sizes": "192x192"
-		},
-		{
-			"src": "logo512.png",
-			"type": "image/png",
-			"sizes": "512x512"
-		}
-	],
-	"start_url": ".",
-	"display": "standalone",
-	"theme_color": "#ff5555",
-	"background_color": "#000000"
-}
--- a/src/pages/Exp.js
+++ b/src/pages/Exp.js
@ -73,10 +73,21 @@ const ExpUnit = ({ title, location, position, year }) => {
 	);
 };

+const getAge = date => {
+	var today = new Date();
+	var birthDate = new Date(date);
+	var age = today.getFullYear() - birthDate.getFullYear();
+	var m = today.getMonth() - birthDate.getMonth();
+	if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) return age - 1;
+	return age;
+};
+
+const age = getAge("27 May 1995");
+
 function Exp() {
 	return (
 		<Container next="/projects">
-			<h2>I’m a 25 year old developer from Chennai, India.</h2>
+			<h2>I’m a {age} year old developer from Chennai, India.</h2>
 			<p>Here are some places I’ve worked at:</p>
 			<div
 				className={css`