647 lines
29 KiB
HTML
647 lines
29 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||
|
|
|
||
|
|
<title>Lonely Bootstrap Template - Index</title>
|
||
|
|
<meta content="" name="description">
|
||
|
|
<meta content="" name="keywords">
|
||
|
|
|
||
|
|
<!-- Favicons -->
|
||
|
|
<link href="assets/img/favicon.png" rel="icon">
|
||
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
||
|
|
|
||
|
|
<!-- Google Fonts -->
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,500,500i,600,600i,700,700i&subset=cyrillic" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- Vendor CSS Files -->
|
||
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||
|
|
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
||
|
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
||
|
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- Template Main CSS File -->
|
||
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- =======================================================
|
||
|
|
* Template Name: Lonely - v4.1.0
|
||
|
|
* Template URL: https://bootstrapmade.com/free-html-bootstrap-template-lonely/
|
||
|
|
* Author: BootstrapMade.com
|
||
|
|
* License: https://bootstrapmade.com/license/
|
||
|
|
======================================================== -->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- ======= Hero Section ======= -->
|
||
|
|
<section id="hero" class="d-flex flex-column align-items-center justify-content-center">
|
||
|
|
<h1>Hi, I'm Sarah!</h1>
|
||
|
|
<h2>I am an application developer and occasional artist.</h2>
|
||
|
|
<a href="#about" class="btn-get-started scrollto"><i class="bi bi-chevron-double-down"></i></a>
|
||
|
|
</section><!-- End Hero -->
|
||
|
|
|
||
|
|
<!-- ======= Header ======= -->
|
||
|
|
<header id="header" class="d-flex align-items-center">
|
||
|
|
<div class="container d-flex align-items-center justify-content-between">
|
||
|
|
|
||
|
|
<div class="logo">
|
||
|
|
<h1><a href="index.html">Sarah Ziesel</a></h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav id="navbar" class="navbar">
|
||
|
|
<ul>
|
||
|
|
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
|
||
|
|
<li><a class="nav-link scrollto" href="#about">About</a></li>
|
||
|
|
<li><a class="nav-link scrollto" href="#resume">Resume</a></li>
|
||
|
|
<li><a class="nav-link scrollto" href="#services">Services</a></li>
|
||
|
|
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
|
||
|
|
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
<i class="bi bi-list mobile-nav-toggle"></i>
|
||
|
|
</nav><!-- .navbar -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</header><!-- End Header -->
|
||
|
|
|
||
|
|
<main id="main">
|
||
|
|
|
||
|
|
<!-- ======= About Section ======= -->
|
||
|
|
<section id="about" class="about">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="row no-gutters">
|
||
|
|
<div class="image col-xl-5 d-flex align-items-stretch justify-content-center justify-content-lg-start"></div>
|
||
|
|
<div class="col-xl-7 ps-0 ps-lg-5 pe-lg-1 d-flex align-items-stretch">
|
||
|
|
<div class="content d-flex flex-column justify-content-center">
|
||
|
|
<h3>About Me</h3>
|
||
|
|
<p>
|
||
|
|
I'm Sarah. I live in Innsbruck, Austria with my wife and our two cats.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
I've tried out a bunch of professions before, been a hotel receptionist, a
|
||
|
|
customer support agent, in technical support and then finally ended up with
|
||
|
|
software development. Because of my desire to do all things at once (or at least
|
||
|
|
in quick alteration) to keep it most interesting, I've decided to be a full stack
|
||
|
|
developer for web based applications. i love thinking about solving everyday
|
||
|
|
issues or facilitating tasks through software, and I understand and relate to
|
||
|
|
the desire to have those processes go over quickly and smoothly. Having been in
|
||
|
|
customer support, I definitely still speak "user" as well.
|
||
|
|
</p>
|
||
|
|
<!--div class="row">
|
||
|
|
<div class="col-md-6 d-md-flex align-items-md-stretch">
|
||
|
|
<div class="count-box">
|
||
|
|
<i class="bi bi-emoji-smile"></i>
|
||
|
|
<span data-purecounter-start="0" data-purecounter-end="65" data-purecounter-duration="1" class="purecounter"></span>
|
||
|
|
<p><strong>Happy Clients</strong> consequuntur voluptas nostrum aliquid ipsam architecto ut.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6 d-md-flex align-items-md-stretch">
|
||
|
|
<div class="count-box">
|
||
|
|
<i class="bi bi-journal-richtext"></i>
|
||
|
|
<span data-purecounter-start="0" data-purecounter-end="85" data-purecounter-duration="1" class="purecounter"></span>
|
||
|
|
<p><strong>Projects</strong> adipisci atque cum quia aspernatur totam laudantium et quia dere tan</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6 d-md-flex align-items-md-stretch">
|
||
|
|
<div class="count-box">
|
||
|
|
<i class="bi bi-clock"></i>
|
||
|
|
<span data-purecounter-start="0" data-purecounter-end="12" data-purecounter-duration="1" class="purecounter"></span>
|
||
|
|
<p><strong>Years of experience</strong> aut commodi quaerat modi aliquam nam ducimus aut voluptate non vel</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6 d-md-flex align-items-md-stretch">
|
||
|
|
<div class="count-box">
|
||
|
|
<i class="bi bi-award"></i>
|
||
|
|
<span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
|
||
|
|
<p><strong>Awards</strong> rerum asperiores dolor alias quo reprehenderit eum et nemo pad der</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div--><!-- End .content-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End About Section -->
|
||
|
|
|
||
|
|
<!-- ======= Skills Section ======= -->
|
||
|
|
<section id="skills" class="skills section-bg">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="section-title">
|
||
|
|
<h2>Current Passions</h2>
|
||
|
|
<p>I do the things I want to do, and thus I get better at them. So for me, if something is extra enjoyable, I'm usually proportionally more skilled at it or in the process of becoming so.</p>
|
||
|
|
<p>This list is definitely not exhaustive, and it will always keep changing and getting longer.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row skills-content">
|
||
|
|
|
||
|
|
<div class="col-lg-6">
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">HTML & CSS <i class="val">55%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">JavaScript, Typescript & React JS <i class="val">90%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">GoLang <i class="val">75%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Databases (MySQL, PostgreSQL) <i class="val">80%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">UI/UX <i class="val">40%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-6">
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Painting <i class="val">100%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Drawing <i class="val">80%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Crafting <i class="val">75%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Writing <i class="val">70%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<span class="skill">Singing <i class="val">60%</i></span>
|
||
|
|
<div class="progress-bar-wrap">
|
||
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End Skills Section -->
|
||
|
|
|
||
|
|
<!-- ======= Resume Section ======= -->
|
||
|
|
<section id="resume" class="resume section-bg">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="section-title">
|
||
|
|
<h2>Resume</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<h3 class="resume-title">Currently</h3>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Freelance Developer</h4>
|
||
|
|
<p><em>Fullstack Desktop Application Development</em></p>
|
||
|
|
<p>
|
||
|
|
I'm interested to work with and contribute to projects and/or organizations that value social impact, diversity and compassion.
|
||
|
|
</p>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Innsbruck, Austria</li>
|
||
|
|
<li>sarah@sudo.ca</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Artist</h4>
|
||
|
|
<p><em>Artwork for Print On Demand Platforms</em></p>
|
||
|
|
<p>I find it satisfying to create things, especially tangible ones, and I want to share with the world. Fine me at one of my shops on various platforms.</p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Ko-fi</li>
|
||
|
|
<li>RedBubble</li>
|
||
|
|
<li>Teepublic</li>
|
||
|
|
<li>DeviantArt</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 class="resume-title">Education</h3>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Computer Science</h4>
|
||
|
|
<h5>2016 - 2018</h5>
|
||
|
|
<p><em>University of Innsbruck, Austria</em></p>
|
||
|
|
<p>Studying Computer Science for 4 semesters has given me a good foundational knowledge in theoretic concepts used in Software Development and working with computers, including Data Sctructures, various Programming Paradigms and Technological Foundations.</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Translation Studies</h4>
|
||
|
|
<h5>2008 - 2012</h5>
|
||
|
|
<p><em>University of Innsbruck, Austria</em></p>
|
||
|
|
<p>In the course of studying translation I learned Russian and French in addition to improving my fluency in English.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<h3 class="resume-title">Professional Experience</h3>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Web Developer</h4>
|
||
|
|
<h5>2018 - 2020</h5>
|
||
|
|
<p><em>Styletronic, Innsbruck, Austria </em></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Frontend Developer for Logistics Administration Web Application based on React JS</li>
|
||
|
|
<li>Implementation of Microservices in GoLang, using GORM and Echo</li>
|
||
|
|
<li>Member of a small, self-managed project team</li>
|
||
|
|
<li>Direct communication and evaluation with clients and testers</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Internship</h4>
|
||
|
|
<h5>2016 - 2017</h5>
|
||
|
|
<p><em>Swarovski, Hall in Tirol, Austria</em></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Implementation of a tutorial system</li>
|
||
|
|
<li>Query setup for data migration</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Technical Customer Support Agent</h4>
|
||
|
|
<h5>2017 - 2018 & 2014-2016</h5>
|
||
|
|
<p><em>Easybooking, Innsbruck, Austria</em></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Fulfillment/Setup of the Easybooking Hotel Software for clients</li>
|
||
|
|
<li>First Support Team member & Trainer for other Customer Support Agents</li>
|
||
|
|
<li>Second/Third Level Support, including working with SQL queries</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Hotel Receptionist</h4>
|
||
|
|
<h5>2013 - 2014</h5>
|
||
|
|
<p><em>Adlers Hotel, Innsbruck, Austria</em></p>
|
||
|
|
<p><em>Leipziger Hof, Innsbruck, Austria</em></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Front Desk</li>
|
||
|
|
<li>a little bit of waitressing</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="resume-item">
|
||
|
|
<h4>Ticket Sales Agent</h4>
|
||
|
|
<h5>2008 - 2012</h5>
|
||
|
|
<p><em>Tiroler Festspiele Erl, Innsbruck, Austria</em></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Ticket Sales</li>
|
||
|
|
<li>Office Administration Assistant</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End Resume Section -->
|
||
|
|
|
||
|
|
<!-- ======= Services Section ======= -->
|
||
|
|
<section id="services" class="services section-bg">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="section-title">
|
||
|
|
<h2>Services</h2>
|
||
|
|
<p>I am mainly a software developer and that's what I expect to work on with clients. There's various situations I can envision that we could work on together.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||
|
|
<div class="icon-box">
|
||
|
|
<div class="icon"><i class="bi bi-tools"></i></div>
|
||
|
|
<h4 class="title"><a href="">Customized Application Development</a></h4>
|
||
|
|
<p class="description">Are you looking for a customized application?</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||
|
|
<div class="icon-box">
|
||
|
|
<div class="icon"><i class="bi bi-lightbulb"></i></div>
|
||
|
|
<h4 class="title"><a href="">Implementation of a Software Concept</a></h4>
|
||
|
|
<p class="description">Do you have a brillant idea for an app but can't code yourself?</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||
|
|
<div class="icon-box">
|
||
|
|
<div class="icon"><i class="bi bi-controller"></i></div>
|
||
|
|
<h4 class="title"><a href="">Partnering up for a Development Project</a></h4>
|
||
|
|
<p class="description">Are you a developer with an idea that you need a partner in crime for? (Be it software, an app or even a game.)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||
|
|
<div class="icon-box">
|
||
|
|
<div class="icon"><i class="bx bx-brush"></i></div>
|
||
|
|
<h4 class="title"><a href="">Creative Endeavors</a></h4>
|
||
|
|
<p class="description">Do you have a creative project in mind that you think I could contribute to? Whether it's with coding or artworks or anything else I might have any expertise in, feel free to reach out!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End Services Section -->
|
||
|
|
|
||
|
|
<!-- ======= Portfolio Section ======= -->
|
||
|
|
<section id="portfolio" class="portfolio section-bg">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="section-title">
|
||
|
|
<h2>Art Portfolio</h2>
|
||
|
|
<p>Here's some of the artwork I've created. Click the links to purchase them as prints.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12 d-flex justify-content-center">
|
||
|
|
<ul id="portfolio-flters">
|
||
|
|
<li data-filter="*" class="filter-active">All</li>
|
||
|
|
<li data-filter=".filter-fanart">Fanart</li>
|
||
|
|
<li data-filter=".filter-portrait">Potrait</li>
|
||
|
|
<li data-filter=".filter-original">Original</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row portfolio-container">
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-portrait">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/matt-sunglasses_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Sunglasses</h4>
|
||
|
|
<p>Matt (My Wife) In Watercolor and Gouache</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/matt-sunglasses.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Sunglasses"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-portrait">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/matt_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Cozy</h4>
|
||
|
|
<p>Matt (My Wife) in Watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/matt.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Cozy"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-fanart">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/rokka_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Be My Valentine</h4>
|
||
|
|
<p>Rokka Asahi from BanG Dream!, Alcohol Markers</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/rokka.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Be My Valentine"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-portrait">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/lolita_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Blush</h4>
|
||
|
|
<p>Lolita Fashion Model In Watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/lolita.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Blush"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-fanart">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/gem-tessa_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Tourmaline</h4>
|
||
|
|
<p>My girlfriend Tessa's gemsona in Watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/gem-tessa.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Tourmaline"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-fanart">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/gem-spinel_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Spinel</h4>
|
||
|
|
<p>My own gemsona in watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/gem-spinel.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Spinel"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-fanart">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/gem-matt_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Amethyst</h4>
|
||
|
|
<p>My wife Matt's gemsona in watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/gem-matt.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Amethyst"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-fanart">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/ruby-sapphire.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Ruby & Sapphire</h4>
|
||
|
|
<p>Ruby and Sapphire from Steven Universe in Watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/ruby-sapphire.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Ruby & Sapphire"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-6 portfolio-item filter-other">
|
||
|
|
<div class="portfolio-wrap">
|
||
|
|
<img src="assets/img/portfolio/sky_thumbnail.jpg" class="img-fluid" alt="">
|
||
|
|
<div class="portfolio-info">
|
||
|
|
<h4>Sky</h4>
|
||
|
|
<p>Painting in Watercolor</p>
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-links">
|
||
|
|
<a href="assets/img/portfolio/sky.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Sky"><i class="bx bx-plus"></i></a>
|
||
|
|
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End Portfolio Section -->
|
||
|
|
|
||
|
|
<!-- ======= Contact Section ======= -->
|
||
|
|
<section id="contact" class="contact section-bg">
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="section-title">
|
||
|
|
<h2>Contact</h2>
|
||
|
|
<p>Do you have any questions for me or a project you would like to work with me on? Please feel free to contact me!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-4">
|
||
|
|
<div class="contact-about">
|
||
|
|
<div class="social-links">
|
||
|
|
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-3 col-md-4">
|
||
|
|
<div class="info">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<i class="bi bi-geo-alt"></i>
|
||
|
|
<p>6020 Innsbruck</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center mt-4">
|
||
|
|
<i class="bi bi-envelope"></i>
|
||
|
|
<p>sarah@sudo.ca</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center mt-4">
|
||
|
|
<i class="bi bi-phone"></i>
|
||
|
|
<p>+43 650 5873212</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-5 col-md-8">
|
||
|
|
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mt-3">
|
||
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mt-3">
|
||
|
|
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mt-3">
|
||
|
|
<textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="my-3">
|
||
|
|
<div class="loading">Loading</div>
|
||
|
|
<div class="error-message"></div>
|
||
|
|
<div class="sent-message">Your message has been sent. Thank you!</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-center"><button type="submit">Send Message</button></div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section><!-- End Contact Section -->
|
||
|
|
|
||
|
|
</main><!-- End #main -->
|
||
|
|
|
||
|
|
<!-- ======= Footer ======= -->
|
||
|
|
<footer id="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="copyright">
|
||
|
|
© Copyright <strong><span>Lonely</span></strong>. All Rights Reserved
|
||
|
|
</div>
|
||
|
|
<div class="credits">
|
||
|
|
<!-- All the links in the footer should remain intact. -->
|
||
|
|
<!-- You can delete the links only if you purchased the pro version. -->
|
||
|
|
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
||
|
|
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-html-bootstrap-template-lonely/ -->
|
||
|
|
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer><!-- End Footer -->
|
||
|
|
|
||
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||
|
|
|
||
|
|
<!-- Vendor JS Files -->
|
||
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
||
|
|
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
||
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||
|
|
<script src="assets/vendor/purecounter/purecounter.js"></script>
|
||
|
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||
|
|
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
|
||
|
|
|
||
|
|
<!-- Template Main JS File -->
|
||
|
|
<script src="assets/js/main.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|