5
\$\begingroup\$

I am not sure if I am right by asking this here, but I have got a big site, but I feel like the code is very messy. I am using plain CSS to get things done. I don't want to add frameworks and stuff like that. I want to get this code more tidy without duplications, while still be readable.

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box
}

html {
    height: 100%;
    width: 100%
}

body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: 'Raleway', sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    font-size: 10px;
    background: #2284c6;
    background: -webkit-linear-gradient(left, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%);
    background: linear-gradient(to right, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%)
}

:root {
    --mainblack: #2d2d2d;
    --hover-color: #ffbb42
}

body, .header, .header > ul, .section, .skills, .projectwrapper, .contactlist, #mailform, .iconrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

html::-webkit-scrollbar {
    width: 10px
}

html::-webkit-scrollbar-track-piece {
    background-color: #4d4d4d
}

html::-webkit-scrollbar-thumb {
    background-color: rgba(255, 187, 66, .5);
    border-radius: 50px
}

html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 187, 66, 1)
}

@-webkit-keyframes growABit {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes growABit {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1)
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-webkit-keyframes growBigger {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3)
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes growBigger {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3)
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-webkit-keyframes showOnLoad {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes showOnLoad {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes upAndDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes upAndDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.buttons:hover {
    -webkit-animation: growABit;
    animation: growABit
}

.contactlist img:hover {
    -webkit-animation: growBigger;
    animation: growBigger
}

.buttons:hover, .contactlist img:hover {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.header, .header > ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.header > ul > li > a > img {
    height: 70px;
    width: auto;
    margin-top: 50px
}

.header > ul {
    height: 40px;
    list-style: none;
    width: 100%;
    margin-top: 10px;
}

.header > ul > li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center
}

.header > ul > li > a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    height: 100%
}

.header > ul > li > a, .header > ul > li > a:hover, p > a, p > a:hover {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms
}

.header > ul > li > a:hover, p > a:hover {
    color: var(--hover-color, #ffbb42)
}

.main {
    min-height: 100%
}

.section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh
}

.section:last-child {
    min-height: 90vh;
}

h1, h2, h3 {
    font-family: 'Nixie One', cursive;
    margin-top: 5px
}

h1, h2, h3, .section > p, .dropdown {
    text-align: center
}

.section h1, .section > p, p > a {
    color: #fff
}

.section > h1 {
    font-size: 30px;
}

.buttons, input, textarea, .dropdown-content > p {
    font-size: 14px
}

.section:last-child > p {
    max-width: 90vw;
    margin: 0 auto
}

.section:first-child a#aboutmelink {
    height: auto;
    width: 20px;
    margin: 20px auto 0
}

.section:first-child img {
    width: inherit;
    -webkit-animation: upAndDown;
    animation: upAndDown;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

.buttons, input[name="submitmail"], input[name="reset"] {
    background-color: #fff;
    border-radius: 5px;
    color: var(--mainblack, #2d2d2d);
    cursor: pointer;
    height: 40px;
    width: 90vw
}

.buttons, .buttons:hover {
    box-shadow: 0 7px 0 0 rgba(250, 250, 250, .75);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms
}

.buttons:active, .buttons:focus {
    box-shadow: 0 3px 0 0 rgba(250, 250, 250, .75);
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
    -webkit-animation: none;
    animation: none
}

button:hover, button:focus, .dropdown-content {
    border: 1px solid #fff;
    background-color: var(--hover-color, #ffbb42)
}

.dropdown {
    display: inline-block;
    margin: 10px auto;
    position: relative
}

.dropdown-content {
    border-radius: 5px;
    display: none;
    left: 0;
    margin: 20px auto 0;
    padding: 0 10px 10px;
    position: relative;
    right: 0;
    width: 90vw;
    background: rgba(255, 255, 255, .5);
}

.dropdown-content a:last-child:hover {
    color: var(--mainblack, #2d2d2d)
}

.show {
    display: block
}

.projectbtn + .dropdown-content img {
    box-shadow: 0 0 25px 0 rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    display: block;
    width: 100%;
    margin: 10px 0
}

.introduction {
    width: 90%;
    margin: 5px auto;
    color: #fff
}

.introduction h1 {
    font-size: 25px;
    margin: 10px 0 5px;
    border-bottom: 1px solid #fff
}

.introduction p, .dropdown-content {
    text-align: justify;
    text-indent: 30px;
}

.iconrow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    width: 90%
}

.iconrow img {
    display: block;
    height: 50px;
    margin: 10px auto;
    width: 50px
}

.showAnimation {
    opacity: 0;
    -webkit-animation: showOnLoad;
    animation: showOnLoad;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.skills {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 10px auto;
    width: 60%
}

.skills img {
    height: 40px;
    width: 35px;
    display: inline-block
}

[name="colorflipped"] {
    -webkit-filter: invert(100%);
    filter: invert(100%)
}

.skillstars {
    display: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: inherit;
    flex-direction: inherit;
    height: 20px
}

.skillstars img {
    height: inherit;
    width: 20px
}

.introduction li {
    list-style-type: none;
    margin-bottom: 5px;
    text-align: center;
}

.introduction li:nth-child(2), .skills:nth-of-type(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.introduction li:nth-child(3), .skills:nth-of-type(3) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.introduction li:nth-child(4) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

#moreprojectsbutton {
    background-color: var(--hover-color, #ffbb42);
    cursor: not-allowed;
    color: #fff;
    margin: 10px auto;
    opacity: .5;
    width: 40%;
}

.contactlist {
    list-style-type: none;
    justify-content: space-around;
    width: 100%
}

.maildownbtn {
    margin-bottom: 1px
}

#mailform {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto 10px;
    width: 90%
}

#mailform > h3 {
    align-self: flex-start
}

input[name], textarea[name="message"] {
    border-radius: 5px;
    height: 30px;
    padding: 5px;
    width: 100%
}

input[name]:focus:required:invalid, textarea[name="message"]:focus:required:invalid {
    color: #dc143c;
    border: 2px solid #dc143c
}

input[name]:focus:required:valid, textarea[name="message"]:focus:required:valid {
    color: green;
    border: 2px solid green
}

input[name="submitmail"], input[name="reset"] {
    width: 30%;
    margin-top: 20px
}

input[name="submitmail"]:hover {
    border: 1px solid #32cd32;
    color: #32cd32;
    background-color: #fff
}

input[name="reset"]:hover {
    border: 1px solid #dc143c;
    color: #dc143c;
    background-color: #fff
}

textarea[name="message"] {
    height: 80px;
    max-width: 100%;
    text-align: left
}

footer {
    border-top: 1px solid #fff;
    font-size: 12px;
    color: #fff;
    padding: 10px;
    position: relative;
    text-align: center
}

@media screen and (min-width: 1024px) {
    h1, h2, h3 {
        font-size: 200%
    }

    p {
        font-size: 120%
    }

    .header > ul > li:first-child {
        margin-right: 50vw;
    }

    .buttons {
        width: 25vw
    }

    .introduction {
        width: 60vw
    }

    .skills {
        width: 30%
    }

    .introduction p, .dropdown-content {
        text-indent: 0
    }

    #moreprojectsbutton {
        width: 20vw
    }

    .iconrow {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 30vw
    }

    .contactlist {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .dropdown-content {
        margin: 20px auto 0;
        width: 40vw
    }

    .dropdown-content a {
        width: 90%
    }

    .dropdown-content p {
        max-width: 80%;
        margin-left: 10%
    }

    .image-link {
        display: block;
        margin: 0 auto
    }

    .projectimage {
        -o-object-fit: cover;
        object-fit: cover
    }

    .section:last-child > p {
        max-width: 40%
    }
}
<!DOCTYPE html>
<html lang=en>
<head>
    <title>Homepage - Maikel van Veen</title>
    <meta charset=utf-8>
    <meta content="width=device-width,initial-scale=1" name=viewport>
    <meta name="description"
          content="The official portfolio website of Maikel van Veen. On this website you can find all the information you should know about me, and what I can do for you!">
    <link href=assets/css/index.css rel=stylesheet>
    <link href="https://fonts.googleapis.com/css?family=Raleway:600&subset=latin-ext" rel=stylesheet>
    <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
    <link rel="shortcut icon" href="/assets/img/icons/favicon.ico">
</head>
<body>
<header class=header>
    <ul>
        <li>
            <a href=#contact>
                <img src=assets/img/icons/logo.png alt=Logo>
            </a>
        </li>
        <li>
            <a href=#aboutme>
                About Me
            </a>
        </li>
        <li>
            <a href=#portfolio>
                Portfolio
            </a>
        </li>
        <li>
            <a href=#contact>
                Contact
            </a>
        </li>
    </ul>
</header>
<main class=main>
    <section class=section>
        <h1>Maikel van Veen</h1>
        <p>
            Vanilla Web Development, Design and <a href=#projects>more</a>!
        </p>
        <a href="#aboutme" id="aboutmelink"><img src="assets/img/icons/arrow-down.png" alt="Animated Arrow"></a>
    </section>
    <section class=section id=aboutme>
        <h1>About Me</h1>
        <section class="introduction">
            <h1>Who Am I?</h1>
            <p>
                I am a 20-year-old Dutch student of Communication & Multimedia Design.
                Besides studying, I am working hard on becoming a professional web developer.
                I have always had a thing for development, but since this year that became a passion!
                I am still learning and gaining experience, however there are a few projects on this website shown
                already!
                I hope that you will find interesting things between my projects and feel free to send me a message via
                one
                of the social media platforms I am on.
            </p>
        </section>
        <section class="introduction">
            <h1>My Languages</h1>
            <p>
                If I say so myself I get progressively better at all these languages everyday!
                Below you can find the languages I use, along with the amount of skill in them given with the amount
                of stars. The minimum is 1 and the maximum is 5 stars.
            </p>
            <div class=skills>
                <img src="assets/img/icons/css3.png" name="colorflipped" title="CSS3">
                <div class=skillstars>
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                </div>
            </div>
            <div class=skills>
                <img src="assets/img/icons/html5.png" title="HTML5">
                <div class=skillstars>
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                </div>
            </div>
            <div class=skills>
                <img src="assets/img/icons/JS.png" title="JavaScript">
                <div class=skillstars>
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                    <img src=assets/img/icons/star.svg alt="Rating Star Image">
                </div>
            </div>
        </section>
        <section class="introduction">
            <h1>I can do the following for you:</h1>
            <ul>
                <li>Create a custommade, new website.</li>
                <li>Code a PSD template into a working website.</li>
                <li>Rework an outdated website.</li>
                <li>Clean up messy code of a website.</li>
            </ul>
        </section>
    </section>
    <section class=section id="portfolio">
        <h1>Portfolio</h1>
        <div class=dropdown>
            <button class="buttons projectbtn" onclick='dropDownFunction("dropdownone")'>PSD to Bussiness Site
                (01-2017)
            </button>
            <div class="dropdown-content" id=dropdownone>
                <h2>Bussiness Web-template<br>(01-2017)</h2>
                <a href=projects/bussinessTemp/templatetwo.html class=image-link>
                    <img src=assets/img/projects/template2.png alt="Bussiness Template Project Image"
                         class=projectimage>
                </a>
                <p>A big coding project. I did a lot of work on getting this website (almost) exactly the same as the
                    template I styled it after. Besides that, it is also responsive, so when you get a smaller screen
                    you get a better feel of control in the site. The main goal of me making this, was getting familiar
                    with making PSD templates into working code.
                    <br>Take a look at the website by clicking
                    <a href=projects/bussinessTemp/templatetwo.html>here</a> or on the picture above.
                </p>
            </div>
        </div>
        <div class=dropdown>
            <button class="buttons projectbtn" onclick='dropDownFunction("dropdowntwo")'>Watch and Code To-Do List
                (01-2017)
            </button>
            <div class=dropdown-content id=dropdowntwo>
                <h2>Watch And Code To-Do List<br>(01-2017)</h2>
                <a href=projects/watchandcode/watchandcode.html class=image-link>
                    <img src=assets/img/projects/watchandcode.png alt="Watch and Code Project Image" class=projectimage>
                </a>
                <p>This was a learning project for myself, getting used to using Practical Javascript. Gordon Zhu (owner
                    of Watch and Code) did a good job teaching how to create a todo-list from scratch. The styling
                    applied was not part of the course.
                    <br>Take a look at the website by clicking
                    <a href=projects/watchandcode/watchandcode.html>here</a> or on the picture above.
                </p>
            </div>
        </div>
        <div class=dropdown>
            <button class="buttons projectbtn" onclick='dropDownFunction("dropdownthree")'>Next Web (Study-Related)
                (01-2017)
            </button>
            <div class=dropdown-content id=dropdownthree>
                <h2>Next Web Module Website<br>(01-2017)</h2>
                <a href=projects/nextweb/nextwebIndex.html class=image-link>
                    <img src=assets/img/projects/nextweb.png alt="Next Web Project Image" class=projectimage>
                </a>
                <p>This project was all about design and coding. My interest in coding sky-rocketed after this project.
                    The goal was to make a prototype website for a responsive 'web-app'-like website.
                    <br>Take a look at the website by clicking
                    <a href=projects/nextweb/nextwebIndex.html>here</a> or on the picture above.
                </p>
            </div>
        </div>
        <button type=submit disabled id=moreprojectsbutton class="buttons">More To Come!</button>
    </section>
    <section class=section id="contact">
        <h1>Contact Me</h1>
        <p>If you want me to make something for you, or just get to know me better, you can contact me via:</p>
        <div class=iconrow>
            <ul class=contactlist>
                <li>
                    <a target=_blank href="https://www.facebook.com/MaikelvV?ref=bookmarks">
                        <img src=assets/img/socials/facebook.png alt="Facebook Logo">
                    </a>
                </li>
                <li>
                    <a target=_blank href=https://github.com/Maikxx>
                        <img src=assets/img/socials/github.png alt="Github Logo">
                    </a>
                </li>
                <li>
                    <a target=_blank href=https://www.instagram.com/maikvv/ >
                        <img src=assets/img/socials/instagram.png alt="Instagram Logo">
                    </a>
                </li>
                <li>
                    <a target=_blank href=https://www.linkedin.com/in/maikel-van-veen-821721109/ >
                        <img src=assets/img/socials/linkedin.png alt="LinkedIn Logo">
                    </a>
                </li>
                <li>
                    <a target=_blank href=https://www.reddit.com/user/Maikxx10/>
                        <img src=assets/img/socials/reddit.png alt="Reddit Logo">
                    </a>
                </li>
            </ul>
        </div>
        <div class=dropdown>
            <button class="buttons maildownbtn" onclick='dropDownFunction("dropdownseven")'>You can also send me a mail
                here!
            </button>
            <div class=dropdown-content id=dropdownseven>
                <form id=mailform action="mailto:maikel.van.veen@outlook.com?subject=Maikel_van_Veen" enctype=text/plain
                      method=post>
                    <h3>Name:</h3>
                    <input name=name oninput='setCustomValidity("")'
                           oninvalid='this.setCustomValidity("Please enter your name here!")' required>
                    <h3>E-Mail:</h3>
                    <input name=email type=email oninput='setCustomValidity("")'
                           oninvalid='this.setCustomValidity("Please enter your email address here!")' required>
                    <h3>Message:</h3>
                    <textarea form=mailform maxlength=1000 name=message oninput='setCustomValidity("")'
                              oninvalid='this.setCustomValidity("Please enter a clear descriptive message here!")'
                              required rows=10></textarea>
                    <input name=submitmail type=submit value="Submit!">
                    <input name=reset type=reset value="Reset!">
                </form>
            </div>
        </div>
    </section>
</main>
<footer class=footer>
    All content © 2017 by Maikel van Veen. All rights reserved, coded with love by Maikel van Veen.
</footer>
<script>!function (e, t, a, n, c, o, s) {
    e.GoogleAnalyticsObject = c, e[c] = e[c] || function () {
            (e[c].q = e[c].q || []).push(arguments)
        }, e[c].l = 1 * new Date, o = t.createElement(a), s = t.getElementsByTagName(a)[0], o.async = 1, o.src = n, s.parentNode.insertBefore(o, s)
}(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga"), ga("create", "UA-90941042-1", "auto"), ga("send", "pageview")</script>
<script src=assets/js/script.js></script>

\$\endgroup\$
  • \$\begingroup\$ Please edit your title so it conveys what your code does, instead of what you want to get out of a review. State your concerns in the body of the question, not in the title. Thank you :-) \$\endgroup\$ – Mast Feb 24 '17 at 18:46
3
\$\begingroup\$

I've reviewed your code and i can comment on some things:

I have a similar personal site and I can tell you there is not many things you can really cut in order to make the code more tidy without resorting to frameworks. Inevitably as this is a static website you will have duplication especially if you want to have those auto-prefixes.

Colors

I would like to criticize the use of colors in your website. In my opinion they look dated. Try to use a lighter blue color in the background or use a flat color scheme from adobe kuler.

Links

I cannot see any of your links because they have similar color with the background. If you plan ton becoming a great web designer you will have to pay attention to those things as they stand out.

Buttons and Animations

Don't use those 3d buttons they look horrible. Make them flat or at least with a smooth gradient and shadow and please disable the animations!

Fonts

Change the font to something more popular from Google fonts and not convert something from Font Squirrel. Also make them slightly bigger in size.

Background

Add section on the top of the site with a background image of something that you like similar with example some medium blog articles. Make sure its of good resolution and quality. If you can make it static when you scroll even better.

Overall

Overall I'm sure with a lot of work and passion you will become one great designer. You just have to keep strong attention to detail and make your own statement by showcasing your portfolio. Good luck!

\$\endgroup\$
  • \$\begingroup\$ Thank you for your reply! What do you mean with you can't see any links? Which links do you mean? I agree with the buttons haha, changed that. Which fonts would you suggest? Again, thank you! \$\endgroup\$ – Maikel van Veen Feb 24 '17 at 22:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.