Live Website - Curracloe Chronicles
Curracloe Chronicles is a website that serves as a hub of information about the village of Curracloe in County Wexford, Ireland. Initially just a Facebook page, it was set up in the hope of preserving our local history and sharing memories among the community. This site is aimed at locals, tourists, and also people who have emigrated away who just miss home. This website was created as part of my Portfolio Project 1 with the Code Institute, for a Full Stack Software Developer diploma.
HTML was used to construct the base of our website and structure.
CSS was used to style my website and make it responsive. Using just CSS and HTML I created a slider gallery and gallery page.
I used Google Fonts to import some fonts that I wanted to use on my website to make it look more visually appealing.
I used Balsamiq to make a mock up of my site in mobile, tablet and desktop form.
- Locals of Curracloe and Wexford who want to reminisce and remember years gone by in their community.
- Children and grandchildren of emigrants who want to see their family's history.
- Both amataur and professional historians searching for information on a more localised level.
- People interested in the area.
- As a user, I want to find out what the website is about as soon as I land on the home page.
- As a user, I want to be able to navigate the website easily without getting lost and having to scroll to find my place.
- As a user, I want to find out the relevent information about the organisation without having to search too long.
- As a user, I want to be able to find out how to contribute towards the website.
- As a user, I want to be able to contact the website owner with ease.
- As a user, I want to see a sneak peak of the pictures available without having to go to another page.
- As a user, I want to be able to see more information about images in the gallery.
-
Navigation Bar
- Relevent user story: As a user, I want to be able to navigate the website easily without getting lost and having to scroll to find my place.
- The fully responsive navigation bar is featured in the upper left hand side of the website on each page, including Home, Gallery and Contact Us.
- The current page you are on is underlined in the navigation bar, helping the user understand which part of the website they're on.
- The access to each page in the navigation bar means using the back and forwards button on the user's browser is unneeded.
- The nav bar is repeated in the footer to make sure navigation is always accessible.
-
Hero Image
- Relevent user story: As a user, I want to find out what the website is about as soon as I land on the home page.
- The hero image is of an eye catching sand dune and sky, that stays fixed as you scroll.
- It includes two headings to describe to name and summary of what the website entails.
-
Back to Top Button
- Relevent user story: As a user, I want to be able to navigate the website easily without getting lost and having to scroll to find my place.
- In the bottom left-hand corner of the screen there is a 'back-to-top' button. When clicked it will transport the user back to the beginning of the page.
- This button is static on the page, regardless of how much you scroll so it is always accessible.
- This was created with just CSS and HTML.
-
Slider
- Relevent user story: As a user, I want to see a sneak peak of the pictures available without having to go to another page.
- On the home page there is a short gallery slider showcasing a few of the images belonging to the website, giving the user a brief idea of what to expect in the full gallery.
- This was created using just HTML and CSS as well. Resources used for this are linked in the credits section.
-
Information Sections
- Relevent user stories: As a user, I want to find out the relevent information about the organisation without having to search too long. & As a user, I want to be able to find out how to contribute towards the website.
- To give the user all the information needed about Curracloe Chronicles, I have included two sections.
- The first is above the slider and let's the user know what Curracloe Chronicles is.
- Then below the slider, alongside the map, there is a two parter section detailing how the user can contribute to the project and where to find the area mentioned.
-
Map
- Relevent user story: As a user, I want to find out the relevent information about the organisation without having to search too long.
- To show where Curracloe is located, I've included a still image of it's location on google maps.
-
Social media links
- Relevent user story: As a user, I want to be able to contact the website owner with ease.
- In the footer, along with the copyright, I have also included links to social medias.
-
Gallery
- Relevent user story: As a user, I want to be able to see more information about images in the gallery.
- On the Gallery page, I have created a small selection of images, that when hovered over on desktop, show relevent information.
- On hand held devices, the information is shown when the images are tapped.
-
Contact Form
- Relevent user story: As a user, I want to be able to contact the website owner with ease.
- On the Contact Us page, there is a contact form in which you can input your first and last name, your email and your message to the website.
- If you sucessfully fill out the form with your name, email and message, you will be redirected to a page that shows that the code works.
- This is not how I would like the user to be redirected in the final version of the website, but for the sake of this project I have left it as is.
- I would like to create a thank you page for the user to be redirected to once they complete the contact form in the future. I hope to do this once I learn beyond HTML and CSS.
- I would also like to add the ability to upload images or documents through the contact page, allowing people to submit items for the website to feature. Again, I believe this is something I may be able to do once I progress through the course and extend my knowledge.
- I would like to find a way to embed Google Maps into my page without getting errors with lighthouse testing. I'm not sure if this is something I can accomplish with more knowledge and time, but it is something I would like to look into for the future.
I used Balsamiq to construct my wireframes for this project. These are my initial rough ideas and don't necessarily reflect the finished website.
- Desktop
- Tablet
- Mobile
- For my main body text I used 'Proza Libre', a sans-serif font. I felt this font was simplistic enough to not take away from the imagery used, but was also stylishly minimalistic.
- For my headings, I used 'Cormorant SC', a serif font. I thought this font demanded attention without being too bold. It gives a sophisticated and historical feel to the website.
- Both fonts were imported from Google Fonts.
I wanted to keep in the theme of the sand and ocean for my imagery, which is what Curracloe is well known for. Both the hero image and contact form background image were taken from pexels.com. All other images are from the Curracloe Chronicles facebook page, which I admin and my father owns. Some of these images come from locals, and some of the scenic photos were taken by myself or my father.
- When choosing the colour scheme, I wanted to keep with the ocean and sand theme I had with my images.
- Using Coolors I created a colour palette that worked with my theme.
- I ended up using these colours in my CSS to style the footer and buttons.
When initially put through Lighthouse, performance was continuously on a lower score. In an attempt to fix this, I hosted my images on cloudinary and used that as my image source. However this seemed to decrease performance even further on my index page and created an issue with cookies in the best practices score, which the site had been scoring 100 on previously. In the end with the help of my mentor, I was able to resize my images and hosted them once again directly from gitpod instead of cloudinary.
- Index Page
- Gallery Page
- Contact Page
The intial check of the Contact page showed up one error of a stray div tag. Once I located it, I ran it through the validator again.
- CSS
Although my CSS file passed with no errors, I did get two warnings as shown below:
I went back into my CSS, identified and fixed the issue by changing clip to clip path and the value to none.
- A major bug I encountered was with my contact page, where there was a large white section below my footer appearing when testing for several devices. See below:
I fixed this by changing the form section height to 100vh, which was suggested by fellow students on Slack.
- Another bug I experienced was when viewing the slider on mobile, the first two images were cut off short. I was unsure of how to fix this while maintaining the aspect ratio of the images on such a small screen.
Curracloe Chronicles was deployed on Github pages. To do this, I:
- Went to the project's repository and navigated to the 'Settings' tab in the far right.
- I scrolled down to the 'Code and automation' section and clicked into the 'Pages' tab.
- Under 'source', I used the drop down menu to select 'main' and then clicked save.
- I then received a message indicating the deployment had been successful.
- Instructions on how to add vertical lines between menu items were found here on Stack Overflow.
- Idea for responsive hero image code came from here
- I referenced this to learn how to use flexbox to make a website responsive.
- I referenced this tutorial on how to make a slider with just HTML and CSS. This is featured on the home page.
- Idea for responsive gallery came from here
- Idea for footer came from here
- Favicon came from here