1(window.webpackJsonp=window.webpackJsonp||[]).push([[16,2,4],{315:function(t,e,n){"use strict";n.r(e);var r={props:["route","title"]},l=n(27),component=Object(l.a)(r,(function(){var t=this;return(0,t._self._c)("a",{staticClass:"border-b-2 border-[#0C96CE] text-text text-center pb-1 button font-regular",attrs:{href:t.route,target:"_blank"}},[t._v("\n "+t._s(t.title)+"\n")])}),[],!1,null,null,null);e.default=component.exports},316:function(t,e,n){"use strict";n.r(e);var r={props:["title","src"]},l=n(27),component=Object(l.a)(r,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"flex flex-col justify-center mt-10"},[e("img",{staticClass:"w-[72px] mx-auto",attrs:{src:t.src,alt:"stack badge"}}),t._v(" "),e("p",{staticClass:"pt-2 body text-[14px] text-center"},[t._v(t._s(t.title))])])}),[],!1,null,null,null);e.default=component.exports},347:function(t,e,n){"use strict";n.r(e);var r=n(27),component=Object(r.a)({},(function(){var t=this,e=t._self._c;return e("div",[t._m(0),t._v(" "),e("div",{staticClass:"mx-auto w-full max-w-[756px] space-y-16 px-5 sm:px-0"},[t._m(1),t._v(" "),e("img",{staticClass:"w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow",attrs:{src:"/images/tempusmedia.jpg",alt:"tempus media"}}),t._v(" "),e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n TECHSTACK USED\n ")]),t._v(" "),e("div",{staticClass:"grid w-full grid-cols-2 lg:grid-cols-5"},[e("StackBadge",{attrs:{src:"/stack/nuxt.svg",title:"NUXT"}}),t._v(" "),e("StackBadge",{attrs:{src:"/stack/vue.svg",title:"VUE"}}),t._v(" "),e("StackBadge",{attrs:{src:"/stack/tailwind.svg",title:"TAILWIND"}}),t._v(" "),e("StackBadge",{attrs:{src:"/stack/wordpress.svg",title:"WORDPRESS"}}),t._v(" "),e("StackBadge",{attrs:{src:"/stack/figma.svg",title:"FIGMA"}})],1)]),t._v(" "),t._m(2),t._v(" "),e("img",{staticClass:"w-[756px] object-cover mx-auto",attrs:{src:"/images/tempusmedia/tempus-wireframe.jpg",alt:"tempus media wireframe"}}),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),t._v(" "),t._m(8),t._v(" "),t._m(9),t._v(" "),t._m(10),t._v(" "),t._m(11),t._v(" "),e("div",{staticClass:"flex justify-center"},[e("LinkBtn",{attrs:{title:"VISIT WEBSITE",route:"https://tempus.media/"}})],1)])])}),[function(){var t=this,e=t._self._c;return e("div",{staticClass:"mx-auto bg-hero body"},[e("div",{staticClass:"relative max-w-[1530px] mx-auto"},[e("div",{staticClass:"px-10 pt-48 pb-32"},[e("h1",{staticClass:"pt-10 text-center cursor-pointer lg:text-lg_h1 heading-2"},[t._v("\n TEMPUS MEDIA\n ")]),t._v(" "),e("p",{staticClass:"text-center cursor-pointer label_lg"},[t._v("\n UX/UI DESIGN, WEB DEVELOPMENT\n ")])])])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n FLAWLESS DIGITAL SOLUTIONS - A REDESIGN STORY\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n Tempus Media is a digital agency specialized in marketing and web\n development. The website redesign is one of those projects where you\n have very few obstacles to employ complete creative output. That was\n the beauty of it. From creating a unique and detailed design system,\n to hand picking the stack - this project was lovely to work on from\n the start.\n ")])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n THE DESIGN PROCESS\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n The itterative design process consisted of a flexible flow with\n following main stages:\n ")]),t._v(" "),e("ul",[e("li",{staticClass:"pl-2 body"},[t._v("⢠Design Brief")]),t._v(" "),e("li",{staticClass:"pl-2 body"},[t._v("⢠Moodboard & Sketching")]),t._v(" "),e("li",{staticClass:"pl-2 body"},[t._v("⢠Wireframe")]),t._v(" "),e("li",{staticClass:"pl-2 body"},[t._v("⢠UI Design")]),t._v(" "),e("li",{staticClass:"pl-2 body"},[t._v("⢠Prototype")])]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n By filling out the "),e("strong",[t._v("design brief")]),t._v(" we outlined the\n goals, quality and deliverables of the project. The filled out\n document had all the relevant information about the tone of voice,\n target audience and scheduled sessions. This helped a lot later during\n the process by solving all uncertainties. After generating some\n initial ideas trough "),e("strong",[t._v("sketching")]),t._v(" and examining how\n other designers approach a similar challenge, I had a nice basis for\n developing the "),e("strong",[t._v("wireframe")]),t._v(" and later on\n "),e("strong",[t._v("designing the UI")]),t._v(". A "),e("strong",[t._v("prototype")]),t._v(" was\n later introduced to examine how the complete product felt, and was\n finally ready for development.\n ")])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n STYLEGUIDE DEVELOPMENT\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n During the design phase I carefully crafted a modular design system\
1n with complementary typography and colors adhering to the branding\n guidelines.\n ")])])},function(){var t=this._self._c;return t("div",{staticClass:"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"},[t("img",{staticClass:"w-[268px] justify-self-center",attrs:{src:"/images/tempusmedia/jost.jpg",alt:"typography"}}),this._v(" "),t("img",{staticClass:"w-[268px] justify-self-center",attrs:{src:"/images/tempusmedia/roboto.jpg",alt:"typography"}})])},function(){var t=this._self._c;return t("div",{staticClass:"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"},[t("img",{staticClass:"w-[268px] justify-self-center mt-10 sm:mt-0",attrs:{src:"/images/tempusmedia/tempus-color-1.jpg",alt:"color"}}),this._v(" "),t("img",{staticClass:"w-[268px] justify-self-center mt-10 sm:mt-0",attrs:{src:"/images/tempusmedia/tempus-color-2.jpg",alt:"color"}})])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n GLASSMORPHISM & DARK LAYOUT\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n Glassmorphism is a style represented by transparent elements with a\n frosted-glass effect creating an immersive experience for the user.\n Combined with the dark layout spread trough the web it generates a\n feeling of spaceiness and visual interest.\n ")])])},function(){var t=this,e=t._self._c;return e("div",[e("img",{staticClass:"w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow",attrs:{src:"/images/tempusmedia/tempus-newsletter.jpg",alt:"tempus media"}}),t._v(" "),e("p",{staticClass:"mt-6 text-center label_sm"},[t._v("\n *An example of glassmorphism element overlapping illustration on dark\n layout\n ")])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n LAPTOP-SCREEN PROJECTS SLIDER\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n An especially interesting undertaking was developing the laptop-screen\n projects slider prominent just underneath the hero section and\n developed using VueSlickCarousel.\n ")])])},function(){var t=this,e=t._self._c;return e("div",[e("img",{staticClass:"w-[756px] h-auto object-fit mx-auto rounded-3xl header-shadow",attrs:{src:"/images/tempusmedia/tempus-carousel.jpg",alt:"tempus media"}}),t._v(" "),e("p",{staticClass:"mt-6 text-center label_sm"},[t._v("\n *The Laptop-Screen Projects Slider\n ")])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n HEADLESS WORDPRESS FOR BLOG\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n Since the content of the blog section had to be easily managed,\n WordPress was the perfect solution to be used as the headless cms. The\n content was then fetched using the Axios Nuxt Module.\n ")])])},function(){var t=this,e=t._self._c;return e("div",{staticClass:"space-y-8"},[e("h3",{staticClass:"text-center heading-4 max-w-[450px] mx-auto mt-24"},[t._v("\n SOMETHING DIFFERENT\n ")]),t._v(" "),e("p",{staticClass:"body"},[t._v("\n This project helped me establish previously gained knowledge and\n implement it in a fluent way. In the development phase, using the Nuxt\n Modules made plugins integration much more enjoyable. Using shortcuts\n in Figma, and having a smooth flow by creating reusable components and\n setting up the grid system helps create crisp designs. Iâve approached\n different design and development challenges by trying to have a free\n and calm mind which allowed me to put myself in the skin of various\n users and the WOW-Moment they would feel when exposed to a novel\n aesthethical choice.\n ")])])}],!1,null,null,null);e.default=component.exports;installComponents(component,{StackBadge:n(316).default,LinkBtn:n(315).default})}}]);
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.