Merge pull request #12 from sydrawat01/feature

Add a project page/section

data/SiteConfig.js

@@ -12,7 +12,7 @@ const config = {
   dateFromFormat: 'YYYY-MM-DD',
   dateFormat: 'MMMM Do, YYYY',
   userName: 'Siddharth',
-  userEmail: 'sydrawat@gmail.com',
+  userEmail: 'siddharth.rawat94@gmail.com',
   userTwitter: 'sydrawat',
   menuLinks: [
     {
@@ -24,8 +24,8 @@ const config = {
       link: '/blog/',
     },
     {
-      name: 'Contact',
-      link: '/contact/',
+      name: 'Projects',
+      link: '/projects/',
     },
   ],
   themeColor: '#C7A27C', // Used for setting manifest and progress theme colors.

gatsby-config.js

@@ -83,14 +83,15 @@ module.exports = {
         background_color: config.backgroundColor,
         theme_color: config.themeColor,
         display: 'minimal-ui',
+        icon: 'static/logos/logo-1024.png',
         icons: [
           {
-            src: '/logos/logo-512.png',
+            src: 'static/logos/logo-512.png',
             sizes: '512x512',
             type: 'image/png',
           },
           {
-            src: '/logos/logo-1024.png',
+            src: 'static/logos/logo-1024.png',
             sizes: '1024x1024',
             type: 'image/png',
           },

netlify.toml

@@ -3,3 +3,4 @@
   command = "yarn build"
 [build.environment]
   YARN_VERSION = "1.22.4"
+  NODE_VERSION = "14.15.1"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sydrawat",
   "description": "Sid's website built with Gatsby, React & GraphQL",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "Siddharth Rawat <siddharth.rawat94@gmail.com>",
   "dependencies": {
     "@mdx-js/mdx": "^1.6.5",

src/components/Footer/Footer.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { Link } from 'gatsby';
 import netlify from '../../../content/images/netlify.png';
 import gatsby from '../../../content/thumbnails/gatsby.png';
-import github from '../../../content/images/github.png';
-import ig from '../../../content/images/ig.svg';
+import github from '../../../content/thumbnails/github.svg';
+import mail from '../../../content/thumbnails/mail.svg';
+import linkedin from '../../../content/thumbnails/linkedin.svg';
 import twitter from '../../../content/images/twitter.svg';
 
 const Footer = () => {
@@ -23,22 +24,25 @@ const Footer = () => {
           RSS
         </a>
       </div>
-      <div>
+      <div className="contact-container">
         <a
           href="https://github.com/sydrawat01"
-          title="Open-source on GitHub"
+          title="Open-sourcerer on GitHub"
           target="_blank"
           rel="noopener noreferrer"
         >
           <img src={github} className="footer-img" alt="GitHub" />
         </a>
         <a
-          href="https://www.instagram.com/sydrawat"
-          title="Artsy me!"
+          href="https://www.linkedin.com/siddharth-rawat"
+          title="Mr. Professional"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={ig} className="footer-img" alt="Netlify" />
+          <img src={linkedin} className="footer-img" alt="LinkedIn" />
+        </a>
+        <a href="mailto:siddharth.rawat94@gmail.com" target="_blank" rel="noopener noreferrer">
+          <img src={mail} className="footer-img" alt="Mail" />
         </a>
         <a
           href="https://www.netlify.com/"

src/components/Navigation/Navigation.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Link } from 'gatsby';
-import board from '../../images/stickie.svg';
+import stickie from '../../images/stickie.svg';
 import sun from '../../images/sun.svg';
 import moon from '../../images/moon.svg';
 import ThemeContext from '../../context/ThemeContext';
@@ -41,7 +41,7 @@ export default class Navigation extends Component {
         <div className="nav-container">
           <div className="brand">
             <Link to="/">
-              <img src={board} className="favicon" alt="MotherBoard" />
+              <img src={stickie} className="favicon" alt="stickie" />
               <span className="text">Siddharth Rawat</span>
             </Link>
           </div>

src/data/projectList.js

@@ -0,0 +1,48 @@
+const projectsList = [
+  {
+    name: 'React Boilerplate',
+    date: '2021',
+    slug: 'react-boilerplate',
+    tagline: 'A free, open source React template with Redux Toolkit, TypeScript & React Router.',
+    url: 'https://boilerplate-react-ts.web.app/',
+  },
+  {
+    name: 'React Pocket Notes',
+    date: '2021',
+    tagline: 'Pocket-sized notes for React, TypeScript & Redux Toolkit.',
+    url: 'https://sydrawat.gitbook.io/react/',
+  },
+  {
+    name: "Bob's Burgers",
+    slug: 'bobs-burgers',
+    tagline:
+      "Bob's burgers is a simple burger builder app, that lets you sculpt your own burger by selecting individual ingredients. Includes Typescript with React Router and Redux Toolkit!",
+    url: 'https://bobs-burgers-f1443.web.app/',
+  },
+  {
+    name: 'Bon-Apetit',
+    slug: 'bon-apetit',
+    tagline:
+      'This web-app is focused on logging all your food hunting activites across the globe! Add reviews, comments and provide ratings to the restaurants. Built using TypeScript, NodeJS, MongoDB and ReactJS',
+  },
+  {
+    name: 'Hyper Moonlite',
+    slug: 'hyper-moonlite',
+    tagline: 'Hyper term moonlite theme. Simple and easy to use.',
+    url: 'https://www.npmjs.com/package/hyper-moonlite',
+  },
+  {
+    name: 'Firefox Moonlite',
+    slug: 'firefox-moonlite',
+    tagline: 'A minimal theme for FireFox, heavily resembles my terminal. Join the dark side.',
+    url: 'https://addons.mozilla.org/en-US/firefox/addon/hyper-ff-moonlite/',
+  },
+  {
+    name: 'QR-WiFi',
+    slug: 'qrifi',
+    tagline: 'Generate a QR code for your WiFi!',
+    url: 'https://qr-ifi.web.app/',
+  },
+];
+
+export default projectsList;

src/pages/about.jsx

@@ -35,7 +35,7 @@ export default class Me extends Component {
               </p>
               <h3>Getting to know me</h3>
               <p>
-                I&apos;m currently purusing my Master&apos;s degree in Information Systems from
+                I&apos;m currently pursuing my Master&apos;s degree in Information Systems from
                 <a href="https://wwww.northeastern.edu/"> Northeastern University, Boston.</a>
               </p>
               <p>

src/pages/contact.jsx

@@ -7,7 +7,7 @@ import config from '../../data/SiteConfig';
 import github from '../../content/thumbnails/github.svg';
 import twitter from '../../content/images/twitter.svg';
 import linkedin from '../../content/thumbnails/linkedin.svg';
-import mail from '../../content/thumbnails/mail.svg';
+import ig from '../../content/images/ig.svg';
 import reddit from '../../content/thumbnails/reddit.svg';
 
 export default class Contact extends Component {
@@ -48,11 +48,11 @@ export default class Contact extends Component {
                   <img src={linkedin} alt="Linkedin" />
                 </a>
                 <a
-                  href="mailto:siddharth.rawat94@gmail.com"
+                  href="https://www.instagram.com/sydrawat"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <img src={mail} alt="Mail" />
+                  <img src={ig} alt="instagram" />
                 </a>
               </div>
               <h4 style={{ fontWeight: 'lighter', fontSize: `${1.3}rem` }}>

src/pages/index.jsx

@@ -71,8 +71,8 @@ const IndexPage = () => (
         <div className="flashcard-section">
           <img src={sid} className="flashcard-avatar" alt="Sid" />
           <div>
-            <h3>Sid</h3>
-            <p>Northeastern &apos;23</p>
+            <h3>Siddharth Rawat</h3>
+            <h3>Northeastern &apos;23</h3>
             <p>
               <span role="img" aria-label="ramen">
                 🍜