My site, BlackFox IT

Showcase
1

First time adding a showcase here, and the first time I’ve worked on one of my own sites for a while!

My site was designed in Bootstrap Studio, using as few custom CSS elements as I could, so I make great utilisation on the classes Bootstrap comes with. For interactions it uses Vanilla Tilt for the images rotating on a mouse hover, and tilts with you phone (Android only). I do plan to publish the tilt elements online so others can use it in their projects if they wish.

The red blob in the background that follows the cursor is written by myself, with help from CodePal.ai

For my site backend I’m using OctoberCMS, a Laravel based CMS. The pages are loaded using PJAX - go to the home page, then in the footer load a policy page to see this in action. It means pages are loaded dynamicaly without a full page reload.

The site hasn’t full Safari support just yet, so apologies if you use an iPhone or Mac Safari as there is a couple issues!

The content on the site is due to be refreshed, it’s copied over from my old site (typos and all, oops!)

And I’m working on trying to improve the first time page load speed, this is with the company I buy my hosting through to resolve.

But otherwise, I think a great site to show off how even using basic Bootstrap elements you can avoid the Bootstrap syndrome - where your site looks like almost every other site designed in Bootstrap.

Happy to take questions and constructive feedback. My site is still under some development!

Check it out: https://BlackFox.it/

3 Likes
2

A very pretty site @catkin , nice job :slight_smile:

1 Like
3

Thank you so much, I really enjoyed making it :smiley:

4

My site now has dynamic embeds for all pages, I’ll post the code that does this at a later date with a tutorial.

5

Hi Nice site! Mine is very plane, almost tasteless as I am in IT trade and there is nothing fancy to show.

I do not know if those jump effects are pjax or other script but on my macs (bigsur and ventura + latest google chrome + firefox) takes few seconds to load before it appears. Also I’ve noted that cpu will start working hard (i7 on both machines). I did not test it on my android device but just worth of note, that could be a bit problematic too. Otherwise site works nicely.

I do not try to be negative or something, just giving my personal opinion and feedback. BTW I love how logo gets animated when hover mouse over it. Would you be able to share that bit of secret with me? I use svgs on my site.

Thanks.
George.

3 Likes
6

He George, I always enjoy feedback on my web hosting site since it’s still under development and I’m always improving it!

The performance is something I have been torn on, the image tilting effects and the background effects are fairly intensive. Lower spec machines do struggle and CPU usage can be quite high on most machines but generally, there’s no stuttering. I think the issue comes mostly from browser performance, even if you have GPU acceleration on most Browsers can’t utilise it fully and will still use a lot of CPU for rendering things. The red dot blur, in the background is achieved by having a red div behind another that has a intense blur effect.

I have thought about other ideas, but I think I’m set on it for now. Sites with similar fancy backgrounds and designs that I took inspiration from where almost equally as CPU intensive.

On mobile though, when the webpage is requested OctoberCMS detects what device you are using and if it is a mobile device it switches out the background for a static image and won’t even load the JavaScript for the effect - reducing page weight. However, this was mostly a page load decision rather than performance based as during testing the more dynamic background on mobile it ran without issue.

I will have to use BrowserStack to test if the latency of loading pages is possibility a MacOS issue, because I am unable to replicate. How long does it take clicking a link to another page and that page loading?

Both the running fox in the nav and on the page loader are a webm video, the play on hover is done with JavaScript - you can easily find tutorials online, if you have issues trying to replicate it then DM me and I can share my code if you wish or help out. Or ask CodePal AI coding assistant to write you the code!

Again, thank you very much for your feedback and taking the time to share with me your thoughts.

Since you’ve shown interest, have a sneak peek at what I’m adding next, a domain searching service! You can see the extremely early prototype here: https://blackfox.it/domain-search this accepts either a string like “testdomain” and suggests TLDs, or can say if an exact TLD is available e.g. “testdomain.net”. The ability to load more than 10 results, and pricing will be added eventually.

