Improvements

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "cmake.configureOnOpen": false
+}

gatsby-config.js

@@ -22,6 +22,9 @@ module.exports = {
       lbg: "lloyds.png",
       navsoft: "navsoft.png",
       maastrixsolutions: "maastrix.png",
+    },
+    skillHighLights: {
+
     },
     jobDetails: {
       "full-stack-dev": {

gatsby-node.js

@@ -57,7 +57,7 @@ exports.createPages = ({ graphql, actions }) => {
             },
           })
         })
-        //Comming soon page for otheres
+        //Coming soon page for others
         createPage({
           path: "works",
           component: comingSoonTemplate,
@@ -74,6 +74,7 @@ exports.createPages = ({ graphql, actions }) => {
               slug: node.fields.slug,
             },
           })
+          console.log(node.fields.slug)
           const pageName = node.fields.slug.split("/")[1]
           createPage({
             path: pageName,
@@ -83,12 +84,11 @@ exports.createPages = ({ graphql, actions }) => {
               regex: `/${pageName}\//gi`,
             },
           })
-
         })
         //Tages pages
         result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-          (node.frontmatter.tags || "").split(",").forEach((tag) => {
-            const tagFinal = tag.trim().replace(/ /ig, "")
+          ;(node.frontmatter.tags || "").split(",").forEach(tag => {
+            const tagFinal = tag.trim().replace(/ /gi, "")
             createPage({
               path: `tags/${tagFinal}`,
               component: path.resolve(`./src/templates/tags-list-post.jsx`),
@@ -113,6 +113,5 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       name: `slug`,
       value: slug,
     })
-
   }
-}
+}

src/components/Header.js

@@ -1,50 +1,74 @@
-import React from 'react';
+import React from "react"
 import {
   Collapse,
   Navbar,
   NavbarToggler,
   NavbarBrand,
   Nav,
   NavItem,
-  NavLink
-} from 'reactstrap';
+  NavLink,
+} from "reactstrap"
 
 export default class Example extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
 
-    this.toggle = this.toggle.bind(this);
+    this.toggle = this.toggle.bind(this)
     this.state = {
-      isOpen: false
-    };
+      isOpen: false,
+    }
   }
   toggle() {
     this.setState({
-      isOpen: !this.state.isOpen
-    });
+      isOpen: !this.state.isOpen,
+    })
   }
   render() {
     return (
-      <Navbar color="dark" dark expand="md" className="sticky-top pb-xl-0 pt-xl-0">
-        <NavbarBrand href="/" className="border border-secondary rounded-circle pl-2 pr-2 border-0">SP</NavbarBrand>
+      <Navbar
+        color="dark"
+        dark
+        expand="md"
+        className="sticky-top pb-xl-0 pt-xl-0"
+      >
+        <NavbarBrand
+          href="/"
+          className="border border-secondary rounded-circle pl-2 pr-2 border-0"
+        >
+          SP
+        </NavbarBrand>
         <NavbarToggler onClick={this.toggle} />
         <Collapse isOpen={this.state.isOpen} navbar>
           <Nav className="ml-auto" navbar>
             <NavItem>
-              <NavLink className="text-light" href="/works/">MY WORK</NavLink>
+              <NavLink className="text-light" href="/works/">
+                MY WORK
+              </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink className="text-light" href="https://resume.io/r/fLlndyLmA">RESUME</NavLink>
+              <NavLink
+                className="text-light"
+                href="/SanjayPanda - Resume - Full stack.pdf"
+              >
+                RESUME
+              </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink className="text-light" href="/blogs">BLOG</NavLink>
+              <NavLink className="text-light" href="/blogs">
+                BLOG
+              </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink className="text-light" href="mailto:contact@sanjaypanda.com">CONTACT</NavLink>
+              <NavLink
+                className="text-light"
+                href="mailto:contact@sanjaypanda.com"
+              >
+                CONTACT
+              </NavLink>
             </NavItem>
           </Nav>
         </Collapse>
       </Navbar>
-    );
+    )
   }
-}
+}

src/components/MainPanel.js

