From 7959a9415133b9066efe5e3fe34139b64896d6af Mon Sep 17 00:00:00 2001 From: Taha Al Nufaili <55326983+ta0a2000t@users.noreply.github.com> Date: Sat, 9 Mar 2024 05:48:08 -0500 Subject: [PATCH 1/5] can specify icon for work experience --- package.json | 3 +- public/portfolio_shared_data.json | 34 +++----- public/res_primaryLanguage.json | 6 +- public/res_secondaryLanguage.json | 38 +++++++- src/App.js | 138 ++++++++++++++++++++++++++++++ src/components/Experience.js | 1 + src/components/Header.js | 5 +- 7 files changed, 196 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 4ee9f923e..ce6c2b00b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "react-frontend-dev-portfolio", - "homepage": "https://dorota1997.github.io/react-frontend-dev-portfolio/", "version": "0.1.0", "private": true, "dependencies": { @@ -20,7 +19,7 @@ "react-vertical-timeline-component": "^3.3.1" }, "scripts": { - "start": "react-scripts start", + "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", diff --git a/public/portfolio_shared_data.json b/public/portfolio_shared_data.json index d8747aa4a..ae7bda265 100644 --- a/public/portfolio_shared_data.json +++ b/public/portfolio_shared_data.json @@ -1,12 +1,13 @@ { "basic_info": { - "name": "Davina Griss", - "titles": [ "Front-end Developer", "Senior Data Engineer", "Dev Team lead", "Mobile App Developer" ], + "main_icon": "game-icons:plague-doctor-profile", + "name": "عبر اللع القباي", + "titles": [ "ممثل", "طبيب", "راوور", "Mobile App Developer" ], "social": [ { "name": "github", "url": "https://github.com", - "class": "fab fa-github" + "class": "fab fa-twitter" }, { "name": "instagram", @@ -20,48 +21,39 @@ "icons": [ { "name": "HTML 5", - "class": "devicon-html5-plain", - "level": "95" + "class": "fab fa-instagram" }, { "name": "CSS 3", - "class": "devicon-css3-plain", - "level": "95" + "class": "devicon-css3-plain" }, { "name": "Angular", - "class": "devicon-angularjs-plain", - "level": "80" + "class": "devicon-angularjs-plain" }, { "name": "TypeScript", - "class": "devicon-typescript-plain", - "level": "90" + "class": "devicon-typescript-plain" }, { "name": "JavaScript", - "class": "devicon-javascript-plain", - "level": "70" + "class": "devicon-javascript-plain" }, { "name": "Sass", - "class": "devicon-sass-original", - "level": "75" + "class": "devicon-sass-original" }, { "name": "Bootstrap", - "class": "devicon-bootstrap-plain", - "level": "85" + "class": "devicon-bootstrap-plain" }, { "name": "C#", - "class": "devicon-csharp-plain", - "level": "65" + "class": "devicon-csharp-plain" }, { "name": "MySql", - "class": "devicon-mysql-plain", - "level": "60" + "class": "devicon-mysql-plain" } ] } diff --git a/public/res_primaryLanguage.json b/public/res_primaryLanguage.json index 7b390e071..028ba76b0 100644 --- a/public/res_primaryLanguage.json +++ b/public/res_primaryLanguage.json @@ -97,7 +97,8 @@ ".NET Core", "SignalR", "Angular Material" - ] + ], + "icon": "devicon-typescript-plain" }, { "company": "Serros Solutions", @@ -112,7 +113,8 @@ "PHP", "JavaScript", "DHTMLX Gantt" - ] + ], + "icon": "fab fa-twitter" } ] } \ No newline at end of file diff --git a/public/res_secondaryLanguage.json b/public/res_secondaryLanguage.json index c1f6a0eea..003a92113 100644 --- a/public/res_secondaryLanguage.json +++ b/public/res_secondaryLanguage.json @@ -1,6 +1,6 @@ { "basic_info": { - "description_header": "Cześć", + "description_header": "زعتووز البقتة", "description": "👋 Jestem Davina Griss. Fikcyjna osoba na potrzeby demonstracji. Pracuję z najnowszymi frameworkami front-end takimi jak Angular, React i Vue. To co teraz widzisz to szablon portfolio od Dorota1997. Jeżeli podoba Ci się ten szablon portfolio nie zapomnij o ⭐, żeby było bardziej rozpoznawalne dla innych użytkowników. Dzięki 💜", "section_name": { "about": "O mnie", @@ -98,7 +98,41 @@ ] }, { - "company": "Serros Solutions", + "company": "DefOpenSource2", + "title": "Front-End Developer", + "years": "10.2019 - obecnie", + "mainTech": [ + "Angular 8/9/10" + ], + "technologies": [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + "MDBootstrap", + "EF Core", + "Angular Material" + ] + }, + { + "company": "DefOpenSource3", + "title": "Front-End Developer", + "years": "10.202322219 - obecnie", + "mainTech": [ + "Angular 8/9/10" + ], + "technologies": [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + "MDBootstrap", + "EF Core", + "Angular Material" + ] + }, + { + "company": "Google", "title": "Stażystka", "years": "01.2018 - 09.2019", "mainTech": [ diff --git a/src/App.js b/src/App.js index a99f38c84..323340cf9 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,144 @@ import Experience from "./components/Experience"; import Projects from "./components/Projects"; import Skills from "./components/Skills"; + + +/* +type SocialLink = { + name: string; + url: string; + class: string; +}; + +type SkillIcon = { + name: string; + class: string; +}; + +type BasicInfo = { + main_icon: string; + name: string; + titles: string[]; + social: SocialLink[]; + image: string; +}; + +type Skills = { + icons: SkillIcon[]; +}; + +type UserProfile = { + basic_info: BasicInfo; + skills: Skills; +}; + + + +*/ + +/* +type Technology = { + class: string; + name: string; +}; + +type Project = { + title: string; + startDate: string; + description: string; + images: string[]; + url: string; + technologies: Technology[]; +}; + +type Experience = { + company: string; + title: string; + years: string; + mainTech: string[]; + technologies: string[]; + icon?: string; +}; + +type SectionNames = { + about: string; + projects: string; + skills: string; + experience: string; +}; + +type BasicInfo = { + description_header: string; + description: string; + section_name: SectionNames; +}; + +type MainContent = { + basic_info: BasicInfo; + projects: Project[]; + experience: Experience[]; +}; + +type WebsiteContents = { + [language: string]: MainContent; +}; + +const websiteContent: WebsiteContents = { + en: { + basic_info: { + description_header: "Hi", + description: "👋 I'm Davina Griss. Fictional person for preview purposes :) I'm working with newest front-end frameworks like Angular, React, and Vue. What you are seeing now is a portfolio template from Dorota1997. If you like this portfolio template, make sure to ⭐ the repository to make it more recognizable for other users. Thank you 💜", + section_name: { + about: "About me", + projects: "Projects", + skills: "Skills", + experience: "Experience", + }, + }, + projects: [ + { + title: "Animal Shelter", + startDate: "2020", + description: "The most expanded application I had opportunity to work with. I've learned many technologies and my code was reviewed by awesome curator. Application handles all adoption processes and allows to store all evidence on adopting animals from animal shelter.", + images: [ + "images/portfolio/animal-shelter/p1.jpg", + "images/portfolio/animal-shelter/p2.jpg", + ], + url: "", + technologies: [ + { class: "devicon-angularjs-plain", name: "Angular" }, + { class: "devicon-typescript-plain", name: "TypeScript" }, + { class: "devicon-csharp-plain", name: "C#" }, + ], + }, + // More projects... + ], + experience: [ + { + company: "DefOpenSource", + title: "Front-End Developer", + years: "10.2019 - present", + mainTech: ["Angular 8/9/10"], + technologies: [ + "REST API", + "RxJS", + "JavaScript", + "Bootstrap", + // More technologies... + ], + icon: "devicon-typescript-plain", + }, + // More experiences... + ], + }, + other_language_key: { + // Translated content follows the same structure... + }, +}; + + +*/ + class App extends Component { constructor(props) { diff --git a/src/components/Experience.js b/src/components/Experience.js index 6e40f620d..19a2b9993 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -38,6 +38,7 @@ class Experience extends Component { textAlign: "center", }} icon={} + icon={} key={i} >
diff --git a/src/components/Header.js b/src/components/Header.js index b94973a9f..6086c878e 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -28,6 +28,7 @@ class Header extends Component { if (this.props.sharedData) { var name = this.props.sharedData.name; this.titles = this.props.sharedData.titles.map(x => [ x.toUpperCase(), 1500 ] ).flat(); + var main_icon = this.props.sharedData.main_icon; } const HeaderTitleTypeAnimation = React.memo( () => { @@ -39,7 +40,7 @@ class Header extends Component {
- +

@@ -58,7 +59,7 @@ class Header extends Component { uncheckedIcon={ Date: Sat, 9 Mar 2024 05:48:44 -0500 Subject: [PATCH 2/5] can add icon to work experience --- src/components/Experience.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Experience.js b/src/components/Experience.js index 19a2b9993..4984e8d4c 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -37,7 +37,6 @@ class Experience extends Component { color: "#fff", textAlign: "center", }} - icon={} icon={} key={i} > From bc3d743f632c06861e495b29718994f3580cc8bf Mon Sep 17 00:00:00 2001 From: Taha Al Nufaili <55326983+ta0a2000t@users.noreply.github.com> Date: Sat, 9 Mar 2024 06:45:11 -0500 Subject: [PATCH 3/5] fixed color styles for dark and light mode --- public/index.html | 2 -- src/App.js | 2 +- src/App.scss | 12 ++++----- src/components/About.js | 2 +- src/components/Header.js | 2 +- src/scss/themes/theme-dark.scss | 44 +++++++++++++++++++++------------ 6 files changed, 37 insertions(+), 27 deletions(-) diff --git a/public/index.html b/public/index.html index cc2b588ec..cad39ad24 100644 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,6 @@ - Davina Griss | Front-end Developer @@ -16,7 +15,6 @@ -
diff --git a/src/App.js b/src/App.js index 323340cf9..b75e7fc01 100644 --- a/src/App.js +++ b/src/App.js @@ -249,7 +249,7 @@ class App extends Component { > diff --git a/src/App.scss b/src/App.scss index d75c722c2..fb753d4bd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -58,9 +58,9 @@ header { padding: 8px 15px 2px 15px; position: relative; z-index: -500; - border-top: 5px solid #696969; + border-top: 5px solid #312a16; border-radius: 0 0 5px 5px; - background-color: #696969; + background-color: #312a16; color: white; } @@ -108,7 +108,7 @@ header h1 { } #about { - background: #fff; + background: #312a16; overflow: hidden; } @@ -117,7 +117,7 @@ header h1 { font: 18px/24px 'opensans-bold', sans-serif; text-transform: uppercase; letter-spacing: 3px; - color: black; + color: rgb(255, 255, 255); text-align: center; } @@ -377,7 +377,7 @@ header h1 { } #skills { - background: #1F1F1F; + background: #312a16; min-height: 200px; width: 100%; overflow: hidden; @@ -402,7 +402,7 @@ header h1 { } footer { - background: #1F1F1F; + background: #312a16; min-height: 100px; width: 100%; overflow: hidden; diff --git a/src/components/About.js b/src/components/About.js index c7ff9bbad..10b3b7241 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -18,7 +18,7 @@ class About extends Component { return (
-

+

{sectionName}

diff --git a/src/components/Header.js b/src/components/Header.js index 6086c878e..fa2401d81 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -52,7 +52,7 @@ class Header extends Component { checked={this.state.checked} onChange={this.onThemeSwitchChange} offColor="#baaa80" - onColor="#353535" + onColor="#000000" className="react-switch mx-auto" width={90} height={40} diff --git a/src/scss/themes/theme-dark.scss b/src/scss/themes/theme-dark.scss index be5a2d266..b39831fdf 100644 --- a/src/scss/themes/theme-dark.scss +++ b/src/scss/themes/theme-dark.scss @@ -11,16 +11,16 @@ body[data-theme="dark"] { } .header-icon { - color: #3C342C; + color: #ffffff; opacity: 0.8; } .slider-image { - border: 5px solid #8C8C8C; + border: 5px solid #2b2b2b; } .language { - background-color: #494949; + background-color: #2b2b2b; } .link-href { @@ -33,33 +33,33 @@ body[data-theme="dark"] { } header { - background-color: #494949; + background-color: #2b2b2b; h1 { color: white; } } #about { - background-color: #7f7f7f; + background-color: #000000; h1 span { color: white; } .polaroid span { - background: #6d6d6d; + background: #2b2b2b; } .card { - background: #6d6d6d; + background: #2b2b2b; color: white; } } #portfolio { - background: #5b5b5b; + background: #2b2b2b; .section-title { color: white !important; } .foto div { - background: #6d6d6d; + background: #000000; } .project-title-settings { color: white; @@ -68,18 +68,19 @@ body[data-theme="dark"] { #resume { filter: brightness(80%); - background: #5b5b5b; + background: #2b2b2b; + .section-title { - color: white !important; + color: rgb(255, 255, 255) !important; } .experience-badge { - background: #919191 !important; + background: #2b2b2b !important; color: white; } .main-badge { - background: #919191 !important; + background: #000000 !important; } .vertical-timeline-element-date { @@ -87,7 +88,7 @@ body[data-theme="dark"] { } .vertical-timeline-element-icon { - background: #919191 !important; + background: #000000 !important; } @media only screen and (max-width: 1169px) { .vertical-timeline-element-date { @@ -96,12 +97,23 @@ body[data-theme="dark"] { } } + #skills { + background: #000000; + } + .modal-inside .modal-content { - background: #5b5b5b; + background: #000000; color: white; } .close-icon { color: white; } -} \ No newline at end of file + + footer { + background: #000000; + color: white; + } +} + + From 93642a7998940c7c33ff63857c9cb3d61ef05d82 Mon Sep 17 00:00:00 2001 From: Taha Al Nufaili <55326983+ta0a2000t@users.noreply.github.com> Date: Sat, 9 Mar 2024 14:34:51 -0500 Subject: [PATCH 4/5] separated the light dark modes into two files --- src/App.scss | 17 -------- src/components/Header.js | 6 +-- src/scss/themes/theme-dark.scss | 6 ++- src/scss/themes/theme-light.scss | 69 ++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+), 21 deletions(-) diff --git a/src/App.scss b/src/App.scss index fb753d4bd..2b82f80e0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -38,7 +38,6 @@ header { -webkit-background-size: cover; text-align: center; overflow: hidden; - background-color: #e9d5a1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -74,7 +73,6 @@ header { .language { font-size: 25px; - background-color: #e9d5a1; padding-bottom: 10px; padding-top: 80px; } @@ -90,11 +88,9 @@ header h1 { } .slider-image { - border: 5px solid #D7CAAA; } .slider-tab { - background-color: #D7CAAA; height: 25px; } @@ -108,7 +104,6 @@ header h1 { } #about { - background: #312a16; overflow: hidden; } @@ -219,7 +214,6 @@ header h1 { } #resume { - background: #efe1bd; } .experience-icon { @@ -233,8 +227,6 @@ header h1 { text-align: left !important; padding: 5px 8px 5px 8px !important; vertical-align: baseline; - background-color: #AE944F !important; - color: white; font-weight: lighter !important; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } @@ -244,8 +236,6 @@ header h1 { text-align: left !important; padding: 5px 8px 5px 8px !important; vertical-align: baseline; - background-color: #f9f5e9 !important; - color: black; font-weight: lighter !important; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } @@ -264,7 +254,6 @@ header h1 { } .modal-inside .modal-content { - background: white; } .bars { @@ -289,7 +278,6 @@ header h1 { .bars li em { font: 15px 'opensans-bold', sans-serif; - color: #313131; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; @@ -303,7 +291,6 @@ header h1 { top: 0; margin: 0; padding-right: 24px; - background: #313131; display: inline-block; height: 42px; line-height: 42px; @@ -341,7 +328,6 @@ header h1 { } #portfolio { - background: #efe1bd; padding-bottom: 5%; } @@ -355,8 +341,6 @@ header h1 { -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; - opacity: 0; - background-color: rgba(51, 51, 51, 0.9); } .portfolio .portfolio-item .portfolio-item-caption:hover { @@ -377,7 +361,6 @@ header h1 { } #skills { - background: #312a16; min-height: 200px; width: 100%; overflow: hidden; diff --git a/src/components/Header.js b/src/components/Header.js index fa2401d81..36b34b521 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -7,7 +7,7 @@ class Header extends Component { constructor() { super(); - this.state = { checked: false }; + this.state = { checked: false , offColor: '#baaa80', onColor: '#000000'}; this.onThemeSwitchChange = this.onThemeSwitchChange.bind(this); } @@ -51,8 +51,8 @@ class Header extends Component { Date: Sat, 9 Mar 2024 15:26:41 -0500 Subject: [PATCH 5/5] experience can have a logo --- package-lock.json | 72 ++++++++++++++-- package.json | 2 + public/res_primaryLanguage.json | 4 +- src/App.scss | 8 +- src/components/Experience.js | 29 ++++++- src/index.js | 2 - src/scss/themes/theme-dark.scss | 1 - src/scss/themes/theme-light.scss | 12 +++ src/serviceWorker.js | 141 ------------------------------- src/setupTests.js | 5 -- 10 files changed, 113 insertions(+), 163 deletions(-) delete mode 100644 src/serviceWorker.js delete mode 100644 src/setupTests.js diff --git a/package-lock.json b/package-lock.json index 0f2307d70..e56e3c1bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "react-frontend-dev-portfolio", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", @@ -1459,6 +1461,39 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -13845,13 +13880,13 @@ } }, "node_modules/prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" } }, "node_modules/prop-types-extra": { @@ -19878,6 +19913,27 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.5.1" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -29905,13 +29961,13 @@ } }, "prop-types": { - "version": "15.7.2", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", - "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", - "react-is": "^16.8.1" + "react-is": "^16.13.1" } }, "prop-types-extra": { diff --git a/package.json b/package.json index ce6c2b00b..d3434883b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/public/res_primaryLanguage.json b/public/res_primaryLanguage.json index 028ba76b0..8d3f946be 100644 --- a/public/res_primaryLanguage.json +++ b/public/res_primaryLanguage.json @@ -98,7 +98,7 @@ "SignalR", "Angular Material" ], - "icon": "devicon-typescript-plain" + "logo": "\\images\\portfolio\\animal-shelter\\p1.jpg" }, { "company": "Serros Solutions", @@ -114,7 +114,7 @@ "JavaScript", "DHTMLX Gantt" ], - "icon": "fab fa-twitter" + "logo": "\\images\\myProfile.jpg" } ] } \ No newline at end of file diff --git a/src/App.scss b/src/App.scss index 2b82f80e0..b8312c544 100644 --- a/src/App.scss +++ b/src/App.scss @@ -57,10 +57,7 @@ header { padding: 8px 15px 2px 15px; position: relative; z-index: -500; - border-top: 5px solid #312a16; border-radius: 0 0 5px 5px; - background-color: #312a16; - color: white; } .skills-tile { @@ -251,6 +248,11 @@ header h1 { margin-top: 27%; text-align: center; } + + + .main-badge { + font-size: 10px !important; + } } .modal-inside .modal-content { diff --git a/src/components/Experience.js b/src/components/Experience.js index 4984e8d4c..1108423d1 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -37,7 +37,34 @@ class Experience extends Component { color: "#fff", textAlign: "center", }} - icon={} + icon={ + (work.logo !== "" && work.logo !== undefined) ? ( +
+ Logo +
+ ) : ( + + ) +} + + + key={i} >
diff --git a/src/index.js b/src/index.js index feaad6005..82769e576 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; import App from './App'; -import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.min.css'; /* GLOBAL VARIABLES */ @@ -13,4 +12,3 @@ window.$primaryLanguageIconId = 'primary-lang-icon'; window.$secondaryLanguageIconId = 'secondary-lang-icon'; ReactDOM.render(, document.getElementById('root')); -serviceWorker.register(); diff --git a/src/scss/themes/theme-dark.scss b/src/scss/themes/theme-dark.scss index b74009da8..27477cb3d 100644 --- a/src/scss/themes/theme-dark.scss +++ b/src/scss/themes/theme-dark.scss @@ -116,7 +116,6 @@ body[data-theme="dark"] { footer { background: #000000; - color: white; } } diff --git a/src/scss/themes/theme-light.scss b/src/scss/themes/theme-light.scss index 14e99a8f7..647b1fb27 100644 --- a/src/scss/themes/theme-light.scss +++ b/src/scss/themes/theme-light.scss @@ -71,6 +71,18 @@ body[data-theme="light"] { background: #312a16; } + .project-date { + border-top: 5px solid #312a16; + background-color: #312a16; + color: white; + } + + footer { + background: #312a16; + } + + + } \ No newline at end of file diff --git a/src/serviceWorker.js b/src/serviceWorker.js deleted file mode 100644 index b04b771a8..000000000 --- a/src/serviceWorker.js +++ /dev/null @@ -1,141 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: { 'Service-Worker': 'script' }, - }) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready - .then(registration => { - registration.unregister(); - }) - .catch(error => { - console.error(error.message); - }); - } -} diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 74b1a275a..000000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom/extend-expect';