1<!doctype html> 2<html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> 3 <head> 4 <meta data-n-head="ssr" charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=6ce313a2-24b7-4786-b24d-921573bef536 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" name="format-detection" content="telephone=no"><meta data-n-head="ssr" data-hid="title" name="title" content="Edo BegagiÄ | Frontend & Design"><meta data-n-head="ssr" data-hid="description" name="description" content="Edo BegagiÄ - Frontend & Design Portfolio"><meta data-n-head="ssr" data-hid="og:image" property="og:image" content="https://edobegagic.netlify.app/snippet.jpg"><title>Edo BegagiÄ | Frontend & Design</title><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spartan:wght@300;400;500;600&family=Baskervville&family=Figtree:wght@300;400;500;600&"><link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"><link rel="preload" href="/_nuxt/77f5a55.js" as="script"><link rel="preload" href="/_nuxt/a482238.js" as="script"><link rel="preload" href="/_nuxt/784dc89.js" as="script"><link rel="preload" href="/_nuxt/6e2905a.js" as="script"><link rel="preload" href="/_nuxt/31ca5b4.js" as="script"><style data-vue-ssr-id="d706d280:0 17bc9ac2:0 46f23c9d:0 5ec46b22:0 576a8cb3:0">/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com*//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Segoe UI",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";margin:0}hr{color:inherit;height:0}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#a1a1aa;opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{color:#a1a1aa;opacity:1}input::placeholder,textarea::placeholder{color:#a1a1aa;opacity:1}
7[role=button],button{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-color:currentColor}.heading-main{font-size:12px}.heading-1,.heading-main{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity));font-family:Spartan;font-weight:400}.heading-1{font-size:44px}.heading-2{font-size:36px}.heading-2,.heading-3{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity));font-family:Spartan;font-weight:400}.heading-3{font-size:24px}.heading-4{font-size:21px}.heading-4,.label_sm{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity));font-family:Spartan;font-weight:400}.label_sm{font-size:14px}.label_lg{font-size:18px}.body,.label_lg{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity));font-family:Spartan;font-weight:400}.body{font-size:16px;line-height:1.625}.note{font-size:24px;font-weight:500}.button,.note{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity));font-family:Spartan}.button{font-size:18px;font-weight:400}.static{position:static}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mx-10{margin-left:2.5rem;margin-right:2.5rem}.mt-28{margin-top:7rem}.mb-\[-8rem\]{margin-bottom:-8rem}.mt-\[60px\]{margin-top:60px}.mt-\[50px\]{margin-top:50px}.-ml-6{margin-left:-1.5rem}.mt-10{margin-top:2.5rem}.mt-24{margin-top:6rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mb-5{margin-bottom:1.25rem}.-mt-44{margin-top:-11rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.h-\[428px\]{height:428px}.h-auto{height:auto}.h-\[580px\]{height:580px}.h-\[700px\]{height:700px}.h-\[850px\]{height:850px}.h-\[88vh\]{height:88vh}.h-\[90\%\]{height:90%}.h-full{height:100%}.h-\[90px\]{height:90px}.h-\[268px\]{height:268px}.h-\[960px\]{height:960px}.h-\[800px\]{height:800px}.w-full{width:100%}.w-\[169px\]{width:169px}.w-screen{width:100vw}.w-\[295px\]{width:295px}.w-\[200px\]{width:200px}.w-\[90vw\]{width:90vw}.w-\[72px\]{width:72px}.w-\[756px\]{width:756px}.w-\[268px\]{width:268px}.w-\[550px\]{width:550px}.w-\[500px\]{width:500px}.w-\[50px\]{width:50px}.w-\[41px\]{width:41px}.w-\[59px\]{width:59px}.w-\[35px\]{width:35px}.max-w-\[1024px\]{max-width:1024px}.max-w-\[1530px\]{max-width:1530px}.max-w-\[80\%\]{max-width:80%}.max-w-\[1152px\]{max-width:1152px}.max-w-\[756px\]{max-width:756px}.max-w-\[450px\]{max-width:450px}.transform{transform:var(--tw-transform)}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(4rem*var(--tw-space-y-reverse));margin-top:4rem;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:2rem;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:1rem;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:.5rem;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:0;margin-right:calc(.5rem*var(--tw-space-x-reverse))}.justify-self-center{justify-self:center}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded-\[24px\]{border-radius:24px}
7.rounded-3xl{border-radius:1.5rem}.border{border-width:1px}.border-b-2{border-bottom-width:2px}.border-\[\#0C96CE\]{--tw-border-opacity:1;border-color:#0c96ce;border-color:rgba(12,150,206,var(--tw-border-opacity))}.bg-hero{--tw-bg-opacity:1;background-color:#faf8f8;background-color:rgba(250,248,248,var(--tw-bg-opacity))}.bg-card{--tw-bg-opacity:1;background-color:#f3f3f3;background-color:rgba(243,243,243,var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pt-10{padding-top:2.5rem}.pt-6{padding-top:1.5rem}.pb-10{padding-bottom:2.5rem}.pb-1{padding-bottom:.25rem}.pt-7{padding-top:1.75rem}.pt-2{padding-top:.5rem}.pt-48{padding-top:12rem}.pb-32{padding-bottom:8rem}.pl-2{padding-left:.5rem}.pl-5{padding-left:1.25rem}.pt-\[100px\]{padding-top:100px}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.font-light{font-weight:300}.font-regular{font-weight:400}.font-medium{font-weight:500}.text-text{--tw-text-opacity:1;color:#343109;color:rgba(52,49,9,var(--tw-text-opacity))}.opacity-0{opacity:0}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}@media (min-width:768px){.sm\:mt-\[60px\]{margin-top:60px}.sm\:ml-0{margin-left:0}.sm\:mt-0{margin-top:0}.sm\:mt-10{margin-top:2.5rem}.sm\:h-\[316px\]{height:316px}.sm\:h-\[500px\]{height:500px}.sm\:h-\[600px\]{height:600px}.sm\:h-\[104px\]{height:104px}.sm\:h-\[400px\]{height:400px}.sm\:w-\[200px\]{width:200px}.sm\:w-\[60px\]{width:60px}.sm\:w-\[50px\]{width:50px}.sm\:w-\[72px\]{width:72px}.sm\:w-\[40px\]{width:40px}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:justify-start{justify-content:flex-start}.sm\:rounded-\[48px\]{border-radius:48px}.sm\:px-0{padding-left:0;padding-right:0}.sm\:py-0{padding-bottom:0;padding-top:0}.sm\:py-12{padding-bottom:3rem;padding-top:3rem}.sm\:py-4{padding-bottom:1rem;padding-top:1rem}.sm\:pt-20{padding-top:5rem}.sm\:pt-16{padding-top:4rem}.sm\:pt-10{padding-top:2.5rem}.sm\:text-\[21px\]{font-size:21px}.sm\:text-\[16px\]{font-size:16px}}@media (min-width:1024px){.lg\:mt-32{margin-top:8rem}.lg\:h-\[778px\]{height:778px}.lg\:h-screen{height:100vh}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:pt-0{padding-top:0}.lg\:text-lg_h2{font-size:36px}.lg\:text-lg_h1{font-size:44px}}@media screen and (max-width:768px){[data-aos]{pointer-events:auto!important}html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:1!important}html:not(.no-js) [data-aos=fade-up]{transform:none!important}}.header-shadow{box-shadow:0 4px 20px #a69ac5}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-active{opacity:0}html{scroll-behavior:smooth}.tippy-tooltip.tempusmedia-theme{-webkit-backdrop-filter:blur(40px)!important;backdrop-filter:blur(40px)!important;background:#fff!important;border-radius:12px!important;box-shadow:0 4px 20px rgba(0,0,0,.4);padding:15px 20px!important}.tippy-popper[x-placement^=top] .tippy-tooltip.tempusmedia-theme .tippy-arrow{border-top:7px solid #fff!important}.tippy-popper[x-placement^=top] .tippy-tooltip.tempusmedia-theme .tippy-arrow:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff!important;content:"";left:-6px;position:absolute;top:-8px}.nuxt-progress{background-color:#000;height:2px;left:0;opacity:1;position:fixed;right:0;top:0;transition:width .1s,opacity .4s;width:0;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.logofade{animation:fade 1.5s;animation-fill-mode:forwards}@keyframes fade{0%{opacity:0}
7to{opacity:1}}.divider[data-v-cebdb8a4]{border-top:2px solid #0c96ce}</style><link rel="preload" href="/_nuxt/static/1694615171/tempusmedia/state.js" as="script"><link rel="preload" href="/_nuxt/static/1694615171/tempusmedia/payload.js" as="script"><link rel="preload" href="/_nuxt/static/1694615171/manifest.js" as="script"> 8 </head> 9 <body> 10 <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div class="w-full overflow-x-hidden"><div class="relative w-screen max-w-[1530px] mx-auto z-10 mb-[-8rem] px-5"><div class="mt-[50px] sm:mt-[60px] opacity-0 logofade flex justify-center -ml-6 sm:ml-0 sm:justify-start" style="animation-delay:.5s"><a href="/" class="nuxt-link-active"><img src="/icons/logo.svg" alt="Edo BegagiÄ" class="w-[200px] sm:w-[200px]"></a></div></div> <div><div class="mx-auto bg-hero body"><div class="relative max-w-[1530px] mx-auto"><div class="px-10 pt-48 pb-32"><h1 class="pt-10 text-center cursor-pointer lg:text-lg_h1 heading-2"> 11 TEMPUS MEDIA 12 </h1> <p class="text-center cursor-pointer label_lg"> 13 UX/UI DESIGN, WEB DEVELOPMENT 14 </p></div></div></div> <div class="mx-auto w-full max-w-[756px] space-y-16 px-5 sm:px-0"><div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 15 FLAWLESS DIGITAL SOLUTIONS - A REDESIGN STORY 16 </h3> <p class="body"> 17 Tempus Media is a digital agency specialized in marketing and web 18 development. The website redesign is one of those projects where you 19 have very few obstacles to employ complete creative output. That was 20 the beauty of it. From creating a unique and detailed design system, 21 to hand picking the stack - this project was lovely to work on from 22 the start. 23 </p></div> <img src="/images/tempusmedia.jpg" alt="tempus media" class="w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow"> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 24 TECHSTACK USED 25 </h3> <div class="grid w-full grid-cols-2 lg:grid-cols-5"><div class="flex flex-col justify-center mt-10"><img src="/stack/nuxt.svg" alt="stack badge" class="w-[72px] mx-auto"> <p class="pt-2 body text-[14px] text-center">NUXT</p></div> <div class="flex flex-col justify-center mt-10"><img src="/stack/vue.svg" alt="stack badge" class="w-[72px] mx-auto"> <p class="pt-2 body text-[14px] text-center">VUE</p></div> <div class="flex flex-col justify-center mt-10"><img src="/stack/tailwind.svg" alt="stack badge" class="w-[72px] mx-auto"> <p class="pt-2 body text-[14px] text-center">TAILWIND</p></div> <div class="flex flex-col justify-center mt-10"><img src="/stack/wordpress.svg" alt="stack badge" class="w-[72px] mx-auto"> <p class="pt-2 body text-[14px] text-center">WORDPRESS</p></div> <div class="flex flex-col justify-center mt-10"><img src="/stack/figma.svg" alt="stack badge" class="w-[72px] mx-auto"> <p class="pt-2 body text-[14px] text-center">FIGMA</p></div></div></div> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 26 THE DESIGN PROCESS 27 </h3> <p class="body"> 28 The itterative design process consisted of a flexible flow with 29 following main stages: 30 </p> <ul><li class="pl-2 body">⢠Design Brief</li> <li class="pl-2 body">⢠Moodboard & Sketching</li> <li class="pl-2 body">⢠Wireframe</li> <li class="pl-2 body">⢠UI Design</li> <li class="pl-2 body">⢠Prototype</li></ul> <p class="body"> 31 By filling out the <strong>design brief</strong> we outlined the 32 goals, quality and deliverables of the project. The filled out 33 document had all the relevant information about the tone of voice, 34 target audience and scheduled sessions. This helped a lot later during 35 the process by solving all uncertainties. After generating some 36 initial ideas trough <strong>sketching</strong> and examining how 37 other designers approach a similar challenge, I had a nice basis for 38 developing the <strong>wireframe</strong> and later on 39 <strong>designing the UI</strong>. A <strong>prototype</strong> was 40 later introduced to examine how the complete product felt, and was 41 finally ready for development. 42 </p></div> <img src="/images/tempusmedia/tempus-wireframe.jpg" alt="tempus media wireframe" class="w-[756px] object-cover mx-auto"> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 43 STYLEGUIDE DEVELOPMENT 44 </h3> <p class="body"> 45 During the design phase I carefully crafted a modular design system 46 with complementary typography and colors adhering to the branding 47 guidelines. 48 </p></div> <div class="grid w-full sm:grid-cols-2 bg-card rounded-3xl h-[580px] py-10 sm:py-0 sm:h-[316px] items-center justify-center"><img src="/images/tempusmedia/jost.jpg" alt="typography" class="w-[268px] justify-self-center"> <img src="/images/tempusmedia/roboto.jpg" alt="typography" class="w-[268px] justify-self-center"></div> <div class="overflow-hidden grid w-full sm:grid-cols-2 bg-card rounded-3xl h-[960px] py-10 sm:py-0 sm:h-[600px] items-center justify-center"><img src="/images/tempusmedia/tempus-color-1.jpg" alt="color" class="w-[268px] justify-self-center mt-10 sm:mt-0"> <img src="/images/tempusmedia/tempus-color-2.jpg" alt="color" class="w-[268px] justify-self-center mt-10 sm:mt-0"></div> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 49 GLASSMORPHISM & DARK LAYOUT 50 </h3> <p class="body"> 51 Glassmorphism is a style represented by transparent elements with a 52 frosted-glass effect creating an immersive experience for the user. 53 Combined with the dark layout spread trough the web it generates a 54 feeling of spaceiness and visual interest. 55 </p></div> <div><img src="/images/tempusmedia/tempus-newsletter.jpg" alt="tempus media" class="w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow"> <p class="mt-6 text-center label_sm"> 56 *An example of glassmorphism element overlapping illustration on dark 57 layout 58 </p></div> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 59 LAPTOP-SCREEN PROJECTS SLIDER 60 </h3> <p class="body"> 61 An especially interesting undertaking was developing the laptop-screen 62 projects slider prominent just underneath the hero section and 63 developed using VueSlickCarousel. 64 </p></div> <div><img src="/images/tempusmedia/tempus-carousel.jpg" alt="tempus media" class="w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow"> <p class="mt-6 text-center label_sm"> 65 *The Laptop-Screen Projects Slider 66 </p></div> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 67 HEADLESS WORDPRESS FOR BLOG 68 </h3> <p class="body"> 69 Since the content of the blog section had to be easily managed, 70 WordPress was the perfect solution to be used as the headless cms. The 71 content was then fetched using the Axios Nuxt Module. 72 </p></div> <div class="space-y-8"><h3 class="text-center heading-4 max-w-[450px] mx-auto mt-24"> 73 SOMETHING DIFFERENT 74 </h3> <p class="body"> 75 This project helped me establish previously gained knowledge and 76 implement it in a fluent way. In the development phase, using the Nuxt 77 Modules made plugins integration much more enjoyable. Using shortcuts 78 in Figma, and having a smooth flow by creating reusable components and 79 setting up the grid system helps create crisp designs. Iâve approached 80 different design and development challenges by trying to have a free 81 and calm mind which allowed me to put myself in the skin of various
82 users and the WOW-Moment they would feel when exposed to a novel 83 aesthethical choice. 84 </p></div> <div class="flex justify-center"><a href="https://tempus.media/" target="_blank" class="border-b-2 border-[#0C96CE] text-text text-center pb-1 button font-regular"> 85 VISIT WEBSITE 86</a></div></div></div> <div class="mx-10"><div class="max-w-[1024px] mx-auto mt-28 divider" data-v-cebdb8a4><div class="w-full pt-10 text-center sm:pt-20" data-v-cebdb8a4><a href="mailto:[email protected]" class="font-light text-[18px] sm:text-[21px] heading-4" data-v-cebdb8a4>[email protected]</a></div> <div class="flex w-[169px] justify-between mx-auto pt-6 sm:pt-16 pb-10" data-v-cebdb8a4><a href="https://www.facebook.com/edo.begagic" target="_blank" data-v-cebdb8a4><img src="/icons/facebook.svg" alt="facebook" data-v-cebdb8a4></a> <a href="https://twitter.com/edo_begagic" target="_blank" data-v-cebdb8a4><img src="/icons/twitter.svg" alt="twitter" data-v-cebdb8a4></a> <a href="https://hr.linkedin.com/in/edo-begagi%C4%87-581134a6" target="_blank" data-v-cebdb8a4><img src="/icons/linkedin.svg" alt="linkedin" data-v-cebdb8a4></a></div></div></div></div></div></div>
86<script defer src="/_nuxt/static/1694615171/tempusmedia/state.js"></script>
86<script src="/_nuxt/77f5a55.js" defer></script>
86<script src="/_nuxt/31ca5b4.js" defer></script>
86<script src="/_nuxt/a482238.js" defer></script>
86<script src="/_nuxt/784dc89.js" defer></script>
86<script src="/_nuxt/6e2905a.js" defer></script>
86 87 </body> 88</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.