I crafted this website using HTML5 and CSS3 on Visual Studio Code.
This gave me the ability to test it thoroughly in my own environment before taking it live.
The website is comprised of six HTML pages and one CSS page, which include Home, About Me,
Services, Future Ambitions, Skills, and My Experience. The navigation bar is present on all pages,
making it easy for visitors to move around the website with ease. The content paragraphs
are formatted to showcase information for each page. My design philosophy
for this website was to keep things sleek and simple, embracing a black and white aesthetic
with tasteful hints of high-contrast colors. This high contrast color scheme and minimilistic approach was
taken with accessibility in mind, as I wanted to ensure that the website could be enjoyed by visually
impaired users as well. Additionally, I provided alternative text descriptions for all images on the
website to ensure that users who may have trouble seeing the images or are using assistive technologies
can still understand the content. This further enhances the accessibility of the website, making it more
user-friendly for all users. The result of doing this is an aesthetically pleasing and user-friendly
website that I
am proud to share.
Accessibility of Website
By incorporating high contrast colors, it makes it easier for individuals with visual impairments to
navigate and read the content with greater ease. Moreover, including alternative text for images
ensures that those who are unable to load the images or are visually impaired can still comprehend
the purpose and content they represent.The minimalist design approach for the website has several
advantages when it comes to accessibility. By reducing visual clutter and streamlining the user
experience, it makes it easier for all visitors to quickly find what they're looking for and
understand the information presented.
Aesthetics of Website
My approach to the aesthetic design of my website is both deliberate and visually appealing. By
adhering to a minimalist black and white aesthetic and incorporating high contrast colors strategically,
I have managed to create a website that is both simple and engaging.
My navbar is not only functional but also adds to the overall aesthetics of the website. The hover
feature that changes the color from white to tan reflects the top of the boat image on the home page,
giving the impression of a reflection. Additionally, the centered position of the navbar creates symmetry
and a clean look.
The shape of my content is designed to avoid clutter and make the website easier to navigate. By using
various tags such as p, div, and h1-h6, I have effectively organized my content into sub-sections, making
it easier for users to find the information they need. The use of different colors for headings also adds
to the clarity and ease of use of my website.
My font choices, which include Helvetica and System UI font, are carefully selected to work well with the
environment they are viewed on, while the white font color provides ideal contrast with the black background.
In the "About Me" section, I have taken a similar approach by using colors and fonts that match my personal style.
The red headings and Helvetica font style of the content align with the writing on my t-shirt in the image, while
the red "Get in Touch" button matches the accents of the webpage. The transition of the button color to black upon
hovering provides clear feedback to the user.
Overall, my attention to detail in terms of aesthetics and usability makes my website accessible and visually
appealing to all users.
Technical Aspects of My Website
Element
Usage
Navigation Bar
The navigation bar is a crucial component of my website, located at the top of every webpage. It enables
users to easily navigate to other pages on the site. I created the navigation bar using the ul and li
tags and styled it with CSS. The design incorporates features such as customized link and hover colors
to match the website theme, padding for spacing, centering for alignment with the webpage, setting
list-style-type to none to eliminate bullet points, z-index:1 to control the stacking order, and
display:flex to create a flexible layout for the child elements of the nav element. The position is set
to relative, allowing it to be positioned relative to its normal position on the page.
Heading
Headings are a crucial component of web pages as they provide an overview of the content and help to structure
the webpage. For my website, I have chosen to use "Portfolio" as the primary heading across all pages to
clearly communicate the purpose of the website. For this element i also included a "span" element and turned
the second half of the heading tan to match with the transiton colour of the navigation bar. Additionally,
headings indicate to users which page they are currently viewing, making navigation more straightforward.
To achieve this, I have utilized the div tag to add headings to my pages. This option has allowed me to
divide sections and customize headings using properties such as padding, font-style, position,
text-transform, and font-size, which have been defined in the CSS sheet. By customizing headings, I can
provide a better user experience and ensure that visitors understand the content they are viewing.
Content
I extensively used div tags on my webpage to categorize and divide up the content into different sections.
This allowed me to be more precise in positioning text, images, headings, and buttons. The use of divs also
enabled me to customize these elements in greater detail. The div tag has been styled in the CSS sheet,
with alterations made to the position, padding, margin, and z-index to determine the best positioning.
Additionally, I utilized modifications to the font-size, color, text transform, font-style, letter spacing,
and other properties to enhance the visual design of the webpage.
Images
My website's homepage is designed with a minimalist approach, featuring a single, carefully chosen image.
This image serves a dual purpose of enhancing the visual appeal of my portfolio while also providing a
helpful visual aid to the face behind the site. The image has been formatted using a combination
of CSS properties, including padding, position, translate, and z-index, to adjust its position and
dimensions. This attention to detail has resulted in a seamless integration of the image into the overall
design of your site, ensuring that it complements the topic being discussed perfectly
Body
My body includes the background color, font type, and overall content layout. It also contains multiple
divs that define font-color and style, which are set to white and use the system-ui font with additional
modifications. I chose this font because it is consistent across all devices and loads as the default
font, ensuring compatibility across various environments. Additionally, the white font color contrasts
well with the black background, making the text easily readable and highly visible for individuals with
visual impairments.
List
I used both ordered and unordered lists on my website, including in the navigation bar and on the
"future.html" page. For the navigation bar, I opted to use unordered list tags "ul" to create a
list of items that are easy to style and manipulate using CSS. This approach allowed me to apply
styles to the entire list and individual list items, as well as create a responsive navigation
menu that can adapt to different screen sizes by adjusting the layout and styling of the list
items using CSS. In contrast, on the "future.html" page, I used ordered list tags "ol" to
display the services I provide in a concise and clear manner. Using an ordered list helped me
to present the services in sequential order, making it easier for users to understand the
order and hierarchy of the list items. Additionally, using the ordered list tag was
semantically meaningful, indicating to search engines and screen readers that the list is
ordered and that the numbering of the items is significant. Overall, using both ordered
and unordered list tags helped me to create clear and structured content that is easy to
read and understand.
Comments
Reflection of Design
I crafted this website using HTML5 and CSS3 on Visual Studio Code. This gave me the ability to test it thoroughly in my own environment before taking it live. The website is comprised of six HTML pages and one CSS page, which include Home, About Me, Services, Future Ambitions, Skills, and My Experience. The navigation bar is present on all pages, making it easy for visitors to move around the website with ease. The content paragraphs are formatted to showcase information for each page. My design philosophy for this website was to keep things sleek and simple, embracing a black and white aesthetic with tasteful hints of high-contrast colors. This high contrast color scheme and minimilistic approach was taken with accessibility in mind, as I wanted to ensure that the website could be enjoyed by visually impaired users as well. Additionally, I provided alternative text descriptions for all images on the website to ensure that users who may have trouble seeing the images or are using assistive technologies can still understand the content. This further enhances the accessibility of the website, making it more user-friendly for all users. The result of doing this is an aesthetically pleasing and user-friendly website that I am proud to share.
Accessibility of Website
By incorporating high contrast colors, it makes it easier for individuals with visual impairments to navigate and read the content with greater ease. Moreover, including alternative text for images ensures that those who are unable to load the images or are visually impaired can still comprehend the purpose and content they represent.The minimalist design approach for the website has several advantages when it comes to accessibility. By reducing visual clutter and streamlining the user experience, it makes it easier for all visitors to quickly find what they're looking for and understand the information presented.
Aesthetics of Website
My approach to the aesthetic design of my website is both deliberate and visually appealing. By adhering to a minimalist black and white aesthetic and incorporating high contrast colors strategically, I have managed to create a website that is both simple and engaging.
My navbar is not only functional but also adds to the overall aesthetics of the website. The hover feature that changes the color from white to tan reflects the top of the boat image on the home page, giving the impression of a reflection. Additionally, the centered position of the navbar creates symmetry and a clean look.
The shape of my content is designed to avoid clutter and make the website easier to navigate. By using various tags such as p, div, and h1-h6, I have effectively organized my content into sub-sections, making it easier for users to find the information they need. The use of different colors for headings also adds to the clarity and ease of use of my website.
My font choices, which include Helvetica and System UI font, are carefully selected to work well with the environment they are viewed on, while the white font color provides ideal contrast with the black background.
In the "About Me" section, I have taken a similar approach by using colors and fonts that match my personal style. The red headings and Helvetica font style of the content align with the writing on my t-shirt in the image, while the red "Get in Touch" button matches the accents of the webpage. The transition of the button color to black upon hovering provides clear feedback to the user.
Overall, my attention to detail in terms of aesthetics and usability makes my website accessible and visually appealing to all users.
Technical Aspects of My Website