Project ready for marking

.gitignore

@@ -144,3 +144,8 @@ backend_sanity/config/@sanity/default-login.json
 backend_sanity/config/@sanity/form-builder.json
 backend_sanity/config/@sanity/vision.json
 backend_sanity/yarn.lock
+.idea/inspectionProfiles/Project_Default.xml
+.idea/modules.xml
+.idea/prettier.xml
+.idea/react-portfolio.iml
+.idea/vcs.xml

README.md

@@ -1,70 +1,125 @@
-# Getting Started with Create React App
+# React Portfolio
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Table of Contents
 
-## Available Scripts
+- [Description](#description)
+- [User Story](#user-story)
+- [Acceptance Criteria](#acceptance-criteria)
+- [Screenshots](#screenshots)
+- [Contact Me](#contact-me)
+- [My Development Environment](#my-development-environment)
+- [Languages, Technologies and Packages used](#languages-technologies-and-packages-used)
 
-In the project directory, you can run:
+## Description
 
-### `npm start`
+Being a web developer means being part of a community. I need a place not only to share your projects while you're applying for jobs or working as a freelancer but also to share my work with other developers and collaborate on projects.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Using my new and ever growing React skills, I've created an updated portfolio and have delployed it to GitHub pages.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+This new portfolio is built in React and features Sanity CMS acting as a backend Content Management System to allow for easy maintenance and updating of content in the future. The site also features extensive use of the Framer Motion animation library to add a sense of movement, dynamism and polish to the entire site.
 
-### `npm test`
+Having used Three.JS on my previous portfolio site, I wanted to push myself even further with this latest project; to learn some new front end tools and technologies to go alongside my growing skillset in React, and i am proud of the end result here.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## User Story
 
-### `npm run build`
+```md
+AS AN employer looking for candidates with experience building single-page applications
+I WANT to view a potential employee's deployed React portfolio of work samples
+SO THAT I can assess whether they're a good candidate for an open position
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## Acceptance Criteria
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+```md
+GIVEN a single-page application portfolio for a web developer
+WHEN I load the portfolio
+THEN I am presented with a page containing a header, a section for content, and a footer
+WHEN I view the header
+THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio
+WHEN I view the navigation titles
+THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted
+WHEN I click on a navigation title
+THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted
+WHEN I load the portfolio the first time
+THEN the About Me title and section are selected by default
+WHEN I am presented with the About Me section
+THEN I see a recent photo or avatar of the developer and a short bio about them
+WHEN I am presented with the Portfolio section
+THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repositories
+WHEN I am presented with the Contact section
+THEN I see a contact form with fields for a name, an email address, and a message
+WHEN I move my cursor out of one of the form fields without entering text
+THEN I receive a notification that this field is required
+WHEN I enter text into the email address field
+THEN I receive a notification if I have entered an invalid email address
+WHEN I am presented with the Resume section
+THEN I see a link to a downloadable resume and a list of the developer’s proficiencies
+WHEN I view the footer
+THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter)
+```
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## Screenshots
 
-### `npm run eject`
+The following animation shows the web application's appearance and functionality:
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+![User clicks through About Me, Portfolio, Resume, and Contact sections on the webpage and enters information on Contact page.](./src/assets/react-portfolio-gif.gif)
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Back End Content Management System Screenshots:
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+![Sanity CMS - Add a new Project](./src/assets/Screenshots/backend-1.png)
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+![Sanity CMS - Add a new skill icon](./src/assets/Screenshots/backend-2.png)
 
-## Learn More
+![Sanity CMS - Add a new job to the Experiences section](./src/assets/Screenshots/backend-3.png)
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+![Sanity CMS - Add a new animated card in the about section](./src/assets/Screenshots/backend-4.png)
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+![Sanity CMS - Screenshot of the email inbox that any submitted contact form enquiries go to](./src/assets/Screenshots/backend-5.png)
 
-### Code Splitting
+### Front End Screenshots:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+![Homepage](./src/assets/Screenshots/frontend-1.png)
 
-### Analyzing the Bundle Size
+![About section](./src/assets/Screenshots/frontend-2.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+![My creative portfolio section](./src/assets/Screenshots/frontend-3.png)
 
-### Making a Progressive Web App
+![Skills and Experience section](./src/assets/Screenshots/frontend-4.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+![Testimonials section](./src/assets/Screenshots/frontend-5.png)
 
-### Advanced Configuration
+![Footer section with Contact form](./src/assets/Screenshots/frontend-6.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+## Contact me
 
-### Deployment
+- Contact me by Email: [m.faisal244@gmail.com](mailto:m.faisal244@gmail.com)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+- [Connect with me on linkedin](https://www.linkedin.com/in/faisal244/)
 
-### `npm run build` fails to minify
+- [View my Portfolio](https://faisal244.github.io/react-portfolio/)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+## My Development Environment
+
+- VScode
+- Terminal
+- Nodemon
+- MacOS Monterey
+- Git
+- Github
+
+## Languages, Technologies and Packages used
+
+- React
+- Node.JS v18.7.0
+
+- [NPM] Sanity CMS
+- [NPM] Framer Motion
+- [NPM] Sanity Image-url
+- [NPM] material UI
+- [NPM] React Icons
+- [NPM] React Tooltip
+- [NPM] Node Sass
+- [NPM] Dotenv
+- [NPM] GH Pages
+
+---

backend_sanity/README.md

@@ -0,0 +1,9 @@
+# Sanity Clean Content Studio
+
+Congratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend.
+
+Now you can do the following things:
+
+- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
+- [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
+- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)