{"id":95,"date":"2023-06-08T13:40:19","date_gmt":"2023-06-08T13:40:19","guid":{"rendered":"https:\/\/doublejdesign.ca\/?p=95"},"modified":"2023-11-12T21:51:50","modified_gmt":"2023-11-12T21:51:50","slug":"game-dev-portfolio-site","status":"publish","type":"post","link":"https:\/\/doublejdesign.ca\/index.php\/2023\/06\/08\/game-dev-portfolio-site\/","title":{"rendered":"Game Dev Portfolio Site"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Project Description:<\/h4>\n\n\n\n<p class=\"has-tiny-font-size\">2023<\/p>\n\n\n\n<p>Worked with a fresh out of school game developer looking to create a bright and simple portfolio site that reflects their illustration style and obsession with colour. To meet their needs, the deadline was within a week. It is fully functional at all device size and includes a mobile-specific version. <a href=\"https:\/\/liamjacksondesigns.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the site!<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-1024x590.png\" alt=\"\" class=\"wp-image-98\" srcset=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-1024x590.png 1024w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-300x173.png 300w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-768x443.png 768w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-1536x886.png 1536w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-2048x1181.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This site is filled to the brim with animations, intriguing transitions and a misbehaving intersection observer.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">JavaScript Code Snippet<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>function changecircleimgone() {\n    var x = document.getElementById(\"img1\");\n    var y = document.getElementById(\"baseimg\");\n    x.className += \" show\";\n    y.className += \" hide\"\n}\n\nfunction changecircleimgtwo() {\n    var x = document.getElementById(\"img2\");\n    var y = document.getElementById(\"baseimg\");\n    x.className += \" show\";\n    y.className += \" hide\"\n}\n\nfunction hide() {\n    var x = document.getElementById(\"img1\");   \n    x.classList.remove(\"show\");\n    var y = document.getElementById(\"baseimg\");\n    y.classList.remove(\"hide\");\n}\n\nfunction hidetwo() {\n    var x = document.getElementById(\"img2\");   \n    x.classList.remove(\"show\");\n    var y = document.getElementById(\"baseimg\");\n    y.classList.remove(\"hide\");\n}\n\nfunction changecircleimgthree() {\n    var x = document.getElementById(\"img3\");\n    var y = document.getElementById(\"baseimg\");\n    x.className += \" show\";\n    y.className += \" hide\"\n}\n\nfunction hidethree() {\n    var x = document.getElementById(\"img3\");   \n    x.classList.remove(\"show\");\n    var y = document.getElementById(\"baseimg\");\n    y.classList.remove(\"hide\");\n}\n\nfunction changecircleimgfour() {\n    var x = document.getElementById(\"img4\");\n    var y = document.getElementById(\"baseimg\");\n    x.className += \" show\";\n    y.className += \" hide\"\n}\n\nfunction hidefour() {\n    var x = document.getElementById(\"img4\");   \n    x.classList.remove(\"show\");\n    var y = document.getElementById(\"baseimg\");\n    y.classList.remove(\"hide\");\n}\n\n\/\/ const sectionOne = document.querySelectorAll('main section');\n\/\/ const options = {\n\/\/     root: null,\n\/\/     threshold: 0.1, \n\/\/     rootMargin: \"-50px\"\n\/\/ };\n\n\/\/ const observer = new IntersectionObserver(function(entries, observer) {\n\/\/     entries.forEach(entry => {\n\/\/     \/\/   console.log(entry.target);  \n\/\/     entry.target.classList.toggle(\"hidden\");\n\/\/     })\n\/\/ }, options);\n\/\/ sectionOne.forEach(section => {\n\/\/ observer.observe(section);\n\/\/ });\n\nfunction mobileMenu() {\n    var x = document.getElementById(\"mainnav\");\n\n        x.classList.toggle(\"hidemenu\");\n\n}\n\nfunction mobileIcons() {\n    var x = document.querySelector(\".scaleup\");\n    var y = document.querySelector(\".scaledown\")\n    x.classList.remove(\"scaleup\");\n    x.classList.toggle(\"scaledown\");\n    y.classList.remove(\"scaledown\");\n    y.classList.toggle(\"scaleup\");\n}\n\n\/\/ Get the button:\nlet mybutton = document.getElementById(\"myBtn\");\nvar main = document.querySelector(\"main\");\n\/\/ When the user scrolls down 20px from the top of the document, show the button\nmain.onscroll = function() {scrollFunction()};\n\nfunction scrollFunction() {\n  if (main.scrollTop > 20 || main.scrollTop > 20) {\n    mybutton.style.display = \"flex\";\n  } else {\n    mybutton.style.display = \"none\";\n  }\n}\n\n\/\/ When the user clicks on the button, scroll to the top of the document\nfunction topFunction() {\n  main.scrollTop = 0; \/\/ For Safari\n  main.scrollTop = 0; \/\/ For Chrome, Firefox, IE and Opera\n}\n\n\/\/ Get the button:\nlet mobilebutton = document.getElementById(\"myBtn2\");\nvar wrap = document.querySelector(\".wrapper\");\n\n\/\/ When the user scrolls down 20px from the top of the document, show the button\ndocument.querySelector(\".wrapper\").onscroll = function() {scrollFunction2()};\n\nfunction scrollFunction2() {\n  if (wrap.scrollTop > 20 || wrap.scrollTop > 20) {\n    mobilebutton.style.display = \"flex\";\n  } else {\n    mobilebutton.style.display = \"none\";\n  }\n}\n\n\/\/ When the user clicks on the button, scroll to the top of the document\nfunction topFunction2() {\n  wrap.scrollTop = 0; \/\/ For Safari\n  wrap.scrollTop = 0; \/\/ For Chrome, Firefox, IE and Opera\n}<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Basic desktop page example<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite-1024x648.png\" alt=\"\" class=\"wp-image-243\" srcset=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite-1024x648.png 1024w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite-300x190.png 300w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite-768x486.png 768w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite.png 1427w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Error page (my personal favourite)<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite404-1024x686.png\" alt=\"\" class=\"wp-image-414\" srcset=\"https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite404-1024x686.png 1024w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite404-300x201.png 300w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite404-768x515.png 768w, https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/06\/liamsite404.png 1353w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-border-color-color has-text-color has-link-color wp-elements-ce3723550f4e7ee3446d78ae72eed957\">Software: Visual Studio Code<br>Languages: HTML, CSS, JavaScript<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Project Description: 2023 Worked with a fresh out of school game developer looking to create a bright and simple portfolio site that reflects their illustration style and obsession with colour. To meet their needs, the deadline was within a week. It is fully functional at all device size and includes a mobile-specific version. Visit the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":98,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[17,10],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome.png",2050,1182,false],"thumbnail":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-150x150.png",150,150,true],"medium":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-300x173.png",300,173,true],"medium_large":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-768x443.png",768,443,true],"large":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-1024x590.png",1024,590,true],"wps_thumbnail_size":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome.png",360,208,false],"1536x1536":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-1536x886.png",1536,886,true],"2048x2048":["https:\/\/doublejdesign.ca\/wp-content\/uploads\/2023\/11\/liamsitehome-2048x1181.png",2048,1181,true]},"uagb_author_info":{"display_name":"jessica.jackson","author_link":"https:\/\/doublejdesign.ca\/index.php\/author\/jessica-jackson\/"},"uagb_comment_info":0,"uagb_excerpt":"Project Description: 2023 Worked with a fresh out of school game developer looking to create a bright and simple portfolio site that reflects their illustration style and obsession with colour. To meet their needs, the deadline was within a week. It is fully functional at all device size and includes a mobile-specific version. Visit the&hellip;","_links":{"self":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/95"}],"collection":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":5,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":415,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/posts\/95\/revisions\/415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/media\/98"}],"wp:attachment":[{"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/media?parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/categories?post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/doublejdesign.ca\/index.php\/wp-json\/wp\/v2\/tags?post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}