Kim Piffy is a visual artist and an aspiring web developer. The purpose of this portfolio site is to combine and demonstrate Kim's creative talents alongside her new front-end technical skills. The main goal of the website is to help establish an online presence that can help open doors to new professional opportunities. The site blends aesthetic sensibility with technical functionality, showcasing how Kim's former experiences as an artist can be beneficial to her web development projects. The result is a user-friendly, intuitive, visually appealing site with a simple and coherent navigation. The style choices such as the colour palette, images and fonts complement the artwork, which takes centre stage on the responsive gallery page.

The primary goal for this portfolio website is to showcase artistic and technical skills in a way that attracts potential clients or employers. The dual focus on both artwork and web development should inherently demonstrate Kim's versatility and ability to bridge the gap between creative and technical fields.

Further business goals are:

• As a recruiter I want to see a clear, well-structured site with intuitive navigation, so I can easily assess Kim’s understanding of UX/UI principles and her approach to design.
• As a prospective client I want to view smooth and interactive web elements so I can get a clear idea of how Kim's technical skills and creativity fit together.
• As a potential employer I want to view Kim’s past credentials and get an in depth look at her professional profile so I can make an informed decision on whether or not to invite her to an interview.
• As a potential collaborator I want to find a contact form or email link easily, so I can reach out to discuss possible partnerships or freelance opportunities.
• As an art enthusiast I want to browse through a gallery of Kim's work, so I can see her style and enjoy the creative content.
• As a first-time visitor I want to see clear calls-to-action which will guide me through the site towards contacting Kim for appropriate web development or creative projects.
• As a student I want to research and gather information on Kim’s artistic career to get an in-depth look at her credentials, creative process and web development techniques so that I can learn from her experiences.

