PageSourceSearch

https://edobegagic.netlify.app/tempusmedia/

html edobegagic.netlify.app collected 2026-10-03 10:40:58 UTC 22,940 bytes, 88 lines download raw bytes

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.