Digital Palette

Digital Palette is a digital art gallery of Merve Kucukzoroglu. Palette, brushes and colours are treasures of an artist. It is all about rythm and harmony of colors.

In this page you will find my digital paintings and digital sketches. This site hopes to inspire young artists and art lovers. The site targets digital artists, to collaborate and to expand network. The site provides opportunity to contact with filling out the form or by directly contacting though the social media links provided in the footer.

Features

This site is designed for interests of digital artists. To maintain their interest the site is responsive.

Existing Features

• Header

  • Logo

  Featured on all the pages with a hyperlink to home page

  • Navigation Bar

  Featured on all the pages with a responsive design and functionality. Navigation bar includes links to Home, Art, and Contact pages. It is user-friendly and allows the user to navigate among pages easily without the need for using back button. It also highlights the page name user is on.



• Circle Image - Home Page

  Circular digital-painting of a girl dancing under the moonlight that looks like a palette. The image depicts the emotion of an artist while holding a brush and painting. The image matches with the color-code of the page, hence takes the attention of audience.



• Welcome Section - Home page

  This section welcomes the user and provides a palette icon that is linked to the art page of the site. When the mouse hovers on the icon, the icon color changes to the same blue tone used in the site and the size increases.



• Footer

  Featured on all the pages. On left are the LinedIn and Instagram icons that links to my social media accounts. On the right side is a link for Contact page. The footer is fixed to the bottom of screen.



• Art Page

  This page provides the user with digital art paintings and sketches. The art is copyrighted to Merve Kucukzoroglu. However, it can inspire the user and the user can contact for permission to use for any art.



• Contact Page

  Contact Page provides with responsive contact form. The user needs to enter all the fields in order to send the message. First name, Last name, email address and message are input fields. When the mouse hovers on the fields the border color changes. The send button inverts the text and background color when the mouse hovers on it.

Future Features

• Shopping cart and order feature.
• Synchronized section for my instagram page that shows the art posts, stories and highlights in real time.

Testing

• Each code and feature is tested with DevTools while coding the website at the same time.
• The links are tested and works corretly as expected.
• The color coding is tested with 'Contrast Grid'.

• All the pages are responsive to all the screen sizes.
• The art gallery is designed with flex and has responsive columns with 'wrap' property for different screen sizes.
• The medium to larger screen sizes have two columns of images.

• The larger screen sizes have more columns based on the width of screen.

• The smaller screen sizes, such as mobile, have one column of image.

• The navigation bar menu exchanges text and background color accordingly when the mouse hovers on it.

Validator Testing

• HTML
  • No errors found when testing through the official W3C validator
  
• CSS
  • No errors found when testing through the official (Jigsaw) CSS validator
  
• LIGHTHOUSE
  • Accessibility: 95
  • Best Practices: 93
  • SEO: 100
  • Performance: 85
  Lighthouse
  

Deployment

• The site was deployed to Github pages. The steps for deployment are as follows:
  • In Github repository, navigate to the Settings tab
  • Find the 'pages section' in the settings page
  • From the source section drop-down menu, select the Main Branch
  • Click save and the page will be refreshed automatically and the site is deployed.
  • My site was successfully deployed.
  • Click here for visiting my deployed site.

Credits

Media

• All the images, digital arts are credited and copyrighted to Merve Kucukzoroglu.

Code

• Font Awesome icons and their code - i class="fas fa-palette" - is credited to Font Awesome page. The icons used are: Palette in home page and social media icons in the footer.
• The script code for font awesome icons - script src="https://kit.fontawesome.com/e6e69ae431.js" crossorigin="anonymous" - is credited to Love Running project of Code Institute
• I learned Flex coding for my gallery page with practicing the Flexbox Froggy game
• Google fonts Tangerine and Lato are used for this site. The code url is imported from google fonts

Ideas

• The circular image in the home page idea occured to me from Love Running Club Ethos central image, Code Institute. I have used one of my paintings as the background image for the circular image. I have also rearranged the styling and sizes according to my site needs.