{"componentChunkName":"component---src-templates-portfolio-page-js","path":"/portfolio/website/","result":{"data":{"markdownRemark":{"id":"68780ab2-da99-5f2d-884d-0acb3fbeec1b","fields":{"slug":"/portfolio/website/"},"frontmatter":{"content":[{"description":"***Hey there, I'm in the process of updating my website and most of the information you will find on this page is currently outdated. Check back soon for updates!***\n\nBeing a developer and designer certainly has its challenges. On one hand, I'm always wanting to make sure that I'm satisfied with the design of my site. I'm constantly finding inspiration through other websites and products, which always has me thinking \"Oh, I like this! I could update the design of my site.\" On the other hand, I'm always learning about new front-end technologies that are faster, more efficient, and fun to work with. Balancing both modern design and current technologies is hard, but I've brought the two together for my latest iteration of this site.","title":"Overview"},{"description":"The previous version of my site was built with React, but let's be real... I only knew the bare minimum when I created it. Having worked with React for awhile now, I've learned a lot about best practices. This inspired me to scrap my previous codebase and start fresh.\n\nBefore starting an entire rewrite, I decided that I wanted to take the approach of design-first. I set to work creating my own design / pattern library, which has reusable components and classes. I knew that creating patterns first would allow me to unify personal brand across any project I built (including my [back-end admin](https://tannerfisc.us/portfolio/admin)).\n\nAfter having my patterns in place, the prototypes began. Having known the pages that I would need up front let me easily create a shell for my new website. Running on a node server, the small React application had routes that mirrored my live site. Using these routes, I started breaking my patterns into various React components. When combined, the components started to morph into an actual page.\n\nHaving basic prototypes made it easy to tweak parts of the design that just weren't working for me. I'm pretty sure I adjusted the cover image component at least five times. On airplanes, on weekends, on weeknights, and just about any spare time I had, I began pulling the entire site together.\n\nWhile I was developing the application, I was also making changes to my admin. I needed to provide additional data to fulfill the design of my portfolio pages (like this one). For example, I added the \"Technologies / Skills\" section and an ability to create a project timeline. Slowly, but surely, it all came together. In late 2016, I was able to launch the site and am constantly looking for ways to ensure it remains up-to-date.","title":"History"},{"description":"You can check out the code [on Github](https://github.com/tannerfiscus/tannerfisc.us).","title":"What's Under The Hood?"},{"description":"I'd love to get your thoughts on my site. Have any? [Let's get in touch](https://tannerfisc.us/contact).","title":"Thoughts?"}],"date":"May 2020","featuredHeaderImage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAc9KESLR/8QAGxAAAgIDAQAAAAAAAAAAAAAAAAECEwMREjH/2gAIAQEAAQUCUDJTAdkz00jpn//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB0QAQACAgIDAAAAAAAAAAAAAAEAAhExEBIhQZH/2gAIAQEABj8Cq2cCw6WW3rzMtX5xqbZ//8QAGxAAAwEAAwEAAAAAAAAAAAAAAAERITFRkfH/2gAIAQEAAT8hU4ERuyGE87CNCssjo9RDhPD6x//aAAwDAQACAAMAAAAQ++//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAdEAEAAgICAwAAAAAAAAAAAAABABEhMUFhcYHx/9oACAEBAAE/EGrPisHa4I3BbBpvTR5gpKgCUKmnpHJLlhTkE+4n/9k=","aspectRatio":1.9230769230769231,"src":"/static/5073b7ddeba1f31adb2d0bde46795a8c/a66ad/20170129-39-tannerfiscus-cover.jpg","srcSet":"/static/5073b7ddeba1f31adb2d0bde46795a8c/f0719/20170129-39-tannerfiscus-cover.jpg 500w,\n/static/5073b7ddeba1f31adb2d0bde46795a8c/724c8/20170129-39-tannerfiscus-cover.jpg 1000w,\n/static/5073b7ddeba1f31adb2d0bde46795a8c/a66ad/20170129-39-tannerfiscus-cover.jpg 2000w,\n/static/5073b7ddeba1f31adb2d0bde46795a8c/b050d/20170129-39-tannerfiscus-cover.jpg 2751w","sizes":"(max-width: 2000px) 100vw, 2000px"}}},"technologies":["ReactJS","SASS","HTML","Javascript","CSS"],"title":"tannerfisc.us","timeline":[{"time":"Default","description":"Default"}]}}},"pageContext":{"id":"68780ab2-da99-5f2d-884d-0acb3fbeec1b"}}}