Резюме №3

Оцените
3
4 оценки
    • 94+
    • 94+
    • 88+
    • 80+
    • 9+
    • 94+
    • 95+
    • 30+
    • 9+
    • 4+
    • 94+
Демо
  • 28,54 КБ
  • HTML, CSS, JS
  • Резюме
  • Лицензия MIT
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" />

<div class="resume">
    <div class="base">
        <div class="profile">
            <div class="photo">
                <!--<img src="" /> -->
                <i class="fas fa-rocket"></i>
            </div>
            <div class="info">
                <h1 class="name">Наоми Уэзерфорд</h1>
                <h2 class="job">Фронтенд веб-дизайнер</h2>
            </div>
        </div>
        <div class="about">
            <h3>About Me</h3>
            Я веб-дизайнер компании Fiserv, специализирующийся на веб-дизайне, графическом дизайне и UX. Имею опыт работы с пакетом Adobe Creative Suite, отзывчивым дизайном, управлением социальными сетями и созданием прототипов.
        </div>
        <div class="contact">
            <h3>Контакты</h3>
            <div class="call">
                <a href="tel:123-456-7890"><i class="fas fa-phone"></i><span>123-456-7890</span></a>
            </div>
            <div class="address">
                <a href="https://goo.gl/maps/fiTBGT6Vnhy"><i class="fas fa-map-marker"></i><span>Прово, штат Юта</span></a>
            </div>
            <div class="email">
                <a href="mailto:astronaomical@gmail.com"><i class="fas fa-envelope"></i><span>astronaomical</span></a>
            </div>
            <div class="website">
                <a href="http://astronaomical.com/" target="_blank"> <i class="fas fa-home"></i><span>astronaomical.com</span></a>
            </div>
        </div>
        <div class="follow">
            <h3>Соц сети</h3>
            <div class="box">
                <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
                <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
                <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
                <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
                <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
            </div>
        </div>
    </div>
    <div class="func">
        <div class="work">
            <h3><i class="fa fa-briefcase"></i>Опыт</h3>
            <ul>
                <li>
                    <span>
                        Технический консультант -<br />
                        Веб-дизайн
                    </span>
                    <small>Fiserv</small><small>Апрель 2018 - Сейчас</small>
                </li>
                <li><span>Веб-дизайнер</span><small>Lynden</small><small>Янв 2018 - Апр 2018</small></li>
                <li><span>Стажер - веб-дизайн</span><small>Lynden</small><small>Авг 2017 - Дек 2017</small></li>
            </ul>
        </div>
        <div class="edu">
            <h3><i class="fa fa-graduation-cap"></i>Образование</h3>
            <ul>
                <li>
                    <span>
                        Бакалавриат<br />
                        Веб-дизайн и разработка
                    </span>
                    <small>БЮИ-Идахо</small><small>Янв. 2016 - Апр. 2018</small>
                </li>
                <li><span>Информатика</span><small>Общественный колледж Эдмондса</small><small>Сен. 2014 - Дек. 2015</small></li>
                <li><span>Школа</span><small>Средняя школа имени Генри М. Джексона</small><small>Янв. 2013 - Янв. 2015</small></li>
            </ul>
        </div>
        <div class="skills-prog">
            <h3><i class="fas fa-code"></i>Навыки программирования</h3>
            <ul>
                <li data-percent="95">
                    <span>HTML5</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="90">
                    <span>CSS3 & SCSS</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="60">
                    <span>JavaScript</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="50">
                    <span>jQuery</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="40">
                    <span>JSON</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="55">
                    <span>PHP</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
                <li data-percent="40">
                    <span>MySQL</span>
                    <div class="skills-bar">
                        <div class="bar"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="skills-soft">
            <h3><i class="fas fa-bezier-curve"></i>Навыки работы с программами</h3>
            <ul>
                <li data-percent="90">
                    <svg viewbox="0 0 100 100">
                        <circle cx="50" cy="50" r="45"></circle>
                        <circle class="cbar" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <span>Illustrator</span><small></small>
                </li>
                <li data-percent="75">
                    <svg viewbox="0 0 100 100">
                        <circle cx="50" cy="50" r="45"></circle>
                        <circle class="cbar" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <span>Photoshop</span><small></small>
                </li>
                <li data-percent="85">
                    <svg viewbox="0 0 100 100">
                        <circle cx="50" cy="50" r="45"></circle>
                        <circle class="cbar" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <span>InDesign</span><small></small>
                </li>
                <li data-percent="65">
                    <svg viewbox="0 0 100 100">
                        <circle cx="50" cy="50" r="45"></circle>
                        <circle class="cbar" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <span>Dreamweaver</span><small></small>
                </li>
            </ul>
        </div>
        <div class="interests">
            <h3><i class="fas fa-star"></i>Увлечения</h3>
            <div class="interests-items">
                <div class="art"><i class="fas fa-palette"></i><span>Арт</span></div>
                <div class="art"><i class="fas fa-book"></i><span>Книги</span></div>
                <div class="movies"><i class="fas fa-film"></i><span>Фильмы</span></div>
                <div class="music"><i class="fas fa-headphones"></i><span>Музыка</span></div>
                <div class="games"><i class="fas fa-gamepad"></i><span>Игры</span></div>
            </div>
        </div>
    </div>
