What do you think about my new website?

[Jeroen1322]

Hi guys!

 

Just finished my 'presentation website' for school. It is Dutch but please look at the design and UI. (Have your sound on for the intro)

 

I appreciate all constructive criticism!

 

Thanks!

 

For the non dutchies "Klik hier" means "Click here".

[Cacao]

"Klik hier" means "Click here".

You don't say?

[2chriswy]

a mute button for the music would be great

[Jeroen1322]

You don't say?

Haha, you won't believe it but there are people who don't know that they should press the only button on the page.

[Syntaxvgm]

That scroll effect is too much and doesn't keep up. 

I like the intro. 

While i could nag about the way you designed it and all layout wise, this is your personal site and it doesn't really have to be "professional". I'm really impressed that you did this at 15. Good job! Much better than the majority of people your age. 

[Jeroen1322]

a mute button for the music would be great

It is for a presentation that i have to do for school and the music is part of the intro. There is a mute button but the music player is hidden and it wouldn't look very 'clean' when you see a random 

music player.

[Unhelpful]

 

Really like it. Aside from one thing.

 

Webpages with noise that don't warn you can all go die in a @#%@#$^T$EWRSDFGERSDF% T#$#@%!^R!@#Q!#@EWQDDF

 

 

Yes I know you gave fair warning. More of a joke

[Jeroen1322]

That scroll effect is too much and doesn't keep up. 

I like the intro. 

While i could nag about the way you designed it and all layout wise, this is your personal site and it doesn't really have to be "professional". I'm really impressed that you did this at 15. Good job! Much better than the majority of people your age. 

Yeah the scroll effect is still a tricky one for me because some objects are larger than the other and it activates when you are x amount of pixels away from the top of the screen. But i compensate it

with the presentation because the text is going to be read so there isn't much scrolling going on.

 

And thanks!  

[Syntaxvgm]

HTML layout wise get rid of all the breaks. Use containers purely. Perhaps put all of the js in a dedicated file, or at least combine all of those script tags. Again I would complain that's sloppy but 15 wow! Netherlands schools must be pretty cool. I thin in a few more years you'll be pretty damn good. Friend of mine got a professional web dev job right out of highschool at age 18, you could easily do the same someday. 

[ShadowCaptain]

Rather long intro until the click here part

 

and the scrolling is a little TOOOOO much, some things should be static and some things should move in and out as you scroll so that you get a context of where you are on the page

 

otherwise its very nice

[Unhelpful]

Netherlands schools must be pretty cool. I thin in a few more years you'll be pretty damn good. Friend of mine got a professional web dev job right out of highschool at age 18, you could easily do the same. 

Hey man when I was 15 my CIS class had to do a similar thing... Last I checked a few months ago my webpage is still live... BRB LOOKING FOR IT!

 

I'll link it if I find it.

[Jeroen1322]

Really like it. Aside from one thing.

 

Webpages with noise that don't warn you can all go die in a @#%@#$^T$EWRSDFGERSDF% T#$#@%!^R!@#Q!#@EWQDDF

 

 

Yes I know you gave fair warning. More of a joke

Haha, it is a presentation and not meant to be used for random people so the "music" isn't much of a problem. When i'm going to make website that is meant to be visited by the public i'll put a giant 

WARNING, THERE IS MUSIC right in the middle of the screen!

[Unhelpful]

Haha, it is a presentation and not meant to be used for random people so the "music" isn't much of a problem. When i'm going to make website that is meant to be visited by the public i'll put a giant 

WARNING, THERE IS MUSIC right in the middle of the screen!

Accompanied by a screamer

[Jeroen1322]

HTML layout wise get rid of all the breaks. Use containers purely. Perhaps put all of the js in a dedicated file, or at least combine all of those script tags. Again I would complain that's sloppy but 15 wow! Netherlands schools must be pretty cool. I thin in a few more years you'll be pretty damn good. Friend of mine got a professional web dev job right out of highschool at age 18, you could easily do the same someday. 

Yeah the files are a big mess.. But hey! If it works don't fix it!

 

