I didn’t manage to finish the project fully but I’ve tried my best. I will make some polishing before I get the certification and throughout my Fullstack Engineer career. I initially wanted a pixelated and minimalistic white theme on the webpage. Pixelated fonts don’t seem to fit in but Space Grotesk and Space Mono font fits right in. Dealing with the JavaScript part where random colors are generated when hovering through the project list is really a pain that I wasted the time that should have been done on the mobile hamburger menu. The best part is that I didn’t use Lorem Ipsum on my opening page.
According to my Git history, it took me around 10 hours with multiple breaks to finish this. Keep in mind that I’ve had three months of burnout from doing this project. I proceed ahead to the Frontend path to keep me refreshed.
The repository name is kept short for a personal website to make it easier to type on the github.io web address. See the repository for things to do with this website.
REPOSITORY
LIVE WEBSITE
Cheers,
Faris
Hey Faris,
Personally, I adore the simplicity of the design. I see many dev portfolio sites that go over-the-top to try to show off their skills. Yours looks great!
One thing I would suggest, if you’re looking for feedback, is to switch the project “window alerts” to modal popups. I learned recently that you can do this right in HTML with the <dialog> tag. When you’re ready to work on it again, check it out this tutorial from Web Dev Simplified here: The New dialog HTML Element Changes Modals Forever - YouTube
Hi, Faris!
Like James, I enjoy the simplicity of your design.
I have two things to suggest! I noticed your mobile menu has zero functionality, so that is my first suggestion. If JavaScript is a concern, creating a mobile menu with pure CSS is possible! My second suggestion is to fine-tune page accessibility. For example, if a user were to visit your site using a screen reader when they got to your “skills” section, it would only read the <h2>. I would recommend using <p> or <span> tags that are visually hidden (still accessible to screen readers) and using alt tags or aria-hidden for the images.
As an example, it would look something like this:
<ul class="skills-container">
<li class="skill-icon">
<p class="sr-only">HTML</p>
<img src="icons/html-5.png" alt="HTML logo" />
</li>
<li class="skill-icon">
<p class="sr-only">CSS</p>
<img src="icons/html-5.png" alt="CSS logo" />
</li>
</ul>
The sr-only class is commonly used to “visually clip” content from the screen and will typically look something like this:
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}