diff --git a/package.json b/package.json index f3000de..67190cc 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "html-react-parser": "^0.9.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" diff --git a/src/App.css b/src/App.css index 5dc4934..376bdd8 100644 --- a/src/App.css +++ b/src/App.css @@ -110,6 +110,10 @@ font-size: 1.1rem; } +.extraEndContainer { + margin: 2px 8px 12px 26px; +} + .leftInfoBox { margin: 8px 4px 18px 10px; } diff --git a/src/ExtraEndContainer.js b/src/ExtraEndContainer.js new file mode 100644 index 0000000..5794c93 --- /dev/null +++ b/src/ExtraEndContainer.js @@ -0,0 +1,17 @@ +import React from 'react'; +import parse from 'html-react-parser'; + +import './App.css'; + +function ExtraEndContainer(props) { + return ( +
+

{props.extra.headline}

+
+ {parse(props.extra.body)} +
+
+ ); +} + +export default ExtraEndContainer; diff --git a/src/MainContent.js b/src/MainContent.js index d0526f7..ff8d79b 100644 --- a/src/MainContent.js +++ b/src/MainContent.js @@ -2,6 +2,7 @@ import React from 'react'; import './App.css'; import RoleContainer from './RoleContainer'; import EducationContainer from './EducationContainer'; +import ExtraEndContainer from './ExtraEndContainer'; function MainContent(props) { return ( @@ -24,6 +25,10 @@ function MainContent(props) { )} + + { props.data.extraEnd.map(extra => + + )} ); } diff --git a/src/data.js b/src/data.js index 8f231a6..7d34eb6 100644 --- a/src/data.js +++ b/src/data.js @@ -114,6 +114,12 @@ const content = { text: "Studied Computer Science (University of North Texas)", }, ], + extraEnd: [ + { headline: "Note about this resume", + /* note that this is passed through html-react-parser, and is susceptible to injection attacks */ + body: "This resume was created with ReactJS (Javascript/HTML/CSS). See the related github repo at https://github.com/notlesh/stephen-shelton-resume for more info.", + }, + ], }; export default content;