@@ -0,0 +1,76 @@
+import React from "react"
+import { Col, CardDeck } from "reactstrap"
+import { graphql, StaticQuery } from "gatsby"
+import JobDesc from "./JobDesc"
+
+export default () => {
+  return (
+    <StaticQuery
+      query={graphql`
+        query {
+          site {
+            siteMetadata {
+              jobDetails {
+                full_stack_dev {
+                  header
+                  text
+                }
+                ui_application_development {
+                  header
+                  text
+                }
+                node_js_development {
+                  header
+                  text
+                }
+                spa_development {
+                  header
+                  text
+                }
+              }
+            }
+          }
+        }
+      `}
+      render={data => {
+        const jobDetails = data.site.siteMetadata.jobDetails
+        return (
+          <Col
+            sm="9"
+            md="9"
+            xl="8"
+            className="ml-md-auto ml-sm-auto mr-sm-auto ml-xl-auto mr-xl-auto order-1 order-sm-1 p-3"
+          >
+            <JobDesc
+              className="mb-3"
+              {...jobDetails["full_stack_dev"]}
+              path="full_stack_dev"
+              key={1}
+              headerCss="bg-card-yellow text-light display-4"
+            />
+            <CardDeck>
+              <JobDesc
+                {...jobDetails["ui_application_development"]}
+                path="ui_application_development"
+                key={2}
+                headerCss="bg-card-blue text-light"
+              />
+              <JobDesc
+                {...jobDetails["node_js_development"]}
+                path="node_js_development"
+                key={3}
+                headerCss="bg-card-green text-light"
+              />
+              <JobDesc
+                {...jobDetails["spa_development"]}
+                path="spa_development"
+                key={4}
+                headerCss="bg-card-red text-light"
+              />
+            </CardDeck>
+          </Col>
+        )
+      }}
+    />
+  )
+}

src/components/MainPanelV2.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { Col } from "reactstrap"
+import SkillHighLights from "./SkillHighLights"
+import { graphql } from "gatsby"
+const MainPanelV2 = ({ data }) => {
+  return (
+    <Col
+      sm="9"
+      md="9"
+      xl="8"
+      className="ml-md-auto ml-sm-auto mr-sm-auto ml-xl-auto mr-xl-auto order-1 order-sm-1 p-3"
+    >
+      <SkillHighLights
+        skills={[
+          "Articulating requirement and build solution",
+          "Agile developer mindset",
+          "Empower team to understand and build better product",
+          "Fullstack mindset",
+        ]}
+      />
+    </Col>
+  )
+}
+
+const query = graphql`
+  query {
+    allMarkdownRemark {
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            tags
+            date
+          }
+          html
+        }
+      }
+    }
+  }
+`
+export default MainPanelV2

src/components/SkillHighLights.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { Badge } from "reactstrap"
+
+export default ({ skills }) => {
+  return (
+    <div>
+      {skills.map(skill => (
+        <Badge href="#">{skill}</Badge>
+      ))}
+    </div>
+  )
+}

src/pages/blogs/trunk-based-development.md

@@ -0,0 +1,10 @@
+---
+title: Trunk based development 
+subtitle: A process and also idea! make your life easyer 
+date: 20-06-2020
+auther: Sanjay
+readtime: 2 min
+tags: Git,Toggles,Feature Toggles,CI CD Pipeline,Automation
+keywords: Feature Toggles, Merge Hell, CI CD Pipeline, Automation
+externallink: https://www.npmjs.com/package/babel-plugin-feature-toggles
+---

src/pages/index.js

@@ -4,15 +4,15 @@ import Layout from "../components/layout"
 import SEO from '../components/seo'
 import PortfolioSideBar from "../components/PortfolioSideBar";
 import SkillsSideBar from "../components/SkillsSideBar";
-import MainPainal from "../components/MainPainal";
+import MainPanelV2 from "../components/MainPanelV2";
 
 export default () => {
     return (
         <Layout>
             <SEO title="Home" keywords={[`Sanjay Panda`, `Fullstack developer`, `react`, `node`]} />
             <Row className="flex-xl-nowrap no-gutters" >
                 <PortfolioSideBar />
-                <MainPainal />
+                <MainPanelV2 />
                 <SkillsSideBar />
             </Row>
         </Layout>

src/pages/works/babel-plugins-feature-toggles.md

@@ -0,0 +1,12 @@
+---
+title: babel-plugin-feature-toggles
+subtitle: A Babel plugin that helps remove unfinished code from your JavaScript and Node Js application on build time. This is a configuration based feature toggling.
+date: 20-06-2020
+auther: Sanjay
+readtime: 2 min
+tags: Git,Toggles,Feature Toggles,CI CD Pipeline,Automation
+keywords: Feature Toggles, Merge Hell, CI CD Pipeline, Automation
+externallink: https://www.npmjs.com/package/babel-plugin-feature-toggles
+---
+
+#### A Babel plugin that helps remove unfinished code from your JavaScript and Node Js application on build time. This is a configuration based feature toggling.