This is a mobile-first website that is designed to be an introduction to the ancient philosophy of Stoicism. Stoicism has survived for over 2000 years and in today's current climate can be used as a very useful tool to help people lead a good and happy life. The idea behind this website is to make the user aware of the potential Stoicism can have on their life.

The main page introduces them to the philosophy and then to the 3 main stoics, accompanied by images of each stoic. By showing the brief history of the 3 main stoics and their adverse, yet prosperous lives, we wish to inspire the user to practice this philosophy. The sign up page is then available for any persuaded user to sign up for a daily email, which will give the user/client encouragement every day to practice the philosophy. The email will also give the owner the opportunity to connect daily with their customers.

The business goals are:

• Provide an explanation of what Stoicism is
• Build Brand Awareness
• Build up a database by getting users with the sign up page
• Nice UX to keep the users interest
• Selling of merchandise

The user goals are:

• Learning about a life changing philosophy
• Keep up to date with the philosophy via daily emails and social media
• Purchasing of merchandise

This website has the potential to reach a large market, young and old, so the idea was to make it interesting, simple to navigate and aesthetically pleasing. As this is an informative website, there will be quite a bit of text needed to inform the user of this site, about the philosophy and it's philosophers. The main page will give the user the start they need to prompt them to begin Stoicism. They can then sign up to a daily email which will keep them on track each day with this philosophy. The store is available for them to buy useful Stoic merchandise, which they can access with minimal clicks needed.

• English Speaking
• Career Driven
• Willing to learn

• As a user who is trying to excel in their career, I want to get stoic content daily, I will sign up to the daily email
• As user who struggles life's challenges, I want daily inspiration, I will follow the social media pages
• As a returning visitor, I want to buy some merchandise, I will visit the store
• As a philosophy student, I want to read about the stoic philosophers, I will check out the main page paragraphs
• As the owner of this site, I want to pass on my knowledge of stoicism and learn more in the process, I will do this by researching content for the daily email

• Home

  • Desktop
  • Tablet
  • Mobile

• Sign Up

  • Desktop
  • Tablet
  • Mobile

• Store

  • Desktop
  • Tablet
  • Mobile

Each page has a responsive navigation bar with the name of the site (top left) as a clickable home button. Each page has a responsive footer with icons of social media pages which, when clicked, will open up a new page and bring the user to the social media site of the owner for more content. The social media icons will increase in size when the user hovers over them with the cursor.

Directly under the navbar there is an alert/call to action to prompt the user to sign up for the daily email, with a clickable link which will bring them directly to the sign up page. The call to action will also appear near the bottom of the page (above the footer) to allow the user to easily navigate to the sign up page after reading the main page content.

The home page features a responsive hero image near the top of the page of ancient greek architecture. The purpose of the hero image is to give the user a nice aesthetic welcome.

After the hero image there is an introduction paragraph to Stoicism, to give the user an idea of what Stoicism is. Towards the end of this paragraph there is a click here link to bring the user to the sign up page.

The next section features images of 3 philosophers. Under each philosopher their is a brief synopsis. The paragraph that follows the synopsis is about Stoicism in the philosophers life. In the Stoicism section there is a link anchored in their writings title to bring the user to Wikipedia (opened on a separate page), to learn more about the book. Towards the end of the paragraph is a link to the store, where the books are for sale.

The sign up page has a nice colorful image of greek architecture as its background, to make it aesthetically pleasing. Floating on the page, there is a form section for the user to simply sign up to the daily email by inputting their name and email address. With a satirical quote from Marcus Aurelius above for reading material.

The store page, kept simple, features a welcome heading. There is then an image of each product, followed by product name and price, with a description. There is an option of "add to basket" on each product, which when clicked, pops up a modal to advise the user that the product has been added to the basket.

• Checkout - A basket dropdown will be added to the store page navbar. By clicking on the basket dropdown the user will have the option to click a checkout button which will bring them to the checkout page with all the items they have added.
• Blog - Once the site gets some more interest and traffic, I will add a blog page to this site in order to further help spread the teachings of Stoicism.

• Visual Studio Code
  • The developer used visual studio code as their IDE while building the website
• BootstrapCDN
  • The project used Bootstrap4 to simplify the layout of the website and make it easily responsive
  • This project also used Bootstrap4 to provide icons from FontAwesome
• Google Fonts
  • This project used google fonts to style the website fonts
• Popper.js
  • This project used Popper.js reference Javascript needed for the responsive navbar
• jQuery
  • The project uses jQuery to reference Javascript needed for the responsive navbar and modal for the store page cards

• W3C CSS validation
  • The developer used W3C CSS Validation for testing the code in the CSS stylesheet
• W3C Markup Validation
  • The developer used W3C Markup Validation for testing the HTML code

• As a user who is trying to excel in their career, I want to get stoic content daily, I will sign up to the daily email

  1. The user can simply find "sign up to daily email" on the navigation bar, which brings them to the sign up page.
  2. On the sign up page, they will fill in the form and that's it, they will receive a daily email of stoic content.

• As user who struggles life's challenges, I want daily inspiration, I will follow the social media pages

  1. No matter where the user is on the website, they will find the footer, which will then link them to the social network of their liking.

• As a returning visitor, I want to buy some merchandise, I will visit the store

  1. The user can simply find "store" on the navigation bar which will then bring them to the store page.
  2. The user can then click on items in the store they wish to purchase.
  3. Within 3 clicks at most, from anywhere on the page, the user will have added an item to their basket.

• As a philosophy student, I want to read about the stoic philosophers, I will check out the main page paragraphs

  1. Once on the main page, they will find interesting writings on the stoic philosophers.