Originally, a single aesthetically pleasing colour ( #9256f6) was chosen for use on button hovers, clicks, links and for use in some titles. The reason that a violet hue was selected for the portfolio website is because it has a direct relationship with Kim's use of ultra-violet light in her art exhibitions - the color itself carries meaning, and tells a story about Kim's artwork. From this base color two secondary violet hues ( #a781f1 and #5f18ea) were selected to account for accessibility and contrast criteria. An artistic 'flower petal' shaped border on Kim's profile image on the about page makes use of all 3 violet tones, next to segments of the pattern which forms the background on the contact page. The profile image border, therefore, draws together all of the colors used across the site which prevents the use of #5f18ea on white background, and use of #a781f1 on black backgrounds looking hapchance, and instead makes the selection a concious style choice which is WCAG compliant.

A combination of icons from the FontAwesome library have been utilized in the navbar, footer and contact page (after form submission). As well as stock icons, several custom icons were created and used for the navbar branding and amongst social icons in the footer.

This selection of icons from the Font Awesome library are styled with a combination of Bootstrap's inline styling and custom CSS which targets custom classes applied to the tag. Font Awesome's own literal sizing scale is also utilized inline to scale the icons.

Two custom icons were created using SVG files uploaded to the Font Awesome library. This allows the brand 'badge' logo in the navbar to be targetted and styles in the same method as the other icons. A second custom icon displays Kim's full logo in the footer, to cement the brand identity she has developed throughout her art career. The logo is a registered trademark.

Rumei House was purchased under lisence from MyFonts.com

A psychedelic, maximalist, and very stylized font was chosen for headings and buttons for several reasons.

• It clearly represents aspects of Kim's artistic style and therefore compliments the content of the website.
• When capitalized the font fits into a 'box shape' which makes it intuitivley identifiable as a button.
• The box-like letters also allow the text to look aesthetically pleasing when justified.

Graphic images of text elements were used on the carousel overlay text and on the about page to work around alignment complications. CSS text justification properties ('text-justify: justified') is only applicable when text is overspilling onto the next line, and even with several other style adjustments in place the desired outcome was complicated to achieve.

Due to time constraints and current skill levels it made more sense to apply images in place of the text elements. The images all contain alt-text which matches the writing displayed in the image.

The user is familiarised with the 'Rumei House' font representing 'clickable content' through its use in the navbar, a conventional element on most websites. After learning through the use of the font in this location, combined with a hover effect on the menu items, it becomes clear that any text in Rumei House font which displays a purple hover color is likely to be a button. This eliminates confusion which could be caused by the lack of outline and background that is a usual style convention of buttons. The 'call to action' placements also solidify that text displayed in Rumei House is usually a button.

The discerning quality between RumeinHouse being used as headers and as buttons is the size along with the hover color - a clear size difference between elements displayed on similiar pages notifies users that one aspect is a title, and the other is a button.

Rumei House has been capitalized wherever it is used across the site.

Montserrat Font was chosen and uploaded from Google Fonts for several reasons.

• Sans-serif makes it easy to read across all devices.
• The letterforms are curvy which means they compliment the 'flowing' forms of Rumei House.
• Montserrat has clean, geometric letterforms which make it feel modern and structured.
• It is offered in a wide range of weights, from thin to bold which makes it easy to style.
• It has tall uppercase letters which make it look effective when capitalised.

Everywhere that Montserrat is used on the website it is styled to be capitalized apart from on the about page where the largest bodies of text are located. This is to ensure that the paragraphs are easy to read. This keeps the text looking punchy and to the point. Minimal text is used where possible and so Montserrat can really only found in the footer, in placeholders on the contact form and, as mentioned, in the paragraphs on the about page.

The images selected for the site should provide a visual overview of Kim's experience as an artist, as well as a clear idea of her visual language and style. The gallery hosts pictures of Kim's surface pattern designs and creative direction for fashion photography, her textile banners, her mixed-media artwork, art exhibitions and illustration which shows a dynamic approach to creativity.

• Images are a combination of photographs and mockups of Kim's work which help to give a clear and concise layout to the gallery.
• 3 responsive columns are used to give a basic masonry style effect.
• All images are high quality, and therefore have large file sizes. To aid loading times all images were compressed.
• All images are uploaded in 'webp' format to aid UX and provide superior lossless and lossy compression to the images in the gallery.
• Lazy loading (loading="lazy") was used to improve UX.
• With more time and experience the gallery would benefit from Blur Hash implementation to improve UX.
• With more time and experience the gallery would benefit from other feature such as zoom hover or displaying in larger format when clicked.

The navbar was created from a boilerplate copied from Bootstrap 5 and then customized.

• The navbar is as simple as possible to aid the UX.
• 3 pages with clear and obvious headings make the site easy to navigate.
• The navbar uses Rumei House font for links.
• The left hand side of the navbar has the badge version of Kim's logo. This operates as a homepage link to aid navigation.
• The badge logo has been implemented as a custom icon, created and uploaded to Font Awesome.
• The navbar is responsive and collapsible utilizing the universal 'hamburger' icon on smaller devices.
• Bootstrap's navbar toggler icon (hamburger for collapsible responsive menu) has been replaced with a Font Awesome alternative which makes it easier to target with CSS, including adding the purple hover effect.
• All buttons in the navbar have this purple rollover.
• The navbar uses 'fixed-top' to keep it visible on even when the page is scrolled down.

The footer is located at the bottom of every page, and was created from a boilerplate provided by Bootstrap 5.

• The footer is responsive, forming 3 columns on larger screens and on smaller devices it collapses into one column.
• There is an empty column nested within the footer to help assist in aligning the central column despite the aysmetrical widths of the two outside columns.
• The footer includes an email sign up 'call to action' which utilizes placeholder text to explain to the user that they are signing up for a newsletter.
• The email sign up uses JavaScript to change the SIGN UP button text to THANKS! Which allows the user to understand that the form has been submitted without taking up extra space. This whole column is designed to be as comprehensive as possible without comprimising UX.
• The 'SIGN UP' button on the email sign up is greyed out to communicate that the email hasn't been entered and this transitions to white once it has been filled in.
• The central column includes social links encouraging users to stay connected and find out more about Kim.
• The final column contains the page navigation links which aid site navigation.
• There is space in the final column for a PRIVACY section to contain the privacy policy once this has been created.

The homepage serves a strong, visually impactful set of imagery to intrigue users, with its purpose being to capture their attention and lead them 'deeper' into the website's content.

Hero Image 1	Hero Image 2	Hero Image 3

The Hero imagery on the homepage is the first visual introduction to Kim's artwork on the site.

• It welcomes users by providing visually exciting snapshots of 3 different artworks in different mediums.
• The first image contains green tones and binary notations to act as a visual connection between Kim's art & her web development.
• The images display in a slideshow format automatically which is aided by JavaScript and automatically switches between the images.
• The hero images in the carousel span the entire viewport width to serve an impact and give strong visual ques to the user.

The image text on the carousel 'teases' more information about the content of the website and supports the content of the hero imagery in the carousel.

• The minimum amount of text possible is used on the homepage so that the images remain the point of focus.
• The text that is provided "From a world of art into a new digital realm" aims to entice the user and lead them intuitivley through the site to the about page where all the information they need to comprehend the website purpose is found. The slogan 'hooks in' the user and encourages them to spend more time finding out what will happen next.
• The minimal text also adds to the aesthetic nature of the site.
• The image text is in webp image format to help style the text in a justified format with multiple text sizes on each line.
• The text is responsive, on mobiles it is in a box shape format to work with the vertical profile, and on larger screens it is in a longer line to give visual appeal the horizontally wider dimensions.
• The image text is styles in Rumei House
• The button below the image text is also in Rumei House font.
• The text for the button is smaller and on rollover and click it shows a purple color.
• The text on the button 'Learn More' indicates to the users that it can be clicked to navigate to another page.
• The button navigates to the 'About' page - the first page in the navigation to guide users through the site.
• There is a semi transparent, dark overlay which makes the text more distinguishable.
• The overlay is permenant on handheld devices to aid the user experience as there is no mouse to hover the users on mobiles will be relying on touch.
• The overlay is activated by hovering over the hero images on desktops as the using a mouse allows for this.

The about page features a visually enticing responsive design which forms a single column on mobiles, expanding to two columns on tablets and on larger screens it reveals a hidden third column.

• There are 3 images on the About page - 2 show on devices up to size medium, and 3 showing on larger screens.
• Two images show text and follow the same format as the justified text seen on the carousel overlay for consistency.
• For the same reasons images of text were used rather than text (justification issues).
• The first image displays the text 'My name is Kim' which acts as a visual introduction to the information in the following paragraph.
• The second image, the profile image, gives a personal touch to the text information, supporting the friendly and relaxed introduction in the first image.
• The profile image displays a variety of violet hues and a pattern in a flower shaped border which ties together the stylistic elements used across the entire site.
• The final image only displays on larger screens and helps the content of the first two columns on the page look more aesthetically pleasing. It says 'its great to meet you' which again, adds personality and friendly tones to the information which could otherwise be quite serious and mundane.
• The images with text use Rumei House, justified to fit into the widths of the container they occupy. Key words are highlighted in the mid purple tone #9256f6 which helps draw the users eyes to the most important words 'Kim & Great' - which gives a positive message about her to potential employers and collaborators.

• The first paragraph serves to inform users a little more about Kim's aspirations in becoming a web developer and why her artistic background is a good device for this career change. This paragraph serves the main business objective and is targetted at the key user group.
• The second paragraph adds a little more in depth information about Kim's artwork, as she does not have a web development portfolio yet it aims to express her strengths and invite users to learn more about her creative skills. It targets other users who are less crucial than potential employers or recruiters.

• The buttons help assist the user in gaining more relevant information, if the content of the paragraphs is of interest to them.
• At the base of the first paragraph is the button 'Download C.V' which provides a direct download to a PDF which will give recruiters and employers more in depth proffesional information about Kim
• This downloadable C.V prevents the about page from looking cluttered, and also allows the information to only be provided to people who require it.
• The button at the base of the second paragraph helps guide users to the next page in the navigation 'Gallery' - it says 'View my Artwork' and helps users follow a natural progression - once they have 'got to know' Kim on the about page, they can see a lot more visual information about her in the gallery.
• Buttons utilize the darker violet #5f18ea on rollover to maintain WCAG on the white background of the about page.

Images in the gallery aim to showcase Kim's experiences as an artist, showcasing her dynamic design skills and justifying the stylistic choices made for the web design of her portfolio. The gallery is the anchoring point of the site which acts as a portfolio whilst Kim works on building a web-development project collection which can be added to this site at a later date.

• Images in the gallery are presented in a single column on small screens, and expand into 3 columns on larger screens.
• In order to mimic a masonry style gallery without JavaScript implementation images with 4:5 aspect ratio occupy the outside columns, whilst images with a 5:4 ration occupy the middle column.
• Images have been resized to a maximum width of 800 pixels, as there is no way of 'zooming in' on them, they take up the width of an average phone screen whilst assisting in loading times.
• Nearly all images use 'lady-loading' with the exception of the top two images on the gallery to aid performance.

• A single icon is used on the gallery page - an up arrow, which aims to help users navigate back to the top of the gallery once they reach the bottom.
• This arrow is a secondary option to the fixed-top navigation, should the user want to look back through the gallery rather than navigate to a different page.

The background image is the final visual 'wow' that aims to ensure website users want to reach out and connect with Kim.

• The background image of the Contact page is a segment of one of Kim's surface patterns designs.
• The background image design is also featured in some of the 'petals' surrounding the profile photo on the about page.
• The image has been selected due to its complimentary tones that work well with the violet hues used for rollovers and buttons.
• The background image provides more visually exciting content which elevates the simple form layout on the page.

• The form has a large scale header in Rumei House font which gives it a design contingency between the other pages.
• The form uses a semi-transparent, dark background to give synergy between the overlay used on the index page.
• The form has curved corners to match with the images in the gallery before it.
• The form is designed to help users be specific about their enquiry, so at a later date these inquiries can be answered in order of relevance. (Users can select the nature of the query from a drop down list)
• The form has some required fields and others that are optional. The basic requirement for the form submission is just name and email - this gives Kim the option to respond to those who have left their contact details without any extra information. This gives the minimum viable information whilst meaning the form can be submitted in the least time consuming manner if the user wishes too. This helps gain leads for employment and collaboration as it is time saving for the user.
• JavaScript has been implimented so that on form submission a secondary window appears which includes Kim's direct email should the user want to reach out in more detail.
• The language used in headers 'Get in touch' and 'Speak Soon' aims to inform users but also maintain the relaxed communication that is used in headers on the about page.

• Bootstrap 5 boilerplate code was implemented throughout the site as a blueprint for many of the elements.

• Google Fonts was utilized for installing the Montserrat body/secondary font.

• Font Awesome was utlized for installing icons and also used for hosting custom icons.

• Hosts the deployed version of the site and also stores the code.

• Hosts the IDE used for the project development.

• Used to create realistic framed mock-ups and gallery placements of Kim's art to improve the aesthetics of the gallery.

• AI image optimization used to improve quality of low resolution pictures in the gallery.

• Used to compress images and optimize for web.

• Used to convert all images to webp format.

• Used to convert images to vector format for quality.
• Used to convert logos to SVG format before using figma to aid in design of custom Font Awesome icons.

• Used to extract nessacary code from SVG images in order to create custom Font Awesome icons.

• Used to download some blank wall imagery for creating mockups.

• Application used to create PNG's, designed all text images & the border for the profile image on the About page.

• Used to resize and compress images to aid responsivity of gallery.

• Used to change image file to favicon format.

• Used to create wireframes.

A document including a table with all tests can be found here.

• The entire site has been tested comprehensivley throughout the build. Further evidence of continuous testing can be seen throughout the deployment history on Github.
• Each time a feature was added, all the pages on the site were tested to see if there was an impact.
• The site was sent to friends, family and contacts on social media feedback and testing.
• The images in the gallery have been compressed so they are all below 300kb with an average image size of less than 150kb.
• Color contrasts have been checked to ensure compliance with WCAG guidlines.

The validation section of the testing document can be found here

The mobile testing section of the testing document can be found here

The desktop testing section of the testing document can be found here

The manual testing section of the testing document can be found here

The user story testing section of the testing document can be found here

Details of known bugs can be found here

Github Pages works withh repositories that contain static files.

The website is publicly accessible via this URL: https://piffy.studio .

The instructions to deploy the project via Github Pages are as follows:

1. Go to the Settings tab in your repository.
2. Select Pages from the sidebar.
3. In the Source dropdown, select the main branch.
4. In the next drop down, keep /root as the default option.
5. Click Save.
6. Wait 2-3 minutes for the project to go live.

To add a custom domain, purchase one from an external provider and enter it in the box at the bottom of the page.

© 2025 Kim Piffy. All rights reserved.

The content on this website, including but not limited to text, images, graphics, designs & logos (with the exception of Instagram & LinkedIn Icon's), are the property of Kim Piffy and are protected by copyright law. Unauthorized use, reproduction, distribution, or modification of any materials from this website without the express written permission is prohibited.

By accessing or using this website, you are granted a limited, non-exclusive, and non-transferable licence to view and use the content solely for personal, non-commercial purposes. You may not reproduce, distribute, transmit, display, or create derivative works based on any content from this website, except as permitted by the copyright owner.

• You may view and download content for personal use, provided you do not remove or alter any content.
• You may share links to pages on the website, provided that proper attribution is given to the original source.

• You may not use any content on this website for commercial purposes without prior written consent from Kim Piffy.
• You may not copy, reproduce, or distribute content in any manner that could infringe on the intellectual property rights of Kim Piffy.
• You may not use automated tools or bots to scrape, index, or otherwise extract content from this website.

• The trademark logo displayed on this website are registered and unregistered trademarks of Kim Piffy. Nothing on this website grants any right to use any trademark without the prior written permission of the trademark owner.

• While every effort has been made to ensure the accuracy of the information provided on this website, Kim Piffy makes no representations or warranties regarding the accuracy, completeness, or reliability of any content on the site.
• The website is provided "as is," and users access it at their own risk.