[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
+	<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
-			work correctly both with client-side routing and a non-root public URL.
+	<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
-			Learn how to configure a non-root public URL by running `npm run build`.
+	<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`