Visit the site on GitHub.io - MichaelDijk.com
This is a project for a portfolio site, showcasing current skills, interests and the process that is used for creating websites and working on client projects.
The project is used for attracting new clients and prospective employers, to allow them to gain interest in my work, and how I take on new challenges.
The site had to be clean, minimal and there was a need for focus on the site’s content, and, with the creation of this site, this goal has been achieved.
Prospective employers and clients can have an overview of who I am, what skills I possess, and what sites I have created in my time as a junior / freelance developer.
The site is created for prospective employers and clients, to allow them an insight in my work process, my previous work / development jobs, and what interests I have further besides my development skills, they can also download my resume.
A website, that was pleasing to the eyes, interactive on different view-windows, sparks interest, and portraying a minimalist design.
The goal has been achieved, by using a minimalist approach, with responsive design, different options visible on different view-windows. For example, the process section changes from small view-window (mobile) to large view-window, where the process is shown in a full section, as opposed to dropdown clickable buttons.
Please see the following link to a markdown page containing the user stories and images for the user stories:
Please see the following link to a markdown page containing the Wireframes, Navigation and colours used. I wanted to create a separate section for this, as it entails a lot of information, and would be best presented in a separate markdown page:
The website uses a “one-page” design. A navigation on top, which collapses into a burger menu for mobile view.
The hamburger menu icon has a comment next to it “menu ->” which hints the user that the menu is hidden behind the “burger” icon, representing the menu. This is done so there is a bit of a playful character given to the site. Just a small touch. As the site symbolizes minimalism, these small touches make it stand out.
The home section, or, intro section, features just a small paragraph of text, showing the text “I am a Designer / Junior Developer living in Ireland.”
The reason for this sentence/slogan is that I am originally not from Ireland, and this allows a bit of insight in where I am currently located. Also, this allows visitors from different countries to immediately understand where I am located.
It also has a large heading, informing the visitors that I am a “creator”. The intention for this is done, to allow a build-up of interest, in seeing more.
Then below the heading and paragraph of text, there is a button, with the text “get to know me..” once the user clicks on this button, it brings them to the about section.
Once you click on the “get to know me...” you will be brought to the next logical section, which is the about section, advising visitors who I am, what I have done so far career-wise, and a little bit of my personal interests highlighted.
There is also a link to my full resume, to allow visitors to see my current resume, and full work experience further highlighted.
I added the information that I work in the IT industry for a long period of time, to inform them that I am aware of the current technological advances that are happening in this sector.
To make it more playful, there are some words replaced with Font Awesome icons, representing:
- Chip symbol = technology
- Heart symbol = love for
- Coding symbol = coding
- Weights symbol = gym/fitness
- Movie symbol = movies
Then followed by a percentage bar graphic, with an interactive moving slider. Showcasing my current skill-level of certain coding languages and knowledge I possess.
The percentage bar graphic, changes in icons for the respective languages on smaller view-windows, to avoid further distraction, and to keep it within the team of minimalism.
The portfolio section, or, project section, is in line with the minimalism theme we want to portrait. It has a large image of the site that I have created, a small heading for the name of the project / site, and a paragraph detailing what I have done for the site, what coding skills I have applied.
Once clicked on the image, it then brings you to the company / page, in a new window in the browser. To allow users to visit the live site, see and experience the site for themselves, as opposed to reading about it in full a lot of words. Many words are distracting, and would not be read, as attention span of visitors is often low, and only a select amount of people will read the full paragraphs.
The process section, describes the process that I use or, apply to a new project. I have added a process section to the site, to allow visitors and future employers, an insight in my thought-process and how I allow new clients to work with me.
I have thought of a simple four step process:
Step 1: During initial call or meeting, depending on what is preferred, we will discuss any kind ideas you have, preferences, colours, for the site. I will then use this information, to create examples. These examples usually are created using wireframing and allows me to present the client with a good idea of what to expect. I will also discuss pricing as far as I can advise at this point, and these are subject to change. I will also advise the client what is required and what kind of hosting we most likely need to get. As this is based on freelance services, I work on 50% paid up-front, and 50% once work is completed. We also discuss milestones, so we have key-dates to work towards to, and I will discuss a shared drive/folder, to allow the client to upload any files necessary.
Step 2: After about two working weeks, I will show you my examples. We will then discuss further what design examples work and which ones do not align with the vision the client has. From here onwards, I will then proceed to step #3, which is creating the actual site. We will then if needed re-align any milestones set, if they are still feasible, and, then plan accordingly.
Step 3: In this step, I will present you examples, that I have created based on your input, and if not fully provided yet in previous step, you will then give me the remaining details, like specific texts, any images if not already provided and any other additional details that we would most likely need to add.
Step 4: In this step, we will test the site extensively, once the tests have completed and the client has signed off on the testing and confirms he/she is happy with the result, we will move the site to go-live. You then have a week to test the backend access, which we could do through WordPress, or any similar CMS, and I will be available for questions. After this week, I will invoice any hours spend, on adjustments or, anything else related to the project. The reason for only entering this in a four-step process, is for the client to not get confused, about what is expected from them, and how I want to work with them, and apply their assistance to the site. The steps evolve from buttons to a static part of the site, on larger view-windows.
Here you will find a form, to allow customers or potential recruiters to fill in a contact request. Below the contact section, we also have the footer section, which includes both my office number and as well my direct email address.
I have chosen for this option / feature, as not everyone is inclined to fill in a contact form, but rather does this through a direct email.
I have chosen to use formspree to allow entries of the form, to be forwarded to my direct email address.
The contact section is also managed by a form-checker, as there are some fields which are mandatory:
- Name (first and last)
- Email address
- Text field
- Any other fields, are optional, and not necessary to be filled in.*
The website uses a “one-page” design. A navigation on top, which collapses into a burger menu for mobile view. The hamburger menu icon has a comment next to it “menu ->” which hints the user that the menu is hidden behind the “burger” icon, representing the menu. This is done so there is a bit of a playful character given to the site. Just a small touch. As the site symbolizes minimalism, these small touches make it stand out.
The home section, or, intro section, features just a small paragraph of text, showing the text “I am a Designer / Junior Developer living in Ireland.”
The reason for this sentence/slogan is that I am originally not from Ireland, and this allows a bit of insight in where I am currently located. Also, this allows visitors from different countries to immediately understand where I am located. It also has a large heading, informing the visitors that I am a “creator”. The intention for this is done, to allow a build-up of interest, in seeing more.
Then below the heading and paragraph of text, there is a button, with the text “get to know me..” once the user clicks on this button, it brings them to the about section
Once you click on the “get to know me...” you will be brought to the next logical section, which is the about section, advising visitors who I am, what I have done so far career-wise, and a little bit of my personal interests highlighted. There is also a link to my full resume, to allow visitors to see my current resume, and full work experience further highlighted.
I added the information that I work in the IT industry for a long period of time, to inform them that I am aware of the current technological advances that are happening in this sector.
To make it more playful, there are some words replaced with Font Awesome icons, representing: Chip symbol = technology Heart symbol = love for Coding symbol = coding Weights symbol = gym/fitness Movie symbol = movies
Then followed by a percentage bar graphic, with an interactive moving slider. Showcasing my current skill-level of certain coding languages and knowledge I possess.
The percentage bar graphic, changes in icons for the respective languages on smaller view-windows, to avoid further distraction, and to keep it within the team of minimalism.
The portfolio section, or, project section, is in line with the minimalism theme we want to portrait. It has a large image of the site that I have created, a small heading for the name of the project / site, and a paragraph detailing what I have done for the site, what coding skills I have applied.
Once clicked on the image, it then brings you to the company / page, in a new window in the browser. To allow users to visit the live site, see and experience the site for themselves, as opposed to reading about it in full a lot of words. Many words are distracting, and would not be read, as attention span of visitors is often low, and only a select amount of people will read the full paragraphs.
The process section, describes the process that I use or, apply to a new project. I have added a process section to the site, to allow visitors and future employers, an insight in my thought-process and how I allow new clients to work with me.
I have thought of a simple four step process: Step 1: During initial call or meeting, depending on what is preferred, we will discuss any kind ideas you have, preferences, colours, for the site. I will then use this information, to create examples. These examples usually are created using wireframing and allows me to present the client with a good idea of what to expect. I will also discuss pricing as far as I can advise at this point, and these are subject to change. I will also advise the client what is required and what kind of hosting we most likely need to get. As this is based on freelance services, I work on 50% paid up-front, and 50% once work is completed. We also discuss milestones, so we have key-dates to work towards to, and I will discuss a shared drive/folder, to allow the client to upload any files necessary.
Step 2: After about two working weeks, I will show you my examples. We will then discuss further what design examples work and which ones do not align with the vision the client has. From here onwards, I will then proceed to step #3, which is creating the actual site. We will then if needed re-align any milestones set, if they are still feasible, and, then plan accordingly.
Step 3: In this step, I will present you examples, that I have created based on your input, and if not fully provided yet in previous step, you will then give me the remaining details, like specific texts, any images if not already provided and any other additional details that we would most likely need to add.
Step 4: In this step, we will test the site extensively, once the tests have completed and the client has signed off on the testing and confirms he/she is happy with the result, we will move the site to go-live. You then have a week to test the backend access, which we could do through WordPress, or any similar CMS, and I will be available for questions. After this week, I will invoice any hours spend, on adjustments or, anything else related to the project.
The reason for only entering this in a four-step process, is for the client to not get confused, about what is expected from them, and how I want to work with them, and apply their assistance to the site.
The steps evolve from buttons to a static part of the site, on larger view-windows.
Here you will find a form, to allow customers or potential recruiters to fill in a contact request. Below the contact section, we also have the footer section, which includes both my office number and as well my direct email address. I have chosen for this option / feature, as not everyone is inclined to fill in a contact form, but rather does this through a direct email. I have chosen to use formspree to allow entries of the form, to be forwarded to my direct email address. The contact section is also managed by a form-checker, as there are some fields which are mandatory:
- Name (first and last)
- Email address
- Text field
Any other fields, are optional, and not necessary to be filled in.
- Header on the top of the page, is visible with a logo, and once clicked, this will bring you back to the beginning of the page
- The header, has a responsive menu bar, which turns into a hamburger when it’s visible on smaller view-windows, and it expands into a menu on larger screens, with menu items aligning to the right
- There is one call to action button on the home or intro section, which says “Get to know me…” to spark interest into reading more about myself, and it brings you to the about section, both smaller view-window as larger view-window
- The about section is a little bit different compared to the larger view-windows, the progress bars are removed and changed into 4 equal sized square icons, describing the features I know
- The projects or portfolio section, includes bootstrap cards, with a heading image, and a small paragraph of text below the projects themselves. Once clicked, it will bring you to the respective site, and this link opens in a new window
- The process section, has two different options, one for larger view windows and one for smaller.
- On smaller view windows, you will find cards that are hidden behind clickable buttons, from step 1-4
- On larger view windows, the buttons disappear, and the steps are shown in sections from left to right and right to left
- The contact form is responsive, and changes according to different view windows. On larger view windows, it expands and centers inside the page, and certain fields are shown next to each other. On smaller view windows, this all aligns below each other vertically
- The footer has 3 sections, a contact section giving information about my email address and phone number, and middle section, linking towards my social media accounts, and the right section, a copyright disclaimer
- Insert google analytics to understand what customers do on my site, and where to adjust or make things more visible
- GDPR / compliance checkbox, to allow/remove analytics
- An expansion or pop-up to my full resume, and a downloadable resume link
- Increasing github following with respositories
- Allow a second language, or, a third language to translate the site, as I am originally Dutch origin, I want to incorporate Dutch language into my site
- Portfolio / Projects section – instead of heading images, use a scrolling video, to allow some more interactivity between site and user/visitor
- Bootstrap 5.0.0 – BETA
- Font awesome for site’s icons
- Adobe spark for helping me with creation of my logo
- Formspree – to allow the form to send details to my email
- Adobe colours – to help with finding the right colour balance for the site
- The project has been realized with HTML, CSS and JavaScript
- Google Fonts – for the web-fonts on the site, both headings paragraphs and all the text are styled with Google Fonts
- Popper.js – for responsive design and pop-ups incorporated into Bootstrap
- Auto prefixer – to run through the CSS code, to see if I missed any settings for styling across different browsers
- Photoshop – creating the logo sizing, creating favicon, and created my profile photo
- Balsamiq – for wireframing the website
The website’s code has been checked and validated with the help of:
- The W3C Markup Validation Service – HTML markup validation
- The W3C CSS Validation Service – CSS markup validation
- Autoprefixer CSS online
- As a potential client, I want to get to know the owner of the site, to see if they align with our values, and, see some of their previous work.
- User arrives at michaeldijk.com, and sees a large intro text, showing them who I am, and what I do
- The user then can choose from either going through the menu, and clicking on the options, or the call-to-action button “get to know me…”.
- User chooses the option “get to know me…” and it brings them to the about section.
- In the about section, they can read about the site owner, their interests and skills they currently possess.
- From here onwards, I see a small wave, with a different colour hinting me to scroll down, which then brings me to the projects/portfolio section, where I can then view the work they’ve completed, and then allows me to make a decision or judgement if I want to work with them
- As a potential employer, I want to have an insight in the thought-process of how a design is coming to life, from A to Z
- The potential employer arrives at the site, and see’s the intro section, and the menu bar or hamburger menu, if visited from a mobile device
- The potential employer can then click on “process”, to read up on how I take aboard new clients, work on projects and what kind of process I have when working on projects in general
- As a new visitor to the site, I want to be able to easily navigate between sections and find the menu for the site
- Once a new visitor arrives at the site, the site works very intuitively, it has a menu bar on top, and, it’s a one-page web-design. It scrolls from top to bottom, and the menu items are always visible with a sticky navigation.
- The navigation also includes a logo, which represents the “home” button.
- The navigation items are distinctively placed on the top right, or, below the hamburger icon, with a comment next to it, referring to the menu.
- As a potential customer, I want to be able to contact the site owner, find details on a contact number, and fill in a contact form to allow me to ask questions
- The potential customer visits the site, and is greeted with the intro section.
- The potential customer then reads about myself, by clicking on “get to know me…” and that brings them towards a section about myself
- From here onwards, there are hints that point down towards the next section, as there are different waves of different colour sections below it
- The potential customer also has the option to go direct to the “contact” section, allowing them to fill in the form, or, using the scroll option though their browser
- At the bottom (Footer), there also a contact email address noted, and a number, for the potential customer to note down, for later contact, or, direct email contact through their email client.
- When initially designing the website, I had all sections set to a height of 100view height. This caused some issues down the line, as mobile view (both small view windows to larger tablet sized windows), the text overflowed passed the visible window, thus, causing an discrepancy in length, so this had to be adjusted with the help of media queries
- When testing the website across different view sizes, and, devices I noticed the footer text wasn’t correctly aligning, so I increased the section sizes just passed the middle. Meaning, each section is a maximum of 8 in larger view windows, but, the footer is set to a maximum of 9 total. 3 per section, and 12 on small view windows to align it below each other.
- I have tested the website with responsinator.com and after testing it with responsinator I also manually tested it with
- iPad 6th generation
- MacBook Pro 2020 generation
- iPhone 8+
- Honor 8x
- Oneplus 7
- Linux virtual machine
- When testing it on mobile devices, I noticed that the menu items where small and, dark coloured texts, which made it almost unreadable, so I made the decision to align the text more with the body of the site, which was off-white
- When having my second meeting with my mentor, I noticed that he asked me what “MD” meant in the top-left of the site, which stood for initials of “Michael Dijk”, this gave the the decision to distinguish it appropriately, and added a logo instead.
- When adding the logo, I also decided to add my favicon, which is a coding icon
- Manually tested the form on both mobile view and desktop view, and the validator is doing its work correctly
- I also made the form submit content, with the use of formspree’s free submission system, for testing, and it's passing through input correctly, and forwarding this to my email address
- the mailto value in the footer, had a spacing inside the subject, causing an error to present itself, removed the spacing from the code, issue is since resolved
Error: Bad value mailto:contact@michaeldijk.com?subject=michaeldijk.com Contact for attribute href on element a: Illegal character in query: space is not allowed.
From line 276, column 5; to line 276, column 98
-3"> ↩ <a href="mailto:contact@michaeldijk.com?subject=michaeldijk.com Contact" class="footer-email"><i cla
- There was an error in a label for the form, precisely for the Country label. Instead of small letters, I had it set to a capital letter for Country, resolved this by adjusting it to "country"
Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 252, column 25; to line 252, column 84
<label for="Country" class="form-label form-label-override">Countr
The project was developed using a local IDE, and with the integration of git, which allowed me to push each change towards my GitHub Repository. This project has been deployed on GitHub pages.
- Login into GitHub.
- From the list of available repositories, the correct repository was chosen: michaeldijk/ms1
- Once the repository was opened, Settings was selected from the 3rd menu on the top, this is the icon with the gear wheel.
- Once in the Settings page, scrolled down to the bottom, where it mentions GitHub Pages.
- The correct source was then selected, this was set to Master Branch, as we haven’t made any other branches after this one.
- Once Master Branch was selected, the page was then automatically refreshed and under GitHub Pages you will then see: " Your site is published at https://michaeldijk.github.io/ms1/”
- After the link was retrieved under the GitHub Pages section, the repository index was then updated to reflect the correct link on top, and to do so, the following steps where performed:
- On the repository index, we selected Edit just below the second menu on top right.
- The correct Repository name was then added with its corresponding GitHub.io link
To clone this project to a local IDE of your choice you would have to follow the steps below, using GitHub:
- Open GitHub, and navigate to the repository page michaeldijk/ms1
- Under the repository name, click "Code”
- In the Code pop-up window, you select “HTTPS” but, this should be the default selection, copy the clone URL for the repository
- Open Git Bash in your local IDE
- Change the working directory to the directory where you want the cloned directory to be made
- Type
git clone, and then paste the URL that you've retrieved in step 3.git clone https://github.com/michaeldijk/ms1.git - You then press Enter. Your local clone will be created.
Cloning into 'ms1'...
remote: Enumerating objects: 290, done.
remote: Counting objects: 100% (290/290), done.
remote: Compressing objects: 100% (186/186), done.
Receiving objecremote: Total 290 (delta 135), reused 223 (delta 73), pack-reused 0
Receiving objects: 100% (290/290), 2.97 MiB | 5.43 MiB/s, done.
Resolving deltas: 100% (135/135), done.
- After receiving confirmation that clone was "done", you can then open/work on the files that are downloaded to the folder of your choosing, you can also open the directory through your local IDE, and work on it from there onwards.
- You can afterwards, push this to a different branch, on the repository, in case you want to provide additional code towards my the downloaded project.
- All texts have been written by me
- The steps have been created by me in conjunction with the use of User Centric’s sections, and will most likely adjust / adapt according to how it progresses towards taking on clients
- About me section profile photo, is a photo I used and adjusted together with the use of Photoshop
- Image of the dbrand site, on the portfolio section is a screengrab of the website - dbrand.com
- Image of nu.nl site, on the portfolio section is a screengrab of the website - nu.nl
- Image of the form-builder, is a screengrab of my code from the website
- I used text-shadow generator from Text Shadow CSS Generator Online – Which has been applied to both header and footer and menu button on small view-windows
- I used bootstrap 5.0.0 BETA as my toolkit to create the site’s layout - Bootstrap
- I used the media queries described from W3Schools, and adjusted it to meet my needs
- My mentor helped me with creating a script to auto-hide the burger menu, when clicking on a link. Many thanks for this Antonio!
- I found a lot of answers to queries I had on CSS-Tricks - CSS Tricks
- My mentor helped me align towards a one-page design, where-as I started with separate pages, my mentor Antonio Rodriguez has been a great help, always there when you have questions
- I got design inspiration from DBRAND in terms of minimalism and how to apply it to my page
- I got design inspiration from sean Halpin (Irish Web Developer) which approaches a website with minimalism, and this is something I liked a lot