You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
809 lines
66 KiB
809 lines
66 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<title>Alen Kolarić CV</title>
|
|
<meta name="description" content="Curriculum Vitae of Alen Kolarić"/>
|
|
<link href="style.css" rel="stylesheet" />
|
|
<script src="js/smoothscroll.min.js"></script>
|
|
<script src="js/smoothscroll-polyfill.min.js"></script>
|
|
<script src="js/main.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Hello you code inspecting scoundrel! -->
|
|
<div hidden>
|
|
<h1>Alen Kolarić CV</h1>
|
|
<meta content="Alen Kolarić CV" itemprop="name"/>
|
|
<meta content="Curriculum Vitae of Alen Kolarić" itemprop="description"/>
|
|
<span class="img-preloader"></span>
|
|
</div>
|
|
<div class="page-wrapper">
|
|
<!--
|
|
|
|
May the Symbol Swine brings you joy!
|
|
_
|
|
_._ _..._ .-', _.._(`))
|
|
'-. ` ' /-._.-' ',/
|
|
) \ '.
|
|
/ _ _ | \
|
|
| a a / |
|
|
\ .-. ;
|
|
'-('' ).-' ,' ;
|
|
'-; | .'
|
|
\ \ /
|
|
| 7 .__ _.-\ \
|
|
| | | ``/ /` /
|
|
/,_| | /,_/ /
|
|
/,_/ '`-'
|
|
|
|
-->
|
|
<aside class="animate">
|
|
<div class="mobile-nav fade-in-right delay_06 animate"><span></span></div>
|
|
<div class="logo-wrapper fade-in-fwd animate">
|
|
<span class="logo">CV</span>
|
|
</div>
|
|
<nav class="fade-in-left delay_01 animate">
|
|
<ul>
|
|
<li class="fade-in-left delay_02 animate">
|
|
<a href="#intro" class="nav-link intro active">INTRO</a>
|
|
</li>
|
|
<li class="fade-in-left delay_03 animate">
|
|
<a href="#about" class="nav-link about">ABOUT</a>
|
|
</li>
|
|
<li class="fade-in-left delay_04 animate">
|
|
<a href="#experience" class="nav-link experience">EXPERIENCE</a>
|
|
</li>
|
|
<li class="fade-in-left delay_05 animate">
|
|
<a href="#projects" class="nav-link projects">PROJECTS</a>
|
|
</li>
|
|
<li class="fade-in-left delay_06 animate">
|
|
<a href="#skills" class="nav-link skills">SKILLS</a>
|
|
</li>
|
|
<li class="fade-in-left delay_07 animate">
|
|
<a href="pdf/alen_kolaric_cv.pdf" download class="nav-btn download">PDF</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="copyright-wrapper fade-in-left delay_08 animate">
|
|
<p class="created">Created by: kolarix</p>
|
|
<p class="copyright">
|
|
© 2023 All Rights Reserved
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<section id="intro">
|
|
<div class="content">
|
|
<div class="intro-content">
|
|
<h2 class="title fade-in-left delay_10 animate"><span>HELLO, I'M</span></br>ALEN KOLARIĆ</h2>
|
|
<h3 class="subtitle fade-in-left delay_12 animate">FRONTEND DEVELOPER</h3>
|
|
</div>
|
|
<div class="intro-image__wrapper fade-in-right delay_12 animate">
|
|
<picture class="intro-image">
|
|
<source type="image/webp" srcset="images/intro-image.webp">
|
|
<img src="images/intro-image.png" class="intro-image" alt="Alen" width="614">
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="about">
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<h2 class="title fade-in-left delay_01 fade-out">ABOUT</h2>
|
|
<div class="about-wrapper">
|
|
<div class="row">
|
|
<div class="about-info col fade-in-right delay_03 fade-out">
|
|
<ul class="info-list">
|
|
<li>Name: Alen Kolarić</li>
|
|
<li>Email: <a href="mailto:alen@kolarix.com">alen@kolarix.com</a></li>
|
|
<li>Location: Osijek, Croatia</li>
|
|
<li>LinkedIn: <a href="https://www.linkedin.com/in/alen-kolaric/" target="_blank">alen-kolaric</a> </li>
|
|
</ul>
|
|
</div>
|
|
<div class="about-intro col fade-in-left delay_04 fade-out">
|
|
<p>With 7+ years of experience in front-end development, I have a solid background in delivering e-commerce solutions. My expertise in Magento, as well as other platforms, has allowed me to develop a strong skill set in this field. I am also adept at working remotely and stay current on industry trends and technical best practices.</p>
|
|
<p>My ability to adapt to diverse client needs, troubleshoot and problem-solve, work independently and as part of a team, has resulted in a track record of successful projects. I am confident in my ability to deliver high-quality work and meet the needs of any client.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="about-history col fade-in-right delay_05 fade-out">
|
|
<p>Throughout my professional career, I have primarily focused on working with Magento, but I am also well-versed in WordPress. I have developed a solid understanding of both platforms and have experience in creating and maintaining various e-commerce websites and web-based projects on both. I am a big fan of both Magento and WordPress, and I am able to utilize my skills and expertise in both to deliver high-performing, visually appealing and user-friendly websites.</p>
|
|
<p>My interest in web development began in the early 2000s, when I was fascinated by the possibilities the internet offered and wanted to be a part of it. I started by inspecting the source code of web pages and learning as much as I could. As I progressed, I had the opportunity to experiment with a variety of different content management systems and applications, which allowed me to deepen my knowledge of HTML, CSS, and server and hosting-related technologies.</p>
|
|
<p>Throughout my early years, I owned and operated multiple forums and portals, primarily focused on gaming. Additionally, I built and maintained several small company websites, which served as an ideal training and improvement opportunity for my front-end skills. I am proficient in both Linux and MacOS operating systems and have experience in configuring and hosting web pages on cloud VPNs, including the one that this website is hosted on.</p>
|
|
</div>
|
|
<div class="about-img col fade-in-left delay_06 fade-out">
|
|
<picture class="about-image">
|
|
<source type="image/webp" srcset="images/about-image.webp">
|
|
<img src="images/about-image.png" class="about-image" alt="Alen" width="853">
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="experience">
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<h2 class="title fade-in-left delay_01">EXPERIENCE</h2>
|
|
<h3 class=" fade-in-left delay_02">Overview of my professional work experience, including a detailed list of my official employments and the responsibilities overview</h3>
|
|
</br>
|
|
<div class="work-wrapper">
|
|
<div class="work fade-in-right delay_04">
|
|
<div class="info">
|
|
<div class="duration"><p class="from">2020</p> <p class="separator">-</p> <p class="to">2023</p> </div>
|
|
<div class="company">
|
|
<div class="company-name">AAP Softwaredevelopment</div>
|
|
<h4 class="company-position">Frontend developer</h4> <span class="office">REMOTE</span>
|
|
</div>
|
|
</div>
|
|
<details class="description">
|
|
<summary>As a Magento front-end developer at AAP Softwaredevelopment, company based in Zadar, I had the opportunity to work with a team of experienced developers and contribute to the company's growth.<span class="dots">..</span></summary>
|
|
<span class="full-description"> AAP Softwaredevelopment is a subsidiary of Lehrerwelt, which is under the wing of the Klett corporation, a well-established education company based in Germany. My primary responsibilities included working on the company's flagship e-commerce store that served a large customer base in the DACH region, as well as working on Magento 2 migrations and corporate WordPress websites. The position was fully remote with occasional travels to Zadar, where the company is based, and Hamburg for team meetings and working sessions. The culture at AAP Softwaredevelopment was highly corporate. This experience allowed me to gain a deep understanding of the intricacies of working on large-scale Magento projects and to develop a deep understanding of technical best practices and trends in the industry.</span>
|
|
</details>
|
|
</div>
|
|
<div class="work fade-in-right delay_05">
|
|
<div class="info">
|
|
<div class="duration"><p class="from">2019</p> <p class="separator">-</p> <p class="to">2019</p> </div>
|
|
<div class="company">
|
|
<div class="company-name">VASHI</div>
|
|
<h4 class="company-position">Frontend developer</h4> <span class="office">REMOTE</span>
|
|
</div>
|
|
</div>
|
|
<details class="description">
|
|
<summary>I had the opportunity to work as a Magento front-end developer at Vashi, a luxury jewelry e-commerce company based in the United Kingdom, in a fully remote capacity.<span class="dots">..</span></summary>
|
|
<span class="full-description">The team was composed of members from around the world, which provided a unique and diverse perspective. I was brought on as a contractor to work on the main web shop which was running on Magento 1. Additionally, I did research and preparatory work for the company's upcoming migration to Magento 2. The team at Vashi was highly professional, and I appreciated the opportunity to work with such skilled and experienced individuals. The company's unique rings configurator was a nice bonus, and I was impressed by the attention to detail that went into its development. My time at Vashi was an incredibly valuable experience. The opportunity to work on the company's e-commerce store, which sells high-end jewelry, gave me a unique insight into the world of high-end e-commerce and the specific requirements of such businesses. Additionally, the research I conducted on Magento 2 migration, further enhanced my knowledge and skills in the field. I am grateful for the opportunity to have worked with such a reputable company and for the skills and knowledge that I gained during my time there. </span>
|
|
</details>
|
|
</div>
|
|
<div class="work fade-in-right delay_06">
|
|
<div class="info">
|
|
<div class="duration"><p class="from">2019</p> <p class="separator">-</p> <p class="to">*</p></div>
|
|
<div class="company">
|
|
<div class="company-name">Cipher</div>
|
|
<h4 class="company-position">Frontend developer, CEO</h4> <span class="office">REMOTE</span>
|
|
</div>
|
|
</div>
|
|
<details class="description">
|
|
<summary>With experience from working for a couple of companies under my belt, I decided to utilize the chance and start my own company, Cipher.<span class="dots">..</span></summary>
|
|
<span class="full-description">After a couple of projects however, an opportunity arose for me to join an internal development team, while still continuing to work on smaller projects with Cipher in my free time.</span>
|
|
</details>
|
|
</div>
|
|
<div class="work fade-in-right delay_07">
|
|
<div class="info">
|
|
<div class="duration"><p class="from">2018</p> <p class="separator">-</p> <p class="to">2019</p></div>
|
|
<div class="company">
|
|
<div class="company-name">Impaddo</div>
|
|
<h4 class="company-position">Frontend developer</h4> <span class="office">REMOTE</span>
|
|
</div>
|
|
</div>
|
|
<details class="description">
|
|
<summary>While working at Impaddo, a development agency based in Zadar, I gained valuable experience working remotely on a variety of projects and different tech stacks.<span class="dots">..</span></summary>
|
|
<span class="full-description">In partnership with a German company, my team and I had the opportunity to work with some of the largest e-commerce companies in Germany. As a Magento front-end developer, I was responsible for developing and maintaining the front-end of the websites using HTML, CSS, JavaScript, and Magento's front-end development framework.
|
|
In addition to my responsibilities as a Magento developer, I also had the opportunity to improve my Wordpress skills, which I had not used in some time. Using Wordpress to its full potential to create a large corporate website was a great challenge, as well as a relaxing and enjoyable experience.
|
|
At this position, I also had the opportunity to travel abroad for in-house consulting and work and also had the chance to attend the My Smart City conference in 2018 in Zadar. </span>
|
|
</details>
|
|
</div>
|
|
<div class="work fade-in-right delay_08">
|
|
<div class="info">
|
|
<div class="duration"><p class="from">2016</p> <p class="separator">-</p> <p class="to">2018</p> </div>
|
|
<div class="company">
|
|
<div class="company-name">Gauss Development</div>
|
|
<h4 class="company-position">Frontend developer</h4> <span class="office">OSIJEK</span>
|
|
</div>
|
|
</div>
|
|
<details class="description">
|
|
<summary>At Gauss, a software development agency based in Osijek, I officially began my frontend journey and gained valuable experience and skills in website development.<span class="dots">..</span></summary>
|
|
<span class="full-description"> The agency's relaxed and friendly atmosphere provided a great opportunity for me to learn, grow, and connect with my colleagues. I quickly demonstrated a strong ability to learn new skills and was given the opportunity to work on dozens of Magento projects, ranging from building new websites from scratch to maintaining and updating existing ones.
|
|
I had the opportunity to work on projects for clients from various countries such as Croatia, the Netherlands, Germany, Switzerland, and the USA. I was also responsible for traveling and attending meetings with clients to discuss, plan, and consult on projects.
|
|
Through my experience at Gauss, I developed a strong proficiency in both Magento 1 and Magento 2 and even had the opportunity to attend the Meet Magento conference in 2017 in Osijek. </span>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="projects">
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<h2 class="title fade-in-left delay_01">PROJECTS</h2>
|
|
<h3 class="fade-in-left delay_02">A list of my most relevant projects and brief summary</h3>
|
|
<div class="projects-wrapper">
|
|
<div class="project swing-in-top-fwd delay_03">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-1">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/lehrerwelt.webp">
|
|
<img src="images/400x400/lehrerwelt.png" alt="Lehrerwelt" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">lehrerwelt.de</h4>
|
|
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 2</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_04">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-2">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/aaplehrerwelt.webp">
|
|
<img src="images/400x400/aaplehrerwelt.png" alt="AAP Lehrerwelt" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">aap-lehrerwelt.de</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">WORDPRESS</span>
|
|
<span class="tag">CORPORATE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_05">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-3">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/aapsoftwaredevelopment.webp">
|
|
<img src="images/400x400/aapsoftwaredevelopment.png" alt="AAP Softwaredevelopment" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">aap-softwaredevelopment.hr</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">WORDPRESS</span>
|
|
<span class="tag">CORPORATE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_06">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-4">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/elk.webp">
|
|
<img src="images/400x400/elk.png" alt="Elk Verlag" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">elkverlag.ch</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 2</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_07">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-5">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/vashi.webp">
|
|
<img src="images/400x400/vashi.png" alt="Vashi" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">vashi.com</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 1</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_08">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-6">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/kroschke.webp">
|
|
<img src="images/400x400/kroschke.png" alt="Kroschke" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">kroschke.de</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 2</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_09">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-7">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/jj.webp">
|
|
<img src="images/400x400/jj.png" alt="Jebsen & Jessen" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">jebsen-jessen.de</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">WORDPRESS</span>
|
|
<span class="tag">CORPORATE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_10">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-8">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/fraktura.webp">
|
|
<img src="images/400x400/fraktura.png" alt="Fraktura" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">fraktura.hr</h4>
|
|
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 2</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_11">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-9">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/bebenova.webp">
|
|
<img src="images/400x400/bebenova.png" alt="BebeNova" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">bebenova.eu</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 2</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
<div class="project swing-in-top-fwd delay_12">
|
|
<div class="project-info">
|
|
<div class="project-more" data-modal-id="modal-10">+</div>
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/nkosijek.webp">
|
|
<img src="images/400x400/nkosijek.png" alt="NK Osijek shop" width="400" height="400">
|
|
</picture>
|
|
<h4 class="project-name">shop.nk-osijek.hr</h4>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">MAGENTO 1</span>
|
|
<span class="tag">E-COMMERCE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projects-modals">
|
|
<div id="modal-1" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/lehrerwelt.webp">
|
|
<source type="image/webp" srcset="images/800x800/lehrerwelt.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/lehrerwelt.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/lehrerwelt.png" alt="Lehrerwelt" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>lehrerwelt.de</h2>
|
|
<span class="green-tag">AAP SOFTWAREDEVELOPMENT</span>
|
|
<p>As a front-end developer for the flagship Magento 2 e-commerce store of AAP Softwaredevelopment, I had the opportunity to work on a wide range of tasks and responsibilities over the course of three years. These included everything from front-end optimization and improvements, to planning and discussing new features and updates, to working on major redesigns of different parts of the store. One of my key responsibilities was finding and delivering the best solutions for the store's stakeholders, which required a deep understanding of their needs and the e-commerce landscape. Additionally, I was constantly working to improve the store's legacy code and integrate third-party features, as well as regularly troubleshoot bugs, implement new features, and perform testing and deployment tasks. Overall, my time working on this flagship store allowed me to gain a wealth of experience in Magento 2 and e-commerce development, and helped me to become an expert in delivering high-quality solutions for clients in the industry.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">XML</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-2" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/aaplehrerwelt.webp">
|
|
<source type="image/webp" srcset="images/800x800/aaplehrerwelt.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/aaplehrerwelt.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/aaplehrerwelt.png" alt="AAP Lehrerwelt" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>aap-lehrerwelt.de</h2>
|
|
<span class="green-tag">AAP SOFTWAREDEVELOPMENT</span>
|
|
<p>As a front-end developer at AAP Softwaredevelopment, I had the opportunity to work on the development of the parent company's corporate website, built using WordPress. This project was a great opportunity for me to utilize my expertise in WordPress development and implement new and modern design elements. I was responsible for the entire project, from the initial design phase to the final deployment. Working with the popular _s or underscores theme, I was able to create a sleek and modern website that met the needs of the stakeholders. I also had the opportunity to work with the latest CSS features and the Gutenberg editor, creating custom blocks and implementing new features as per requirements. Overall, this project was a great experience that allowed me to further develop my skills in WordPress development and improve my abilities as a front-end developer.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Scss</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-3" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/aapsoftwaredevelopment.webp">
|
|
<source type="image/webp" srcset="images/800x800/aapsoftwaredevelopment.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/aapsoftwaredevelopment.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/lehrerwelt.png" alt="AAP Softwaredevelopment" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>aap-softwaredevelopment.hr</h2>
|
|
<span class="green-tag">AAP SOFTWAREDEVELOPMENT</span>
|
|
<p>As the lead developer for the AAP Softwaredevelopment corporate website, I was responsible for the entire project from start to finish. The website was built using WordPress, leveraging the Sage starter theme for a custom development flow. Utilizing the Blade template engine provided a familiar and efficient development experience. The website featured a modern design and incorporated various new technologies, such as custom blocks, to enhance the user experience. I also played a key role in updating and implementing new stakeholder requirements for the site. This project provided me with a valuable opportunity to expand my skills in WordPress development and work with a different technology stack.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Scss</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Blade</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-4" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/elk.webp">
|
|
<source type="image/webp" srcset="images/800x800/elk.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/elk.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/elk.png" alt="Elk Verlag" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>elkverlag.ch</h2>
|
|
<span class="green-tag">AAP SOFTWAREDEVELOPMENT</span>
|
|
<p>The Elk Verlag project was a challenging and rewarding experience for me as a Magento front-end developer at AAP Softwaredevelopment. I was heavily involved in the project from the design phase all the way through to deployment and ongoing maintenance. My responsibilities included building the Magento theme, implementing the design, and ensuring adherence to Magento standards and best practices. Collaborating with the backend developer, we were able to bring the entire project to fruition and deliver a successful migration to Magento 2. I also had the opportunity to handle any stakeholder requests and make any necessary updates to ensure the project's success. This project gave me valuable experience in working with Magento 2, as well as perfecting my skills in theme development and project management.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-5" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/vashi.webp">
|
|
<source type="image/webp" srcset="images/800x800/vashi.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/vashi.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/vashi.png" alt="Vashi" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>vashi.com</h2>
|
|
<span class="green-tag">VASHI - CIPHER</span>
|
|
<p>At Vashi, I had the opportunity to work on their e-commerce platform which was built on Magento 1 at the time. My responsibilities included preparatory research for the upcoming migration to Magento 2, as well as regular maintenance and enhancements of the existing web. The robust system provided a unique insight into the capabilities of Magento and was a valuable learning opportunity for me. One of the key features was the unique ring configurator, which allowed customers to fully customize their ring purchase. I was able to gain a great deal of knowledge and experience in a relatively short period of time, thanks to the challenging and diverse tasks I was given. Additionally, Vashi had a well-established development process in place which made it easy for me to work with the team and deliver on tasks efficiently.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS</span>
|
|
<span class="tag">JS</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Git</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-6" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/kroschke.webp">
|
|
<source type="image/webp" srcset="images/800x800/kroschke.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/kroschke.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/kroschke.png" alt="Kroschke" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>kroschke.de</h2>
|
|
<span class="green-tag">IMPADDO</span>
|
|
<p>As a developer on the Kroschke e-commerce project, I had the opportunity to work on their Magento 2 webshop that specializes in online vehicle registration. My responsibilities included bugfixes and implementing new features, as well as working with a team of developers to improve and optimize the webshop. One of the key segments I worked on was the company's license plate configurator, which required a great deal of attention to detail and technical expertise. Additionally, I was able to collaborate with the team to ensure that the webshop was user-friendly and provided a seamless experience for customers. Overall, it was a challenging and rewarding project that allowed me to further develop my skills in Magento 2 development and e-commerce optimization.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-7" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/jj.webp">
|
|
<source type="image/webp" srcset="images/800x800/jj.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/jj.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/jj.png" alt="Jebsen & Jessen" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>jebsen-jessen.de</h2>
|
|
<span class="green-tag">IMPADDO</span>
|
|
<p>As a frontend developer on the Jebsen & Jessen project, I had the opportunity to collaborate with an experienced backend developer to successfully plan, develop, and deploy a corporate website of the highest quality. Built on WordPress using the Sage starter theme, the development workflow was efficient and able to meet all client needs and specifications. The website was robust, featuring a variety of third-party features and a well-designed user interface. Utilizing fullpage.js for a seamless user experience, as well as incorporating animations, great attention to detail was paid to ensure the best possible outcome for the client. It was a challenging and rewarding experience working on this project, and I was able to further develop my skills in WordPress development and user interface design.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Scss</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Blade</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">Jira</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-8" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/fraktura.webp">
|
|
<source type="image/webp" srcset="images/800x800/fraktura.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/fraktura.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/fraktura.png" alt="Fraktura" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>fraktura.hr</h2>
|
|
<span class="green-tag">GAUSS DEVELOPMENT</span>
|
|
<p>As a front-end developer on the Fraktura e-commerce project, I had the opportunity to work on a ground-up build of their Magento 2 webshop. Collaborating with an experienced backend developer, we were able to successfully plan, develop and deploy the webshop to meet all of the client's needs and specifications. My involvement from the design phase allowed for a seamless development process and made it an enjoyable project to work on. With custom features and client requirements, this project provided an opportunity for me to further improve my Magento 2 skills and gain valuable experience in client relations, communication, and project workflow. The project also allowed me to gain valuable experience in utilizing custom features and implementing client requirements to create a unique and tailored e-commerce experience. </p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">ActiveCollab</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-9" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/bebenova.webp">
|
|
<source type="image/webp" srcset="images/800x800/bebenova.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/bebenova.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/bebenova.png" alt="BebeNova" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>bebenova.eu</h2>
|
|
<span class="green-tag">GAUSS DEVELOPMENT</span>
|
|
<p>As a front-end developer on the Bebenova e-commerce project, I had the opportunity to work on developing a theme and implementing the design for their online platform specializing in baby equipment. Despite not being an overly complex project, it provided a great opportunity for me to improve my skills in Magento 2 development. The clever and simple, yet detailed design of the project allowed me to focus on improving my project organization and overall code quality. In addition to developing the theme, my responsibilities also included implementing new features and addressing any general bugfixes to ensure a smooth user experience for customers. </p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">ActiveCollab</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-10" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/nkosijek.webp">
|
|
<source type="image/webp" srcset="images/800x800/nkosijek.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/nkosijek.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/nkosijek.png" alt="NK Osijek shop" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>shop.nk-osijek.hr</h2>
|
|
<span class="green-tag">GAUSS DEVELOPMENT</span>
|
|
<p>As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">ActiveCollab</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-11" class="project-modal">
|
|
<div class="project-modal__inner">
|
|
<span class="close-modal">×</span>
|
|
<div class="project-modal__wrapper">
|
|
<div class="project-modal__image">
|
|
<picture class="project-image">
|
|
<source type="image/webp" srcset="images/400x400/lehrerwelt.webp">
|
|
<source type="image/webp" srcset="images/800x800/lehrerwelt.webp" media="(min-width: 920px)">
|
|
<source srcset="images/800x800/lehrerwelt.png" media="(min-width: 920px)">
|
|
<img src="images/400x400/lehrerwelt.png" alt="Other" width="400" height="400">
|
|
</picture>
|
|
</div>
|
|
<div class="project-modal__content">
|
|
<h2>other</h2>
|
|
<span class="green-tag">other</span>
|
|
<p>As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.</p>
|
|
</div>
|
|
<div class="tags">
|
|
<span class="tag">HTML</span>
|
|
<span class="tag">CSS/Less</span>
|
|
<span class="tag">JS/jQuery</span>
|
|
<span class="tag">Xml</span>
|
|
<span class="tag">PHTML</span>
|
|
<span class="tag">Grunt</span>
|
|
<span class="tag">Git</span>
|
|
<span class="tag">ActiveCollab</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-modal__arrow prev"></div>
|
|
<div class="project-modal__arrow next"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="skills">
|
|
<div class="content">
|
|
<div class="wrapper">
|
|
<h2 class="title fade-in-left delay_01">SKILLS</h2>
|
|
<div class="skills-wrapper">
|
|
<!--<h3 class="subtitle fade-in-left delay_02">As a developer with a wide range of experience in the industry, I possess a diverse set of technical and non-technical skills.</h3>-->
|
|
<div class="skills technical fade-in-fwd delay_03">
|
|
|
|
<div class="skill fade-in-left delay_04">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/html.webp">
|
|
<img src="images/skills/html.png" class="skill-logo" alt="HTML" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">HTML</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_05">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/css.webp">
|
|
<img src="images/skills/css.png" class="skill-logo" alt="CSS" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">CSS</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_06">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/sass-less.webp">
|
|
<img src="images/skills/sass-less.png" class="skill-logo" alt="Sass/Less" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">Sass/Less</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_07">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/js.webp">
|
|
<img src="images/skills/js.png" class="skill-logo" alt="JavaScript" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">JavaScript</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_08">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/magento.webp">
|
|
<img src="images/skills/magento.png" class="skill-logo" alt="Magento" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">Magento</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_09">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/wordpress.webp">
|
|
<img src="images/skills/wordpress.png" class="skill-logo" alt="WordPress" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">WordPress</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_10">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/git.webp">
|
|
<img src="images/skills/git.png" class="skill-logo" alt="Git" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">Git</span>
|
|
</div>
|
|
<div class="skill fade-in-left delay_11">
|
|
<picture class="skill-logo">
|
|
<source type="image/webp" srcset="images/skills/lamp.webp">
|
|
<img src="images/skills/lamp.png" class="skill-logo" alt="Linux Apache Mysql Php" width="100" height="100">
|
|
</picture>
|
|
<span class="skill-name">Linux Apache Mysql Php</span>
|
|
</div>
|
|
</div>
|
|
<div class="other-skills fade-in-fwd delay_12">
|
|
<div class="skills non-technical fade-in-right delay_13">
|
|
<p>In terms of non-technical skills, I am an effective communicator and collaborator, able to work well with both technical and non-technical stakeholders. I am well-versed in project management, able to plan and execute projects efficiently and effectively. I am also a problem solver, able to think critically and creatively to find the best solutions to complex problems. Additionally, I have experience with client relations, able to understand and meet the needs of clients, and have a great attention to detail and quality in my work.</p>
|
|
<!--<div class="skill">Project management</div>
|
|
<div class="skill">Client relations</div>
|
|
<div class="skill">Communication</div>
|
|
<div class="skill">Problem solving</div>
|
|
<div class="skill">Attention to detail</div>
|
|
<div class="skill">Quality assurance</div>-->
|
|
</div>
|
|
<div class="skills responsibilities fade-in-left delay_14">
|
|
<h4>By utilizing both skill sets on a daily basis, I am able to effectively manage my responsibilities:</h4>
|
|
<ol>
|
|
<li>Developing and maintaining the front-end of the website using HTML, CSS, JavaScript (and Magento's front-end development framework).</li>
|
|
<li>Creating responsive design and ensuring that the website looks and functions correctly on different devices and screen sizes.</li>
|
|
<li>Building custom Magento modules and integrating third-party extensions to enhance the functionality of the website.</li>
|
|
<li>Collaborating with the back-end developers and designers to ensure that the website meets the project's requirements and goals.</li>
|
|
<li>Optimizing the website's performance and page speed.</li>
|
|
<li>Troubleshoot and fix any front-end related issues.</li>
|
|
<li>Ensuring cross-browser compatibility and that the website looks and functions as expected on all modern browsers.</li>
|
|
<li>Writing clean, organized and maintainable code.</li>
|
|
<li>Creating and maintaining documentation for the front-end development process.</li>
|
|
<li>Staying up-to-date with the latest front-end development best practices and technologies.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |