{"id":1174,"date":"2015-07-01T13:54:03","date_gmt":"2015-07-01T20:54:03","guid":{"rendered":"http:\/\/benlevywebdesign.com\/blog\/?p=1174"},"modified":"2025-06-20T17:28:11","modified_gmt":"2025-06-21T00:28:11","slug":"the-fog-of-san-francisco-website","status":"publish","type":"post","link":"https:\/\/benmlevy.com\/blog\/the-fog-of-san-francisco-website\/","title":{"rendered":"&#8220;The Fog of San Francisco&#8221; Website"},"content":{"rendered":"<p>This blog post comes a little later than it probably should but, I didn&#8217;t think about doing one back in december.<\/p>\n<p><a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1181 size-full aligncenter\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806.png\" alt=\"\" width=\"1024\" height=\"775\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806.png 1024w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806-300x227.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806-768x581.png 768w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/tfosf-e1435784744806-290x220.png 290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p><a class=\"lnkto\" href=\"http:\/\/benmlevy.com\/thefogsf\/\">The Fog of San Francisco<\/a> is a parallax website* that features four iconic neighborhoods in San Francisco. As you scroll through these four iconic neighborhoods of San Francisco you&#8217;ll be covered by fog. Along your fog filled journey you have the chance to visit each neighborhood. You&#8217;ll\u00a0find a few\u00a0interesting facts, how to get there,\u00a0what you should do once you get there, and more.<\/p>\n<p>These are the neighborhoods you scroll through along your journey (starting at Alamo Square and ending at Palace of Fine Arts):<\/p>\n<p><a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/alamo_square.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1184\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/alamo_square-449x304.png\" alt=\"alamo_square\" width=\"410\" height=\"260\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/alamo_square-300x190.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/alamo_square-768x488.png 768w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/alamo_square.png 1024w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a>\u00a0\u00a0<a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/embarcadero.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1186 alignnone\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/embarcadero-449x304.png\" alt=\"\" width=\"410\" height=\"260\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/embarcadero-300x190.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/embarcadero-768x488.png 768w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/embarcadero.png 1024w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/coit_tower.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1185 alignnone\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/coit_tower-449x304.png\" alt=\"\" width=\"410\" height=\"260\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/coit_tower-300x190.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/coit_tower-768x488.png 768w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/coit_tower.png 1024w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a>\u00a0\u00a0<a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/palace_of_fine_arts.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1187 alignnone\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/palace_of_fine_arts-449x304.png\" alt=\"\" width=\"410\" height=\"260\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/palace_of_fine_arts-300x190.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/palace_of_fine_arts-768x488.png 768w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/palace_of_fine_arts.png 1024w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<p>Behind all great projects, of course is an awesome team. For this project, I worked\u00a0with\u00a0<strong><a class=\"lnkto\" href=\"https:\/\/sundai.me\/\">Sundai Sun<\/a><\/strong>, <strong><a class=\"lnkto\" href=\"https:\/\/www.adamwoje.com\/\">Adam Wojewidka<\/a><\/strong>, and <strong><a class=\"lnkto\" href=\"https:\/\/www.ulricajs.com\/\">Ulrica Soenargo<\/a><\/strong>.<\/p>\n<p>Sundai was crowned\u00a0leader when it came to managing our github account and figuring out how our website would scroll. Adam was in charge of doing the modal window with a map and tying the up the lose ends. I chose the typeface used throughout the project as well as created an SF icons typeface. Though you can only see four neighborhood icons, I created 45 others(a total of 49). I made other small icons that are implemented in the navigation menu as an open\/close toggle and directional arrows that guide you back from each neighborhood or tell you how to close the modal window with the map. Ulrica was in charge of doing all the beautifully detailed yet minimal style illustrations.<\/p>\n<p>This is the navigation menu I created along with the icons for each of the four neighborhoods.<\/p>\n<p><a href=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/FoSF_icons_menu.png\" data-gallery=\"#post1174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1228 size-full aligncenter\" src=\"https:\/\/pkk.ixm.mybluehost.me\/blog\/wp-content\/uploads\/2015\/07\/FoSF_icons_menu.png\" alt=\"FoSF_icons_menu\" width=\"980\" height=\"110\" srcset=\"https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/FoSF_icons_menu.png 980w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/FoSF_icons_menu-300x34.png 300w, https:\/\/benmlevy.com\/blog\/wp-content\/uploads\/2015\/07\/FoSF_icons_menu-768x86.png 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/a><\/p>\n<p>It was great working with my team and we made it. Thank you, team! Thank you to our teacher, <a class=\"lnkto\" href=\"https:\/\/www.hamiltondraws.com\/\">Hamilton Cline<\/a>\u00a0and thank you Web &amp; New Media Department at\u00a0Academy of Art.<\/p>\n<p>*Note: Chrome is a great browser but, <a class=\"lnkto\" href=\"https:\/\/benmlevy.com\/thefogsf\/\">\u201cThe Fog of San Francisco\u201d<\/a> may or may not play nice in older versions. If you&#8217;re experience of the fog seems a <em>little more hazy<\/em> than it was designed to be, please open <a class=\"lnkto\" href=\"https:\/\/benmlevy.com\/thefogsf\/\">\u201cThe Fog of San Francisco\u201d<\/a>\u00a0in either Firefox or Safari. &#8220;Does it work in Internet Explorer&#8221; is a question that should not be asked. It will not work. Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog post comes a little later than it probably should but, I didn&#8217;t think about doing one back in december. The Fog of San Francisco is a parallax website* that features four iconic neighborhoods in San Francisco. As you scroll through these four iconic neighborhoods of San Francisco you&#8217;ll be covered by fog. Along<a class=\"read-more \" href=\"https:\/\/benmlevy.com\/blog\/the-fog-of-san-francisco-website\/\" title=\"Read More\"> <span class=\"button default\">Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1245,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,27],"tags":[34,37,42,41],"class_list":["post-1174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-collab-web-design","category-design","tag-design","tag-san-francisco","tag-web-design","tag-website"],"_links":{"self":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/comments?post=1174"}],"version-history":[{"count":78,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1174\/revisions"}],"predecessor-version":[{"id":1742,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/posts\/1174\/revisions\/1742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/media\/1245"}],"wp:attachment":[{"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/media?parent=1174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/categories?post=1174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benmlevy.com\/blog\/wp-json\/wp\/v2\/tags?post=1174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}