CK Productions

Vicki's Adventures in Coding

A Website from Scratch

LinkedIn - Victoria Dudley
I have never made a website before but I also haven't been doing any true coding in a long long time, so this is going to be a mess of a project history as I slowly cobble together the basics I need for a website and work from there.

There is an excessive amount of deployments, unfortunately anything including images will not load on my local host to test before posting, so you are getting a full view of everything I try

Eventually there will be a need for art assets to be uploaded, most of these will be made by me using either Clipstudio or Inkscape. Any exceptions will be listed here.

LinkedIn icon from LinkedIn Brand Guidlines
GitHub icon from GitHub Logos and Usage
BlueSky icon from Bluesky for Journalists

Website hosted through Infomaniak using a Node.js blank project

14/08/25
The website is up! I'm able to put some simple text on the page that is reflected on the site proper. The next step is to make a more professional looking maintenance screen to a) look compentant and b) feed any users into an upcoming "Salesforce Digital Experience" project I'll be working on as part of my portfolio. I created the background (/assets/background_site.png) as well as a clean version of the logo and and site icon in #aac6cb (/assets/logo.png and /assets/site icon 2.png) all three made in Inkscape so I can easily test colours.

I had a few tries using background_site.png as the site background but was facing some image loading issues on localhost, tried moving background_site.png to root but no dice, tried a smaller picture (/me.png) and still nothing, will return when I have time

28/08/25
There hasn't been time to do any more work on this, but realised i never pushed the work done on 14/08 so pushed today

08/09/25
Hoping to start this project back up this week, realised I'd never checked the site itself after the push on 28/08, turns out the image upload works fine through GitHub pages! Progress will hopefully be made soon

I came back to this this evening, the background is now working and SHOULD be fixed, no scrolling, a header logo has been added and favicon is working fine. I did try to add social links to the site, the links work, but I am currently struggling to make them sit where I want them to but it is so very late so I will return next I have the time

UPCOMING TASKS:

~~move social links to correct location~~
~~make sure header logo stays centered~~
~~add centre square for maintenance message~~
~~make the README.md look a bit better~~
redo the logo to match text thickness in heading logo

28/08/25
There hasn't been time to do any more work on this, but realised i never pushed the work done on 14/08 so pushed today

08/09/25
Hoping to start this project back up this week, realsied I'd never checked the site itself after the push on 28/08, turns out the image upload works fine through GitHub pages! Progress will hopefully be made soon

I came back to this this evening, the background is now working and SHOULD be fixed, no scrolling, a header logo has been added and favicon is working fine. I did try to add social links to the site, the links work, but I am currently struggling to make them sit where I want them to but it is so very late so I will return next I have the time

UPCOMING TASKS:

~~move social links to correct location~~
~~make sure header logo stays centered~~
add centre square for maintenance message
~~make the README.md look a bit better~~
redo the logo to match text thickness in heading logo

09/09/25
Tidied up the README.md somewhat, I was hoping to colour code some of the test to make a more clear breakdown of my journalling for my dyselxia (large blocks of white on black or vice versa can blur) but alas. This is at least more readable than before

A lot of positional futzing was to be had today, but I've managed to get everything laid out where I relatively want it to be. The styles started to get a bit long so I've moved it into it's own seperate sheet, seems to be working without any additional changes.

For this first stage of project I will probably keep everything fixed as is (once the maintenance message is in) while I move onto a Salesforce project temporarily, adding in relevant links as they are created. But I'm excited to see how much of a challenge making a flexi website is, I gave it a shot and somethings are in the right place but others have just straight vanished! Fun!

Unfortunately I cannot continue anymore today

UPCOMING TASKS:

~~WHERE HAS MY LOGO GONE~~
~~minor fixes on footer and right action tabs~~
~~add centre square for maintenance message~~
link my Salesforce Dev Org to this site
link this site to my Salesforce Dev org
redo the logo to match text thickness in heading logo
maybe be extra and make a maintenance image - haven't decided

But there are also some more challenging goals I have that won't be touched until the far future

FUTURE VICKI PROBLEMS:

~~make site work flexibly on multiple screen sizes~~ kinda works - not happy with overly long or overly tall screens
~~how hard is it to setup sub pages for projects etc~~
how hard is it to make it compatible with a mobile site

I may return to these midway through the Salesforce Digital Experience if I want a Dark Souls esque break, but otherwise I should be happy to proceed soon!

21/02/2026
It has been awhile, whilst I was building this site I was very lucky to be able to get a job back in November and my brain has been focussed on getting up to speed with everything to do with the new job! How exciting.

This weekend I think I've finally reached a point in this new job where I think I can start looking back at this project and I'm while waiting for the Salesforce org to expire (i fucked up my auth and can't get back in right now) I figured I'd come back and try and box off some of my other tasks.

I figured out how to make the header work nicely - looking back I was trying to put the logo header inside the socials header but at the top so just a bunch of small mistakes that only needed me to take a step back to figure out. the footer I've decided to make smaller and managed to fix the formatting of those footer links.

haaving multiple pages on my site turns out was easier than I expected. Although no my site has subpages with .html in them and I'm not sure how to fix that, a future job I think - but at least the POC is up and running - this README.md is going to be kept on the site as I think I'm in a position where I can link the site itself on my LinkedIn, maybe thats a bad idea but hey. But a thought i'm having - is this all a bit too grey? do I need to modify the colours slightly?

UPCOMING TASKS:

link my Salesforce Dev Org to this site
link this site to my Salesforce Dev org
redo the logo to match text thickness in heading logo
maybe be extra and make a maintenance image - haven't decided
consider changing colour scheme - ask friends for opinions
figure out how to remove .html from site name

But this does also change landscape of my more excessive goals see below:

FUTURE VICKI PROBLEMS:

~~make site work flexibly on multiple screen sizes~~ kinda works - not happy with overly long or overly tall screens
~~how hard is it to setup sub pages for projects etc~~ need to remove .html but progress!
how hard is it to make it compatible with a mobile site
I want to use this as an art portfolio as well - do I need a seperate place to store image files? I don't really want them in Git

The Salesforce Digital Experience Experience