Skip to content

Instantly share code, notes, and snippets.

@Solrikk

Solrikk/css-resume-card.markdown

Created October 1, 2023 09:55
Show Gist options
  • Save Solrikk/97673f4caef14bc0f37d87bfddb68ecf to your computer and use it in GitHub Desktop.
Save Solrikk/97673f4caef14bc0f37d87bfddb68ecf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Solrikk created this gist Oct 1, 2023.
    7 changes: 7 additions & 0 deletions css-resume-card.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS Resume Card
    ---------------


    A [Pen](https://codepen.io/Solrikk/pen/abPyzxL) by [Solrikk](https://codepen.io/Solrikk) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/abPyzxL).
    108 changes: 108 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Resume</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@1,300&family=Pixelify+Sans:wght@400;500&family=Young+Serif&display=swap" rel="stylesheet">

    <meta charset="UTF-8" />
    </head>
    <body>
    <div class="container">
    <div class="header">
    <div class="full-name">
    <span class="first-name">Asbjorn</span>
    <span class="last-name">Kening</span>
    </div>
    <div class="contact-info">
    <span class="email">Email: </span>
    <span class="email-val">[email protected]</span>
    <span class="separator"></span>
    <span class="phone">Telegramm: </span>
    <span class="phone-val">@AsbjornKening</span>
    </div>
    <div class="about">
    <span class="position">Front-End Developer</span>
    <span class="desc">
    As a junior front-end developer with more than two years of experience working with HTML, CSS, and JavaScript, I am well-versed in following the principles of web development and have gained valuable experience working with various frameworks and libraries. My approach to development is based on maintaining an organized and structured code base and creating highly accessible and responsive user interfaces. I strive to continuously improve my skillset and stay up-to-date with the latest technological trends to deliver cutting-edge web applications to my clients and users. As a web code writer, I endeavor to thoroughly understand the project requirements and transform them into functional and aesthetically pleasing webpages.
    </span>
    </div>
    </div>
    <div class="details">
    <div class="section">
    <div class="section__title">Experience</div>
    <div class="section__list">
    <div class="section__list-item">
    <div class="left">
    <div class="name">2 Berega</div>
    <div class="addr">St. Petersburg, Russia</div>
    <div class="duration">Jan 2018 - Oct 2022</div>
    </div>
    <div class="right">
    <div class="name">UI/UX Designer</div>
    <div class="desc">As a UX/UI designer, I have assisted in creating intuitive, user-friendly, and visually appealing interfaces.</div>
    </div>
    </div>
    <div class="section__list-item">
    <div class="left">
    <div class="name">Freelance</div>
    <div class="addr">St. Petersburg, Russia</div>
    <div class="duration">Jun 2022 - Up now</div>
    </div>
    <div class="right">
    <div class="name">Frontend developer</div>
    <div class="desc">On freelancing sites, I have worked as a frontend developer, utilizing HTML, CSS, and JavaScript as well as popular frameworks and libraries.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="section">
    <div class="section__title">Education</div>
    <div class="section__list">
    <div class="section__list-item">
    <div class="left">
    <div class="name">Marine Technical University</div>
    <div class="addr">St. Petersburg, Russia</div>
    <div class="duration">Sep 2018 - Jun 2022</div>
    </div>
    <div class="right">
    <div class="name">Process Engineer</div>
    <div class="desc">My professional experience includes specialization in selecting optimal materials and technology for processing them to create finished products.</div>
    </div>
    </div>
    <div class="section__list-item">
    <div class="left">
    <div class="name">BrainsCloud</div>
    <div class="addr">Vilnius, Lithuania</div>
    <div class="duration">Jan 2019 - Feb 2020</div>
    </div>
    <div class="right">
    <div class="name">Front-End Developer</div>
    <div class="desc">In the course of internet learning at BrainsCloud online school, I have discovered a unique opportunity to master three key and sought-after areas: HTML, CSS, and JavaScript.</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
    const firstName = document.querySelector(".first-name");

    firstName.addEventListener("mouseenter", () => {
    firstName.style.color = "red";
    });

    firstName.addEventListener("mouseleave", () => {
    firstName.style.color = "initial";
    });

    gsap.from(".container", { duration: 1, opacity: 0, y: -50 });
    gsap.from(".header", { duration: 1, opacity: 0, y: -50, delay: 0.5 });
    gsap.from(".section", { duration: 1, opacity: 0, y: -50, stagger: 0.2, delay: 1 });

    </script>
    </body>
    </html>
    8 changes: 8 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
    behavior: 'smooth'
    });
    });
    });
    169 changes: 169 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,169 @@
    {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    html {
    height: 100%;
    }

    body {
    min-height: 100vh;
    background-image: url(https://www.chilternviewmagazines.co.uk/wp-content/uploads/2019/11/Japan2.jpg);
    background-size: 180%;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #222222;
    font-size: 14px;
    line-height: 26px;
    padding-bottom: 50px;
    }

    .container {
    max-width: 650px;
    background: #fff;
    margin: 0px auto;
    box-shadow: 1px 1px 2px #DAD7D7;
    border-radius: 3px;
    padding: 40px;
    margin-top: 50px;
    text-align: center;
    }

    .container * {
    text-align: left; /* Правило для дочерних элементов */
    }

    .header {
    margin-bottom: 30px;
    }

    .header .full-name {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 5px;
    }

    .header .first-name {
    font-weight: 700;
    }

    .header .last-name {
    font-weight: 300;
    }

    .header .contact-info {
    margin-bottom: 20px;
    }

    .header .email,
    .header .phone {
    color: #e41e49;
    font-weight: 300;
    }

    .header .separator {
    height: 10px;
    display: inline-block;
    border-left: 2px solid #494732;
    margin: 0px 10px;
    }

    .header .position {
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    text-decoration: underline;
    }

    .details {
    line-height: 20px;
    }

    .details .section {
    margin-bottom: 40px;
    }

    .details .section:last-of-type {
    margin-bottom: 0px;
    }

    .details .section__title {
    letter-spacing: 2px;
    color: #e41e49;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    }

    .details .section__list-item {
    margin-bottom: 40px;
    }

    .details .section__list-item:last-of-type {
    margin-bottom: 0;
    }

    .details .left,
    .details .right {
    vertical-align: top;
    display: inline-block;
    }

    .details .left {
    width: 60%;
    }

    .details .right {
    text-align: right;
    width: 39%;
    }

    .details .name {
    font-weight: bold;
    }

    .details a {
    text-decoration: none;
    color: #000;
    font-style: italic;
    }

    .details a:hover {
    text-decoration: underline;
    color: #000;
    }

    .details .skills {

    }

    .details .skills__item {
    margin-bottom: 10px;
    }

    .details .skills__item .right input {
    display: none;
    }

    .details .skills__item .right label {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #C3DEF3;
    border-radius: 20px;
    margin-right: 3px;
    }

    .details .skills__item .right input:checked + label {
    background: #79A9CE;
    }

    .phone-hidden {
    display: none;
    }

    .last-name {
    color: #333333;
    }