Now on the changelog page are collapsible dropdowns, thanks w3schools and javascript
That is correct, a new inline javascript... script is now present, was a bit of a hassle but ultimately the script was missing a close bracket, now it works
Did a bunch of testing with it using dev tools for both desktop and mobile set-ups
Had to do some color changing to match site layout
Very happy with the design but may change later depending if I see some better "modern" website design formatting later
1st article line break additions for ease of reading
Updates to head tags specifically around meta, should improve seo maybe
footer added to end of all pages
Performed testing for box shadows and linear, radial and conic gradients. All fairly unsuccessful, if any were to move forward maybe a linear/conic gradient but unlikely to proceed, the way gradients appear makes gradients look too computerised. Not really appealing
Edits to 1st article
Folder set-up changes i.e. deleted unnecessary files from main directory
Removed 100vw width from hero image formatting, replaced it with 100% width
li a desktop navbar edits
lineheight:0; readdition to nav left and right as they are 100% REQUIRED
Folder structuring fix and removal of unused .svg fix
Added line break to changelog.html to follow formatting from other entries
Removed additional margin formatting for blogmain li values
articlemain div special format via css for li tags
Addition of article main di to provide speical format to li tags
Recent changelog update 1st to 3rd of June
Changes to formatting for index page i.e. paragraph tags and addition of breaks
Second article updates
Second article formatting
Removal of certain first article items
First article wording changes and additions
Change to title of webpage from .html to no .html at end of first article
Revision performed for mobile navbar, using inspiration from the mobile navbar from w3schools, I have chosen to implement a less basic navbar
Navbar formatting aligning with usage of vh and vw
Increased height of navbar as a whole. It was rather small before, should improve overall user experience. Even I had issues trying to click it previously
Large changes to a (hyperlink) .icon (class)
Position fixed added to main headerflex element (can't remember if it was there previously and too lazy to check history lol)
Added additional articles to articles folder, pending blog webpage
Preparing blog for posts
Updating changelog
Using formatting inspiration from w3schools mobile navbar, I have disabled the color changes for the menu button. Looks much better. All other navbar items however, retain their color changing effects
Added margin to maincont, makes text less stretched. Better readability as well. Potentially the first/second instance where percentages were required, margins.
Lots of mobile navbar formatting
Had lots of issues with the css, turns out a major issue I was experiencing with the webpage formatting i.e. no matter what I did the mobile navbar, it just wouldn't didn't operate correctly when scrolling. This was fixed by validating and correcting errors in css parsing errors via w3c validator. Thank all that is holy for this resource.
I had to return back to older versions a few times while performing the above, due to lots of issues arising i.e. mobile navbar scrolling not working right and horizontal scrolling issues with the site as well.
CSS Validation completed, everything is clear for css atleast.
width and max-width added for gallerygrid img to fit on mobile devices
gallery grid hover scale/zoom animation effect present for desktop, scale is 1.0/removed for mobile
gallerygrid and gallery main divs created, gallerygrid isn't technically a grid, nor is it a flexbox
Major formatting for both desktop and mobile versions
Gathered 2nd interation images from the wayback machine and placed them in the gallery
Issues with formatting surrounding a specific website design png, therefore removed it entirely from the img src's
All other related images were added to the gallery
Formatting surrounding first ime
Addition of first image to gallery
Resolved some strange errors in the old code
Addition of content for changelog + formatting. Doing it straight from github so formatting is busted. Constantly autofinishes ul, li and h2 when I dont need it to -.-
Added flex direction: column; to main tagm will fix the changelog formatting
Added clmain div for further editing of clmain if need arises
Need arose, along with that is margining of 20% left and right for clmain. To squeeze content inward and make the page feel fuller and match the current design language of the main page
Initially made section id clmain (changelog main) but now I'm changing it across to a class to match the main page and .maincont section class
Typos fixed
It was noted that my favicon didn't load on either duckduckgo or google search engines, so I decided to convert my svg logo to png, which in turn made the logo look really poor quality. So I looked up potential solutions and located favicon.cc, a sort of pixel based favicon designer in the web browser. Anyway, created one that really pops out in the title bar of a web browser. Should also appear in search engines as well. Looks good, will have to get feedback later
So I'm a bit mad, I spent a couple hours trying to confiure a good favicon.ico but apparently, it all looks like a pixelated mess on a smartphone. So I'm back to the drawing board here. I think the best way to go about it is to find a guide to create a proper favicon.ico that retains its quality either via desktop or mobile. Pending update to favicon.ico
Validated the html via w3 validator
Resolved ~8 html errors and added some best practice items to ensure accessible and compliance with standards
Validated the css via w3 validator as well
Resolved 10 issues, mostly stemming from a close semi-colon being next to a close semi-colon. Write enough of this and you'll make dumb mistakes too aha
Changed hero background image to webp lossless format. Size comparisons: 3.6MB for .png format, 2.5MB for .webp lossless and 631.2kB for .webp lossy. .webp lossy removes a layer of shine with the background blue. Losses saturation. I don't like that, so I went lossy as that resembles the .png the best. Load times can suffer slightly with but quality is not deminished, I'm okay with that
Sorted out footer and formatting
Resolved formatting for main content/container
A href class email has also been formatted successfully
Pushed updates upstream
Changed the name of the old snopoint website in github to old.snopoint.com
Created github repo called "eneroh.github.io" and pushed everything upstream
I had some issues with caching but cleared my browser cache and checked via private browsing windows
Minor changes had to occur in the code so that directories were found
Created images direction for specific hero background image
Resolved errors with sitemap.xml, specifically missing double quotation marks in the doc
Created blog, gallery, changelog and template html pages
orted out formatting and nav layout for the pages
Will need to populate the content for the html pages soon but right now the index is present and with that content present, it should display my skills and what I've been working on
This changelog document is essentially ready to move across as well, however it will require a lot of formatting and I don't have that level of dedication presently as I'm juggling other tasks/responsibilities as well
The gallery will also need a lot of effort, likely going with a display: grids layout for it. If that gets too much, I'll go with display: flex
Lots of ideas regarding the blog as well I am looking to implement but it will take a significant amount of time. I have already created a couple articles but again formatting and dedication required. Also pending
There were some noticable issues with resizing on desktop and mobile versions. Due to not having correctly implemented vw and vh in many elements within css. Viewpoint width and viewport height. With both of them now correctly implemented across multiple different css elements. Everything is incredible, resizing-wise in both mobile and on pc.
I've also completed the implementation of a full-size nav. position: fixed and z-indexes were necessary but ultimately hides the massive poop that occurs with position absolute elements i.e. the hero section items. Very messy but ultimately will make the experience smoother for the user. The idea for this was directly from w3schools and their mobile navbar. Who better to take from than your teacher? lmao
I've also created an alternate herologo because the background-image I've implemented in the css for the main herologo is a total mess for resizing. Therefore, I've added the alternate TEXT version. Dealing with images on images is wayyyyyy more complex than what needs to be
paragraphs vs br (line breaks), I've come to the determination that paragraphs and br's are total messes in relation to spacing between words. Instead implementation of line-height is much better in accomplishing the same task as both p and br, at least I find.
Also reviewing the w3schools site, I noted that resizing in both mobile and desktop website layouts. There is absolutely no compromise on quality. I was just about to throw in the towel with a really bad design that worked but resizing via desktop was AWFUL. Instead, I hung in there and fixed all the desktop resizing issues, all because w3schools makes no compromises in its design. I'm not sure but the perfectionist in me is pounding their chest. While the lazy me, just wants rest. That rhymed... Unintentionally.
vw (viewport width) issues were constantly plaguing me in the chrome browser. Causing a horizontal scrollbar to appear in the chrome browser. Firefox had no issues but the fix to resolve this was not decreasing the vw from 100vw to 98.6vw. The fix was: to maintain the 100vw in width and to add to html: overflow-x: hidden;. The more you know, I guess.
I've added the text content for the index.html that will be the final portion that needs formatting before I publish the revamp on my github
Added .svg to website icon, no issues noted
Extra sizing issues with with nav, hero section and maincont, resolved by clearing out herologo background image and replacing with text. Like the mobile hero text alternative
Again we are going to images on images having serious issues, never do this again. *Note to self* keep it simple, having complexity like images on images makes life really difficult
Both the normal and mobile navbar are completely done
CTA (Call to action button) added as well
I've gained a solid understanding of nth-child and last-child css elements
The font-awesome fa-solid fa-envelope icon was giving me stress because it made the other nav items misalign with the other nav content but was resolved soonafter with this: align-items: center; in headerflex. Everything was resolved soonafter
CTA formatting was messy but got it resolved
Mobile navbar formatting was also messy but referred to my current site's mobile navbar to build inspiration
I made the mobile navbar entirely in the @media 600px for this instance, different from my original
I also added much more customisations from my design inspirations. Like changing colors from active elements and inactive elements to make it more clearer which is active and which isn't
Added snopoint text logo next to the actual snopoint s logo in .navleft
Removed borders around nav elements now, no longer need the guidelines as it's completely done and looks awesome
Now to move onto the body, likely will need grid layout, hero section and actual meaningful content. What snopoint is, what snopoint does, how to contact the administrator etc.
The hero section is completely finished
I've created the hero image from scratch, a sort topographical map with gridlines in place to resemble some of game board/military command screen. Sort of relates to cybersecurity in a way. Something you might see in a SOC
I've also gone through several failed iterations of the hero section. But I did end up getting to a design that I really like
I've received some feedback from some stakeholders and they've said that my designs are good. The s logo is a bit tiny in the nav, should be an easy fix. Along with the hero section text, stakeholders stated that the text is a bit hard to read. So implementation of a background may be suitable. Polled my stakeholders for their opinions. Will figure it out from there.
Next steps consist of: Adding the main content, what is snopoint, origins, who I am etc.
I think once the main page is completed, I will update my github with this new design and put the old design into archive
For main content as well, having difficulties choosing between grid and flexbox layouts. I think with how my brain works I'll need to test both and whichever is suited for what I want will be the final design
Exciting times, I've created many drafts and tried many iterations. I'll likely be creating a gallery of sorts displaying these failed iterations/drafts at some stage. Something like: snopoint.com/gallery
Messing around with navbar
Implementation of mobile navbar elements
Hover feature repaired, aria-label (accessibility junk) was messing up some classes, fixed .active in particular
@medias are good to go, had 5 initially and was slowly adding to them but I've brought the total @media's to 2-3. Way more smoother when inspect elementing and seeing pixels
1 thing I am extremely big on now is the ability to tab through webpages with your keyboard, I don't have this functionality in my current website and the redesign is also lacking this functionality. I'll need to sort that out
The navbar is reaching the final design phase and it's looking really solid
I still haven't sorted out my rem and em and vh knowledge yet, will need to sort this out before continuing further in this project
Some weird navbar glitches: the display flex property in nav li was seriously messing with the display block for the mobile navbar. This was resolved
Incorporating two different display elements is complex and requires intricate handling of inspect element to spot these bugs, really annoying but getting the hang
Issue with padding noted in display: block. Another issue with nav li/ul where padding was present and messing up padding in the mobile nav. Resolved as well. Inspect element saved me there too
Removed outline: 0; in wildcard element in the css
Keyboard functionality works on website woohoo!
Creation of nav w/ ul and li elements (no extra formatting yet)
svg logo added to nav element
a href added to nav
a href ease-in and ease-out color fade transitions for nav specific elements i.e. a:hover
Implementation of floats left and right for nav elements + reversal and removal of floats
Remembered that grid and flexbox exist, attempting to see if implementation of these new elements can simplify nav elements
grid implementation for nav specific class: headergrid
reversal and removal of grid layout for nav
implementation of flexbox for nav specific class: headerflex
reversal and removal of grid layout
active href nav element color element
thinking that if I want a modern website design, implementation of both grids and flexboxes will be necessary
Grids for setting out the nav, then flexbox for responsiveness for navigation. Then for the main body for the website, it will just be grids with some implementation of flexboxes
With the way web development is now, removal of floats appears to be the way to go
Serious time investment into developing design language for logo and the like
Additions to inspiration and ideas document etc.
Research into font faces and developing logo designs performed
Several font faces are determined and logo designs are created
Added designs to website for review
Next steps would consist of choosing the best font faces and maintaining the designs overall
svg logo made
Learned a lot in app: Inkscape
Creating svg's or scalable vector graphics requires node contact otherwise your background bleeds into your graphic. Lots of intricasies with svg's I was previously unaware of
Creation of paint based index page template designs (mobile and normal) and placed into ideas folder
Creation of html and styles.css pages
linking via link rel and href tags
copying of some minor design elements from previous project