Remove background and add metadata

app/globals.css

@@ -173,11 +173,12 @@ a{
     .burger{
         display: block;
     }
-    .burgerLabel, #check{
+    .burgerLabel{
         display: block;
     }
     .navbar{
         position: relative;
+        justify-content: flex-start;
     }
     .nav-list{
         display: none;
@@ -583,4 +584,26 @@ p.bq-credit{
     display: flex;
     list-style: none;
     flex-direction: row;
+}
+
+.social-links{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1.5em;
+}
+
+.social-links a{
+    border-bottom: none;
+    text-decoration: none;
+    margin: 1em;
+}
+
+.blog-date{
+    font-style: italic;
+}
+
+img{
+    border-radius: 20px;
 }

app/layout.js

@@ -5,8 +5,24 @@ import Footer from '@/components/Footer'
 
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Ninad\'s Blog',
+  description: 'Thoughts: My goal with this blog is to share my thoughts and review some educational stuffs. It can be books, academics, technology, etc.',
+  keywords: [],
+  author: 'Ninad Naik',
+  icons: {
+    icon: '/logo.ico',
+    apple: '/logo.ico',
+  },
+  openGraph: {
+    title: 'Ninad\'s Blog',
+    description: 'Thoughts: My goal with this blog is to share my thoughts and review some educational stuffs. It can be books, academics, technology, etc.',
+    images: ['https://i.ibb.co/s9CTGPb/1.jpg'],
+  },
+  twitter: {
+    title: 'Ninad\'s Blog',
+    description: 'Thoughts: My goal with this blog is to share my thoughts and review some educational stuffs. It can be books, academics, technology, etc.',
+    images: ['https://i.ibb.co/s9CTGPb/1.jpg']
+  }
 }
 
 export default function RootLayout({ children }) {

components/BlogHead.js

@@ -1,6 +1,6 @@
 export default function BlogHead(props) {
     return(<>
-        <h1 className="blog-title">{props.title}</h1>
+        <h1 className="blog-title1">{props.title}</h1>
         <p className="blog-date">{props.dateText}</p></>
     )
 }

components/Footer.js

@@ -1,23 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import {fa} from '@fortawesome/free-regular-svg-icons'
+import { faInstagram, faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
+import Link from 'next/link';
+
 export default function Footer() {
   return (
     <footer className="footer">
       <div className="contact-info">
         <h4>Find my Inbox</h4>
         <p>
-          <a href="mailto:[email protected]">[email protected]</a>
+        <a href="mailto:ninadnaik07&#64;gmail&#46;com">{'\u006e\u0069\u006e\u0061\u0064\u006e\u0061\u0069\u006b\u0030\u0037\u0040\u0067\u006d\u0061\u0069\u006c\u002e\u0063\u006f\u006d'}</a>.
         </p>
       </div>
       <div className="follow-me">
         <h4>Follow Me</h4>
+        <div className="social-links">
         <a href="https://instagram.com/ninadnaik07" target="_blank">
-          <i className="fa fa-instagram" />
+        <i><FontAwesomeIcon icon={faInstagram}/></i>
         </a>
         <a href="https://twitter.com/ninadnaik07" target="_blank">
-          <i className="fa fa-twitter" />
+        <i><FontAwesomeIcon icon={faTwitter} /></i>
         </a>
         <a href="https://github.com/ninadnaik10" target="_blank">
-          <i className="fa fa-github" />
-        </a>
+        <i><FontAwesomeIcon icon={faGithub} /></i>
+        </a></div>
       </div>
       <div className="footer-end">
         <p>
@@ -28,9 +34,9 @@ export default function Footer() {
         </p>
         <ul className="copyright">
           <li>
-            <a href="/privacy-policy">Privacy Policy</a> ·&nbsp;
+            <Link href="/privacy-policy">Privacy Policy</Link> ·&nbsp;
           </li>
-          <li> © 2022 Ninad Naik</li>
+          <li> © 2023 Ninad Naik</li>
         </ul>
       </div>
     </footer>

components/NavBar.js

@@ -1,3 +1,5 @@
+import Link from 'next/link'
+
 export default function NavBar() {
     return (
         <nav id="navbar" className="navbar">
@@ -9,22 +11,22 @@ export default function NavBar() {
             <div className="line" />
           </div>
         </label>
-        <label className="logo" onClick="location.href='../index'" />
+        <Link href="/"><div className="logo"></div></Link>
         <ul className="nav-list">
           <li>
-            <a href="../index">Home</a>
+            <Link href="/">Home</Link>
           </li>
-          <li>
+          {/* <li>
             <a href="/blog">Blog</a>
-          </li>
+          </li> */}
           <li>
-            <a href="/about">About</a>
+            <a href="https://ninadnaik10.github.io">About</a>
           </li>
-          <li>
+          {/* <li>
             <a href="https://ninadnaik.in" target="_blank">
               Portfolio
             </a>
-          </li>
+          </li> */}
         </ul>
       </nav>
 

posts/10-websites-that-will-help-you-atleast-once.md

@@ -5,7 +5,6 @@ useful and make your work easy and quick?"
 date: "2021-07-03"
 ---
 
-# 10 Super Useful Websites
 
 There are over a billion websites on the internet. We all are familiar with popular websites and use them every day. But do you know some less popular ones which are truly useful and make your work easy and quick? Well, here are 10 super useful websites that will help you. All of them are free and easy-to-use.
 
@@ -41,7 +40,7 @@ There are over a billion websites on the internet. We all are familiar with popu
 
 6. [Google Fonts](https://fonts.google.com/)
 
-   ![google fonts](/images/google fonts.png)
+   ![googlefonts](/images/google_fonts.png)
 
    Google Fonts is a collection of free-to-use open-source fonts for various purposes. Whether you are a content creator, designer, or developer, there are plenty of fonts to choose from. The main categories include Serif, Sans Serif, Monospace, Display, and Handwriting. You can use these fonts for both commercial and non-commercial work.