Dutch school aren't that great. Nobody from my school could do this, but then again nobody is interested in this kind of stuff

[Unhelpful]

Yeah the files are a big mess.. But hey! If it works don't fix it!

That's not how that works.

 

Sauce: I'm a really horribly crappy web-designer and that's what I do. I don't fix spaghetti-code as long as it works.

[Jeroen1322]

Rather long intro until the click here part

 

and the scrolling is a little TOOOOO much, some things should be static and some things should move in and out as you scroll so that you get a context of where you are on the page

 

otherwise its very nice

I did that because otherwise you could only hear a couple of seconds of the music. And i know that the scrolling effect it too much but it is a presentation, there isn't a lot of constant scrolling

going on. I don't know how to make things going out the page because i have hidden them with CSS and they are activated with jQeury and i don't know how it "deactivate" it without screwing up the whole page. 

[ShadowCaptain]

I did that because otherwise you could only hear a couple of seconds of the music. And i know that the scrolling effect it too much but it is a presentation, there isn't a lot of constant scrolling

going on. I don't know how to make things going out the page because i have hidden them with CSS and they are activated with jQeury and i don't know how it "deactivate" it without screwing up the whole page. 

 

That is true, I hadn't considered the music part.

 

I guess if its a presentation then its ok. I just know too much animation can get annoying fast if it is overused

 

but it works very well, better than anything I could ever do

[Jeroen1322]

That is true, I hadn't considered the music part.

 

I guess if its a presentation then its ok. I just know too much animation can get annoying fast if it is overused

 

but it works very well, better than anything I could ever do

Yeah there is a lot of animations indeed but otherwise the page would be very passive and when i cut the animations off at one point people would think that the code doesn't work.

 

And thanks!  

[Paralectic]

What did you use for the intro?

[Jeroen1322]

What did you use for the intro?

I didn't make the whole thing by myself but i believe it is only HTML5 and CSS3 and for the music the HTML5 <audio controls autoplay> tag.

 

Here is the code:

 

 

Oh and a custom font.

