GitHub Pages: Website link
View on:
- Laptop: 1920 x 1200
- Mobile: 932 x 430 (iPhone 14 Pro Max)
- Best viewed on Google Chrome
Figma: Figma link
This project is a revamp of the national geographic website, aiming to make it visually appealing while interactive, with more options for user engagement, and priortizing what users want to see on the homepage, so as to make it easily accessable to the most amount of people possible.
The intended users of this website are nature enthusiasts, mainly anyone interested in national geographic news such as shows, information about nature, and where they can find these films or articles. It also targets people who like to travel, students who are researching on articles. Users will mostly want to findout information from a reliable source which is interactive and easy to use
National geographic wants to enhance its website to showcase their highest rated and upcoming events or shows. They want to have interactive features to keep their website up to date and fun to interact with, especially for a younger audience that are reading up on articles.
- Users may want a way to easily find articles, either by scrolling what is recent or by searching up content if they have an idea in mind
- Users want the website to be interactive and responsive, to feel more immersed and have a more fun time engaging with content on multiple devices
- Users want to easily find other categories they may be interested in, as well as saving relavent information.
- Interactive scrollbar with hover
- Login page where users have to fill out required email and password
- Large advertisement for upcoming premiering shows, with immersive scrolling
- Interactive homepage navigation bar (search, login, subscribe buttons), dropdown used for navigation bar for whole website
- Trending shows on disney and netflix, with unmute button to hear video audio, and scrolling option to view all disney films (mobile only). Reviews provided to show ratings
- Latest stories section to view recent news for animals or places around the world, buttons to scroll stories included. Touhch and scroll available on mobile
- Subscribe page split into 3 tiers with features shown (optionality for users), tiers collaspe on mobile view
- footer bar links to official national geographic pages (including the social media icons), email box can be typed into to submit
- Interactive scrollbar with hover
- Video added in the background (with gradient filter) to keep users engaged
- Interactive navigation bar elements, including search button
- Articles are displayed in more of a news website format, providing a brief intro on each topic for users, which can also be clicked on
- Read more option for users to scroll down available on mobile
- Yellow buttons are also interactive
- Quiz/trivia section to take quizzes for users
- Add articles to bookmarks page
- Articles saved from discover page appear here, in a condensed format that is easy to read for accessibility
- Saved articles will stay even after refreshing the page due to use of local storage
- Fully working shop page
- Similar article pages for the discover page (not just for animals), already made the navbar for it
- more detailed page when users click on each individual film to show more information about it
- Provides structure to the website
- Pages used: index.html discover.html
- Used to style html elements to fit the website theme for national geographic
- Style elements to fit desktop and mobile view
- Made website responsive with animations
- Used to handle furthur animations for css styling
- Used to add interactive features including parallax scrolling, and buttons functionality accross the website
- Used to upload code as version control
- Used to host the website as github pages
-
when scrolling down (about 50vh or more) in the homepage, and then accessing the mobile view, you can zoom out all the way to see the entire page. After scrolling up again, the issue is fixed until you reload the page again.
-
When reloading home page, sometimes you appear at the trending shows or latest stories sections (not a javascript issue)
-
Sometimes unable to delete article in the bookmarks page if there is only 1 article left
Eagle pic: https://www.pinterest.com/pin/623256035919651367/
Subcribe page underwater pic: https://flux-image.com/image/vibrant-underwater-scene-with-sea-turtle-and-colorful-coral-reef
Home login page (coded out, not copied from their repo. Did not use ReactJS): https://github.com/SALVADORPOETA/Dark-theme-sm
National Geographic logo (recolored to white with paint): https://en.m.wikipedia.org/wiki/File:Natgeologo.svg Geograph font download: https://font.download/font/geograph Leelawadee font download: https://font.download/font/leelawadee
All icons used (figma plugin): https://www.figma.com/community/plugin/735098390272716381/iconify Icons not used from figma plugin: sound/mute icon: https://www.figma.com/design/TC42uLDU1Uc9HyERBTAXAi/5000%2B-Icon-Set-(Community)?node-id=1-3&node-type=frame&t=O6Q5KNVjaPly8kYk-0 Black mesh gradient: (figma mesh gradient plugin):
Netflix and Disney+ logo: https://www.google.com/search?as_st=y&as_q=disney%2B+logo+no+background https://www.google.com/search?sca_esv=a88b1582b82b9395&rlz=1C1JJTC_en-GBSG1107SG1107&sxsrf=ADLYWIIXeCsjFNM0Fl-Lhr5PIDfS0V9Crw:1731784629112&q=netflix+logo+transparent
Disney+ films are (picked from official nat geo website): https://www.nationalgeographic.com/
Animals page pictures:
- https://www.nationalgeographic.com/animals/article/famous-grizzly-399-yellowstone-bear-killed-wyoming-vehicle
- https://www.nationalgeographic.com/animals/article/rattlesnakes-venom-conservation
- https://www.nationalgeographic.com/animals/article/wasps-alcohol-yeast-health
- https://www.nationalgeographic.com/animals/article/plastic-whales-echolocation-deep-sea
- https://www.nationalgeographic.com/animals/article/florida-manatees-warmer-water-archaeology
- https://www.nationalgeographic.com/animals/article/martial-eagles-lion-cubs-prey-eat-hunt
- https://www.nationalgeographic.com/animals/article/invasive-joro-spiders-spreading-boston-philadelphia
- httlps://mrswatsonshomepage.weebly.com/personality-test.html
Latest stories/corners of the world images and text: https://www.beautifulnews.com/
Box shadow templates https://getcssscan.com/css-box-shadow-examples
google fonts: https://fonts.google.com/
fontawesome https://fontawesome.com/
Github Copilot