pohovor-public/ovlach_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
7934c5bfaa
ovlach_frontend/templates/default.html.tera
Ondrej Vlach e6fc26c1fc wip
2023-11-26 17:31:20 +01:00

303 lines
17 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base" %}
{% block content %}
<div class="page-content">
<div class="container">
<div class="resume-container">
<div class="shadow-1-strong bg-white my-5" id="intro">
<div class="bg-info text-white">
<div class="cover bg-image"><img src="{{ "images/header-background.jpg" | static(static_host = static_host) }}" />
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7);backdrop-filter: blur(2px);">
<div class="text-center p-5">
<div class="avatar p-1"><img class="img-thumbnail shadow-2-strong" src="images/avatar.jpg" width="160" height="160"/></div>
<div class="header-bio mt-3">
<div data-aos="zoom-in" data-aos-delay="0">
<h2 class="h1">Walter Patterson</h2>
<p>Front-end Developer and Graphic Designer</p>
</div>
<div class="header-social mb-3 d-print-none" data-aos="zoom-in" data-aos-delay="200">
<nav role="navigation">
<ul class="nav justify-content-center">
<li class="nav-item"><a class="nav-link" href="https://twitter.com/templateflip" title="Twitter"><i class="fab fa-twitter"></i><span class="menu-title sr-only">Twitter</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/templateflip" title="Facebook"><i class="fab fa-facebook"></i><span class="menu-title sr-only">Facebook</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="https://www.instagram.com/templateflip" title="Instagram"><i class="fab fa-instagram"></i><span class="menu-title sr-only">Instagram</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="https://github.com/templateflip" title="Github"><i class="fab fa-github"></i><span class="menu-title sr-only">Github</span></a>
</li>
</ul>
</nav>
</div>
<div class="d-print-none"><a class="btn btn-outline-light btn-lg shadow-sm mt-1 me-3" href="material-resume.pdf" data-aos="fade-right" data-aos-delay="700">Download CV</a><a class="btn btn-info btn-lg shadow-sm mt-1" href="#contact" data-aos="fade-left" data-aos-delay="700">Hire Me</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="about">
<div class="about-section">
<div class="row">
<div class="col-md-6">
<h2 class="h2 fw-light mb-4">About Me</h2>
<p>Hello! I’m Walter Patterson. I am passionate about UI/UX design and Web Design. I am a skilled <strong>front-end developer</strong> and master of graphic design tools such as Photoshop and Sketch. I am a quick learner and a team worker that gets the job done.</p>
<p>I can easily capitalize on low hanging fruits and quickly maximize timely deliverables for real-time schemas.</p>
</div>
<div class="col-md-5 offset-lg-1">
<div class="row mt-2">
<h2 class="h2 fw-light mb-4">Bio</h2>
<div class="col-sm-5">
<div class="pb-2 fw-bolder"><i class="far fa-calendar-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Age</div>
</div>
<div class="col-sm-7">
<div class="pb-2">28</div>
</div>
<div class="col-sm-5">
<div class="pb-2 fw-bolder"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Email</div>
</div>
<div class="col-sm-7">
<div class="pb-2">walter@company.com</div>
</div>
<div class="col-sm-5">
<div class="pb-2 fw-bolder"><i class="fab fa-skype pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Skype</div>
</div>
<div class="col-sm-7">
<div class="pb-2">username@skype.com</div>
</div>
<div class="col-sm-5">
<div class="pb-2 fw-bolder"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Phone</div>
</div>
<div class="col-sm-7">
<div class="pb-2">+0718-111-0011</div>
</div>
<div class="col-sm-5">
<div class="pb-2 fw-bolder"><i class="fas fa-map-marker-alt pe-2 text-muted" style="width:24px;opacity:0.85;"></i> Address</div>
</div>
<div class="col-sm-7">
<div class="pb-2">131 W, City Center, New York, U.S.A</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="skills">
<div class="skills-section">
<h2 class="h2 fw-light mb-4">Professional Skills</h2>
<div class="row">
<div class="col-md-6">
<div class="mb-3"><span class="fw-bolder">HTML</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="100" data-aos-anchor=".skills-section" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">Master</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">CSS</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="200" data-aos-anchor=".skills-section" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">Expert</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">JavaScript</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="300" data-aos-anchor=".skills-section" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Advance</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">WordPress</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-info" role="progressbar" data-aos="zoom-in-right" data-aos-delay="300" data-aos-anchor=".skills-section" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Advance</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3"><span class="fw-bolder">Adobe Photoshop</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-secondary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="400" data-aos-anchor=".skills-section" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">Master</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">Adobe Illustrator</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-secondary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="400" data-aos-anchor=".skills-section" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">Expert</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">Sketch</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-secondary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="500" data-aos-anchor=".skills-section" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">Expert</div>
</div>
</div>
<div class="mb-3"><span class="fw-bolder">Adobe XD</span>
<div class="progress my-2 rounded" style="height: 20px">
<div class="progress-bar bg-secondary" role="progressbar" data-aos="zoom-in-right" data-aos-delay="600" data-aos-anchor=".skills-section" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Beginner</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="experience">
<div class="work-experience-section">
<h2 class="h2 fw-light mb-4">Work Experience</h2>
<div class="timeline">
<div class="timeline-card timeline-card-info" data-aos="fade-in" data-aos-delay="0">
<div class="timeline-head px-4 pt-3">
<div class="h5">Frontend Developer <span class="text-muted h6">at Creative Agency</span></div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">May, 2015 - Present</div>
<div>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</div>
</div>
</div>
<div class="timeline-card timeline-card-info" data-aos="fade-in" data-aos-delay="200">
<div class="timeline-head px-4 pt-3">
<div class="h5">Graphic Designer <span class="text-muted h6">at Design Studio</span></div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">June, 2013 - May, 2015</div>
<div>Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</div>
</div>
</div>
<div class="timeline-card timeline-card-info" data-aos="fade-in" data-aos-delay="400">
<div class="timeline-head px-4 pt-3">
<div class="h5">Junior Web Developer <span class="text-muted h6">at Indie Studio</span></div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">Jan, 2011 - May, 2013</div>
<div>User generated content in real-time will have multiple touchpoints for offshoring. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="education">
<div class="education-section">
<h2 class="h2 fw-light mb-4">Education</h2>
<div class="timeline">
<div class="timeline-card timeline-card-success" data-aos="fade-in" data-aos-delay="0">
<div class="timeline-head px-4 pt-3">
<div class="h5">Masters in Information Technology <span class="text-muted h6">from International University</span> </div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">2011 - 2013</div>
<div>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</div>
</div>
</div>
<div class="timeline-card timeline-card-success" data-aos="fade-in" data-aos-delay="200">
<div class="timeline-head px-4 pt-3">
<div class="h5">Bachelor of Computer Science <span class="text-muted h6">from Regional College</span> </div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">2007 - 2011</div>
<div>Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</div>
</div>
</div>
<div class="timeline-card timeline-card-success" data-aos="fade-in" data-aos-delay="400">
<div class="timeline-head px-4 pt-3">
<div class="h5">Science and Mathematics <span class="text-muted h6">from Mt. High Scool</span> </div>
</div>
<div class="timeline-body px-4 pb-4">
<div class="text-muted text-small mb-3">1995 - 2007</div>
<div>User generated content in real-time will have multiple touchpoints for offshoring. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5 d-print-none" id="portfolio">
<div class="portfolio-section">
<h2 class="h2 fw-light mb-4">Portfolio</h2>
<div class="row g-0">
<div class="col-md-6"><a href="https://dribbble.com/" target="_blank"><img class="img-fluid" src="images/project-1.jpg" width="800" height="500"/></a></div>
<div class="col-md-6 d-flex align-items-center" data-aos="fade-left" data-aos-delay="100">
<div class="m-4 mt-md-2">
<p class="text-teal text-small">Frontend / HTML / CSS / JavaScript</p>
<h3>Photo Agency Website</h3>
<p class="text-muted">Built highly performant website front end for a Photography agency. Delivered codebase in HTML, CSS and modern JavaScript.</p>
</div>
</div>
</div>
<div class="row g-0 portfolio-reverse">
<div class="col-md-6 d-flex align-items-center" data-aos="fade-right" data-aos-delay="100">
<div class="m-4 mt-md-2 text-end">
<p class="text-teal text-small">Graphic Design / Photoshop / Sketch</p>
<h3>Restaurant Website Design</h3>
<p class="text-muted">Web design for popular resturant chain involving complex layouts done in both Photoshop and Sketch. Collaborated with back-end and front-end team for finished product.</p>
</div>
</div>
<div class="col-md-6"><a href="https://www.behance.net/" target="_blank"><img class="img-fluid" src="images/project-2.jpg" width="800" height="500"/></a></div>
</div>
<div class="row g-0">
<div class="col-md-6"><a href="https://dribbble.com/" target="_blank"><img class="img-fluid" src="images/project-3.jpg" width="800" height="500"/></a></div>
<div class="col-md-6 d-flex align-items-center" data-aos="fade-left" data-aos-delay="100">
<div class="m-4 mt-md-2">
<p class="text-teal text-small">Frontend / HTML / CSS / JavaScript</p>
<h3>E-Commerce Website</h3>
<p class="text-muted">Built highly performant website for an E-commerce Portal. Worked with back-end team to timely deliver codebase in HTML, CSS and modern JavaScript.</p>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="references">
<div class="reference-section">
<h2 class="h2 fw-light mb-4">References</h2>
<div class="row">
<div class="col-md-6">
<div class="d-flex mb-2">
<div class="avatar"><img src="images/reference-image-1.jpg" width="60" height="60"/></div>
<div class="header-bio m-3 mb-0">
<h3 class="h6 mb-1" data-aos="fade-left" data-aos-delay="0">Aiyana</h3>
<p class="text-muted text-small" data-aos="fade-left" data-aos-delay="100">CEO / Web Design Company</p>
</div>
</div>
<div class="d-flex"><i class="text-secondary fas fa-quote-left"></i>
<p class="lead mx-2" data-aos="fade-left" data-aos-delay="100">Walter displays exemplary professionalism and is able to take on challenges. He learns quickly and is an asset to any team.</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex mb-2">
<div class="avatar"><img src="images/reference-image-2.jpg" width="60" height="60"/></div>
<div class="header-bio m-3 mb-0">
<h3 class="h6 mb-1" data-aos="fade-left" data-aos-delay="0">Alexander</h3>
<p class="text-muted text-small" data-aos="fade-left" data-aos-delay="100">Front-end Developer / Web Design Company</p>
</div>
</div>
<div class="d-flex"><i class="text-secondary fas fa-quote-left"></i>
<p class="lead mx-2" data-aos="fade-left" data-aos-delay="100">Walter is a great co-worker and problem solver. He is quick to extend his helping hand and makes a good team player.</p>
</div>
</div>
</div>
</div>
</div>
<div class="shadow-1-strong bg-white my-5 p-5" id="contact">
<div class="contant-section">
<h2 class="h2 fw-light text mb-4">Contact</h2>
<div class="row mb-4">
<div class="col-md-5" data-aos="fade-left" data-aos-delay="200">
<div class="mt-1">
<div class="h6"><i class="fas fa-phone pe-2 text-muted" style="width:24px;opacity:0.85;"></i> +0718-111-0011</div>
<div class="h6"><i class="far fa-envelope pe-2 text-muted" style="width:24px;opacity:0.85;"></i> walter@company.com</div>
</div>
<div class="mt-5 d-print-none"><form action="https://formspree.io/your@email.com"
method="POST">
<div class="form-outline mb-4">
<input type="text" id="name" class="form-control" required/>
<label class="form-label" for="name">Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control" required/>
<label class="form-label" for="email">Email address</label>
</div>
<div class="form-outline mb-4">
<textarea class="form-control" style="resize: none;" id="message" rows="4" required></textarea>
<label class="form-label" for="message">Message</label>
</div>
<button class="btn btn-info btn-block mb-4" type="submit">Send</button>
</form>
</div>
</div>
<div class="col-md-7 d-print-none" data-aos="zoom-in" data-aos-delay="100"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d496.9774799129763!2d-73.98032087190995!3d40.765927126473905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258f9cfcb250d%3A0xdb570ddcb766e3a8!2sNew%20York%20City%20Center!5e0!3m2!1sen!2sin!4v1614183731149!5m2!1sen!2sin" width="500" height="400" style="border:0;width:100%;" allowfullscreen="" loading="lazy"></iframe></div>
</div>
</div>
</div>
</div></div>
</div>
{% endblock content %}
Reference in New Issue View Git Blame Copy Permalink