</div>
CSS
@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
    outline: none;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

html,
body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    cursor: default;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

ul {
    list-style-type: none;
    padding: 0;
}

h3 {
    color: #ffb300;
    margin: 10px 0;
    text-transform: lowercase;
    font-size: 1.25em;
}

.resume {
    width: 960px;
    background: #1a237e;
    color: #ffffff;
    margin: 20px auto;
    -webkit-box-shadow: 10px 10px #0e1442;
    -moz-box-shadow: 10px 10px #0e1442;
    box-shadow: 10px 10px #0e1442;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
}

.resume .base,
.resume .func {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

.resume .base > div,
.resume .func > div {
    padding-bottom: 10px;
}

.resume .base > div:last-of-type,
.resume .func > div:last-of-type {
    padding-bottom: 0;
}

.resume .base {
    width: 30%;
    padding: 30px 15px;
    background: #283593;
    color: #ffffff;
}

.resume .base .profile {
    background: #ffb300;
    padding: 30px 15px 40px 15px;
    margin: -30px -15px 45px -15px;
    position: relative;
    z-index: 2;
}

.resume .base .profile::after {
    content: "";
    position: absolute;
    background: #303f9f;
    width: 100%;
    height: 30px;
    bottom: -15px;
    left: 0;
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
    z-index: -1;
}

.resume .base .profile .photo img {
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.resume .base .profile .photo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}

.resume .base .profile .fa-rocket {
    font-size: 100px;
    text-align: center;
    margin: auto;
    color: #283593;
}

.resume .base .profile .info {
    text-align: center;
    color: #ffffff;
}

.resume .base .profile .info .name {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 1.75em;
    text-transform: lowercase;
    color: #1a237e;
}

.resume .base .profile .info .job {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 1.5em;
    text-transform: lowercase;
    color: #283593;
}

.resume .base .contact div {
    line-height: 24px;
}

.resume .base .contact div a:hover {
    color: #fdd835;
}

.resume .base .contact div a:hover span::after {
    width: 100%;
}

.resume .base .contact div:hover i {
    color: #fdd835;
}

.resume .base .contact div i {
    color: #ffb300;
    width: 20px;
    height: 20px;
    font-size: 20px;
    text-align: center;
    margin-right: 15px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .base .contact div span {
    position: relative;
}

.resume .base .contact div span::after {
    content: "";
    position: absolute;
    background: #fdd835;
    height: 1px;
    width: 0;
    bottom: 0;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .base .follow .box {
    text-align: center;
    vertical-align: middle;
}

.resume .base .follow .box a {
    display: inline-block;
    vertical-align: text-bottom;
}

.resume .base .follow .box a:hover i {
    background: #fdd835;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transform: rotate(45deg) scale(0.8);
    -moz-transform: rotate(45deg) scale(0.8);
    -o-transform: rotate(45deg) scale(0.8);
    transform: rotate(45deg) scale(0.8);
}

.resume .base .follow .box a:hover i::before {
    -webkit-transform: rotate(-45deg) scale(1.5);
    -moz-transform: rotate(-45deg) scale(1.5);
    -o-transform: rotate(-45deg) scale(1.5);
    transform: rotate(-45deg) scale(1.5);
}

.resume .base .follow .box i {
    display: inline-block;
    font-size: 30px;
    background: #ffb300;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    line-height: 60px;
    color: #283593;
    margin: 0 10px 10px 10px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .base .follow .box i::before {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .base .follow .box i.fa::before {
    display: block;
}

.resume .func {
    width: 100%;
    padding: 30px;
}

.resume .func:hover > div {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.resume .func:hover > div:hover h3 i {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.resume .func:hover > div:not(:hover) {
    opacity: 0.5;
}

.resume .func h3 {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    margin-top: 0;
}

.resume .func h3 i {
    color: #283593;
    background: #ffb300;
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 42px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    margin-right: 8px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .work,
.resume .func .edu {
    float: left;
}

.resume .func .work small,
.resume .func .edu small {
    display: block;
    opacity: 0.7;
}

.resume .func .work ul li,
.resume .func .edu ul li {
    position: relative;
    margin-left: 15px;
    padding-left: 25px;
    padding-bottom: 15px;
}

.resume .func .work ul li:hover::before,
.resume .func .edu ul li:hover::before {
    -webkit-animation: circle 1.2s infinite;
    -moz-animation: circle 1.2s infinite;
    -o-animation: circle 1.2s infinite;
    animation: circle 1.2s infinite;
}

.resume .func .work ul li:hover span,
.resume .func .edu ul li:hover span {
    color: #fdd835;
}

@-webkit-keyframes circle {
    from {
        -webkit-box-shadow: 0 0 0 0px #fdd835;
        box-shadow: 0 0 0 0px #fdd835;
    }
    to {
        -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}

@-moz-keyframes circle {
    from {
        -moz-box-shadow: 0 0 0 0px #fdd835;
        box-shadow: 0 0 0 0px #fdd835;
    }
    to {
        -moz-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}

@-o-keyframes circle {
    from {
        box-shadow: 0 0 0 0px #fdd835;
    }
    to {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}

@keyframes circle {
    from {
        -webkit-box-shadow: 0 0 0 0px #fdd835;
        -moz-box-shadow: 0 0 0 0px #fdd835;
        box-shadow: 0 0 0 0px #fdd835;
    }
    to {
        -webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
        -moz-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
}
.resume .func .work ul li:first-of-type::before,
.resume .func .edu ul li:first-of-type::before {
    width: 10px;
    height: 10px;
    left: 1px;
}

.resume .func .work ul li:last-of-type,
.resume .func .edu ul li:last-of-type {
    padding-bottom: 3px;
}

.resume .func .work ul li:last-of-type::after,
.resume .func .edu ul li:last-of-type::after {
    -webkit-border-radius: 1.5px;
    -moz-border-radius: 1.5px;
    border-radius: 1.5px;
}

.resume .func .work ul li::before,
.resume .func .work ul li::after,
.resume .func .edu ul li::before,
.resume .func .edu ul li::after {
    content: "";
    display: block;
    position: absolute;
}

.resume .func .work ul li::before,
.resume .func .edu ul li::before {
    width: 7px;
    height: 7px;
    border: 3px solid #ffffff;
    background: #ffb300;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 3px;
    z-index: 1;
}

.resume .func .work ul li::after,
.resume .func .edu ul li::after {
    width: 3px;
    height: 100%;
    background: #ffffff;
    left: 5px;
    top: 0;
}

.resume .func .work ul li span,
.resume .func .edu ul li span {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .work {
    width: 48%;
    background: #283593;
    padding: 15px;
    margin: 0 4% 15px 0;
}

.resume .func .edu {
    width: 48%;
    background: #283593;
    padding: 15px;
}

.resume .func .skills-prog {
    clear: both;
    background: #283593;
    padding: 15px;
}

.resume .func .skills-prog ul {
    margin-left: 15px;
}

.resume .func .skills-prog ul li {
    margin-bottom: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .skills-prog ul li:hover {
    color: #fdd835;
}

.resume .func .skills-prog ul li:hover .skills-bar .bar {
    background: #fdd835;
    -webkit-box-shadow: 0 0 0 1px #fdd835;
    -moz-box-shadow: 0 0 0 1px #fdd835;
    box-shadow: 0 0 0 1px #fdd835;
}

.resume .func .skills-prog ul li span {
    display: block;
    width: 120px;
}

.resume .func .skills-prog ul li .skills-bar {
    background: #ffffff;
    height: 2px;
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    width: calc(100% - 120px);
    position: relative;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.resume .func .skills-prog ul li .skills-bar .bar {
    position: absolute;
    top: -1px;
    height: 4px;
    background: #ffb300;
    -webkit-box-shadow: 0 0 0 #ffb300;
    -moz-box-shadow: 0 0 0 #ffb300;
    box-shadow: 0 0 0 #ffb300;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.resume .func .skills-soft {
    clear: both;
    background: #283593;
    padding: 15px;
    margin: 15px 0 0;
}

.resume .func .skills-soft ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.resume .func .skills-soft ul li {
    position: relative;
}

.resume .func .skills-soft ul li:hover svg .cbar {
    stroke: #fdd835;
    stroke-width: 4px;
}

.resume .func .skills-soft ul li:hover span,
.resume .func .skills-soft ul li:hover small {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.resume .func .skills-soft ul li svg {
    width: 95%;
    fill: transparent;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.resume .func .skills-soft ul li svg circle {
    stroke-width: 1px;
    stroke: #ffffff;
}

.resume .func .skills-soft ul li svg .cbar {
    stroke-width: 3px;
    stroke: #ffb300;
    stroke-linecap: round;
}

.resume .func .skills-soft ul li span,
.resume .func .skills-soft ul li small {
    position: absolute;
    display: block;
    width: 100%;
    top: 52%;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .skills-soft ul li span {
    top: 40%;
}

.resume .func .interests {
    background: #283593;
    margin: 15px 0 0;
    padding: 15px;
}

.resume .func .interests-items {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0 15px;
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
}

.resume .func .interests-items div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.resume .func .interests-items div:hover i {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.resume .func .interests-items div:hover span {
    color: #fdd835;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .interests-items div i {
    font-size: 45px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #ffb300;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.resume .func .interests-items div span {
    display: block;
}
JS
(function () {
    $(".skills-prog li")
        .find(".skills-bar")
        .each(function (i) {
            $(this)
                .find(".bar")
                .delay(i * 150)
                .animate(
                    {
                        width: $(this).parents().attr("data-percent") + "%",
                    },
                    1000,
                    "linear",
                    function () {
                        return $(this).css({
                            "transition-duration": ".5s",
                        });
                    }
                );
        });

    $(".skills-soft li")
        .find("svg")
        .each(function (i) {
            var c, cbar, circle, percent, r;
            circle = $(this).children(".cbar");
            r = circle.attr("r");
            c = Math.PI * (r * 2);
            percent = $(this).parent().data("percent");
            cbar = ((100 - percent) / 100) * c;
            circle.css({
                "stroke-dashoffset": c,
                "stroke-dasharray": c,
            });
            circle.delay(i * 150).animate(
                {
                    strokeDashoffset: cbar,
                },
                1000,
                "linear",
                function () {
                    return circle.css({
                        "transition-duration": ".3s",
                    });
                }
            );
            $(this)
                .siblings("small")
                .prop("Counter", 0)
                .delay(i * 150)
                .animate(
                    {
                        Counter: percent,
                    },
                    {
                        duration: 1000,
                        step: function (now) {
                            return $(this).text(Math.ceil(now) + "%");
                        },
                    }
                );
        });
}.call(this));

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsaUJBQUYsQ0FBb0IsQ0FBQyxJQUFyQixDQUEwQixhQUExQixDQUF3QyxDQUFDLElBQXpDLENBQThDLFFBQUEsQ0FBQyxDQUFELENBQUE7SUFDNUMsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLElBQVIsQ0FBYSxNQUFiLENBQW9CLENBQUMsS0FBckIsQ0FBMkIsQ0FBQSxHQUFFLEdBQTdCLENBQWlDLENBQUMsT0FBbEMsQ0FBMEM7TUFDeEMsS0FBQSxFQUFPLENBQUEsQ0FBRSxJQUFGLENBQU8sQ0FBQyxPQUFSLENBQUEsQ0FBaUIsQ0FBQyxJQUFsQixDQUF1QixjQUF2QixDQUFBLEdBQXlDO0lBRFIsQ0FBMUMsRUFFRyxJQUZILEVBRVMsUUFGVCxFQUVtQixRQUFBLENBQUEsQ0FBQTthQUNqQixDQUFBLENBQUUsSUFBRixDQUFPLENBQUMsR0FBUixDQUFZO1FBQUEscUJBQUEsRUFBdUI7TUFBdkIsQ0FBWjtJQURpQixDQUZuQjtFQUQ0QyxDQUE5Qzs7RUFNQSxDQUFBLENBQUUsaUJBQUYsQ0FBb0IsQ0FBQyxJQUFyQixDQUEwQixLQUExQixDQUFnQyxDQUFDLElBQWpDLENBQXNDLFFBQUEsQ0FBQyxDQUFELENBQUE7QUFDcEMsUUFBQSxDQUFBLEVBQUEsSUFBQSxFQUFBLE1BQUEsRUFBQSxPQUFBLEVBQUE7SUFBQSxNQUFBLEdBQVMsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLFFBQVIsQ0FBaUIsT0FBakI7SUFDVCxDQUFBLEdBQUksTUFBTSxDQUFDLElBQVAsQ0FBWSxHQUFaO0lBQ0osQ0FBQSxHQUFJLElBQUksQ0FBQyxFQUFMLEdBQVUsQ0FBQyxDQUFBLEdBQUksQ0FBTDtJQUNkLE9BQUEsR0FBVSxDQUFBLENBQUUsSUFBRixDQUFPLENBQUMsTUFBUixDQUFBLENBQWdCLENBQUMsSUFBakIsQ0FBc0IsU0FBdEI7SUFDVixJQUFBLEdBQU8sQ0FBQyxDQUFDLEdBQUEsR0FBSSxPQUFMLENBQUEsR0FBYyxHQUFmLENBQUEsR0FBc0I7SUFDN0IsTUFBTSxDQUFDLEdBQVAsQ0FBVztNQUFBLG1CQUFBLEVBQXFCLENBQXJCO01BQXdCLGtCQUFBLEVBQW9CO0lBQTVDLENBQVg7SUFDQSxNQUFNLENBQUMsS0FBUCxDQUFhLENBQUEsR0FBRSxHQUFmLENBQW1CLENBQUMsT0FBcEIsQ0FBNEI7TUFDMUIsZ0JBQUEsRUFBa0I7SUFEUSxDQUE1QixFQUVHLElBRkgsRUFFUyxRQUZULEVBRW1CLFFBQUEsQ0FBQSxDQUFBO2FBQ2pCLE1BQU0sQ0FBQyxHQUFQLENBQVc7UUFBQSxxQkFBQSxFQUF1QjtNQUF2QixDQUFYO0lBRGlCLENBRm5CO0lBSUEsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLFFBQVIsQ0FBaUIsT0FBakIsQ0FBeUIsQ0FBQyxJQUExQixDQUErQixTQUEvQixFQUEwQyxDQUExQyxDQUE0QyxDQUFDLEtBQTdDLENBQW1ELENBQUEsR0FBRSxHQUFyRCxDQUF5RCxDQUFDLE9BQTFELENBQWtFO01BQ2hFLE9BQUEsRUFBUztJQUR1RCxDQUFsRSxFQUVHO01BQUEsUUFBQSxFQUFVLElBQVY7TUFBZ0IsSUFBQSxFQUFNLFFBQUEsQ0FBQyxHQUFELENBQUE7ZUFDdkIsQ0FBQSxDQUFFLElBQUYsQ0FBTyxDQUFDLElBQVIsQ0FBYSxJQUFJLENBQUMsSUFBTCxDQUFVLEdBQVYsQ0FBQSxHQUFpQixHQUE5QjtNQUR1QjtJQUF0QixDQUZIO0VBWG9DLENBQXRDO0FBTkEiLCJzb3VyY2VzQ29udGVudCI6WyIkKCcuc2tpbGxzLXByb2cgbGknKS5maW5kKCcuc2tpbGxzLWJhcicpLmVhY2ggKGkpIC0+XG4gICQodGhpcykuZmluZCgnLmJhcicpLmRlbGF5KGkqMTUwKS5hbmltYXRlIHtcbiAgICB3aWR0aDogJCh0aGlzKS5wYXJlbnRzKCkuYXR0cignZGF0YS1wZXJjZW50JykgKyAnJSdcbiAgfSwgMTAwMCwgJ2xpbmVhcicsIC0+XG4gICAgJCh0aGlzKS5jc3MgJ3RyYW5zaXRpb24tZHVyYXRpb24nOiAnLjVzJ1xuICByZXR1cm5cbiQoJy5za2lsbHMtc29mdCBsaScpLmZpbmQoJ3N2ZycpLmVhY2ggKGkpIC0+XG4gIGNpcmNsZSA9ICQodGhpcykuY2hpbGRyZW4oJy5jYmFyJylcbiAgciA9IGNpcmNsZS5hdHRyKCdyJylcbiAgYyA9IE1hdGguUEkgKiAociAqIDIpXG4gIHBlcmNlbnQgPSAkKHRoaXMpLnBhcmVudCgpLmRhdGEgJ3BlcmNlbnQnXG4gIGNiYXIgPSAoKDEwMC1wZXJjZW50KS8xMDApICogY1xuICBjaXJjbGUuY3NzICdzdHJva2UtZGFzaG9mZnNldCc6IGMsICdzdHJva2UtZGFzaGFycmF5JzogY1xuICBjaXJjbGUuZGVsYXkoaSoxNTApLmFuaW1hdGUge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IGNiYXJcbiAgfSwgMTAwMCwgJ2xpbmVhcicsIC0+XG4gICAgY2lyY2xlLmNzcyAndHJhbnNpdGlvbi1kdXJhdGlvbic6ICcuM3MnXG4gICQodGhpcykuc2libGluZ3MoJ3NtYWxsJykucHJvcCgnQ291bnRlcicsIDApLmRlbGF5KGkqMTUwKS5hbmltYXRlIHtcbiAgICBDb3VudGVyOiBwZXJjZW50XG4gIH0sIGR1cmF0aW9uOiAxMDAwLCBzdGVwOiAobm93KSAtPlxuICAgICQodGhpcykudGV4dCBNYXRoLmNlaWwobm93KSArICclJ1xuICByZXR1cm4iXX0=
//# sourceURL=coffeescript

Представьте, что вы листаете через красочно оформленное интерактивное резюме. Это не просто черно-белое CV; это яркое отображение опыта и личности, представленное на веб-странице. В основе этой презентации лежит код, который тщательно формирует каждый раздел, чтобы подчеркнуть путь индивида, его навыки и интересы.

Начинается все с изящного введения, где представлены фотография профиля (или, в данном случае, игривая иконка ракеты, символизирующая стремление к высотам) и имя с должностью, задающие тон всему, что будет дальше.

Когда вы прокручиваете страницу вниз, вы встречаете раздел, посвященный личности. Это своего рода мини-автобиография, давая представление о страсти к веб-дизайну и профессиональном пути человека, включая его владение инструментами типа Adobe Creative Suite и умение создавать адаптивный дизайн.

Контактная информация интегрирована с иконками, делая ее не только информативной, но и визуально привлекательной. Хотите позвонить, написать email или даже навестить? Все это доступно в один клик. Кроме того, резюме предлагает не просто профессиональные контакты, но и приглашает к общению в социальных сетях, превращая статичную страницу в ворота для динамичного взаимодействия.

Разделы опыта работы и образования — это не просто списки; это временные линии роста и обучения, украшенные иконками, которые оживляют каждое достижение. А затем идет демонстрация технического мастерства – графическое представление навыков в программировании и программном обеспечении, используя бары и круги для визуальной коммуникации уровней экспертизы.

Но это не все работа и учеба. В резюме также есть раздел интересов, от искусства до игр, каждый из которых представлен яркими иконками, намекая на многогранную личность.

Это резюме не просто документ; это опыт, оживленный с помощью HTML, CSS и JavaScript. Это свидетельство навыков человека не только в веб-дизайне, но и в создании привлекательных, интерактивных опытов, которые рассказывают историю, гораздо более широкую, чем могут выразить слова.

Меню