The purpose of this website is to both demonstrate the skills I possess in building websites that are simple, effective and engaging as well as highlighting my background and soft skills that will compliment the technical foundations that I am building upon.
This website is designed to be responsive across mobile, tablet and desktop devices. I have created 4 main pages that all follow a similar theme with their banner pictures of nature and the elements. I have used a minimalist design with muted colors and only one highlighting color that is used for links and hover pseudo-classes. This is the same color I have used for the brackets in my logo.
I have adapted JavaScript that I found on W3Shcools to build a lightbox for the Blog photos. I also adapted some JavaScript for a scroll to top button. The four main pages on the website are:
- Landing Page / Home: This is the landing page and has a brief description about myself and a call to action to sign up to my blog.
- About: This page has some information about my previous work history and a section on why I have chosen to transition into tech. I've also included a section with my interests. Lastly, there is a section where visitors can find more information via phone and email links and a link to my resume.
- Projects: This page has 4 preview cards that link to projects I have recently completed using HTML, CSS and JavaScript.
- Blog: This is the blog homepage. It has its own nav bar for navigating to any of the 5 current blog posts as well as preview cards for each blog post. Each Blog post has a title, sub title and 6 thumbnail images at the bottom. The thumbnails can be clicked to open a lightbox showing the full image. The lightbox also has thumbnails and previous/next buttons on the side of the full image.
My target audience is prospective employers and potential clients.
- Website: Semantic HTML5 markup, CSS and JavaScript
- Workflow: Mobile-first workflow
- Deployment: Github Pages
- Wireframes: Balsamiq Wireframes
- Sitemap: draw.io
- Image optimisation: Optimizilla
- Color contrast checker: webAIM
- XML sitemap: XML-Sitemaps
- W3 Schools - Lightbox modal - I adapted this code to use as the lightbox for the images in each blog post. The original javascript example had the functions being called with
onlcickin the HTML. I migrated all the function calls to a new script called lightbox.js that is only linked to the blog posts where the lightbox is used. This was a little challenging but it gave me a better understanding of how the lightbox script works. - W3 Schools - Scroll to top - I adapted this code to create a scroll to top button that uses JavaScript to hide the button until the window is scrolled down 30px.
- W3 Schools - smooth Scrolling - This simple css rule allows the scroll to top button to slide up smoothly rather than instantly go to the top of the page.
html { scroll-behavior: smooth; } - Icons8 - I used this site for all the icons. I ended up using .png icons because I couldn't download enough .svg files with a free account.
- Markdown Cheatsheet I used this as my guide when creating this README.md
- Media query for landscape phones The nav bar was too large on a mobile device in landscape mode. This was a good resource for media queries for mobile devices.
- Element position amongst siblings I used this function to find the position of the clicked photo in the lightbox thumbnails.
- Accessing data attributes in html This is a good blog on how to access a data attribute within a html element.
- XML sitemap I used this site to create a sitemap.xml for the website.
- Git Undo Merge I tried to merge commit a branch into main. There were conflicts which meant I could no longer push commits to main's remote branch. I had to undo the merge for a previous commit. This site gave some good tips on undoing a merge commit.
- creating an ico file I used this site to convert my logo png to an ico file.
- Alt text for background images I couldnt add alt text to my background img because the text would render over the image. Jairo exmplained to me that it was because i was using an empty img tag. He sent me the link to this site that shows how to add alt text to a background image.
- Twitter - @MarioLisbona
- Github - @MarioLisbona
- Linkedin - @MarioLisbona