Project ready for marking #1
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Created the following schemas: - About - Brands - Contact - Experiences - Skills - Testimonials - Work Experience - Projects (works)
- Installed Framer-motion, sanity-client, sanity-image-url, react-icons, node-sass npm packages - Created container folder containing component .jsx and .scss files - Imported all components into App.js - Defined CSS global styles - Created base application styling in App.scss
- Created Hamburger menu and slide in and out animations using Framer
- Created and styled navigation links
- Added a placeholder logo
- Added icons to the assets folder, created images.js in the constants folder, this file imports and exports all images so they can be imported with ease where ever required by typing `import { images } from "../../constants";`
- All navbar styling can be found in Navbar.scss
- Created and styled Header section - which includes a profile picture, social media/contact icons, navigation dots, animated text and animated icons to showcase my main skills - Used the Framer Motion library for animations on various elements - Added another logo icon to the Navbar
- Used dotenv package to mask and securely store sanity token and project ID - Created a client.js file to handle connection to the sanity client - used useState and useEffect in About.jsx to fetch data from the sanity client and set it as the content for the various elements within the About section of site - Successfully got the first skill card image and text to render in react using data stored in the Sanity CMS
- Added more content for the About section to Sanity - Wrapped About container in a Higher Order Function during export, so now pagination animates and works well
- Currently unstyled, but got content from sanity CMS to map to divs in the correct part of the site by using useState and useEffect - Used framer motion library for project card animations -
- used motion.div as skills list container, and mapped each skill from the sanity CMS backend to this div using useEffect and useState alongside the sanity client - skills are getting fetched from the sanity backend, being added to an empty state via the setSkills useState, and this is what is being mapped to the skills section of the site
- Got job history data stored in the sanity CMS backend to render on the front end in the skills section - Used the react tooltip package so that when a user hovers over a job, a tooltip pops up proving more detail about my time in that role - Used AppWrap and MotionWrap in the export statements for the about and skills container so that these sections will re-animate if the user scrolls back to them, previously they would only animate once on load. Also used this to overwrite the background colour for certain sections, os the background alternates between blue and white as the user navigates through each section - Added a grey background colour to each skills icon so they contrast better against the white background
- Successfully managed to get content stored in the sanity CMS backend to render on the front end in the testimonials section - Added left and right buttons so users can navigate back and forth through all the different testimonials - Added company logos to Sanity CMS and successfully got them to map and render on the front end of the site
- User is presented with the choice to email me or to call me - both options open up the users mail app or gives them a prompt to confirm calling me on my provided mobile number - Contact form submissions go to the sanity cms backend, into an inbox for me to read later - Thank you message is displayed to the user once the form has been submitted
- Installed a re-ordering plugin for sanity, so i can manually re-order content. Updated the Experiences Schema to allow me to re-order my job history - Added contact me links to icons - Updated favicon and page title in public/index.html
- Added re-ordering functionality to Skills and work experience sections - so this can now be manually set via the sanity CMS backend - Installed Material UI package and MUI Icons - Updated Lots of copy via sanity CMS
- Modified testimonials schema to allow for manual re-ordering of testimonials in sanity CMS backend
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://faisal244.github.io/react-portfolio/