https://shubambhasinv2.netlify.app/static/js/main.338e957d.chunk.js

1(this["webpackJsonpportfolio-v2-react"]=this["webpackJsonpportfolio-v2-react"]||[]).push([[0],{23:function(e,t,s){"use strict";s.d(t,"a",(function(){return n}));var n=[{id:"3",blogNumber:"3",blogHeader:"Blog 3",blogDate:"February 2021",blogScript:"i am blog 3 Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of ",blog:"i am blog 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",signature:"Happy Coding, Shubam Bhasin",path:"/blogs/blog3"},{id:"2",blogNumber:"2",blogHeader:"Blog 2",blogDate:"January 2021",blogScript:"i am blog 2 Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of ",blog:" i am blog 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",signature:"Happy Coding, Shubam Bhasin",path:"/blogs/blog2"},{id:"1",blogNumber:"1",blogHeader:"Centering anything in CSS 1",blogDate:"February 2021",blogScript:"CSS Grids is a very powerful tool and can be used at lot of places, centering elements is one of them.",signature:"Happy Coding, Shubam Bhasin",path:"/blogs/centering-anything-in-css"}]},404:function(e,t,s){"use strict";s.r(t);var n=s(2),i=s.n(n),a=s(67),c=s.n(a),l=s(6),o=s(3),r=s(1),m=function(){return Object(r.jsxs)("div",{className:"aboutMe",children:[Object(r.jsx)("h1",{children:"Who AM I ?"}),Object(r.jsxs)("div",{className:"info-and-img",children:[Object(r.jsx)("div",{className:"small-info",children:Object(r.jsxs)("p",{children:[Object(r.jsx)("strong",{children:"Shubam Bhasin"}),Object(r.jsx)("br",{}),Object(r.jsx)("small",{children:"React | Javascript | Express | MongoDB"}

1),Object(r.jsx)("br",{}),Object(r.jsx)("small",{children:"HTML | CSS | Bootstrap | Styled-Components "})]})}),Object(r.jsx)("div",{className:"my-image",children:Object(r.jsx)("img",{src:"https://images.pexels.com/users/avatars/1091152/shubam-bhasin-570.jpeg?auto=compress&fit=crop&h=256&w=256",alt:"meri-shakal"})})]}),Object(r.jsxs)("div",{className:"my-info",children:[Object(r.jsx)("p",{children:"I am a Web developer, Programmer and a Tech Blogger currently living in Union territory of Jammu and Kashmir. I have done my B.Tech in Electronics and Communication Engineering from NIT Srinagar. Apart from that I have keen interest in Web, Web Apps. These days I am in \u2764\ufe0f with JavaScript and its Frameworks. So each day I dive in the world of JavaScript and take a chunk out of it. Actively Learning them and applying them. You can click on the project section to have a look on number of things I have made. Or click Below."}),Object(r.jsx)(l.b,{to:"/projects",title:"Go directly to project section",className:"links",children:"Project Section"})]})]})},d=function(){var e=Object(n.useRef)(null);return Object(n.useEffect)((function(){e.current.focus()}),[]),Object(r.jsx)("div",{className:"contact",children:Object(r.jsx)("div",{className:"contact-container",children:Object(r.jsxs)("form",{name:"contact",action:"https://formspree.io/f/xnqoknyl",method:"POST",netlify:!0,children:[Object(r.jsx)("h2",{style:{textAlign:"left"},children:"Get in Touch"}),Object(r.jsx)("input",{ref:e,name:"name",placeholder:"Enter your name...",type:"text"}),Object(r.jsx)("br",{}),Object(r.jsx)("input",{name:"email",placeholder:"Enter your email...",type:"email"}),Object(r.jsx)("br",{}),Object(r.jsx)("textarea",{name:"Message",placeholder:"Enter your message"}),Object(r.jsx)("br",{}),Object(r.jsx)("div",{"data-netlify-recaptcha":"true"}),Object(r.jsx)("button",{type:"submit",children:"Send"})]})})})},h=s(11),j=s(70),b=s(69),p=s.p+"static/media/cover.6f8f9dad.svg",u=(s(47),function(){return Object(r.jsxs)("div",{children:[Object(r.jsxs)("div",{className:"home",children:[Object(r.jsxs)("div",{className:"info",children:[Object(r.jsxs)("div",{className:"info-div",children:[Object(r.jsx)("h1",{children:"Shubam Bhasin"}),Object(r.jsx)("p",{children:"Web Developer"}),Object(r.jsx)("small",{children:"JavaScript | React | HTML | CSS "}),Object(r.jsx)("br",{}),Object(r.jsx)("br",{}),Object(r.jsxs)(b.a,{to:"/home#skill",className:"button",children:[" ","Swipe Up ",Object(r.jsx)(h.b,{skills:28})]})]}),Object(r.jsx)("div",{className:"cover-container",children:Object(r.jsx)("img",{src:p,alt:"cover-poster"})})]}),Object(r.jsxs)("div",{className:"go-to-project",children:[Object(r.jsx)(l.b,{to:"/projects",title:"Go directly to project section",className:"links",children:"Project Section"}),Object(r.jsx)(l.b,{to:"/projects",className:"links-circle",children:Object(r.jsx)(h.e,{size:28})}),Object(r.jsx)(l.b,{className:"links",title:"Contact form link",to:"/contact",children:"Contact Me"}),Object(r.jsx)(l.b,{className:"links-circle",to:"/contact",children:Object(r.jsx)(h.j,{size:28})})]})]}),Object(r.jsxs)("div",{id:"skill",className:"skills",children:[Object(r.jsx)("h1",{children:"Skills"}),Object(r.jsxs)("div",{className:"skills-section",children:[Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(h.f,{size:84,className:"html5"}),Object(r.jsx)("p",{children:"HTML"})]}),Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(h.d,{size:70,className:"css"}),Object(r.jsx)("p",{children:"CSS"})]}),Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(h.h,{size:84,className:"js"}),Object(r.jsx)("p",{children:"JavaScript"})]}),Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(h.l,{size:84,className:"react"}),Object(r.jsx)("p",{children:"React"})]}),Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(h.c,{size:84,className:"bootstrap"}),Object(r.jsx)("p",{children:"Bootstrap"})]}),Object(r.jsxs)("div",{className:"skill",children:[Object(r.jsx)(j.a,{size:84,className:"photoshop"}),Object(r.jsx)("p",{children:"Adobe Photoshop"})]})]})]})]})}),g=function(){return Object(r.jsxs)("nav",{children:[Object(r.jsx)(l.b,{to:"/home",className:"links",children:"Home"}),Object(r.jsx)(l.b,{to:"/projects",className:"links",children:"Projects"}),Object(r.jsx)(l.b,{to:"/blogs",className:"links",children:"Blogs"}),Object(r.jsx)(l.b,{to:"/aboutme",className:"links",children:"About me"}),Object(r.jsx)(l.b,{to:"/contact",className:"links",id:"contact",children:"Contact"})]})},x=s(48),y=s(23),O=function(){return Object(r.jsx)("div",{className:"blogs",children:Object(r.jsx)("div",{className:"blog-container",children:y.a.map((function(e){return"2"===e.blogNumber?Object(r.jsxs)("div",{children:[Object(r.jsx)("div",{className:"blog-header",children:Object(r.jsx)("h2",{children:e.blogHeader})}

1),Object(r.jsx)("div",{className:"blog-date",children:Object(r.jsx)("span",{children:Object(r.jsx)("small",{children:e.blogDate})})}),Object(r.jsxs)("div",{className:"blog-data",children:[Object(r.jsx)("p",{children:e.blog})," "]}),Object(r.jsx)("div",{className:"signature",children:Object(r.jsx)("small",{children:e.signature})})]},e.id):""}))})})},v=function(){return Object(r.jsx)("div",{className:"blogs",children:Object(r.jsx)("div",{className:"blog-container",children:y.a.map((function(e){return"3"===e.blogNumber?Object(r.jsxs)("div",{children:[Object(r.jsx)("div",{className:"blog-header",children:Object(r.jsx)("h2",{children:e.blogHeader})}),Object(r.jsx)("div",{className:"blog-date",children:Object(r.jsx)("span",{children:Object(r.jsx)("small",{children:e.blogDate})})}),Object(r.jsxs)("div",{className:"blog-data",children:[Object(r.jsx)("p",{children:e.blog})," "]}),Object(r.jsx)("div",{className:"signature",children:Object(r.jsx)("small",{children:e.signature})})]},e.id):""}))})})},f=i.a.lazy((function(){return s.e(5).then(s.bind(null,410))})),k=i.a.lazy((function(){return s.e(4).then(s.bind(null,411))})),w=i.a.lazy((function(){return s.e(3).then(s.bind(null,409))}));function N(){return Object(r.jsx)(l.a,{children:Object(r.jsxs)("div",{className:"App",children:[Object(r.jsx)(g,{}),Object(r.jsx)(o.c,{children:Object(r.jsxs)(n.Suspense,{fallback:Object(r.jsx)("div",{children:"Loading..."}),children:[Object(r.jsx)(o.a,{path:"/contact",exact:!0,component:d}),Object(r.jsx)(o.a,{path:"/aboutme",exact:!0,component:m}),Object(r.jsx)(o.a,{path:"/blogs",exact:!0,component:w}),Object(r.jsx)(o.a,{path:"/projects",exact:!0,component:f}),Object(r.jsx)(o.a,{path:"/projects/design",exact:!0,component:k}),Object(r.jsx)(o.a,{path:"/",exact:!0,component:u}),Object(r.jsx)(o.a,{path:"/home",name:"home-page",exact:!0,component:u}),Object(r.jsx)(o.a,{path:"/blogs/centering-anything-in-css",exact:!0,component:x.a}),Object(r.jsx)(o.a,{path:"/blogs/blog2",exact:!0,component:O}),Object(r.jsx)(o.a,{path:"/blogs/blog3",exact:!0,component:v})]})})]})})}var I=document.getElementById("root");c.a.render(Object(r.jsx)(n.StrictMode,{children:Object(r.jsx)(N,{})}),I)},47:function(e,t,s){},48:function(e,t,s){"use strict";s(2),s(23);var n=s(24),i=s.n(n),a=s(406),c=s(405),l=s(1),o=(s(151),{code:function(e){var t=e.language,s=e.value;return Object(l.jsx)(a.a,{style:c.a,language:t,children:s})}});t.a=function(){return Object(l.jsx)("div",{className:"blogs",children:Object(l.jsxs)("div",{className:"blog-container",children:[Object(l.jsx)("h1",{children:"Centering anything in CSS"}),Object(l.jsx)("p",{children:"For most of the developer, centering a button, a div etc have been a tedious work altogether. I have read in comment section of the developer articles, on number of blogs people even sarcastically they say we have to search every time we want to center anything."}),Object(l.jsx)("p",{children:"But I found a simple small 5 lines piece of code that can literally center anything in CSS, like anything. Any guesses how ?"}),Object(l.jsx)("p",{children:"Yes, may be some of you guessed it right ! Using CSS Grids \ud83d\ude05\ud83d\ude05"}),Object(l.jsx)("h3",{children:"Have a look at the code first, then I will explain what is happening "}),Object(l.jsx)(i.a,{className:"markdown",renderers:o,children:'\n~~~\n<div class="center">\n  <button>Center Button</button>\n</div>\n\n.center\n{\n  display: grid;\n  place-items: center;\n  height: 100vh;\n}\n~~~'}),Object(l.jsx)(i.a,{children:'Here we have a ***div*** with class = "***center***". and then inside it we have a ***button*** which we want to center.'}),Object(l.jsx)(i.a,{children:'So what we do is we make the div with class ***center*** as a **grid** by using the property "**Display**: ***grid***", this makes the div container as a grid in CSS and after we say "**place-items** : ***center***", css tries to horizontally and vertically center the button element inside the div. This will center your button or anything else that you want to center \ud83d\ude0e\ud83d\ude0e '}),Object(l.jsx)(i.a,{children:" But now we have a problem since the initial height of an element is it default height so for now it will only center it horiontally. For making it vertically center we have to make the height of the to 100vh to make if properly center. Or you can choose any height as per your need."}),Object(l.jsx)("p",{children:"Happy Coding"}),Object(l.jsx)("small",{children:"Shubam Bhasin"})]})})}}},[[404,1,2]]]);
2//# sourceMappingURL=main.338e957d.chunk.js.map