[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"work-aperfectspace":3,"work-surround-aperfectspace":309},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"createdAt":10,"highlight":11,"type":12,"imgFolderName":13,"featured":14,"publish":14,"url":15,"category":16,"tools":18,"body":25,"_type":303,"_id":304,"_source":305,"_file":306,"_stem":307,"_extension":308},"/work/aperfectspace","work",false,"","A Perfect Space","A Perfect Space, a digital locations platform based in Melbourne, Australia, invited me via Upwork to build the HTML pages for both their admin and user interfaces. I subsequently built several public-facing pages, including About Us, How It Works, Contact Us, Team, and Privacy Policy.","01/09/2021","A PSD to HTML conversion project.","Contract","aperfectspace",true,"https://aperfectspace-html.netlify.app/",[17],"Site Templates",[19,20,21,22,23,24],"HTML","CSS","SCSS","JavaScript","Bootstrap","Gulp",{"type":26,"children":27,"toc":300},"root",[28,68,72,236],{"type":29,"tag":30,"props":31,"children":34},"element","div",{"className":32},[33],"l-wrap",[35],{"type":29,"tag":30,"props":36,"children":39},{"className":37},[38],"u-my-48",[40,48],{"type":29,"tag":41,"props":42,"children":44},"h3",{"id":43},"features",[45],{"type":46,"value":47},"text","Features",{"type":29,"tag":49,"props":50,"children":51},"ul",{},[52,58,63],{"type":29,"tag":53,"props":54,"children":55},"li",{},[56],{"type":46,"value":57},"100% responsive and mobile-friendly",{"type":29,"tag":53,"props":59,"children":60},{},[61],{"type":46,"value":62},"All modern browsers and devices compatible",{"type":29,"tag":53,"props":64,"children":65},{},[66],{"type":46,"value":67},"Load time under 3s",{"type":29,"tag":69,"props":70,"children":71},"hr",{},[],{"type":29,"tag":73,"props":74,"children":77},"section",{"className":75},[76],"u-py-64",[78],{"type":29,"tag":30,"props":79,"children":82},{"className":80},[33,81],"l-wrap--700",[83,93],{"type":29,"tag":84,"props":85,"children":90},"h2",{"className":86,"id":89},[87,88],"t-display-2","u-mt-64","what-i-did",[91],{"type":46,"value":92},"What I did",{"type":29,"tag":30,"props":94,"children":97},{"className":95},[96],"c-feature-figure-container",[98,137,172,201],{"type":29,"tag":99,"props":100,"children":103},"work-feature",{"src":101,"alt":102},"svg/html5.svg","HTML5 Logo",[104,106,113,114],{"type":46,"value":105},"\n  ",{"type":29,"tag":107,"props":108,"children":110},"h4",{"id":109},"semantic-markup",[111],{"type":46,"value":112},"Semantic markup",{"type":46,"value":105},{"type":29,"tag":49,"props":115,"children":116},{},[117,119,124,125,130,131,136],{"type":46,"value":118},"\n    ",{"type":29,"tag":53,"props":120,"children":121},{},[122],{"type":46,"value":123},"Used HTML5 sectioning elements to give the markup meaning.",{"type":46,"value":118},{"type":29,"tag":53,"props":126,"children":127},{},[128],{"type":46,"value":129},"Validated the code using W3C HTML validator.",{"type":46,"value":118},{"type":29,"tag":53,"props":132,"children":133},{},[134],{"type":46,"value":135},"Coded with readability in mind by proper commenting and consistent indentation, spacing.",{"type":46,"value":105},{"type":29,"tag":99,"props":138,"children":141},{"src":139,"alt":140},"svg/sass.svg","Sass Logo",[142,143,149,150],{"type":46,"value":105},{"type":29,"tag":107,"props":144,"children":146},{"id":145},"css-architechture",[147],{"type":46,"value":148},"CSS architechture",{"type":46,"value":105},{"type":29,"tag":49,"props":151,"children":152},{},[153,154,159,160,165,166,171],{"type":46,"value":118},{"type":29,"tag":53,"props":155,"children":156},{},[157],{"type":46,"value":158},"Created a SCSS architecture by providing namespaces to CSS classes for better maintaiability.",{"type":46,"value":118},{"type":29,"tag":53,"props":161,"children":162},{},[163],{"type":46,"value":164},"Followed BEM naming conventions principles.",{"type":46,"value":118},{"type":29,"tag":53,"props":167,"children":168},{},[169],{"type":46,"value":170},"Organized SCSS partials in multiple directories and files for better modularity.",{"type":46,"value":105},{"type":29,"tag":99,"props":173,"children":176},{"src":174,"alt":175},"svg/javascript.svg","CSS3 Logo",[177,178,184,185],{"type":46,"value":105},{"type":29,"tag":107,"props":179,"children":181},{"id":180},"vanilla-javascript",[182],{"type":46,"value":183},"Vanilla JavaScript",{"type":46,"value":105},{"type":29,"tag":49,"props":186,"children":187},{},[188,189,194,195,200],{"type":46,"value":118},{"type":29,"tag":53,"props":190,"children":191},{},[192],{"type":46,"value":193},"Wrote vanilla JavaScript to manipulate the DOM.",{"type":46,"value":118},{"type":29,"tag":53,"props":196,"children":197},{},[198],{"type":46,"value":199},"Integrated couple of jQuery plugins including jquery-date-range-picker, jquery-time-picker.",{"type":46,"value":105},{"type":29,"tag":99,"props":202,"children":205},{"src":203,"alt":204},"svg/gulp.svg","Gulp Logo",[206,207,213,214],{"type":46,"value":105},{"type":29,"tag":107,"props":208,"children":210},{"id":209},"gulp-automation",[211],{"type":46,"value":212},"Gulp automation",{"type":46,"value":105},{"type":29,"tag":49,"props":215,"children":216},{},[217,218,223,224,229,230,235],{"type":46,"value":118},{"type":29,"tag":53,"props":219,"children":220},{},[221],{"type":46,"value":222},"Automated development tasks using Gulp.",{"type":46,"value":118},{"type":29,"tag":53,"props":225,"children":226},{},[227],{"type":46,"value":228},"Created tasks to minify HTML, CSS, and JavaScript.",{"type":46,"value":118},{"type":29,"tag":53,"props":231,"children":232},{},[233],{"type":46,"value":234},"Also, created task to optimize images and build production-ready files.",{"type":46,"value":105},{"type":29,"tag":73,"props":237,"children":238},{},[239],{"type":29,"tag":30,"props":240,"children":242},{"className":241},[33,81],[243,246],{"type":29,"tag":69,"props":244,"children":245},{},[],{"type":29,"tag":30,"props":247,"children":249},{"className":248},[38],[250],{"type":29,"tag":30,"props":251,"children":254},{"className":252},[253],"u-space-between",[255,280],{"type":29,"tag":30,"props":256,"children":257},{},[258,264],{"type":29,"tag":107,"props":259,"children":261},{"id":260},"client",[262],{"type":46,"value":263},"Client",{"type":29,"tag":265,"props":266,"children":267},"p",{},[268],{"type":29,"tag":269,"props":270,"children":274},"a",{"href":271,"rel":272},"https://aperfectspace.com/",[273],"nofollow",[275],{"type":29,"tag":276,"props":277,"children":279},"markdown-image",{"src":278,"alt":8},"clients/aperfectspace.png",[],{"type":29,"tag":30,"props":281,"children":282},{},[283,289],{"type":29,"tag":107,"props":284,"children":286},{"id":285},"live-demo",[287],{"type":46,"value":288},"Live Demo",{"type":29,"tag":265,"props":290,"children":291},{},[292],{"type":29,"tag":269,"props":293,"children":297},{"href":15,"className":294,"target":296},[295],"c-button","_blank",[298],{"type":46,"value":299},"Check Live Demo",{"title":7,"searchDepth":301,"depth":301,"links":302},2,[],"markdown","content:work:aperfectspace.md","content","work/aperfectspace.md","work/aperfectspace","md",[310,311],null,{"_path":312,"title":313},"/work/cesppa-prototype","CESPPA Prototype",1788788972368]