Please do share your site with us if you have time! I think any site can be designed to be exciting or interesting, I think it’s a shame so often IT businesses often fall into all the same design pitfalls when they make their sites.

7

@catkin Well I do not have low end machines at least I think :wink: 16gigs ram and i7 wouldn’t be an issue and I did not known that site switch to mobile difference once it detects mobile browser - my bad and my apologies for that. I’ve should test it before hand.

Regarding BlackFox IT | Domain Search - its loading fast at least with my chrome browser perhaps cache is still on (I would defo use some gzip on server side with some htaccess config if you are on vps or dedi server), but tested with test domain as just word test and it took 43 seconds and gave me proper suggestions - which is better than expected regarding the timing! Also it could be my internet speed… have ± 350megs down and 40megs up which is shared with my server (yes I am hosting my websites from home, all I pay is my residential vm internet and domains which runs on 15 years old laptop without screen), but that should not affect anything.

Regarding jumpy effects I used JS too back in time for effects but it was seamless and fast, I don’t remember how it calls but I can look at my git repository on my website code back from 4 years ago and give you exact name of it if you want.

In anyway if you want to test your site it in real time on real bare metal hardware and you based in UK same as me (due to latency and other stuff when connected via ssh or google meet), I have few unused bare metal machines (mostly macs -bigsur, monterey, sonoma and ventura and Linux) where I can allow you to test site natively in their browsers or in other browsers on those operating systems just if you want to test loading speed etc. Or I can test it for you and create some raw video footage for you. The prototype you gave me is working extremely well !

BW,
George.

1 Like
8

Hahaha, no and I wasn’t implying they where, you definitely have some great machines there.

But I was saying that lower spec machines can struggle as in, stuttering or the site being very sluggish scrolling. But generally, CPU use is quite high across the board, but anything modern and of a decent spec won’t have stutters.

1 Like
9

Glad you like it! 43 seconds is about the average, it’s not as fast as the likes of other domain searching platforms. But I think I’m doing pretty good as a small business! I’m worried when I add the price lookup on the backend it will make it even slower, but I’ll have to see. Maybe I can make some performance enhancements.

Gzip is enabled on the server in my testing, the HTML, CSS and JS should also be minified. Since the site uses PJAX the first page load should only be the longest load as subsequent page loads doesn’t require the browser download all the resources again, for instance from the home page if you load a policy page the Nav and Footer stay on the page and only the middle content is updated via a JavaScript API. So I also don’t think your internet is an issue I get only about half what you do from where I live :thinking:

I plan on adding a ServiceWorker to the site at some point which will aid even further caching pages and allow me to add offline pages too.

Could you shoot me a video over in DMs to demonstrate, I’d really appreciate it if you have the time :heart:

And thank you for your extremely generous offer to help me test on other devices. I use BrowserStack just now and those are real world devices they give you to test on, but I may take you up in future. I also go to computer stores to try my websites on real world low spec laptops, hahaha!

But thanks so much, I’d love to chat more so I will send you a message :smiley:

10

@catkin I’ve replied. In mean time, what would you like me to shoot? Tests on google chrome, ff, librewolf, opera and safari? I will dm you raw video if you want no problem at all.

Edit: I would say you doing very well! I would say 43 seconds is normal. Even 1&1 formally ionos are slower that this (if you clear cache and do fresh start).

Regarding the prices I am not sure - I used to offer web hosting too on my server collocated in eu but I was one man business and so support become overwhelming issue for me as you will have those people who just say: I am paying for hosting - do it for me now !… I had that a lot. Novadays I only host few sites from my home line (no collocation or any 3th party hosting whatsoever) like 150 including wp, opencart, prestashop or some statics and git server for few and thats all. I guess I failed as web hosting company :wink: right? As stated in DM, you know why.

Edit 2: PWA is the way to go and its very simple too.

BW,
George.

1 Like