Creating a Digital Business Card
with ReactJS
This project is created to practice ReactJS
. Showcasing my Digital Business Card
which comprises About
, Interest
and other information about me. While creating this project I learned about creating/organizing React Components
, Styling With Classes
, using Figma Design Templates
, etc. After creating the project, deployed it to github-pages
🐦 Feel free to reach me at Twitter ♾️
- NPM
- ReactJS
- Custom Components
- create-react-app
- Figma
- github-pages
cd digital-business-card
npm install
npm start
-
- Initailize the project using
npx create-react-app digital-business-card
which will create a complete React App pre-configured and pre-installed with all the dependencies. - Import
Oxygen
font from google fonts. - Add reapating svg as a background.
- Initailize the project using
-
- Create a
components
folder insidesrc
directory. - Create custom components inside
components
folder. - Create an
images
folder insidesrc
directory and move images/logos inside it.
- Create a
-
- Create
Header
component and basic JSX elements for it. - Add Email and LinkedIn Logos.
- Create
-
- Create
MainContent
component and basic JSX elements for it.
- Create
-
- Create
Footer
component and basic JSX elements for it. - Add Email and LinkedIn Logos.
- Create
-
- Import Header, MainContent, Footer components inside
App
component.
- Import Header, MainContent, Footer components inside
-
-
App
- Added style to
body
element andApp
component.
- Added style to
-
Header
- Add appropriate
className
s to elements inHeader
component. - Style
Header
component.
- Add appropriate
-
MainContent
- Add appropriate
className
s to elements inMainContent
component. - Style
MainContent
component.
- Add appropriate
-
Footer
- Add appropriate
className
s to elements inFooter
component. - Style
Footer
component.
- Add appropriate
-
-
- Delete unnecessary files from directory and format code with
Prettier
.
- Delete unnecessary files from directory and format code with
-
- Use Official Documentation(link) to push project to GitHub Pages
-
The Odin Project
-
Figma Design
-
Scrimba
-
React Official Documentation
-
YouTube
"Success is not final; failure is not fatal: It is the courage to continue that counts."
— Winston S. Churchill
🌠 🏞️