{"id":208,"date":"2023-12-04T20:03:09","date_gmt":"2023-12-05T01:03:09","guid":{"rendered":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/?page_id=208"},"modified":"2023-12-04T21:21:16","modified_gmt":"2023-12-05T02:21:16","slug":"project-spot","status":"publish","type":"page","link":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/about\/project-spot\/","title":{"rendered":"Project Spotlight"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull wp-duotone-082049-rgba2567142027-1\" style=\"margin-top:0;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px;min-height:66vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2333\" height=\"1167\" class=\"wp-block-cover__image-background wp-image-212\" alt=\"Outside view of the Biltmore House in Ashboro, North Carolina\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto.jpg\" style=\"object-position:70% 0%\" data-object-fit=\"cover\" data-object-position=\"70% 0%\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto.jpg 2333w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-300x150.jpg 300w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-1024x512.jpg 1024w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-768x384.jpg 768w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-1536x768.jpg 1536w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-2048x1024.jpg 2048w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-500x250.jpg 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-800x400.jpg 800w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-1280x640.jpg 1280w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-1920x960.jpg 1920w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-1000x500.jpg 1000w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-230x115.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-350x175.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/biltmorehousephoto-480x240.jpg 480w\" sizes=\"auto, (max-width: 2333px) 100vw, 2333px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-left\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-7206f975 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-left has-white-color has-text-color\" style=\"font-size:100px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase\">Project Spotlight:<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\" style=\"font-style:normal;font-weight:500;text-transform:uppercase\">Biltmore Companion App<\/h2>\n<\/div><\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-left is-nowrap is-layout-flex wp-container-core-buttons-is-layout-6447b855 wp-block-buttons-is-layout-flex\"><\/div>\n<\/div><\/div>\n\n\n\n<p>One of our final projects in WEB125 was to design a companion app for visitors to the BIltmore House in Asheville, North Carolina, using MDBootstrap. This was a great opportunity to test out customizing MDB to fit branding styles and demonstrate a mobile-first approach to web development.<\/p>\n\n\n\n<p>The Biltmore Estate is billed as America&#8217;s largest house. Construction began in 1889 and the house was officially opened in 1895 under the guidance of George Vanderbilt. The estate is particularly special to North Carolina and has an extensive history, so this was a fun project to work on and learn about the history of Biltmore.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:24% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"1024\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-HomeMobile-web-268x1024.jpg\" alt=\"The homepage of the Biltmore Companion app as seen on a mobile device\" class=\"wp-image-213 size-full\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-HomeMobile-web-268x1024.jpg 268w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-HomeMobile-web-230x879.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-HomeMobile-web-350x1337.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-HomeMobile-web.jpg 400w\" sizes=\"auto, (max-width: 268px) 100vw, 268px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<h2 class=\"wp-block-heading\">A mobile app<\/h2>\n\n\n\n<p>The purpose of the project was to create a companion app that visitors to Biltmore could use to provide information about the various areas of the estate as they walked among the gardens, toured the inside of the 250-room house, or ate at one of the various restaurants on the property. <\/p>\n\n\n\n<p>Therefore, every page was designed to be fully optimized for a mobile experience. As seen here, this was the homepage for the app with a hamburger menu, a scenic photo of the property, a Featured Event, and a short video to introduce visitors to the property.<\/p>\n\n\n\n<p>Subsequent pages highlighted main areas: the house, the gardens, the winery, dining and Antler Hill Village. Each page highlighted things visitors could do and see while visiting Biltmore.<\/p>\n\n\n\n<p>The app also had to work on larger screens for guests carrying around a tablet or people viewing the app from a home computer before heading to the estate. This is why MDB was an ideal platform to create the Biltmore Companion.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Subpages<\/h2>\n\n\n\n<p>Each page of the app had a similar layout, but showcased things unique to the category. <\/p>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background\" style=\"grid-template-columns:auto 30%\"><div class=\"wp-block-media-text__content\">\n<p>For example, the section dedicated to the House itself had an area for a history of the construction and a place for a Self-Guided tour that would be available for visitors who prefer not to walk around in a large group of people. Like the app homepage, the House page also had a short video about the house.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"1024\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-490x1024.jpg\" alt=\"The house page of the Biltmore Companion app\" class=\"wp-image-214 size-full\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-490x1024.jpg 490w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-144x300.jpg 144w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-500x1045.jpg 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-230x481.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-350x732.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web-480x1003.jpg 480w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-House-web.jpg 600w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-very-light-gray-to-cyan-bluish-gray-gradient-background has-background\" style=\"grid-template-columns:30% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"1024\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-490x1024.jpg\" alt=\"The gardens page of the Biltmore Companion app\" class=\"wp-image-215 size-full\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-490x1024.jpg 490w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-144x300.jpg 144w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-500x1045.jpg 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-230x481.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-350x732.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web-480x1003.jpg 480w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Gardens-web.jpg 600w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Similarly, the Gardens had sections reserved for content describing the history of the property and an area for a self-guided tour of the property, and a video describing the gardens and some of the plant-life on the grounds.<\/p>\n<\/div><\/div>\n\n\n\n<p>Below are the other pages as viewed on a large tablet or laptop.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"1024\" data-id=\"216\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-490x1024.png\" alt=\"The dining page of the Biltmore Companion app\" class=\"wp-image-216\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-490x1024.png 490w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-144x300.png 144w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-500x1045.png 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-230x481.png 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-350x732.png 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web-480x1003.png 480w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Dining-web.png 600w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"1024\" data-id=\"218\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-490x1024.jpg\" alt=\"The Antler Hill Village page of the Biltmore Companion app\" class=\"wp-image-218\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-490x1024.jpg 490w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-144x300.jpg 144w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-500x1045.jpg 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-230x481.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-350x732.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web-480x1003.jpg 480w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Village-web.jpg 600w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"1024\" data-id=\"217\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-490x1024.jpg\" alt=\"The winery page of the Biltmore Companion app\" class=\"wp-image-217\" srcset=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-490x1024.jpg 490w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-144x300.jpg 144w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-500x1045.jpg 500w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-230x481.jpg 230w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-350x732.jpg 350w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web-480x1003.jpg 480w, https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/Biltmore-Winery-web.jpg 600w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"750\" src=\"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-content\/uploads\/2023\/12\/webScrollingBiltGardens2.gif\" alt=\"A scrolling view of the Biltmore Companion app Gardens page\" class=\"wp-image-219\"\/><\/figure>\n\n\n\n<p class=\"has-small-font-size\"><strong>A scrolling view of the Biltmore Companion app as viewed on a desktop<\/strong><\/p>\n\n\n\n<p>Overall, this was one of my favorite projects during my time at Wake Tech. There&#8217;s really something to be said about the importance of good content. The photos and videos available of Biltmore were pulled from the Biltmore website itself and are just top-notch quality. Add to that the already incredible branding, and it&#8217;s really hard to go wrong. As a working graphic designer, I&#8217;m always striving to involve myself in the art direction of my various projects because I&#8217;m a pretty firm believer in the principle of garbage in\/garbage out. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of our final projects in WEB125 was to design a companion app for visitors to the BIltmore House in Asheville, North Carolina, using MDBootstrap. This was a great opportunity to test out customizing MDB to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":89,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-208","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":3,"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/208\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/208\/revisions\/221"}],"up":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/pages\/89"}],"wp:attachment":[{"href":"https:\/\/wcet.waketech.edu\/jmscott\/WEB250\/wordpress\/wp-json\/wp\/v2\/media?parent=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}