Astrotomic Landingpage

Astrotomic Landingpage

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

To test my Stancy package with a simple real world scenario I've created a landing-page for Astrotomic. It's not finished yet but the basic design is ready. :)
Any thoughts/ideas?

Link:


Repo:

Lighthouse:

Resources:

 
Last edited:

tom

Creator of StickerRun®
Community Team
Local time
04:28
Joined
Oct 13, 2019
Messages
258

This looks great! Very nice work 😍

One thing: the laravel translatable package links to the wrong repository on github.

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

This looks great! Very nice work 😍

One thing: the laravel translatable package links to the wrong repository on github.

Thanks! 😊 Nothing to improve? 😳

And yeah, it's also a mix of @apply and real tailwind classes in HTML. No partials and really no usage of the content file 😂
So still a lot to do but wanted to showcase the design idea. 😊

 

Adam

Mr. Webwide
Administrator
Local time
03:28
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

I am not normally a fan of too much animation on sites but I think this has such a dynamic feel that it could really benefit from it.

I think it would be cool if you separated the asteroid layer from the background image and applied it as really subtle parallax effect either by scroll or cursor position. The numbers could count upwards.

The lead text could be bigger also to make it feel like more of a main feature. 😃

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

I am not normally a fan of too much animation on sites but I think this has such a dynamic feel that it could really benefit from it.

I think it would be cool if you separated the asteroid layer from the background image and applied it as really subtle parallax effect either by scroll or cursor position. The numbers could count upwards.

The lead text could be bigger also to make it feel like more of a main feature. 😃

Thanks a lot!
Yeah, atm it's only HTML & CSS. I want to use JS very very very few and only vanilla. But some animations should be possible.

Do you mean the "open source / PHP / Laravel" or the paragraph below?

 

Adam

Mr. Webwide
Administrator
Local time
03:28
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

Thanks a lot!
Yeah, atm it's only HTML & CSS. I want to use JS very very very few and only vanilla. But some animations should be possible.

Do you mean the "open source / PHP / Laravel" or the paragraph below?

Both 😛

 

tom

Creator of StickerRun®
Community Team
Local time
04:28
Joined
Oct 13, 2019
Messages
258

Nothing to improve? 😳

I‘m not sure about the statistic boxes. Can you maybe try to make a few small changes like shown on the picture?
I really like the rest of the page, but the stats boxes do not fit IMHO. 🙂

FAD3C581-0CB1-479B-B46D-1AB8E01C55F7.jpeg

Oh and like @Adam said, a parallax effekt would be great, so the comets move when scrolling up/down. ☺

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

I‘m not sure about the statistic boxes. Can you maybe try to make a few small changes like shown on the picture?
I really like the rest of the page, but the stats boxes do not fit IMHO. 🙂

View attachment 32

Oh and like @Adam said, a parallax effekt would be great, so the comets move when scrolling up/down. ☺

Okay, will play a bit with it. Thanks for all your recommendations! 😊

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

@Adam & @tom I've changed some things, and also improved the HTML, performance and security. 😅
The numbers are animated now, enormous 19 lines of JS. The parallax will come, just have to split the image into two and write some fancy JS for it. 👨‍💻

PS: the translatable link is adjusted. 😉

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him


The page uses cached real data now. :)
So the counters use the real numbers and I've added this small statistics line to the two promoted packages.
The next steps will be listing all remaining packages in simpler & smaller cards and add a list of all contributors.

But with these API retrieved data files I've proved the concept of Stancy and that it works like expected. 🎉🚀

Every single line of code is still available in the Astrotomic/astrotomic.info repo. So for the ones who are interested in a real Stancy usecase - go for it. 😉

 
Last edited:

uglyduck

Member
Local time
22:28
Joined
Oct 18, 2019
Messages
6

I love how clean the site is. My random 2 cents:

Not sure how much of a rabbit hole you want to go down, but you could always play around with using
viewport heights for the main CTA (height: 100vh - header etc). At least on bigger screens the main CTA would be centered and all banner content in view.

That's just some personal preference though, to each their own 🙂

 

James

A Verified Legend
Gold Member
Local time
03:28
Joined
Oct 13, 2019
Messages
49

It looks like a premium WordPress landing page. That's a compliment by the way! 😇

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

I love how clean the site is. My random 2 cents:

Not sure how much of a rabbit hole you want to go down, but you could always play around with using
viewport heights for the main CTA (height: 100vh - header etc). At least on bigger screens the main CTA would be centered and all banner content in view.

That's just some personal preference though, to each their own 🙂

I have to check but atm I have 75 or 50vh as min-height. I've thought about 100vh but in my screen it felt a bit lost. Will try it again with the new larger font sizes.
And yes, clean is my personal preference - in design and code!^^

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

It looks like a premium WordPress landing page. That's a compliment by the way! 😇
Thanks for adding the explanation. Otherwise I would feel dissed. 😅
And to be honest: the fundamental idea is stolen from a WordPress theme. But really nothing, except the idea, is copied. 😊
That it is: xPider Dark 2.0 - Cairo

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

@uglyduck it was 75vh and is now 100vh. Some new flex classes and it was done. 😅
I start to fall in love with tailwind.

 

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

@Adam thanks for your parallax idea! It's implemented and with this 45° parallax movement it looks pretty awesome! 😍
The comets are also a SVG - so nearly no additional traffic. 😊


And the required JS is only 9 lines of formatted code. 😱
JavaScript:
window.addEventListener('scroll', function() {
    Object.assign(
        document.querySelector('body#body-home header').style,
        {
            backgroundPositionY: -(window.innerHeight * 0.5) + (window.pageYOffset * 0.5) + 'px',
            backgroundPositionX: -(window.pageYOffset * 0.5) + 'px',
        }
    );
});

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
04:28
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

And here you are - I would say: finished!

The remaining (not promoted) packages are listed now and all contributors are listed. I've added some wavy waves around the contributors for a better section splitting.


You want to get on this list? Or even get the new number one?
Feel free to contribute to any of the listed packages! 👨‍💻 😎

 

uglyduck

Member
Local time
22:28
Joined
Oct 18, 2019
Messages
6

@uglyduck it was 75vh and is now 100vh. Some new flex classes and it was done. 😅
I start to fall in love with tailwind.


Nice! That has really come a long way since your first post 👍

 
Top