component---src-pages-blog-mdx-frontmatter-slug-js-content-file-path-blog-first-post-mdx-476427e6c120e4504a3b.js

"use strict";(self.webpackChunksamuel_tan=self.webpackChunksamuel_tan||[]).push([[803],{7308:function(e,t,a){a.r(t),a.d(t,{Head:function(){return c},default:function(){return m}});var n=a(1151),A=a(7294);function r(e){const t=Object.assign({p:"p",h2:"h2",ul:"ul",li:"li",span:"span",a:"a",pre:"pre",code:"code"},(0,n.ah)(),e.components);return A.createElement(A.Fragment,null,A.createElement(t.p,null,"I've always wanted my own website as it would serve as an easy way of collecting the projects that I work on, both work and otherwise."),"\n",A.createElement(t.p,null,"However, I've never put in the effort to properly make a website - until now. The create-a-website project aligns with other projects that I intend to do across this summer holiday."),"\n",A.createElement(t.h2,null,"Website Components"),"\n",A.createElement(t.p,null,"Nontechnical requirements:"),"\n",A.createElement(t.ul,null,"\n",A.createElement(t.li,null,"Introduce myself, my areas of interest and my projects"),"\n",A.createElement(t.li,null,"Aesthetically appealing"),"\n",A.createElement(t.li,null,"Link to my other social media"),"\n"),"\n",A.createElement(t.p,null,"Technical requirements:"),"\n",A.createElement(t.ul,null,"\n",A.createElement(t.li,null,"Fast loading time"),"\n",A.createElement(t.li,null,"Ideally, good SEO"),"\n"),"\n",A.createElement(t.h2,null,"Attempt 1: Using React"),"\n",A.createElement(t.p,null,"I must preface that this is my first attempt at making a website and my goal was to create a minimal website that works. A quick search had me find that React was the framework that seemed easiest to pick up."),"\n",A.createElement(t.p,null,"After completing a short tutorial on react, I built my first website as shown:"),"\n",A.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/092e98d2097feac46d83e8dbfa67a022/fb8ff/orig_page.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABwWk5S8Bf/8QAGxAAAgEFAAAAAAAAAAAAAAAAAQIhAAMQEjH/2gAIAQEAAQUCBm9pSGMJz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAEFAQAAAAAAAAAAAAAAAAEAERIgITH/2gAIAQEABj8CD8Qhlf/EABwQAAICAgMAAAAAAAAAAAAAAAABITEQQRFhsf/aAAgBAQABPyG6uUj1eXTYzZ3h6Pc//9oADAMBAAIAAwAAABCED//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKf/xAAdEAEAAgICAwAAAAAAAAAAAAABESEAMRBhQbHw/9oACAEBAAE/EJNDKNxN5HVgiOE8N41y3Z6OPVm75oz/2Q==\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="Original page"\n        title=""\n        src="/static/092e98d2097feac46d83e8dbfa67a022/e5166/orig_page.jpg"\n        srcset="/static/092e98d2097feac46d83e8dbfa67a022/f93b5/orig_page.jpg 300w,\n/static/092e98d2097feac46d83e8dbfa67a022/b4294/orig_page.jpg 600w,\n/static/092e98d2097feac46d83e8dbfa67a022/e5166/orig_page.jpg 1200w,\n/static/092e98d2097feac46d83e8dbfa67a022/d9c39/orig_page.jpg 1800w,\n/static/092e98d2097feac46d83e8dbfa67a022/fb8ff/orig_page.jpg 1914w"\n        sizes="(max-width: 1200px) 100vw, 1200px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",A.createElement(t.p,null,"I liked the additional animation at the start of being able to spell out my name - even though it was a good-to-have. FontAwesome was used for the icons that listed my socials."),"\n",A.createElement(t.p,null,"However, I realised that"),"\n",A.createElement(t.ul,null,"\n",A.createElement(t.li,null,"Search-engine optimisation was not ideal."),"\n",A.createElement(t.li,null,"Addition and maintaining of blog pages would need to be done via a CMS/some other static site generator or framework."),"\n",A.createElement(t.li,null,"Programmatically creating pages might be tough to do with just React alone."),"\n"),"\n",A.createElement(t.p,null,"Therefore, I made the decision to redo the website on ",A.createElement(t.a,{href:"https://www.gatsbyjs.com/"},"Gatsby")," which is a static-site generator framework known for having many plugins that can be used to boost the performance of a site. It's also built on top of react.js, and uses purple heavily :D"),"\n",A.createElement(t.h2,null,"Attempt 2: Gatsby"),"\n",A.createElement(t.p,null,"Gatsby uses ",A.createElement(t.a,{href:"https://graphql.org/"},"GraphQL")," in order to interact with a data layer. As I wanted to create new pages programmatically, I created pages using a query that matches the id of each blog post with its characteristics as shown:"),"\n",A.createElement(t.pre,null,A.createElement(t.code,null,'const BlogPost = ({ data, children }) => {\r\n  return (\r\n    <Layout pageTitle={data.mdx.frontmatter.name}>\r\n      <p>{data.mdx.frontmatter.date}</p>\r\n      {children}\r\n    </Layout>\r\n  )\r\n}\r\nexport const query = graphql`\r\n  query ($id: String) {\r\n    mdx(id: {eq: $id}) {\r\n      frontmatter {\r\n        name\r\n        date(formatString: "MMMM D, YYYY")\r\n      }\r\n    }\r\n  }\r\n`\r\nexport const Head = ({data}) => <Seo title={data.mdx.frontmatter.name} />\r\n\r\nexport default BlogPost\n')),"\n",A.createElement(t.p,null,"This works to create a page each time a new .mdx file is created."),"\n",A.createElement(t.p,null,"Through Gatsby, I've also realised that load times are a lot faster than before! :D"),"\n",A.createElement(t.h2,null,"Attempt 3: Extensions?"),"\n",A.createElement(t.p,null,"I'd like to see where I can take this page with me to."),"\n",A.createElement(t.p,null,"Potential improvements include:"),"\n",A.createElement(t.ul,null,"\n",A.createElement(t.li,null,"Adding a PostgreSQL database for upcoming performances"),"\n",A.createElement(t.li,null,"Adding (another) PostgreSQL database for my projects"),"\n",A.createElement(t.li,null,"Improving the CSS - I like it as is, but I'm quite easily satisfied with the aesthetic side of things."),"\n"),"\n",A.createElement(t.p,null,"That's all for now!"))}var l=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?A.createElement(t,e,A.createElement(r,e)):r(e)},i=a(3783),o=a(9357);const s=e=>{let{data:t,children:a}=e;return A.createElement(i.Z,{pageTitle:t.mdx.frontmatter.name},A.createElement("p",null,t.mdx.frontmatter.date),a)},c=e=>{let{data:t}=e;return A.createElement(o.Z,{title:t.mdx.frontmatter.name})};function m(e){return A.createElement(s,e,A.createElement(l,e))}},1151:function(e,t,a){a.d(t,{ah:function(){return r}});var n=a(7294);const A=n.createContext({});function r(e){const t=n.useContext(A);return n.useMemo((()=>"function"==typeof e?e(t):{...t,...e}),[t,e])}}}]);
//# sourceMappingURL=component---src-pages-blog-mdx-frontmatter-slug-js-content-file-path-blog-first-post-mdx-476427e6c120e4504a3b.js.map