<!DOCTYPE html><html><head><title>Assessment Intro</title><style>@font-face {  font-family: 'Electrolize';  font-style: normal;  font-weight: 400;  src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');}body {	background: #310404 url(http://web-sonick.zz.mu/images/sl/red_texture.jpg) repeat top left;	font-family: 'Electrolize';}.container{	width: 100%;	position: relative;	overflow:hidden;}a {  text-decoration:none;}h1.main,p.demos {	-webkit-animation-delay: 18s;	-moz-animation-delay: 18s;	-ms-animation-delay: 18s;	animation-delay: 18s;}.sp-container {	position: fixed;	top: 0px;	left: 0px;	width: 100%;	height: 100%;	z-index: 0;	background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));	background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));	background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));	background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));}.sp-content {	position: absolute;	width: 100%;	height: 100%;	left: 0px;	top: 0px;	z-index: 1000;}.sp-container h2 {	position: absolute;	top: 50%;	line-height: 100px;	height: 90px;	margin-top: -50px;	font-size: 90px;	width: 100%;	text-align: center;	color: transparent;	-webkit-animation: blurFadeInOut 3s ease-in backwards;	-moz-animation: blurFadeInOut 3s ease-in backwards;	-ms-animation: blurFadeInOut 3s ease-in backwards;	animation: blurFadeInOut 3s ease-in backwards;}.sp-container h2.frame-1 {	-webkit-animation-delay: 0s;	-moz-animation-delay: 0s;	-ms-animation-delay: 0s;	animation-delay: 0s;}.sp-container h2.frame-2 {	-webkit-animation-delay: 3s;	-moz-animation-delay: 3s;	-ms-animation-delay: 3s;	animation-delay: 3s;}.sp-container h2.frame-3 {	-webkit-animation-delay: 6s;	-moz-animation-delay: 6s;	-ms-animation-delay: 6s;	animation-delay: 6s;}.sp-container h2.frame-4 {	font-size: 200px;	-webkit-animation-delay: 9s;	-moz-animation-delay: 9s;	-ms-animation-delay: 9s;	animation-delay: 9s;}.sp-container h2.frame-5 {	-webkit-animation: none;	-moz-animation: none;	-ms-animation: none;	animation: none;	color: transparent;	text-shadow: 0px 0px 1px #fff;}.sp-container h2.frame-5 span {	-webkit-animation: blurFadeIn 3s ease-in 12s backwards;	-moz-animation: blurFadeIn 1s ease-in 12s backwards;	-ms-animation: blurFadeIn 3s ease-in 12s backwards;	animation: blurFadeIn 3s ease-in 12s backwards;	color: transparent;	text-shadow: 0px 0px 1px #fff;}.sp-container h2.frame-5 span:nth-child(2) {	-webkit-animation-delay: 13s;	-moz-animation-delay: 13s;	-ms-animation-delay: 13s;	animation-delay: 13s;}.sp-container h2.frame-5 span:nth-child(3) {	-webkit-animation-delay: 14s;	-moz-animation-delay: 14s;	-ms-animation-delay: 14s;	animation-delay: 14s;}.sp-globe {	position: absolute;	width: 282px;	height: 273px;	left: 50%;	top: 50%;	margin: -137px 0 0 -141px;	background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;	-webkit-animation: fadeInBack 3.6s linear 14s backwards;	-moz-animation: fadeInBack 3.6s linear 14s backwards;	-ms-animation: fadeInBack 3.6s linear 14s backwards;	animation: fadeInBack 3.6s linear 14s backwards;	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";	filter: alpha(opacity=30);	opacity: 0.3;	-webkit-transform: scale(5);	-moz-transform: scale(5);	-o-transform: scale(5);	-ms-transform: scale(5);	transform: scale(5);}.sp-circle-link {	position: absolute;	left: 50%;	bottom: 100px;	;	text-align: center;	line-height: 100px;	width: 100px;	height: 100px;	background: #fff;	color: #3f1616;	font-size: 25px;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	-webkit-animation: fadeInRotate 1s linear 16s backwards;	-moz-animation: fadeInRotate 1s linear 16s backwards;	-ms-animation: fadeInRotate 1s linear 16s backwards;	animation: fadeInRotate 1s linear 16s backwards;	-webkit-transform: scale(1) rotate(0deg);	-moz-transform: scale(1) rotate(0deg);	-o-transform: scale(1) rotate(0deg);	-ms-transform: scale(1) rotate(0deg);	transform: scale(1) rotate(0deg);}.sp-circle-link:hover {	background: #85373b;	color: #fff;}/**/@-webkit-keyframes blurFadeInOut{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		-webkit-transform: scale(1.3);	}	20%,75%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		-webkit-transform: scale(1);	}	100%{		opacity: 0;		text-shadow: 0px 0px 50px #fff;		-webkit-transform: scale(0);	}}@-webkit-keyframes blurFadeIn{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		-webkit-transform: scale(1.3);	}	50%{		opacity: 0.5;		text-shadow: 0px 0px 10px #fff;		-webkit-transform: scale(1.1);	}	100%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		-webkit-transform: scale(1);	}}@-webkit-keyframes fadeInBack{	0%{		opacity: 0;		-webkit-transform: scale(0);	}	50%{		opacity: 0.4;		-webkit-transform: scale(2);	}	100%{		opacity: 0.2;		-webkit-transform: scale(5);	}}@-webkit-keyframes fadeInRotate{	0%{		opacity: 0;		-webkit-transform: scale(0) rotate(360deg);	}	100%{		opacity: 1;		-webkit-transform: scale(1) rotate(0deg);	}}/**/@-moz-keyframes blurFadeInOut{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		-moz-transform: scale(1.3);	}	20%,75%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		-moz-transform: scale(1);	}	100%{		opacity: 0;		text-shadow: 0px 0px 50px #fff;		-moz-transform: scale(0);	}}@-moz-keyframes blurFadeIn{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		-moz-transform: scale(1.3);	}	100%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		-moz-transform: scale(1);	}}@-moz-keyframes fadeInBack{	0%{		opacity: 0;		-moz-transform: scale(0);	}	50%{		opacity: 0.4;		-moz-transform: scale(2);	}	100%{		opacity: 0.2;		-moz-transform: scale(5);	}}@-moz-keyframes fadeInRotate{	0%{		opacity: 0;		-moz-transform: scale(0) rotate(360deg);	}	100%{		opacity: 1;		-moz-transform: scale(1) rotate(0deg);	}}/**/@keyframes blurFadeInOut{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		transform: scale(1.3);	}	20%,75%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		transform: scale(1);	}	100%{		opacity: 0;		text-shadow: 0px 0px 50px #fff;		transform: scale(0);	}}@keyframes blurFadeIn{	0%{		opacity: 0;		text-shadow: 0px 0px 40px #fff;		transform: scale(1.3);	}	50%{		opacity: 0.5;		text-shadow: 0px 0px 10px #fff;		transform: scale(1.1);	}	100%{		opacity: 1;		text-shadow: 0px 0px 1px #fff;		transform: scale(1);	}}@keyframes fadeInBack{	0%{		opacity: 0;		transform: scale(0);	}	50%{		opacity: 0.4;		transform: scale(2);	}	100%{		opacity: 0.2;		transform: scale(5);	}}@keyframes fadeInRotate{	0%{		opacity: 0;		transform: scale(0) rotate(360deg);	}	100%{		opacity: 1;		transform: scale(1) rotate(0deg);	}}</style><style>#audio{	visibility: hidden;}.audio{	visibility: hidden;}</style></head><body><div class="container">    <div class="header">        <div class="clr"></div>    </div>    <div class="sp-container">        <div class="sp-content">            <div class="sp-globe"></div>            	<h2 class="frame-1">Welkom bij de assessment van:</h2>            	<h2 class="frame-2">Jeroen Grooten</h2>            	<h2 class="frame-3">R3ki1</h2>            	<h2 class="frame-4">RSG Pantarijn<br /><br /><br /> Rhenen!</h2>            		<a class="sp-circle-link" href="http://www.webbouwgrooten.nl/school/assessment/index1.html">Klik hier!</a>        </div>    </div></div><div class="audio" id="audio">	<audio controls autoplay>  		<source src="x-files.ogg" type="audio/ogg">  		<source src="x-files.mp3" type="audio/mpeg">  		Uw browser ondersteund het audio type niet.	</audio>    </div></body></html>

[Paralectic]

I didn't make the whole thing by myself but i believe it is only HTML5 and CSS3 and for the music the HTML5 <audio controls autoplay> tag.

 

Here is the code:

 

 

Oh and a custom font.

Oh yes the <audio> tag in HTML 5 is so lovely indeed, and all the hiding of the elements done with animation delays.

I would have used jQuery for all that but it's a personal preference :-)

 

Nice job, I'm in my second year of "applicatieontwikkelaar" currently by the way.

[Jeroen1322]

Oh yes the <audio> tag in HTML 5 is so lovely indeed, and all the hiding of the elements done with animation delays.

I would have used jQuery for all that but it's a personal preference :-)

 

Nice job, I'm in my second year of "applicatieontwikkelaar" currently by the way.

Haha, you use jQeury for everything! I still have to learn it but i have to same up some money to buy a book to learn it.

 

Thanks btw and how is 'applicatieontwikkelaar'? Are you going to MBO Utrecht?

[Paralectic]

Haha, you use jQeury for everything! I still have to learn it but i have to same up some money to buy a book to learn it.

 

Thanks btw and how is 'applicatieontwikkelaar'? Are you going to MBO Utrecht?

The study is good sometimes, depends on the teachers as obvious and no I'm going to college in Dordrecht.

[Jeroen1322]

The study is good sometimes, depends on the teachers as obvious and no I'm going to college in Dordrecht.

Ok, thanks!

[tbc]

drag select before clicking the click here button.