Palguin.dev


Palguin.dev Init This is my first version of the website. Here I show you how I designed it as a complete beginner in web development. Honestly my approach was very much straight through. Just very try hard getting the framework and with the little know-how i have of html and css try to accomplish the things i want. Definitely not very clean and definitely not very professional, but i felt i just had to get my hands dirty to start. And this is how i went for it:

My first step was the whole setup of the environment and co but i won’t get into details here. Generally i can say that i use Docker, Astro, Github, VSCode and Cloudflare. I think this says most about how this looks from my side here.

Once i had their preset running and online available i started asking myself how i want the website to look like, what content and how do i want it to look like. For that i designed on Canva very very basic templates of my structure as can be seen here:

First Idea Using Canva

With these first ideas documented and designed very simply i though to myself: I need colors and a color scheme to follow so i googled how other people handle this. Turns out that the idea is to design a simple palette and to try to stick to it. In total with only 6 different colors. So i compared what i wanted with pinterest palettes and found a mix i like. Generally i wanted a turquoise representing the water, generally a darkmode and a very contrasty orange/yellow for more pep.

PrimarySecondaryAccent
Brand primaryCompliments the primaryContrasts with Primary and Secondary
#0E6973#118C8C#BF820F

and

LightDarkUI
very light gray, used for backgrounds in light mode/text in dark modevery dark gray used for text in light mode/background in dark modesmall contrast with background, used for borders , dividers, etc
#E2E8F0#121212#F2BB16

Color palette

The ideas designed with canva and my palette i then used to feed into gemini which generated ideas on how to design the pages, which at least in the beginning helped me for translating it into the code i needed until i got more ideas. I hardcoded and just tryharded to create then basic framework of the website which will for sure be bettered in the future but is enough so far for me.

Index AI render Art Project AI render

The Homepage is on github available.: https://github.com/BoofCoder/palguin.dev_Homepage