{"componentChunkName":"component---src-pages-portofolio-project-js","path":"/portofolio-project/","result":{"data":{"projectPortofolio":{"edges":[{"node":{"id":"8e7b2bdc-3c78-5737-becc-9f7d9ffa4f2c","projectTitle":"My personal portofolio","projectTechnologies":"Gatsby | React | Netlify","projectBrief":"JAMstack project for content delivery and management. JAMstack rises in popularity compared to MEARN and I was curious to learn this trend. This combination allows for blazingly fast websites that eliminate the need for server rendering.","projectMainMediaField":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='228'%20viewBox='0%200%20400%20228'%20preserveAspectRatio='none'%3e%3cpath%20d='M200%2046v30l1%2029h125V46l-63-1-63%201M84%20116v5h33v-11H84v6m35%200v5h38v-11h-38v6m64%20102l-2%207v3h21l-3-4-6-4-2-2c0-1%201-2%203-2l2%201%2010%205v-9h-22l-1%205'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7601760176017602,"src":"//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=800&q=100","srcSet":"//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=200&h=114&q=100 200w,\n//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=400&h=227&q=100 400w,\n//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=800&h=455&q=100 800w,\n//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=1200&h=682&q=100 1200w,\n//images.ctfassets.net/3fmrgq8fqvx7/4Rdy8M5xIG1Xr2LscKtAqb/5511cbfed57e8c612c914fbf2e3e3669/banner.png?w=1600&h=909&q=100 1600w","sizes":"(max-width: 800px) 100vw, 800px"}},"projectDiscoveryPhase":{"projectDiscoveryPhase":"This brief project started as I stumbled my way into a new way of managing static websites and content managing websites. I later combined the static site generator with open source hosting services such as Netlify. Specifically I am utilizing the robust Gatsby.js that takes advantage of GraphQl queries for speedy and UI friendly API calls through the Contentful content management service. In this case, Contentful is acting as our headless CMS with it's main purpose being, to allow me to handle the content I upload in a more controlled and UX-friendly manner.\n"},"projectDiscoveryPhaseMedia":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='324'%20viewBox='0%200%20400%20324'%20preserveAspectRatio='none'%3e%3cpath%20d='M51%2095v94H0v135h179v-83h52v76h11l82-1h71V189h-23V0H51v95'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.23463687150838,"src":"//images.ctfassets.net/3fmrgq8fqvx7/74usOyqI4rdrPqXQkztysh/c5e3dcec75027ed56de10bca622dd286/tosend.png?w=800&q=100","srcSet":"//images.ctfassets.net/3fmrgq8fqvx7/74usOyqI4rdrPqXQkztysh/c5e3dcec75027ed56de10bca622dd286/tosend.png?w=200&h=162&q=100 200w,\n//images.ctfassets.net/3fmrgq8fqvx7/74usOyqI4rdrPqXQkztysh/c5e3dcec75027ed56de10bca622dd286/tosend.png?w=400&h=324&q=100 400w,\n//images.ctfassets.net/3fmrgq8fqvx7/74usOyqI4rdrPqXQkztysh/c5e3dcec75027ed56de10bca622dd286/tosend.png?w=663&h=537&q=100 663w","sizes":"(max-width: 800px) 100vw, 800px"}},"projectArchitecture":{"projectArchitecture":"I wanted to create a seamless bridge between me as a content creator and the Continuous Integration cycle of the project; with minor improvements taking place both in the UI and UX design of the project, being implemented without any lag. Regular Git commits in combination with the intuative user friendly dashboard from Contentful made it a brieze for me to code and create.\n\nAs a result the free web hosting service, Netlify, in combination with it's in-built webhooks (Travis and Circle CI) allowed to immediatelly re-built my Github project, updated, with any new content from the CMS. This in combination with a responsive design web practices, made this project so fun and ended up in a ridiculously fast website."},"projectArchitectureMedia":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M236%2037c-4%205-1%2013%206%2013s10-9%204-13c-3-3-7-3-10%200m-2%2019c-5%201-8%204-8%207%200%202%201%203%2016%203h15v-3c0-7-13-11-23-7M0%2075c0%203%20400%203%20401%200%200-2%200-2-200-2S0%2073%200%2075m61%2028c-12%206-17%2015-17%2030%200%207%200%209%202%2014%206%2010%2018%2018%2029%2018%209%200%2010-1%2011-5%200-4%200-4-3-4-3%201-4%200-17-14l-15-17%203-6c9-14%2028-17%2039-5%203%202%203%203%202%204h-2c-11-7-17-9-24-6-5%202-13%2010-13%2012l13%2015%2014%2013%203-2c4-2%208-7%209-11%201-2%201-2-4-2-6%200-6%200-6-2%200-3%200-3%208-3h8v5l-4%209c-4%205-4%205%201%205s5%200%207-5c4-7%204-19%200-27-7-17-27-24-44-16m91-1c0%202-6%205-8%205-3-1-5%203-2%205v9c-2%201%200%204%202%204%203%200%206%202%209%205l2%203%204-4c2-3%203-4%201-4-3%202-7%202-10%200-4-2-4-2%205-2l8%201%202%201c3%200%204-1%204-3l-1-2v-8c3-2%201-6-2-5-2%200-8-3-8-5l-3-2-3%202m-3%205c-3%202-5%206-5%2010l1%203%201-4c3-4%204-3%202%201-3%205-3%205%207%205%208%200%209%200%209-2%200-1%200-2%201-1v-8l-4-4c-3-2-4-2-2%201l1%203c-1%200-2-1-2-3-3-4-4-4-6%201l-3%204%202-4c2-4%202-5-2-2m189%2014c-13%207-12%2028%201%2033%203%201%203%201%203-2l-2-2-4-2c-2-3-1-4%201-1%201%201%205%201%206-1l-3-2c-3-1-5-5-5-9l2-5c0-2%200-2%2010-2h10l1%205c0%207-1%2010-5%2011-2%201-2%201-2%206s2%205%208%200c16-14-2-39-21-29m-128%202c-5%202-6%205-3%207%202%203%203%202%206%200%204-4%207-4%2012-1%204%202%204%202%206%201%206-6-11-12-21-7M50%20135c0%205%205%2014%2010%2018%203%202%2014%206%2015%205l-13-13c-9-9-12-12-12-10m72%204l-2%202%206%204-1-2c-1-1%2010-1%2031-1%2017%200%2031%200%2030%201v2l3-2%202-2-2-2c-3-2-4-3-4%200%201%201-3%201-30%201-28%200-31%200-30-1%202-2%200-2-3%200m126%200l-3%202%203%202%204%202-1-2c-1-1%2010-1%2030-1%2027%200%2031%200%2030%202%200%202%201%201%204-1l2-2-2-2c-3-2-6-3-4%200%201%201-2%201-30%201s-31%200-30-1c2-3%200-2-3%200m-41%206c-3%202-2%203%201%205%205%206%2015%206%2021%201%206-4%201-9-4-6-3%203-9%202-12%200s-4-2-6%200m14%2055c0%2033%200%2038-1%2036-3-2-3-1-1%202l1%203h-47c-40%200-47%200-46-1%204-4%201-4-4-1-4%203-4%204%201%207%204%203%207%202%203%200-2-2%202-2%2046-2l49-1c2-1%205-7%204-7l-2%201c-1%201-1-10-1-37l-1-39-1%2039m127%200c0%2034%200%2038-2%2037-2-3-3-2-1%201l2%203a2038%202038%200%2001-94-2c4-3%200-3-4%201l-4%202c0%202%209%207%209%206l-1-2c-2-2%202-2%2046-2a389%20389%200%200049-2c1%201%205-4%205-6h-2c-1%202-1-2-1-36l-1-39-1%2039m-269%205v22l-4%201-4%202c-2%202-1%202%203%200l7-1h3l-2-1-1-23-1-23-1%2023m-4%2026l-1%204c-1%203-3%205-4%204l1-2v-1c-1-1-2%201-2%203l-1%201c-2%201-2%200-2-1%200-2%200-2-1-1v8l1%201%202%203v2c-2%201%203%205%206%205%204%200%205%202%205%207v4H39c-38%200-39%200-39%202s1%202%2040%202h39v7c0%208%200%208-3%205l-2-1c-1%201%204%209%206%209l6-8c0-2-2-1-4%201-1%201-1%200-1-6v-7h160c159%200%20160-1%20160-2%200-2%200-2-160-2H81v-11l4-1%204-2v-2l2-3%201-4v-2c3-2%200-3-9-3-12%200-15-1-5-1%207%200%208-1%206-5-1-2-1-2-1%201-1%203-1%203-2%201v-3l1-2h-7m184%2093c-6%206%202%2017%2010%2011h4c4%203%2017%202%2020-1%203-2%203-6%200-9-2-3-3-3-10-3-6%200-9%201-10%202h-4c-2-3-8-2-10%200m1%2017c-7%201-11%204-11%209%200%202%201%202%2014%202h29c10%200%2011%200%2011-2%200-3-4-7-8-8-3-1-29-2-35-1'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1,"src":"//images.ctfassets.net/3fmrgq8fqvx7/1VHrPXqfZmzuzrw2IpXvex/97da02d294b6d943ac286c159918961f/portofolio_architecture.png?w=800&q=100","srcSet":"//images.ctfassets.net/3fmrgq8fqvx7/1VHrPXqfZmzuzrw2IpXvex/97da02d294b6d943ac286c159918961f/portofolio_architecture.png?w=200&h=200&q=100 200w,\n//images.ctfassets.net/3fmrgq8fqvx7/1VHrPXqfZmzuzrw2IpXvex/97da02d294b6d943ac286c159918961f/portofolio_architecture.png?w=400&h=400&q=100 400w,\n//images.ctfassets.net/3fmrgq8fqvx7/1VHrPXqfZmzuzrw2IpXvex/97da02d294b6d943ac286c159918961f/portofolio_architecture.png?w=500&h=500&q=100 500w","sizes":"(max-width: 800px) 100vw, 800px"}},"projectLearningOutcome":{"projectLearningOutcome":"Having worked with Gatsby in past, I needed to expand my horizon on new ideas for this project. As a result I managed to get out of my comfort zone and deal with new challanges as they appeared on the spot. This project also made me realise the importance of regular commints and code branching since due to its automation it was easy for me to lose track of progress."},"nextProjectLink":"hobby-project"}}]}},"pageContext":{}}}