-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 26.4 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Roman Matviy, A Full-stack Developer from Lviv, Ukraine"><meta name="keywords" content="content"><title>Roman Matviy | A Ukraine/Lviv Full-stack Developer's Portfolio</title><link rel="preload" href="https://fonts.googleapis.com/css?family=Josefin+Sans%7CLora%7CMerriweather%7CRoboto&display=swap" type="font/woff2" as="font" crossorigin="anonymous"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" as="script"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js" as="script"><link rel="preload" href="./js/vue.min.js" as="script"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" as="script"><link rel="preload" href="./js/main.min.js" as="script"><link rel="preload" href="./js/animhead.min.js" as="script"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js" as="script"><link rel="preload" href="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDLVfUDe3mgO5zuGojTYlQ8h_ik7Y0rRs&callback=initMap" as="script"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></noscript><link rel="preload" href="./css/style.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="./css/style.min.css"></noscript><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></noscript><link rel="icon" type="image/png" href="./img/logo/favicon.png"><noscript><style>#loader-wrapper, #loader-wrapper .loader-section, #loader-wrapper .loader-section.section-left, #loader-wrapper .loader-section.section-right{ display:none;} </style></noscript></head><body><div id="loader-wrapper"><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div class="intro" style="z-index:1;"><div class="tt-text-intro"><h1 class="tt-headline letters rotate-2"><span class="tt-words-wrapper author"><b class="is-visible" style="opacity:1;"><i class="in"><em>I</em></i><i class="in"><em>'</em></i><i class="in"><em>m</em></i><i class="in"><em> </em></i><i class="in"><em>R</em></i><i class="in"><em>o</em></i><i class="in"><em>m</em></i><i class="in"><em>a</em><em>n</em></i><i class="in"><em> </em></i><i class="in"><em>M</em></i><i class="in"><em>a</em></i><i class="in"><em>t</em><em>v</em><em>i</em><em>y</em></i></b><b style="opacity:1;"><i class="out"><em>I</em></i><i class="out"><em>'</em></i><i class="out"><em>m</em></i><i class="out"><em> </em></i><i class="out"><em>F</em></i><i class="out"><em>r</em></i><i class="out"><em>o</em></i><i class="out"><em>m</em></i><i class="out"><em> </em></i><i class="out"><em>U</em></i><i class="out"><em>k</em></i><i class="out"><em>r</em></i><i class="out"><em>a</em></i><i class="out"><em>i</em></i><i class="out"><em>n</em></i><i class="out"><em>e</em></i></b></span></h1></div><h2 class="main-subtitle center tt-sub-intro">Full-stack developer</h2><br></div></div><div id="Roman_Matviy"><div class="top"><a href="#top"><i class="icon arrow_up"></i></a></div><header id="top" class="header"><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" :href="'https://' + about.site">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#about"><b>About Me</b></a></li><li class="nav-item"><a class="nav-link" href="pdf/Roman.Matviy.CV.pdf"><b>Resume</b></a></li><li class="nav-item"><a class="nav-link" href="#skillset">Skills</a></li><li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li><li class="nav-item"><a class="nav-link" href="#certificates">Certificates</a></li><li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More </a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#languages">My Languages</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#links">My Links</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#materials">Additional materials</a></div></li></ul></div><a class="nav-link sicon" v-for="(social, index) of socials" :href="social.url" target="_blank"><icon :class="social.icon"></icon></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></nav><section id="home" class="cover-two"><div class="clouds"></div><div class="overlay"></div><div class="intro"><div class="tt-text-intro"><h1 class="tt-headline letters rotate-2" style="z-index:100"><span class="tt-words-wrapper author" style="width:100% !important"><b class="is-visible" style="opacity:1;"><i class="in"><em>I</em></i><i class="in"><em>'</em></i><i class="in"><em>m</em></i><i class="in"><em> </em></i><i class="in"><em>R</em></i><i class="in"><em>o</em></i><i class="in"><em>m</em></i><i class="in"><em>a</em><em>n</em></i><i class="in"><em> </em></i><i class="in"><em>M</em></i><i class="in"><em>a</em></i><i class="in"><em>t</em><em>v</em><em>i</em><em>y</em></i></b><b style="opacity:1;"><i class="out"><em>I</em></i><i class="out"><em>'</em></i><i class="out"><em>m</em></i><i class="out"><em> </em></i><i class="out"><em>F</em></i><i class="out"><em>r</em></i><i class="out"><em>o</em></i><i class="out"><em>m</em></i><i class="out"><em> </em></i><i class="out"><em>U</em></i><i class="out"><em>k</em></i><i class="out"><em>r</em></i><i class="out"><em>a</em></i><i class="out"><em>i</em></i><i class="out"><em>n</em></i><i class="out"><em>e</em></i></b></span></h1></div><h2 class="main-subtitle center tt-sub-intro">Full-stack developer</h2><br><a v-if="show" v-on:click="show=!show" class="btn btn-lg textBTN bg-transparent" href="#all"><span style="color:#fff;"><i class="icon flask"></i>WORK EXPERIENCE </span></a><a v-if="!show" v-on:click="show=!show" class="btn btn-lg textBTN bg-transparent" href="mailto:roman@matviy.pp.ua"><span style="color:#fff;"><i class="icon briefcase"></i>Hire Me </span></a></div></section><a v-if="show" href="#about" class="arrow bounce"><i class="icon arrow_down"></i></a><a v-if="!show" href="#allProjects" class="arrow bounce"><i class="icon arrow_down"></i></a></header><section v-if="show" id="about" class="about pt-5 pb-4"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight">About me</h2><h2 class="subtitle d-none d-md-block">About</h2></div><div class="abouts" v-for="(aboutMe, index) of abouts"><div class="row"><div class="image-container col-lg-5 col-md-12 col-12 mr-md-5 mr-0 mt-md-0 mt-4 wow bounceInRight align-self-center" v-on:click="modalOpen"><img data-src="img/me/blackMe.jpg" class="lazyload mt-3 mb-3 wow bounceInLeft d-block img-fluid Roman_Matviy" title="Full-stack developer Ukraine/Lviv Roman Matviy" alt="Full-stack developer Ukraine/Lviv Roman Matviy" /></div><div class="col-lg-6 col-md-12 col-12 p-5 align-self-center"><div class="row align-content-center mb-5"><div class="text align-content-center"><p class="text size inline"><span>Hello World ;)</span><br>My name is<h2 class="name inline"><span class="wow animated bounceInRight">Roman</span> <span class="wow animated bounceInLeft">Matviy</span> </h2>I'm a ukrainian <h3 class="profession inline">Full-stack web developer</h3> living in <strong>Lviv</strong>city, <strong>Ukraine</strong>. I have a passion for creating challenging, intuitive and beautiful products. I like to work on the client-side, designing interfaces with CSS and programming awesome experiences with JavaScript. I can write solid and well-organized code from scratch, and I have a passion for exploring new and emerging web technologies. I ensure that my projects are optimised, responsive, cross-browser compatible and accessible for users and search engines. Beside that, I like to create stuff with my hands. <br>I want to be involved in projects that I can be proud of, join an amazing team and advance my development career. Take some time to look at my projects, credentials and if you're interested in helping me make this happen, <a href="#contact">let's get in touch.</a></p></div></div><div class="download-button wow tada"><a class="btn btn-lg textBTN bg-transparent mr-3" href="./pdf/Roman.Matviy.CV.pdf"><i class="icon file_download"></i>Download CV </a><a class="btn btn-lg textBTN transparent" href="#contact"><i class="icon briefcase"></i>Hire Me </a></div></div></div></div></div></section><section v-if="show" id="skillset" class="skillset pt-5 pb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight pb-3">My Skills</h2><h2 class="subtitle d-none d-md-block">Skills</h2></div><div class="row justify-content-around mb-3"><div id="skillFrontEnd" class="col-md-4 col-12"><div class="section-title wow animated fadeInUp mb-3"><h3>Front-end</h3></div><div class="frontEnds" v-for="(frontEnd, index) of frontEnds"><strong class="text m-2 pb-2">{{ frontEnd.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:frontEnd.num + '%'}" aria-valuenow="frontEnd.num" aria-valuemin="0" aria-valuemax="100" :data-color="frontEnd.num"><b class="number">{{ frontEnd.num}}</b>%</div></div></div></div><div id="skillBackEnd" class="col-md-4 col-12 mt-4 pt-2"><div class="section-title wow animated fadeInUp mb-3"><h3>Back-end</h3></div><div class="backEnds" v-for="(backEnd, index) of backEnds"><strong class="text m-2">{{ backEnd.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:backEnd.num + '%'}" aria-valuenow="backEnd.num" aria-valuemin="0" aria-valuemax="100" :data-color="backEnd.num"><b>{{ backEnd.num}}</b>%</div></div></div></div><div id="skillFrameworks" class="col-md-4 col-12"><div class="section-title wow animated fadeInUp mb-3"><h3>Framework</h3></div><div class="cms" v-for="(framework, index) of frameworks"><strong class="text m-2">{{ framework.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:framework.num + '%'}" aria-valuenow="framework.num" aria-valuemin="0" aria-valuemax="100" :data-color="framework.num"><b>{{ framework.num}}</b>%</div></div></div></div><div id="skill" class="col-md-4 col-12 mt-5"><div class="section-title wow animated fadeInUp mb-3"><h3>Skills</h3></div><div class="skills" v-for="(skill, index) of skills"><strong class="text m-2">{{ skill.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:skill.num + '%'}" aria-valuenow="skill.num" aria-valuemin="0" aria-valuemax="100" :data-color="skill.num"><b>{{ skill.num}}</b>%</div></div></div></div><div id="skillTools" class="col-md-4 col-12 mt-5"><div class="section-title wow animated fadeInUp mb-3"><h3>Tools</h3></div><div class="tool" v-for="(tool, index) of tools"><strong class="text m-2">{{ tool.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:tool.num + '%'}" aria-valuenow="tool.num" aria-valuemin="0" aria-valuemax="100" :data-color="tool.num"><b>{{ tool.num}}</b>%</div></div></div></div><div id="skillProgramms" class="col-md-4 col-12 mt-5"><div class="section-title wow animated fadeInUp mb-3"><h3>Programms</h3></div><div class="tool" v-for="(program, index) of programs"><strong class="text m-2">{{ program.name}}</strong><div class="progress mb-3"><div class="progress-bar" role="progressbar" :style="{ width:program.num + '%'}" aria-valuenow="program.num" aria-valuemin="0" aria-valuemax="100" :data-color="program.num"><b>{{ program.num}}</b>%</div></div></div></div><div id="skillCMS" class="col-md-4 col-12 mt-5"><div class="section-title wow animated fadeInUp mb-3"><h3>CMS</h3></div><div class="cms" v-for="(cms, index) of cmss"><strong class="text m-2">{{ cms.name}}</strong><div class="progress mb-3"><div class="progress-bar pbp" role="progressbar" :style="{ width:cms.num + '%'}" aria-valuenow="cms.num" aria-valuemin="0" aria-valuemax="100" :data-color="cms.num"><b>{{ cms.num}}</b>%</div></div></div></div></div></div></section><div v-if="show" id="languages" class="languages pt-5 pb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight">My Languages</h2><h2 class="subtitle d-none d-md-block">Languages</h2></div><div class="row justify-content-around"><div class="d-none d-md-block col-lg-2 col-md-7 col-7 mt-lg-0 mt-md-4"><img data-src="img/languages/bg.png" title="world languages" alt="world languages" class="lazyload img-fluid world" /></div><div class="col-lg-2 col-md-6 col-6 single-chart language" v-for="(language, index) of languages"><svg viewBox="0 0 36 36" class="circular-chart" :circle-color="language.num"><path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /><path class="circle" :stroke-dasharray="language.num + ', 100'" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /><text x="18" y="20.35" class="percentage">{{ language.name}}</text><h3 class="align-content-end">{{ language.num}}%</h3><h4>{{ language.level}}</h4></svg></div></div></div></div><section v-if="show" id="projects" class="projects pt-5 pb-3 mb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight" style="color:#242937 !important;">My Projects</h2><h2 class="subtitle d-none d-md-block" style="color:#F8F8F8 !important;">Projects</h2></div><div class="row justify-content-center mt-5 mb-5"><div id="carouselExampleIndicators" class="col-xl-6 col-lg-7 col-md-8 col-sm-10 col-11 carousel sliderProject1" data-ride="carousel"><ol class="carousel-indicators"><li v-for="(project, index) in projects" data-target="#carouselExampleIndicators" :data-slide-to="index" @click="selectProject(index)" :class="'project-' + index +{'active':selectedProjectIndex===index}" :placeholder="project.name"></li></ol><div class="carousel-inner"><img data-src="./img/desctop/head.png" alt="head" class="lazyload head d-block w-100" /><div :class="'carousel-item ' + project.active" v-for="(project, index) of projects"><div class="imgProjectCarousel"><img :data-src="'./img/projects/' + project.url + '-screen.png'" :title="project.name" :alt="project.name" class="lazyload d-block w-100 mt-md-3 mt-sm-2 mt-2 pt-2" style="position:absolute; z-index:11; top:-15px;" /><img src="./img/projects/no-screenshot.png" alt="no-screenshot" style="position:relative;" class="d-block w-100 mt-md-3 mt-sm-2 mt-2 pt-2" /></div></div></div><a style="font-size:30px;font-weight:bold;left:-100px;color:#000;margin-right:90%;width:10%;text-transform:uppercase" class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" @click="selectProject(index-1)">Prev </a><a style="font-size:30px;font-weight:bold;left:100px;color:#000;margin-left:90%;width:10%;text-transform:uppercase" class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" @click="selectProject(index+1)">Next </a><div class="w-100"></div></div><div class="w-100"></div><img data-src="./img/desctop/foot.png" alt="foot" class="lazyload foot col-xl-6 col-lg-7 col-md-8 col-sm-10 col-11 d-block w-100" /><div class="w-100"></div><div class="infoProject"><h3 class="section-title wow animated fadeInUp ml-3">Information about this project</h3><div class="row justify-content-around"><div class="d-none d-md-block col-lg-6 col-md-5 col-sm-8 p-xl-5 p-lg-5 p-md-0 p-sm-3 p-3 mt-5"><i class="heading-title screenshot">Full screenshot </i><img style="width:100%" :data-src="'./img/projects/' + project.url + '-full-screen.png'" :title="project.name" :alt="project.name" class="lazyload full-screenshot img-fluid p-1"></div><div class="text description col-lg-6 col-md-5 col-sm-10 col-11 p-md-2 p-sm-3 p-3"><b>Project completion date:</b> <time pubdate :datetime="project.date">{{ project.date}}</time><br><br><b>Project Name:</b><a :href="'http://' + project.url" class="pl-3"><h3 class="display:d-inline-block">{{ project.name}}</h3></a><br><b>URL:</b> <a :href="'http://' + project.url">http://{{ project.url}}</a><br><b>Source:</b> <a :href="project.github">GitHub.com</a><br><b>Description:</b> {{ project.desc}} <br><br><b>The use of technology:</b> <h3 class="mt-3 ml-4">{{ project.skills}}</h3><div class="w-100 mt-5"></div><i class="heading-title screenshot">Small screenshot </i><img style="width:100%" :data-src="'./img/projects/' + project.url + '-screen.png'" :title="project.name" :alt="project.name" class="lazyload desctop small-screenshot img-fluid p-1" /></div></div></div></div><div class="text row justify-content-around"><a class="btn btn-lg textBTN transparent" href="#top" v-on:click="show=!show"><span style="color:#fff;"><i class="far fa-list-alt"></i>View all projects </span></a><div class="all ml-5"><b>All projects:</b> {{ projects.length}} </div><div class="first mt-3"><b>The first project is over:</b> 24 September 2018 </div></div></div></section><p id="all"></p><section v-if="!show" id="allProjects" class="projects pt-5 pb-3 mb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight" style="color:#242937 !important;">All Projects</h2><h2 class="subtitle d-none d-md-block" style="color:#F8F8F8 !important;">Projects</h2></div><div class="row justify-content-center mt-5 mb-5"><div class="cart1 project col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 m-2 list-group-item list-group-item-action" v-for="(project, index) of projects"><a :href="'http://' + project.url" :title="project.name"><img :src="'./img/projects/' + project.url + '-screen.png'" :title="project.name" :alt="project.name" class="d-block w-100 mt-3 mb-2 pt-1" /><h2>{{ project.name}}</h2><div class="url"><a :href="'http://' + project.url">{{ project.url}}</a><br><a :href="project.github">Source</a></div><div class="date">{{ project.date}}</div><div class="project-skills">{{ project.skills}}</div></a></div></div><div class="text row justify-content-around" style="color:#000"><a v-on:click="show=!show" class="btn btn-lg textBTN bg-transparent2" href="#top"><span style="color:#745B86;"><i class="icon black home" style="color:#745B86;"></i>Go to home </span></a><a v-on:click="show=!show" class="btn btn-lg textBTN transparent" href="mailto:roman@matviy.pp.ua"><span style="color:#fff;"><i class="icon briefcase"></i>Hire Me </span></a><div class="all ml-5"><b>All projects:</b> {{ projects.length}} </div><div class="first"><b>The first project is over:</b> 24 September 2018 </div></div></div></section><section v-if="show" id="certificates" class="certificates pt-5 pb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight pb-3" style="color:#242937 !important;">My Certificates</h2><h2 class="subtitle d-none d-md-block" style="color:#F8F8F8 !important;">Certificates</h2></div><div class="row justify-content-around mb-3"><div v-for="(certificate, index) of certificates" :href="'./certificate/PDF/cert-' + certificate.license + '.pdf'" class="text certificate col-lg-5 col-md-5 col-sm-11 col-11 mb-5 p-3"><img :data-src="'./certificate/thumbs/cert-' + certificate.license + '.jpg'" class="lazyload img-fluid mb-3" :title="'Certificate ' + certificate.name" :alt="'Certificate ' + certificate.name" /><br><b>Name:</b> <strong class="m-2 pb-2">{{ certificate.name}}</strong><br><b>Date:</b> <strong class="m-2 pb-2">{{ certificate.firstDate}}</strong><br><b>Re-certification:</b> <strong class="m-2 pb-2">{{ certificate.secondDate}}</strong><br><b>License:</b> <strong class="m-2 pb-2">{{ certificate.license}}</strong><br><b>Link:</b> <strong class="m-2 pb-2"><a :href="certificate.link">{{ certificate.link}}</a></strong><br><b>Download:</b> <a :href="'./certificate/PDF/cert-' + certificate.license + '.pdf'">PDF</a> | <a :href="'./certificate/original/cert-' + certificate.license + '.jpg'">IMG</a></div></div><div class="row justify-content-around"><div class="all ml-5"><b>All certificates:</b> {{ certificates.length}} </div><div class="first"><b>Date of receipt of the first certificate:</b> 08 September 2018 </div></div></div></section><section v-if="show" id="contact" class="contact pt-5 pb-5"><div class="container"><div class="section-title"><h2 class="title wow bounceInRight" style="color:#242937 !important;">My Contact</h2><h2 class="subtitle d-none d-md-block" style="color:#F8F8F8 !important;">Contact</h2></div><div class="w-100"></div><div class="row justify-content-center"><div class="text mb-5">Currently available for contract or full-time work, <br class="hidden-xs-down">and would love to hear from you </div></div><div class="row justify-content-center"><div class="text contactInfo col-md-5 col-sm-5 col-xs-12 mb-5" v-for="(aboutMe, index) of abouts"><strong class="pb-2">{{ aboutMe.fullname}}</strong><br><strong class="pb-2"><a :href="'mailto:' + aboutMe.email">{{ aboutMe.email}}</a></strong><br>skype:<strong class="pb-2"> {{ aboutMe.skype}}</strong><br><strong class="pb-2"><a :href="'tel:' + aboutMe.phone">{{ aboutMe.phone}}</a></strong><br>location:<strong class="pb-2"> {{ aboutMe.location}}</strong><br>nationality:<strong class="pb-2"> {{ aboutMe.nationality}}</strong><br><strong class="pb-2"><a :href="'http://' + aboutMe.github">Github</a></strong><span> / </span><strong class="pb-2"><a :href="'http://' + aboutMe.linkedin">LinkedIn</a></strong><span> / </span><strong class="pb-2"><a :href="'http://' + aboutMe.facebook">Facebook</a></strong></div><div class="col-xs-12 col-sm-7 col-md-7"><form id="contact-form" class="form" method="post" action="index.html"><input type="text" name="foo" style="display:none;"><div class="form__control"><input class="form__input" type="text" id="name" name="name" placeholder="Your name"><label class="form__label"><i class="icon form user"></i></label></div><div class="form__control"><input class="form__input" type="email" id="email" name="email" placeholder="Your email"><label class="form__label"><i class="icon form envelope"></i></label></div><div class="form__control"><textarea class="form__textarea" id="message" name="message" placeholder="Your message"></textarea><label class="form__label"><i class="icon form pencil"></i></label></div><div class="row row-xs-center"><div class="col-xs-7 col-md-9"><small class="form__error"></small></div><div class="col-xs-5 col-md-12"><button class="form__submit btn text pull-xs-right" id="sendEmail"><i class="icon paper_plane"></i>Send email</button></div></div></form></div></div></div></section><footer class="footer pt-5"><div class="container pt-5 mt-3"><div class="row justify-content-around"><div id="menu" class="left col-12 col-sm-4 col-md-4 pt-5 p-3 mb-5"><strong class="main-subtitle"><b class="heading-title">Portfolio</b><br>Menu</strong><div class="menu"><ul><li v-for="(menu, index) of menus"><a :href="menu.url"><strong style="color:#fff;" class="m-2">{{ menu.name}}</strong></a></li></ul></div></div><div id="links" class="center col-12 col-sm-4 col-md-4 pt-5 p-3 mb-5"><strong class="main-subtitle"><b class="heading-title">For developers</b><br>Links</strong><div class="link"><ul><li v-for="(link, index) of links"><a :href="link.url"><strong style="color:#fff;" class="m-2">{{ link.name}}</strong></a></li></ul></div></div><div id="contacts" class="right col-12 col-sm-12 col-md-4 pt-5 p-3 mb-5"><strong class="main-subtitle"><b class="heading-title">My Feedbacks</b><br>Contacts</strong><div class="contacts"><ul><li v-for="(contact, index) of contacts"><i :class="contact.icon"></i><a :href="contact.url"><strong style="color:#fff;" class="m-2">{{ contact.name}}</strong></a></li></ul></div></div></div></div><div class="container-fluid"><div class="row justify-content-center"><div id="map"></div></div></div><div class="container-fluid"><div class="row justify-content-center"><div class="section-title mt-5 pt-5"><h2 class="title wow bounceInRight">On social media</h2><h2 class="subtitle d-none d-md-block">social media</h2></div><div class="mt-3 pt-3 mb-5 pb-5"><a class="mr-3" v-for="(social, index) of socials" :href="social.url" target="_blank"><span class="social-icon"><i :class="social.icon"></i></span></a></div><div class="w-100"></div><div class="copyright text pt-4 pb-3 mt-3">© Copyright 2018 - <span class="copyrightYear"></span> <a :href="'https://' + about.site" class="link">{{ about.fullname}}</a><p class="w-100 mb-3"></p><a href="https://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img style="border:0;width:88px;height:31px" data-src="https://jigsaw.w3.org/css-validator/images/vcss-blue" class="lazyload" alt="Правильний CSS!" /></a><script>my_id=169829; my_width=88; my_height=31; my_alt="MyCounter - счётчик и статистика"; </script><script src="https://get.mycounter.ua/counter2.0.js"></script><noscript><a target="_blank" rel="noreferrer" href="https://mycounter.ua/"><img src="https://get.mycounter.ua/counter.php?id=169829" title="MyCounter - счётчик и статистика" alt="MyCounter - счётчик и статистика" width="88" height="31" border="0" /></a></noscript></div></div></div></footer></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js" async defer></script><script src="js/vue.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" defer></script><script src="js/main.min.js" defer></script><script src="js/animhead.min.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js" async defer></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDLVfUDe3mgO5zuGojTYlQ8h_ik7Y0rRs&callback=initMap" async defer></script></body></html>