Single-page personal portfolio website

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(

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!

StackExchange Code Review Q#156226, answer score: 3