This is the website I created to promote my city. Cluj Napoca is a city in full development both economically and tourist, with a rich historical heritage. Transylvania is an area full of vampire legends and Cluj Napoca is no exception. As a visitor you will discover in the heart of Transylvania a multitude of ancient tourist attractions, local traditions dating back centuries, but you will also discover local gastronomy, famous festivals throughout Europe as well as warm people and ready to welcome guests.
Potential users will find out new things about this part of Transylvania and photos and video images will make them at least curious to visit the city. The project was made possible with the support of Cluj Napoca City Hall.
The visitor will discover on this website a city about which they may not have heard before, loaded with history, legends, places to visit, festivals and it is addressed to people who are passionate about travel, adventures, eager to discover new places. The website offers them a starting point, then will interest them in the future to visit and discover The Heart of Transylavania, Cluj Napoca.
As a user, I want to:
- that when accessing the website, to see a landig page that will arouse my curiosity to navigate further;
- to find out new information about a future holiday destination;
- to see pictures and video images with the location described to give me an opinion about this city;
- when I use de form, to can send a message if I want to find out more details about this location;
As a owner I want to:
- make known to the public the existence of a city that can be a perfect destination for a city break for example;
- the visitor can access the photos and watch the video clip to know the city;
- receive messages from users when they send one using the contact form
My goal was to create a minimalist and user-friendly website as possible, to present the city of Cluj Napoca, a starting point for the user to find out about this place.
For the user, I wanted to provide some brief information that will arouse the interest of visiting this city.
The main structure of the site comprises five sections, modals for images gallery, a few links to the external pages of the institutions that supported this project, as well as to their social media pages, a video inserted with iframes and a contact form. The navbar is positioned at the top and is fixed, so it can be viewed even when scrooling. For a more enjoyable browsing experience, I used html {scroll-behavior: smooth;} so that navigating from one section to another would be smooth. Also, the left side of the navbar contains the website name and a logo created with Font Awesome. In small screens, the navbar will collapse into a "hamburger" icon. When the icon is clicked, the navbar will expand and show the whole menu.
The main image has a backwards transform scale animation for an attractive design. The images in the About and Contact sections have a transition on hover, also for a special design.
Also, the images in the Gallery section, besides the modal use for viewing, have a grow shadow on hover effect to indicate to the user when selecting a certain image. This effect was made possible by importing an external Hover.css library as I showed below.
For the video section, I used a video presentation of the city of Cluj Napoca produced by the Lazar company for the Cluj Napoca City Hall after obtaining its takeover agreement, which I can make it available if necessary.
The Contact section is a live one, meaning that the user can send a message by entering their first name, last name, email address and some message. The data is retrieved by an external server hosted by mailchimp.com, where I have a free user account. Also, after the user presses the send button and sends the message, he is redirected to the contact.html page which displays a successful message sent. This page is a clone of the main page from which the previous sections were deleted.
The website has been structured in one single page with five simple and concise sections, plus landing page, footer and succesfully message sent page (contact.html page). The wireframes can be viewed here:
- Landing Page;
- About Section;
- Visit Section;
- Gallery Section;
- Video Section;
- Contact Section;
- Footer;
- Contact Page.
The color scheme chosen by me is also a minimalist one. The main color used is # 782b1e, which was extracted from the main image using Adobe Color tool.
Color palette used:
- #782b1e
- #4d4d4d
- #f9f9f9
- #000000
This initial version of the website has some brief features so that the user can find general information about Cluj Napoca. In the future, the website will offer more functionalities such as a section with a more detailed presentation of the places to visit but also others that I have detailed below.
- About - In this section, the reader meets the city of Cluj Napoca, learns some details regarding history, tourist attractions, important cultural events, as well as emblematic tourist locations for the area.
- Visit - This section presents brief information on the existence of the airport, medieval tourist attractions, festivals in the city, local gastronomy, about the strange forest on the outskirts of the city, as well as on the cafes in the city.
- Gallery - A rich gallery with pictures from the city, will awaken the reader's imagination and desire to explore more.
- Video - This short video presentation of the city will have the greatest impact, it offers the user a close contact with the reality of the city, with everything he can discover.
- Contact - This section is live, let the user send a message.
As I said above, in the future the website will include more functionalities such as a section with a more detailed presentation of places to visit, an interactive map with their location, accommodations, restaurants, caffee shops, various events, but and other features.
To create this website, several technologies were used, as well as some frameworks, libraries and tools detailed below:
- HTML
- CSS
- Bootstrap
- jQuery
- Popper.js
- JavaScript
- Hoover CSS by Ian Lunn
- Font Awesome
Also, the following tools were used:
- Compress images with Tinyjpg
- Crop and resize images with Iloveimg
- Convert image to ICO file with Hnet
- Extract color palette from image with Adobe Color
- Pick colors with Eye Dropper Chrome extension
- Import Fonts from Google Fonts
- Simple wireframe maker with Wireframe
- HTML Validator
- CSS Validator
- CSS Autoprefixer
- Visual Studio Code
- Git installed on local device
- GitHub for host the deployed website and repository of all versions
- Testing with Chrome DevTools
- Testing with Cross Browser Testing
- Learned from W3schools
The website was tested both after the creation of each section separately but also after its completion. I tested all the functionality in the main browsers that ran on several operating systems: Chrome, Firefox, Opera, Microsoft Edge, Safari, Dolphin, in Windows 10, Mac OSX 10.14, Android and iOS operating systems, both physically on different personal and friends' devices, as well as the Cross Browser Testing tool. For full responsiveness, for the whole site, I used Bootstrap 4.4.1.
Testing during section construction was done primarily with Chrome DevTools, making sure each element works correctly and optimally, including responsiveness across devices. For navbar, I tested the functionality of all links, including the site brand. I also tested the color change of links to hover and toggle and collapse functioning in small devices. I also tested the functionality of the animated background, which I created with starting from Love Running project. During the tests, I noticed that background-attachment: fixed; is not functional in the iOS Safari browser. To fix the problem, I used in media query @media (max-width: 992px) {.callout-img, .bg-design {background-attachment: scroll;}}. After a new test, the respective browser displays the background image.
The About section launched the challenge of disproportionality between the image on the left and the text on the right in different screens, which is why in medium and large screens, I chose to hide one paragraph. Also, I also tested the functionality of the transition effect transform scale 1.1 of the image.
The Visit section has been tested to verify responsiveness across devices and resolutions.
The Gallery section has been tested to verify the optimal functioning of grow shadow on hover, modal functionality, display of the closing icon over the modal dialog image as well as the responsiveness across devices. I found that in some browsers less important, the close icon is not displayed. Unfortunately for this problem, I did not identify a solution.
For the Video section I tested the functionality of playing video images displayed on the website using iframes as well as responsiveness across devices.
In the Contact section, I tested the optimal functioning of the fields, first name, last name, email and textarea, as well as changing the color of the box on hover, the optimal functioning of the "Send" button, blocking the sending of data if the fields are not completed or the email is completed incorrectly, all fields being required, the functionality of transmitting the collected data to the mailchimp.com server, as well as redirecting the user to the contact.html page, which displays a successful message sent. For the moment, the user can send a single message from the same email address. If it sends the second message, the mailchimp.com server will display an error message. The functionality will be developed in a future version of the website.
The Footer has been tested to verify responsiveness across devices, the optimal functioning of both internal and external links. External links open in a new page so that the user does not leave the page on which they are located. The "Insta Feed" subsection is dysfunctional and was created to balance footer content on large screens. Also, it is only displayed on the screens lg and xl.
I also tested the website for HTML and CSS code validation with HTML Validator and CSS Validator.
The results of the tests performed with Cross Browser Testing can be consulted below:
- iPhone 11 Pro / Mobile Safari 13
- Android / Opera Mobile 42
- Android / Firefox Mobile 53
- Android / Dolphin Mobile 11.5
- Android / Chrome Mobile 58
- Mac OSX 10.14 / Safari 12
- Windows 10 / Google Chrome 79
- Windows 10 / Opera 63
- Windows 10 / Microsoft Edge 17
- Windows 10 / Firefox 71
For developing this project, I used three resources, GitHub for host the deployed website and repository of all versions, Git that I installed locally and Visual Studio Code, my favorite IDE editor.
To deploying My City | Cluj Napoca in GitHub Page, I followed the following steps:
- In my account GitHub website, I selected Repositories
- I selected
my-cityfrom the GitHub Dashboard. - I navigated to Settings and to the GitHub Pages section.
- From the Source section, I clicked on the drop-down menu and selected Master Branch.
- Once Master Branch is selected, the page has been automatically refreshed, with a detailed ribbon display GitHub Source Saved Pages indicating the successful implementation.
- The link to the website I found in the GitHub Pages section, with a ribbon notification that states:
Your site is published at https://iulianpro.github.io/my-city/
To run locally, you can clone this repository directly in your favorite editor, by typing in the terminal the following command:
git clone https://github.com/iulianpro/my-city.git
The text of the About section was inspired by Wikipedia but not taken as such, I adapted it into a personal version by adding ideas. The Visit section is entirely conceived and written by me, knowing the city of Cluj Napoca, I lived in this city for many years. However, I must remind the employees of the Cluj Napoca City Hall, who were very receptive to expressing their agreement to use the video material, which brings additional relevant information to this website.
- Vector icons for Visit section from Flaticon
- Purchased images from Adobe Stock Images
- Free images from the Facebook account of Cluj Napoca Mayor
- Video images with the written consent of Clujbusiness website owned by Cluj Napoca City Hall
To create this website, an inspiration but at the same time a source from which I learned many technical elements, was W3schools. I would also like to thank Twitter for creating Bootstrap which is a magic framework. I would also like to thank the Code Institute instructors who are doing a great job and from where I learned a lot in just a few months. I would also like to thank the colleagues with whom I had discussions on the Slack channels, from where I also had to learn. And last but not least, I thank my mentor Simen Daehlin.
This website was created for educational purposes, January 2020.