(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[678],{316:(e,s,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/p/eunoia",function(){return t(3549)}])},3549:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>c});var i=t(7876),n=t(4587),a=t.n(n),o=t(7326),l=t(8230),r=t.n(l);function c(){return(0,i.jsxs)(o.A,{props:{title:"Eunoia | Ian Conyers | izarooni",header:"Eunoia",subtitle:"My first PHP website — created in 2015",description:"Eunoia is the first website I created in 2015 using a barebone PHP back-end."},children:[(0,i.jsxs)("section",{className:"container p-8",children:[(0,i.jsxs)(r(),{href:"#design",className:"hyperlink flex items-center gap-4 my-4",children:[(0,i.jsx)("i",{className:"fas fa-palette text-3xl"}),(0,i.jsx)("h2",{id:"design",className:"text-4xl font-bold italic",children:"Design"})]}),(0,i.jsxs)("div",{className:"mt-4",children:[(0,i.jsx)("div",{className:"screenshot my-4",children:(0,i.jsx)(a(),{src:"/projects/eunoia/thumbnail.webp",alt:"Screenshot of website design",width:1920,height:1080,style:{maxWidth:"100%",height:"auto"}})}),(0,i.jsxs)("p",{className:"mx-auto lg:w-3/4",children:["To bring in new users, our website had to be eye-catching, but not flashy. Simplicity was finally becoming mainstream in the game's community.",(0,i.jsx)("br",{}),(0,i.jsx)("br",{}),"We believed the community is what makes the game successful therefore our forum and online chat-room had to be easily accessible. There was no need to have pages leading to other pages. Anything that was needed was right in front of you."]})]})]}),(0,i.jsx)("div",{className:"bg-neutral-200",children:(0,i.jsxs)("section",{className:"container p-8",children:[(0,i.jsxs)(r(),{href:"#development",className:"hyperlink flex items-center gap-4 my-4",children:[(0,i.jsx)("i",{className:"fas fa-code text-3xl"}),(0,i.jsx)("h2",{id:"development",className:"text-4xl font-bold italic",children:"Development"})]}),(0,i.jsxs)("div",{className:"grid gap-4",children:[(0,i.jsx)("p",{children:"I gained a lot of experience on this project. Learning about how to use requests, sessions, cookies, and how to handle them. Trying to keep the back-end organized, making the front-end represent the design to the best of my abilities as a beginner. I also learned about the importance of a good layout design. The website had to look good on all devices, not just desktops."}),(0,i.jsxs)("div",{className:"grid gap-4 xl:flex items-center",children:[(0,i.jsxs)("div",{children:[(0,i.jsx)("p",{children:"Using the root directory index as the website controller, URLs were quite verbose."}),(0,i.jsx)("div",{className:"relative bg-neutral-300 p-4 font-mono rounded-lg shadow-inner overflow-auto min-h-24",children:(0,i.jsxs)("div",{className:"absolute whitespace-nowrap",children:[(0,i.jsx)("p",{children:"http://example.com?base=main&page=register"}),(0,i.jsx)("p",{children:"http://example.com?base=main&page=login"}),(0,i.jsx)("p",{children:"http://example.com?base=cp&page=settings"})]})})]}),(0,i.jsx)("div",{className:"screenshot",children:(0,i.jsx)(a(),{src:"/projects/eunoia/controller.jpg",alt:"Diagram of routing controller",width:760,height:589,style:{maxWidth:"100%",height:"auto"}})})]})]}),(0,i.jsxs)("div",{className:"grid gap-4 xl:flex items-center",children:[(0,i.jsx)("div",{className:"order-2 xl:order-1 screenshot",children:(0,i.jsx)(a(),{className:"rounded-lg",src:"/projects/eunoia/layout.jpg",alt:"Generified layout design",width:890,height:460,style:{maxWidth:"100%",height:"auto"}})}),(0,i.jsxs)("div",{className:"grid gap-2 order-1 xl:order-2",children:[(0,i.jsx)("p",{children:"The template was built using three sections. A top, middle and bottom component. Each component is a PHP file that is included in the main index file."}),(0,i.jsx)("p",{children:"The top component would contain all the data above the opening body tag (inclusive). The middle component would contain the content of a specific page and the bottom component had JavaScript includes, the closing body tag and the page footer."})]})]})]})}),(0,i.jsxs)("section",{className:"container p-8",children:[(0,i.jsxs)(r(),{href:"#issues",className:"hyperlink flex items-center gap-4 my-4",children:[(0,i.jsx)("i",{className:"fas fa-exclamation-triangle text-3xl"}),(0,i.jsx)("h2",{id:"issues",className:"text-4xl font-bold italic",children:"Issues"})]}),(0,i.jsxs)("div",{className:"grid gap-2 mx-auto lg:w-3/4",children:[(0,i.jsx)("p",{children:"The website layout would always scale to the viewport's maximum width and height which looked terrible on large resolutions or wide aspect ratios. This caused a lot of white space. The navigation bar buttons, various components and columns would stretch to the maximum possible width of the device screen."}),(0,i.jsx)("p",{children:"Routing was a mess. They could get incredibly long and confusing. For example:"}),(0,i.jsx)("div",{className:"relative bg-zinc-200 p-4 font-mono rounded-lg shadow-inner overflow-auto min-h-24",children:(0,i.jsxs)("div",{className:"absolute whitespace-nowrap",children:[(0,i.jsx)("p",{children:"http://example.com?base=cp&page=settings"}),(0,i.jsx)("p",{children:"http://example.com?base=cp&page=logout"})]})}),(0,i.jsx)("p",{children:'In the future, I wanted to "prettify" them. They should be simple and easy to remember.'}),(0,i.jsxs)("ul",{className:"my-3 font-mono",children:[(0,i.jsx)("li",{children:"http://example.com/settings"}),(0,i.jsx)("li",{children:"http://example.com/logout"})]}),(0,i.jsx)("p",{children:"The controller should be handled internally, the end-user doesn't need to see these properties. Unfortunately at the time, I didn't know the terminology for this idea thus making attempts to research about it very difficult."})]})]})]})}},7326:(e,s,t)=>{"use strict";t.d(s,{A:()=>h});var i=t(7876),n=t(7328),a=t.n(n),o=t(8847),l=t.n(o),r=t(8230),c=t.n(r);let d=l()(()=>Promise.all([t.e(55),t.e(612)]).then(t.bind(t,9612)),{loadableGenerated:{webpack:()=>[9612]},ssr:!1}),h=e=>{let{children:s,props:t}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(a(),{children:[(0,i.jsx)("title",{children:t.title}),(0,i.jsx)("meta",{name:"og:title",content:t.title}),(0,i.jsx)("meta",{name:"og:site_name",content:t.title}),(0,i.jsx)("meta",{name:"og:image",content:"https://izarooni.com/favicon.ico"}),(0,i.jsx)("meta",{name:"og:description",content:t.description}),(0,i.jsx)("meta",{name:"description",content:t.description}),(0,i.jsx)("meta",{name:"robots",content:"nofollow, noindex"}),(0,i.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,i.jsx)("meta",{charSet:"UTF-8"}),(0,i.jsx)("link",{rel:"icon",href:"/favicon.ico"}),(0,i.jsx)("link",{rel:"stylesheet",href:"https://use.fontawesome.com/releases/v5.15.3/css/all.css",integrity:"sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk",crossOrigin:"anonymous"})]}),(0,i.jsxs)("header",{className:"p-8 lg:p-4",children:[(0,i.jsx)(c(),{href:"/",children:(0,i.jsx)("i",{className:"hyperlink text-4xl mx-4 fas fa-home"})}),(0,i.jsx)(d,{}),(0,i.jsxs)("div",{children:[(0,i.jsx)("h1",{className:"font-bold text-3xl",children:t.header}),(0,i.jsx)("p",{className:"text-sm italic",children:t.subtitle})]})]}),(0,i.jsx)("main",{children:s})]})}}},e=>{var s=s=>e(e.s=s);e.O(0,[695,253,636,593,792],()=>s(316)),_N_E=e.O()}]);