diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..cad7657
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "cmake.configureOnOpen": false
+}
\ No newline at end of file
diff --git a/gatsby-config.js b/gatsby-config.js
index 0bfc560..ef4523f 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -22,6 +22,9 @@ module.exports = {
       lbg: "lloyds.png",
       navsoft: "navsoft.png",
       maastrixsolutions: "maastrix.png",
+    },
+    skillHighLights: {
+      
     },
     jobDetails: {
       "full-stack-dev": {
diff --git a/gatsby-node.js b/gatsby-node.js
index d2a1f82..867aa42 100644
--- a/gatsby-node.js
+++ b/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,
     })
-
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index c61edf9..1853985 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react"
 import {
   Collapse,
   Navbar,
@@ -6,45 +6,69 @@ import {
   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>
-    );
+    )
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/MainPainal.js b/src/components/MainPainal.js
deleted file mode 100644
index ae89368..0000000
--- a/src/components/MainPainal.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react'
-import { Col, CardDeck, Card, CardBody } from 'reactstrap';
-import { graphql, StaticQuery } from "gatsby"
-import JobDesc from "../components/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">
-          {/* <Card className="text-dark mb-3 shadow border-dark rounded-0">
-                <CardBody>
-                    <h2> Now open for ...</h2>
-                    <h5><b>Open source community contribution!</b></h5>
-                    <p>I am new to open source contribution community. I want to be part of <b>OpenSource projects</b> from <b>scratch</b>. If you have an <b>problem to solving</b> and looking for a <b>contributor</b>, Please let me know. </p>
-                    <a className="btn btn-outline-warning" href="mailto:contact@sanjaypanda.com">Contact me</a>
-                </CardBody>
-            </Card> */}
-          <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>
-      }}
-    />
-
-  )
-}
diff --git a/src/components/MainPanel.js b/src/components/MainPanel.js
new file mode 100644
index 0000000..a9b7e8f
--- /dev/null
+++ b/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>
+        )
+      }}
+    />
+  )
+}
diff --git a/src/components/MainPanelV2.js b/src/components/MainPanelV2.js
new file mode 100644
index 0000000..7a1d722
--- /dev/null
+++ b/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
diff --git a/src/components/SkillHighLights.js b/src/components/SkillHighLights.js
new file mode 100644
index 0000000..b8f3510
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/pages/blogs/trunk-based-development.md b/src/pages/blogs/trunk-based-development.md
new file mode 100644
index 0000000..904d869
--- /dev/null
+++ b/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
+---
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 3f2f9d9..85a7dcc 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,7 +4,7 @@ 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 (
@@ -12,7 +12,7 @@ export default () => {
             <SEO title="Home" keywords={[`Sanjay Panda`, `Fullstack developer`, `react`, `node`]} />
             <Row className="flex-xl-nowrap no-gutters" >
                 <PortfolioSideBar />
-                <MainPainal />
+                <MainPanelV2 />
                 <SkillsSideBar />
             </Row>
         </Layout>
diff --git a/src/pages/works/babel-plugins-feature-toggles.md b/src/pages/works/babel-plugins-feature-toggles.md
new file mode 100644
index 0000000..ea5b3b1
--- /dev/null
+++ b/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.
diff --git a/static/SanjayPanda - Resume - Full stack.pdf b/static/SanjayPanda - Resume - Full stack.pdf
new file mode 100644
index 0000000..30db380
Binary files /dev/null and b/static/SanjayPanda - Resume - Full stack.pdf differ