{"size": 14572, "ext": "js", "max_stars_repo_path": "component---src-posts-2017-07-06-new-home-mdx-b6faa8b67db49328c9fa.js", "max_stars_repo_name": "daizeng1984/daizeng1984.github.io", "max_stars_repo_stars_event_min_datetime": "2021-06-11T15:58:03.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-11T15:58:03.000Z", "max_issues_repo_path": "component---src-posts-2017-07-06-new-home-mdx-b6faa8b67db49328c9fa.js", "max_issues_repo_name": "daizeng1984/daizeng1984.github.io", "max_issues_repo_issues_event_min_datetime": "2020-04-25T07:19:57.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-25T07:19:58.000Z", "max_forks_repo_path": "component---src-posts-2017-07-06-new-home-mdx-b6faa8b67db49328c9fa.js", "max_forks_repo_name": "daizeng1984/daizeng1984.github.io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 7286.0, "max_line_length": 14477, "alphanum_fraction": 0.7984490804}
(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"8hLB":function(e,a,t){"use strict";var i=t("q1tI"),n=t.n(i),s=(t("Wbzz"),t("Bl7J"));a.a=function(e){return n.a.createElement(s.a,Object.assign({},e,{icon:"post"}))}},GmMJ:function(e,a,t){"use strict";t.r(a),t.d(a,"_frontmatter",(function(){return o})),t.d(a,"default",(function(){return b}));var i=t("zLVn"),n=(t("q1tI"),t("7ljp")),s=t("8hLB"),o={},c={_frontmatter:o},r=s.a;function b(e){var a=e.components,t=Object(i.a)(e,["components"]);return Object(n.b)(r,Object.assign({},c,t,{components:a,mdxType:"MDXLayout"}),Object(n.b)("p",null,"It's been a long time..."),Object(n.b)("h2",null,"Thanks, Jekyll"),Object(n.b)("p",null,"Well, Github recommends this and it does look good. With ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://jekyllrb.com/"}),"Jekyll")," and github.io, I finally get something that might be prettier, faster and easier to write blog. This was on my todo list long time ago when I migrated almost all my personal logs to ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://daringfireball.net/projects/markdown/syntax"}),"Markdown"),". Besides blog, I need a customizable personal webpage, that I could also upgrade all my old pages generated by ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://www.tug.org/begin.html"}),"TeX"),", my personal project log (mostly in ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://github.com/vimwiki/vimwiki"}),"Vimwiki"),", Vim's ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"http://orgmode.org/"}),"orgmode"),") in markdown, resume and many other things like social media etc., so that I could just write once and distribute as I need. After some research, Jekyll seems to offer most I need. "),Object(n.b)("h2",null,"... and Many Others"),Object(n.b)("p",null,"FrontEnd world is like a bazzar, a lot of fancy goodies that doesn't require any js programming to put them together. ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://getmdl.io/"}),"MDL")," seems very cool to give a shot; ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"http://getbootstrap.com/"}),"Bootstrap")," is very basic and ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"http://fancybox.net/"}),"Fancybox")," also helps for images; and many more are honored in footer page. Maybe eventually I'll rewrite front end into single page app, but for now, I'm fine with this blog work flow. At last besides these front end goodies, I think it's cooler to add ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API"}),"WebGL")," js code to show my taste of website 😀."),Object(n.b)("figure",{className:"gatsby-resp-image-figure",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",width:"40%",textAlign:"center",minWidth:"7rem",backgroundColor:"rgb(255, 255, 255)",border:"1px solid rgb(222, 226, 230)",maxWidth:"600px"}},"\n    ",Object(n.b)("span",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"600px"}}),"\n      ",Object(n.b)("a",Object.assign({parentName:"span"},{className:"gatsby-resp-image-link",href:"/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/f868f/paint-house.png",style:{display:"block"},target:"_blank",rel:"noopener"}),"\n    ",Object(n.b)("span",Object.assign({parentName:"a"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"96%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAABYlAAAWJQFJUiTwAAAFFklEQVQ4yy2UaU9UZxiG51e0xsZojI0bIAjMDDPM4qzMxsAIqBUUEVE0WlxwrdRY0xoXXIuCqIgKCgKyCCqIiIpswzoMyKoogtbi1qYfr74uH56cnJyc61z3/bw5ErndgZ9Gy0KVEqVBi85iwOIwER4ZRlS0lZjoMBLinCQnLSN+RSSrVrpYKa6xsREsWebAFWXB7DASrNfhozMgUTjCma/RMz9US4DOiNRoQW62IjOFESzugzRqtCYdUo1KfFRBkFpBsEpOkFJKgGwhcwIDmCVTMFetZ6F4T2JeHImfzoSfVk+gwYLMbEdpDRfjIMRsQ2oII0BrwDdUwzyFitlyJbOC5Uz3D+S7OT5M8fFntlJDgMmKwulCErE4XEAs+Auozm7D5HRiEKNzOFFZbMiNX00XqBYJoJrZIaHMkiqYEShjqm8A0wKkQsiMKiIaw9JYJHa7AZXV+sUu3GUTPUWTtPonEuNjiFvuwuWyYLMbMYYtQqNXE6pTi/hK/JRKflgQJOKGoo6MwRmfSFRSMhKbTY9SmAQa7ZhdLtLT95N36TTXc09SXpDBzbwTnD3+K2m7N7Fj8zq2bkxgw9pY5HoDUxeIHoXI0rXrSU7dyfodO5E4HAbRl11EFg9WJdDaVM7oSAPPBx4wOd7Ix9fNjPdU015XROPdImrLcqkqzMS6ZBnf+0nRRS1l74HfOXz8BAcOHUESHm4Uhg58NSbikjczONDPxJtxRl/0Mj7h5c2rTiaG3LQ1P+RpWwudjQ9prKvAGRfPFH8F9hWJnMrMIvdqHpkXLgig04xCbNVHYyZ2faoAjjD+6hUjI328GPUyOtTG+Eg3HS1N9HV00dnqpunxfRxxCUxdqCJy9QYyzl8kr6CQ7NzL34A2cXS0YSxfv50u7yAvX44JsIfR5z0M9LXS722l+UkDno5u3C2tPK6/hz02gWnBWqLXpZBx4RJXrhdy7jPQLiKHCKCv1szSdam0dw/z/NmYAHkZGfIw8LSdvp426h88ELHbaGxopLa2+gtwZoieqOSt/HnhCjn5BZzJyRVbFsdGbnPhI4BL1m6jpaOfvt4hvN1dwqyDXo+bnm431TXVIuoT6uvqqKm5jWFJPNNDjERvSOXE+atk5xVwSphKLFbdN2AYMUkptHZ1MjA4TE9XO4O9bob72+nuaOL27VvU37tHXW0Nd+9Wsih6JTOVItXGXRw9l0fG5QKOZV9EYjJrkVojvxqu2cSj5nYGhkboF5Gf9XeKaaejtYEb1/MpLy6i5m4VlQKuXhzHLJU4aim/cCgrn5OXCjmcJYAGo4ZgS8SXDmOSNlLxpBnP0DDewacMiU2PjQ7S1emmvKyMW2Wl3Kksp6KyApUrlh/Vn4F7OZh1jaM5N/jjbA4So0mLLMyBj9pA/MZUWjzDjL2e5NXEGz58+sTHD+95/mKUR48bqK2p4Y6wKykrQWqLYobCQMymPRzMvMrB84X8liE6NJo1BJks+Kp1rPl5u+hwSMAmefP6Lz68mxTzNx6vh1JhV1Z6k6qqCkpLi3FGR+Enk4ktb2PXiVz2n80n7ZSIbDSqUeo0yBVBrFidyP36JibGxnn39i2f3r/nv3/+FZsWwOJi0WMBZTdLKSkqITvrHHt27SRl8xYOnM4hLeMaO9KzkegXyQgMmEtw4Dws4o+ybcsm8nJzeVBdg/tJE97Obvo9vXS7O0R/VVy9fIWszEyOpx/jyKHD7Evby/59aaSfOc/uY+f4H0YLs+kzbTFzAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",Object.assign({parentName:"a"},{className:"gatsby-resp-image-image",alt:"Paint House",title:"Paint House",src:"/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/0a47e/paint-house.png",srcSet:["/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/8a4e8/paint-house.png 150w","/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/5a46d/paint-house.png 300w","/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/0a47e/paint-house.png 600w","/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/1cfc2/paint-house.png 900w","/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/c1b63/paint-house.png 1200w","/static/e3960c0cc0a3e5d9abd0aef7b4ccee10/f868f/paint-house.png 1382w"],sizes:"(max-width: 600px) 100vw, 600px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n  "),"\n    "),"\n    ",Object(n.b)("figcaption",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-figcaption"}),"Paint House"),"\n  "),Object(n.b)("h2",null,"Design"),Object(n.b)("p",null,"For layout, I need to keep in mind: mobile-first-or-at-least-very-important and power friendly (WebGL ~10FPS).\nTherefore, I chose the safer way to start with Jekyll's minimia theme (basically scratch) and built this fancier webpage by adding all other components one after another. It's also a learning process of fun. "),Object(n.b)("p",null,"The color was inspired by my day dream in summer time, laying under the cloudy and not-hot-at-all sun, and looking at the ocean under the sky, with a refreshing cool drink in hand. Anyway, it's hot summer outside now, and I apparently like this color and also painted one of my room like this..."),Object(n.b)("img",{src:"/a87b60ce2fefefd50660cb19b82413fe/ocean-top-bar.gif",alt:"*Ocean Top Bar*, **IT'S WEBGL, NOT GIF!** "}),Object(n.b)("p",null,"After all these efforts, I hope most people will agree that the new webpage and the painted room looks much better than before 😅! "),Object(n.b)("figure",{className:"gatsby-resp-image-figure",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",width:"40%",textAlign:"center",minWidth:"7rem",backgroundColor:"rgb(255, 255, 255)",border:"1px solid rgb(222, 226, 230)",maxWidth:"600px"}},"\n    ",Object(n.b)("span",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"600px"}}),"\n      ",Object(n.b)("a",Object.assign({parentName:"span"},{className:"gatsby-resp-image-link",href:"/static/61664361fafd3580f871680688fa347b/eb1d2/old-web-page.png",style:{display:"block"},target:"_blank",rel:"noopener"}),"\n    ",Object(n.b)("span",Object.assign({parentName:"a"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"74.66666666666667%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAADH0lEQVQ4y32TXWwUVRiGD0YRgopgBURCi71pC0GgVGrKbtvdYiIxQgrENiYCiVUaKiZGNxpqitELuNAbUxMDyrU3Rq/9uTGhGA0khJ+27m67uMvuzs7PdqfM/s3s45mZ0q1CPMmT7zvvmfN+Oec7I77/4UcCezvZ1xck1Bvw6HXpCRAOBejpCSzqITnvC/u5q7sEgwG6e7pp393OhW++RYx/9TXPrhXsaRO0Ngm2PCN4bqOgaYNge7PUGgUtLpsFjesFW7f4Wker4AW5R4g6p0fHEBcvnmflw4KnnhCseUyw9nE/d2lYLVi3ZmG+2l9reFKwXmobG3xc/Wk5X75McO7sJ4jk1Hcol3ah/hkm9nMHykQXiV+fJ/bTdu5c6iRzea/Ud5D8rZPEL9vITXRg/L4NbaLNw7jc5s3zE41kJscRmq7y5RefERk5xkeRU1w4P07FzGClb1DK3KCSukope4tiLopdmfeAkqQiqUqcBark8zpCyWn0du1hw6OCVcsf4dChfgpzBXRNo6Akse5MYebS5HVDbpC6nqdcsXGHbdeoWhbVogU10I0511Cl/9hBjp85zIlXQgTbd2M7Dv8/ar5huYIli5aNlJRsjLxrqGocPn6E10cH6H6xnXBXkKrtLNnmx1qtdh//HbqRR+Sk4dkz7/POyFGG3xyUrf+QSkHBun0NK3mdqszt0t0HGt4zveftGaqazmhkhMH+MAOSD94dZl7PosSvk45eIzcjG2Oq3q5/GXlRtsIycSqlumEmpzP28WlOHj3A0BuvEhl+C7vqX7qz5NgPGo5cLBoZ7KJZN1RUnc/PfcqpoQHeHnqNsch71KplD7eyx0LuHt0uW5K7OOVi/chL79Dt8sDgEZqbm9i8aRPhvpcoyarz8T+Yn72KOXtFxitYqVuUddlRPUVZS1KSsebY9xtmFZX9L4cW/8eW1hbmDI3UbJR0IkZSxtTMFOlkArd4VlHIZLIUTBP5DCn8fdMrVDeUH4X39bHsIcHKVSvYuXMHOalNT//FzGyCWDwumSEajRGPxaQ+zeTkJKbp35ulp+VLUBcN/wFeu4+m77P/tQAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",Object.assign({parentName:"a"},{className:"gatsby-resp-image-image",alt:"Old Webpage",title:"Old Webpage",src:"/static/61664361fafd3580f871680688fa347b/0a47e/old-web-page.png",srcSet:["/static/61664361fafd3580f871680688fa347b/8a4e8/old-web-page.png 150w","/static/61664361fafd3580f871680688fa347b/5a46d/old-web-page.png 300w","/static/61664361fafd3580f871680688fa347b/0a47e/old-web-page.png 600w","/static/61664361fafd3580f871680688fa347b/1cfc2/old-web-page.png 900w","/static/61664361fafd3580f871680688fa347b/c1b63/old-web-page.png 1200w","/static/61664361fafd3580f871680688fa347b/eb1d2/old-web-page.png 1622w"],sizes:"(max-width: 600px) 100vw, 600px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n  "),"\n    "),"\n    ",Object(n.b)("figcaption",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-figcaption"}),"Old Webpage"),"\n  "),Object(n.b)("p",null,"I have to say old one has a nice color design (",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://uiowa.edu/"}),"UIowa"),"'s Black and Gold) though... You might still see some of the old pages, not upgraded, around. As comparison, here is the new page screenshot :"),Object(n.b)("figure",{className:"gatsby-resp-image-figure",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",width:"40%",textAlign:"center",minWidth:"7rem",backgroundColor:"rgb(255, 255, 255)",border:"1px solid rgb(222, 226, 230)",maxWidth:"600px"}},"\n    ",Object(n.b)("span",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"600px"}}),"\n      ",Object(n.b)("a",Object.assign({parentName:"span"},{className:"gatsby-resp-image-link",href:"/static/d183a078f6d1c4aed6c4d383faafeb40/966ce/new-web-page.png",style:{display:"block"},target:"_blank",rel:"noopener"}),"\n    ",Object(n.b)("span",Object.assign({parentName:"a"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"68%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACz0lEQVQ4y3VSy05TURStAyfGif6EI40xQUfOjTrSX5CiMxxowBgjicaJc0YYTCwNVBosgQIBgwV5t4W20N4+7m3v7ev2eUtL32W5z2lLkehOV7vPbs46e6+1dfNbB7DuuDGxsIqxmXmMTpox9mMBpvV9GFa2MG61wbzphnnLA+MvO69bdo84zGsOLNp9+H0kwS3FsXnghe6kXAYL89Q4Bp89xqsXT/Bx5CU2vSJWnYdY9whwSDE4w3EOuxjFfiSBIzWPUFpDtV5HtVZHuVpD6aQMXaNe44SWqTEM6R/gzfNHGBnWw6dq8CayEOhiMHN8DkWEskUECXK+CJye0ucUrWYTtVoNujq9wELwuWCdm8SS1YTllXn442mE1BzCGQ1SOk/QIKZyvCYSgmoWCv3HyJqtFhqNBqrVKnSMlcXsrAUDA/3Q6/sx/PYdJLoQiCXhjyY6v0ko2QJiWglR6kymPKkV292dJ2RfLD59eI9rVy7h+tXLuHn7FrZ9Imwk8ppbgM3l5fm2IMEeUuCSkwjQyJHcMSfrElYqlR7h8NBr3L93A08f3kVf3x14lCScEjMhAUcoQkRxMiOFw6gKH2nLNcxRhx3CJmmYSqV6Gs4tLcPh2UAguIvR8a/wRFPcFGZCIF1oG8LM6JgjpDSEaezzhJlMBjqWsCjXm5CIQCbBC7UWImqGRM9DSecgE9iZ1yhXyCRWU/OFvzTkLjca7Q6TohPyngmuFQOcNgv2AhLWSbs9v4SDcAxu2j1XJI4gdRvWynx1lHxv5DNTuoSJ/UUIG9NYnjHC9HkQu/4wftpd2CEjHCEZ9qAMJy21PRjhORuZadj6H6HgdmLC+A1fDAYYv09ThxHqLtwhINCZPbIjiPyBAOn4b8KOhmqxQqtQgpQ/gVSokCnkZpKWOFfi452BzqzWJjz+x8hdwkIJftKHXfLTOB5FpU6UnsMX0O3wIuEf/3fnKiTNTzYAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",Object.assign({parentName:"a"},{className:"gatsby-resp-image-image",alt:"New Webpage",title:"New Webpage",src:"/static/d183a078f6d1c4aed6c4d383faafeb40/0a47e/new-web-page.png",srcSet:["/static/d183a078f6d1c4aed6c4d383faafeb40/8a4e8/new-web-page.png 150w","/static/d183a078f6d1c4aed6c4d383faafeb40/5a46d/new-web-page.png 300w","/static/d183a078f6d1c4aed6c4d383faafeb40/0a47e/new-web-page.png 600w","/static/d183a078f6d1c4aed6c4d383faafeb40/1cfc2/new-web-page.png 900w","/static/d183a078f6d1c4aed6c4d383faafeb40/c1b63/new-web-page.png 1200w","/static/d183a078f6d1c4aed6c4d383faafeb40/966ce/new-web-page.png 2050w"],sizes:"(max-width: 600px) 100vw, 600px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n  "),"\n    "),"\n    ",Object(n.b)("figcaption",Object.assign({parentName:"figure"},{className:"gatsby-resp-image-figcaption"}),"New Webpage"),"\n  "),Object(n.b)("p",null,"What I feel most unique is the top bar with procedural ocean waves (even though we could have long argue for gif animation vs webgl). It's the lake/ocean ",Object(n.b)("a",Object.assign({parentName:"p"},{href:"https://www.shadertoy.com/view/XdXcDf"}),"ShaderToy")," with some modification to coporate nicely with others. I also tried to reduce the framerate, and adjust the shader paramters so it fits my top bar. If there's no WebGL available, it could fall back to the plain old background. At last of course, to make sure it runs on all types of modern devices!"))}b.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-posts-2017-07-06-new-home-mdx-b6faa8b67db49328c9fa.js.map