I created my personal website to showcase my frontend development projects and skills, which is a common practice among frontend developers. It not only allows you to exhibit your work to potential clients or employers but also provides an opportunity to experiment with new technologies and design trends and establish your personal brand in the industry.
2. Concept & Inspiration
For my personal website, I wanted to create a simple yet effective design that would showcase my frontend development skills and projects. I drew inspiration from several frontend developers, including Lynn Fisher, Addy Osmani, Sara Soueidan, and Josh Comeau . These developers' websites all share a clean, minimalistic design that prioritizes content and functionality.
3. Design and User Interface
When designing my personal website, I aimed to create a simple and intuitive user interface that showcases my frontend development projects. The website is designed to be minimalistic, with a focus on the content and the user experience.
To achieve this, I used flexbox to create a consistent layout throughout the website, with clear navigation and intuitive design elements. Flexbox allowed me to create responsive designs that adapt to different screen sizes, ensuring that the website looks great on all devices.
The header and footer sections feature prominent links to key pages, while the main content area highlights my portfolio projects. The use of a clean and modern design, combined with a simple color scheme and typography, ensures a cohesive and professional-looking website.
The color palette is intentionally minimalistic, with a primary red color used for the header, footer, and project cards, and a lighter shade used for the main background. The use of flexbox and a consistent layout ensure that the website is easy to navigate and provides a smooth user experience.
a. Color scheme
When designing my personal website, I chose a color scheme that would be
visually appealing and enhance the user experience. For the header,
footer, and project cards backgrounds, I used a rich red color:
#7a1f1f, to draw attention to
these important elements. For the main background, I used a slightly
lighter shade of red:
to create a cohesive design.
To ensure that the text was easily readable, I used a white font color:
#ffffff . For my job title, which
I wanted to emphasize, I used a vibrant khaki color:
#ffc107 . To highlight
keywords (underline), I used a transparent khaki color:
I also included secondary colors to enhance the design. For example, when
hovering over header links, I used a light red color:
#ffb2b2, to make them stand out.
To add a shadow box effect on project cards when hovering, I used a
In designing the color scheme, I made sure to use colors with sufficient contrast to ensure readability and accessibility.
In designing my personal website, I chose the 'Cabinet Grotesk' font family to create a clean and modern design. To ensure security and optimize performance, I self-hosted the font files instead of relying on external sources. The use of a sans-serif font adds a contemporary feel to the design and enhances the readability of the text.
a. Choice of Technology
For my personal website, I wanted to showcase my skills as a frontend developer by building the site from scratch using modern web technologies. I chose to use HTML5 and CSS3, which allowed me to take advantage of features like semantic markup and advanced styling capabilities. Additionally, I utilized flexbox for layout, which enabled me to create a responsive design that adapts to different screen sizes.
By building the site without the use of a CSS framework or preprocessor, I was able to have more control over the final product and customize it to my liking. This approach also allowed me to develop my knowledge and skills in HTML and CSS, which will benefit me in future projects.
b. Website Structure
My website follows a simple and straightforward structure to showcase my frontend development projects. The homepage greets visitors with a brief introduction about myself and what I do.
The main attraction of the homepage is the project cards that display a preview of each project. Each card includes three links: one to the GitHub repository of the project for the source code, one to a detailed article about the project, and one to the live/demo version of the project.
I've kept the website structure minimal and focused only on the main page and a 404.html page in case of errors. The header and footer sections contain links to my social media profiles and blog.
c. Coding Standard
To ensure consistency and maintainability of my code, I made sure to write clean, readable, and commented code.
I also created some utility classes to avoid repetition and make it easier to use in different parts of the website.
To keep the color scheme consistent, I used CSS custom properties for colors with the help of the Alwane.io tool. Additionally, I used font sizes (xs, s, m, l, xl, xxl) defined as variables for typography.
To maintain a consistent style throughout my code, I used Prettier for code formatting. Since my website is built purely with HTML and CSS.
d. Social Media
I made sure that my personal website is optimized for sharing on social media platforms by adding Open Graph metadata and Twitter cards. This ensures that when my website is shared on social media, it is presented in an attractive and professional manner, with the appropriate image, title, and description.
e. Development approach
When it comes to the development approach, I initially started with a desktop-first workflow. However, after reading Kevin Powell's article on the mobile-first approach , I decided to rewrite the CSS file using a mobile-first approach.
The mobile-first approach involves designing the website first for mobile devices and then scaling it up to desktop devices. This approach ensures that the website is fast, lightweight, and user-friendly on smaller screens. By prioritizing mobile devices, we can create a responsive design that adapts seamlessly to larger screens as well.
5. Page quality (Core Web Vitals)
My website has received a 100% Google page speed performance, SEO, accessibility, and best practices for both mobile and desktop.
To achieve this, I implemented various techniques and optimizations. For performance, I :
- - Optimized the loading and rendering of web fonts by preloading them.
- - Served images in the next-gen format (WebP).
- - Used multiple sources for a picture tag to suit the viewport in terms of quality and size.
- - Prioritized critical CSS and defer non-critical CSS.
- - Properly sized images by adding explicit width and height dimensions.
- - Eliminated rendering blocking resources.
- - Avoided chaining critical requests.
For accessibility, I added:
For SEO, I added:
6. Features and Functionality
When it comes to the features and functionality of my website, I have incorporated smooth and consistent animations, such as hover effects on links and project cards, to add a touch of interactivity to the website.
I have also used a responsive design approach to ensure that the website is optimized for all screen sizes, including mobile devices.
In terms of testing and debugging, I used a combination of manual testing and browser developer tools to identify and fix any bugs or issues. I used the Toptal Web Developer checklist as a guide to ensure best practices were followed.
- - Checked links with the W3C Link Checker.
- - Used Quillbot for spelling and grammar checks.
- - Ensured cross-browser compatibility with Browsestack.
- - Tested mobile-friendliness with Google's Mobile-Friendly Test and BrowserStack.
- - Tested responsiveness with Chrome Dev Tools, Mozilla Dev Tools.
- - Validated HTML and CSS with W3C validators .
- - Validated accessibility using Web Accessibility Evaluation Tool (WAVE).
- - Checked HTML5/CSS3 compatibility with W3C Internationalization checker.
- - Checked social media and structured data with the Google Structured Data Testing Tool, Facebook, and Twitter Card Validator.
To make my website accessible to the public, I deployed it using GitHub Pages, and later on, I opted for Netlify for its simplicity and integration with my custom domain name. Overall, this combination of tools and services provided me with a smooth and efficient development experience.
Throughout the development process of my website, I gained valuable insights and knowledge about various web development practices and techniques. I gained an understanding on how to optimize web font loading and rendering, I learned how to improve the performance of my website and reduce layout shifts.
I also learned about the importance of adhering to font best practices and using the BEM naming convention when creating CSS classes. Additionally, I learned how to defer noncritical CSS and load CSS files according to media screen size, which helps optimize website loading times.
Furthermore, I gained an understanding of how to improve the Core Web Vitals, a set of performance metrics that are increasingly important for website ranking and user experience. I also learned how to optimize tweets with Twitter cards, which can improve social media sharing and engagement.
In conclusion, the process of developing my website has been a valuable learning experience that has expanded my knowledge and skills in web development. I am excited to continue learning and improving as I work on future projects.