• As the owner of this site, I want to pass on my knowledge of stoicism and learn more in the process, I will do this by researching content for the daily email

  1. Every day will need new content, so the owner will be constantly learning new ways to show and teach Stoicism.

1. Navigation bar:

   1. Go to the home page from the desktop.
   2. Change the screen size to both tablet and mobile phone to confirm that the navigation bar is responsive and switches to the burger icon dropdown menu and it works correctly.
   3. Check that the navigation bar links work accordingly on each page, so navigation around the site works properly. While testing, I noticed in index.html, I had not given the home button a link, and the problem was promptly fixed.

2. Alert/Call to action:

   1. Check the responsiveness of both the call to action on each device.
   2. Check the link in the alert to make sure it is working correctly on both of the alerts.

3. Hero image:

   1. Check the responsiveness of the image and make sure it doesnt look squashed or skewed on any device. On the testing this I wasn't happy with the image in tablet mode, I added a media query to the CSS to fix this.

4. Introduction:

   1. Check the responsiveness of the text of the introduction section.
   2. Check the link in the introduction section, to make sure it is working correctly.

5. History section:

   1. Check the responsiveness of the history section images and make sure they don't look squashed or skewed on any device.
   2. Check the responsiveness of the text in the history section.

6. Footer:

   1. Check the responsiveness of the footer section, make sure the icons sit nicely on all devices.
   2. Check that icons in the footer section are working correctly.

1. 1. Navigation bar:
   2. Go to the sign up page from the desktop.
   3. Change the screen size to both tablet and mobile phone to confirm that the navigation bar is responsive and switches to the burger icon dropdown menu in the correct place.
   4. Check that the navigation bar links work accordingly on each page, so navigation around the site works properly.

2. Background image:

   1. Make sure the background image is responsive on all devices.

3. Form section:

   1. Check to see if the form is responsive on all devices and floats nicely on the page.
   2. Input the necessary data and check if the form works correctly.

4. Footer:

   1. Check the responsiveness of the footer section, make sure the icons sit nicely on all devices. The footer was too big when viewed on one of the tablet sizes, so I adjusted the CSS to fix this issue.
   2. Check that icons in the footer section are working correctly.

1. 1. Navigation bar:
   2. Go to the store page from desktop.
   3. Change the screen size to both tablet and mobile phone to confirm that the navigation bar is responsive and switches to the burger icon dropdown menu in the correct place.
   4. Check that the navigation bar links work accordingly on each page, so navigation around the site works properly.

2. Cards/Merchandise:

   1. Check to see if the cards are responsive and fit nicely on the page for each device.
   2. Check to see if the add to basket button is functioning correctly and the Modal pops up as planned.

3. Footer:

   1. Check the responsiveness of the footer section, make sure the icons sit nicely on all devices.
   2. Check that icons in the footer section are working correctly.

• I asked my friends and family for feedback on there devices. The text was centered and didn't look very well, so I justified it giving it a much better layout on all devices
• I asked for feedback in the peer-code-review channel in slack. There was feedback that I should add another call to action on the main page
• I ran my text through Google Docs to spell check and used the "Grammarly feature" to check the grammar. There was quite a few typos which were corrected

This project was developed using Visual Studio Code, commited to git and pushed to Github.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. From the list of repositories on the left hand side of the screen, select Richiefinegan11/stoic_in_action.
3. From the menu items near the top of the page, select Settings.
4. Scroll down the page to the GitHub Pages section.
5. Under Source, in the Github Pages section, click the drop-down menu labelled None and select Master Branch.
6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
7. Scroll back down to the GitHub Pages section where the link to the deployed website will be, at the top of the section.

To clone this project from GitHub:

1. Click on the repository Richiefinegan11/stoic_in_action.
2. To the right of the page, click the "Clone or download button.
3. When the Clone with HTTPs section shows, copy the URL of the repository.
4. In your local IDE open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone - then paste the URL copied for as advised in step 3.

• CSS:

  • The idea of style for the sign up page was taken from the Code Institute "Love Running" project.
  • W3schools was used for assistance on the position and typography in the stylesheet.
  • Stack Overflow was very helpful in assisting me with questions I needed answered to create the style sheet.

• Mainpage HTML -

  • The HTML5 code was copied from BootstrapCDN and modified for layout and responsiveness.

• Sign Up Page HTML -

  • The form layout was influenced by the "Love Running" project from Code Institute.

• Store Page HTML -

  • The HTML5 code was copied from BootstrapCDN and modified for layout and responsiveness.

• The content for this site was influenced by Ryan Holiday's site Daily Stoic
• The text for the home page was created, amended and reviewed by Aaron McDonnell

• The Main page media:
  • The hero image was taken from the site The Athens Key
  • The thumbnail images of the 3 stoics were taken from Wikipedia
• The Sign Up page:
  • The background image for the sign up page was taken from Wikipedia
• The images for the Store page sources attributed below:
  • Meditations - The Book Depository
  • Discourses - The Book Depository
  • Letter from a Stoic - The Book Depository
  • The Stoic Mug - Etsy
  • Zeno Mug - Etsy
  • Zeno Mug - Etsy
  • Memento Medallion - Daily Stoic
  • Amor Fati - Daily Stoic
  • TOITW - Daily Stoic

Jonathan Munz (Code Institute Mentor) - For his advice, helpful feedback and reassurance towards the end of this project.

Anna Greaves (Code Institute Tutor) - For her helpful comments in the slack community.

Carlos R (Code Institute Slack Community Lead) - For his feedback on my project in the peer-code-review channel in slack.

The Code Institute Slack Community - for the tips and ideas discovered while browsing.

Aaron Mcdonnell, Ian P Brady and Keith Doolan for their very helpful feedback for this site.

The content of this Website is for educational purposes only.