Welcome! https://amzzy78.github.io/psychedelic-quotes-generator/
Psychedelic Quotes is a fun site offering a random quote generator displaying quotes mainly from professionals in the field of Psychiatry and Consciousness Research. As we are now in the era of a psychedelic renaissance in regards to the re-evaluation of the psychotherapeutic potential of psychedelics, this site is offering quotes from the perspective of psychedelics as a medicine and tool for the psyche. The site targets Psychonauts and curious folk interested in the subject matter. There is also an image gallery displaying some fun images, plus a day and date feature in the footer added purely for style to the page. The site is designed to be responsive and assessible across various devices. The design of the site is also intentionally bold and loud with a psychedelic theme in colours, font and images.
(a.) I want to easily access quotes and be inspired.
(b.) I want the site to be easy to navigate and for the content to match the sites subject title.
(c.) I want to seek out professors in the field of psychedelic research that I may not have heard of before so I can do my own research into their studies.
(d.) I want the site to be visually over the top with colours and images to match the subject matter.
(e.) I want to be able to view the site in any reasonable browser so that I can use what I’m accustomed to.
(a.) I want to see new quotes when I return to the site, so I can come back more often and explore new authors and professionals in the field, so that I can educate myself and research further on this exciting and meaningful topic. (b.) I want to see new images when I return to the site, so that I may be stimulated visually by my response to them.
-
Interactive elements.
(a.) A container that changes the quote and author on the click of a button.
(b.) A container that changes images on the click of a previous and next button.
-
Responsive on all device sizes.
-
Links to external websites for further reference. All open in a new tab. (a.) Heading/introduction text under the logo is linked to Michael Pollan's book where the excerpt was borrowed. (b.) The default first sentence/heading on the quote generator (before it is pressed) which is taken from a research paper on the National Center for Biotechnology Information, U.S. National Library of Medicine website. (c.) The default second sentence/quote on the quote generator (before it is pressed) is taken from Mind Medicine Australia's website.
The text logo PSYCHEDLIC QUOTES in the header is a clickable link that refreshes the page which resets the quote generator to its default position. When hovering over the logo an underline appears to suggest it is a link.
Heading intro text is an excerpt from Michael Pollans book - How To Change Your Mind(The New Science of Psychedelics).
The first sentence of default text, Psychedelic Medicine: A re-emerging therapeutic paradigm, is is taken from the heading of an article by Kenneth W. Tupper, PhD, Evan Wood, MD PhD, Richard Yensen, PhD, and Matthew W. Johnson, PhD. It is referenced on the National Center for Biotechnology Information, U.S. National Library of Medicine website.
The second sentence,‘Psychedelics, used responsibly and with proper caution, would be for psychiatry what the microscope is for biology and medicine or the telescope is for astronomy’ by Professor Stan Grof. Referenced - From Sacred Plants to Psychotherapy: The History and Re-Emergence of Psychedelics in Medicine By Dr. Ben Sessa. Both sentences will disappear when the press for new quote is generated by the button.
The button within the quote generator triggers the random quotes/author and images which are held in an array in the js file and for the purpose of style their is also another array holding various colours that are also triggered by the button.This adds a colourful changing background with each new quote.
The images for the gallery are held in an array that are triggered by the previous and next button element. They were added as a fun visual element to the page.
This was added as a style feature to the footer.
Based on the 60's colour scheme.
Quotes colour array.
Ohno Blazeface from Adobe fonts, also based on the psychedelic 60s typography.
Psychedelic inspired images from Adobe and resized in Photoshop.
- Desktop
- Mobile
This dev tool helped in revealing where there was overflow from the image gallery container which was affecting the responsive layout on the iPhone 5/SE.
Focused on improving the overall performance score by eliminating render-blocking resources which in particular had to do with the external typekit and issues with preloading. Created a second css stylesheet with the Adobe typekit and linked in html. Followed suggestions by Lighthouse to improve score: Added and to css and js file in the header and <script...defer></script> in the body. This enabled the script to be downloaded in parallel to parsing the page, and executed after the page finished parsing.
Added meta name="description" in html header which boosted the SEO.
HTML:
CSS:
JS:
Color Contrast Accessibility Validator:
Web Content Accessibility Guidelines (WCAG) 2.1 standards:
The suggestion on jshint: Two warnings 86 ['quoteText'] is better written in dot notation. 87 ['quoteAuthor'] is better written in dot notation. Added preload first then link rel="dns-prefetch" to typekit to improve pageload speed as per lighthouse suggestion to speed up third party origins. This bumped up the performance score.
There is also at times a latency with the array of colour changes in the quote generator and also with the quotes.
Add a seperate container focusing on women within the field of psychedelic research and therapy, to showcase their work.
The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab from the source section drop-down menu, select the Main Branch. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here - https://amzzy78.github.io/psychedelic-quotes-generator/
https://color.adobe.com/The-60s-color-theme-1704263/
https://www.color-hex.com/color-palette/5784
https://fonts.adobe.com/fonts/ohno-blazeface
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4592297/
https://michaelpollan.com/books/how-to-change-your-mind/
- https://thethirdwave.co/psychedelic-quotes/
- https://www.vulture.com/2017/06/cary-grants-lsd-therapy-the-inside-story.html
- https://quotestats.com/topic/quotes-about-lsd/
- https://www.beckleyfoundation.org/amanda-feilding/?gclid=CjwKCAjwmqKJBhAWEiwAMvGt6BmpKWq9gPyqQmsVaaxSDHXIUIH7nHPlM6hI5WIDzTRw9KCcDQuP1xoCdoQQAvD_BwE
- https://highexistence.com/aldous-huxley-quotes/
https://www.worthpoint.com/worthopedia/gary-fisher-blotter-art-psychedelic-1933404763
https://en.wikipedia.org/wiki/Daniel_Pinchbeck
https://www.worthpoint.com/worthopedia/vintage-original-photo-sexy-roberta-119119409
https://www.wired.com/2002/09/professorx/
https://doubleblindmag.com/courses/microdosing/
https://plato.stanford.edu/entries/whitehead/
https://www.deviantart.com/jesstheninjapanda/art/Aldous-Huxley-Psychedelic-669584477
https://psychedelictimes.com/stan-grof-psychedelic-legacy-javier-charme/
HTML credits:
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
https://learn.codeinstitute.net/ci_program/diplomainsoftwaredevelopmentecommerce
CSS credits:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_responsive
https://learn.codeinstitute.net/ci_program/diplomainsoftwaredevelopmentecommerce
JS credit:
learn-webdev- https://www.youtube.com/channel/UCCcK9DoXcPYcUYU2aSR7zzQ
https://learn.codeinstitute.net/ci_program/diplomainsoftwaredevelopmentecommerce
https://www.frontendcheatsheets.com/javascript
https://dev.to/rutikwankhade/learn-javascript-concepts-by-building-a-random-quote-generator-3jan
https://stackoverflow.com/questions/51040453/javascript-random-quote-and-authors-array
## Technologies
- HTML
- CSS
- JavaScript