diff --git a/.gitignore b/.gitignore index b4247acb51..a7930aec24 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ # misc .DS_Store +.env .env.local .env.development.local .env.test.local diff --git a/README.md b/README.md index 21ba045289..7cf4a26c5c 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# [Developer's Portfolio](https://hashirshoaeb.github.io/home) +# [Developer's Portfolio](https://hashirshoaeb.github.io/) -[![Site preview](/public/social-image.png)](https://hashirshoaeb.github.io/home) +[![Site preview](/public/social-image.png)](https://hashirshoaeb.github.io/) -It is a personal static website/portfolio template hosted with GitHub Pages, built to showcase my recent projects. Site URL / Demo: [hashirshoaeb.github.io/home](https://hashirshoaeb.github.io/home). +It is a personal static website/portfolio template hosted with GitHub Pages, built to showcase my recent projects. Site URL / Demo: [hashirshoaeb.github.io/](https://hashirshoaeb.github.io/). ## Table of Contents @@ -30,15 +30,17 @@ Dependencies defined in package.json: ## Structure āš“ +- Navigation bar (optional) +- Blog (optional) - Body - Name | Profession - Contact / Follow / Find me / Facebook / LinkedIn / GitHub / Instagram / Email / CodePen - - Resume + - Resume | About me - About Me - - Display picture (using Instagram API) - - Interests, Goals and Hobbies + - Display picture (using Instagram API) (optional) + - About myself, my Interests, Goals and Hobbies - Things I'm good at (Skills) -- Projects (using GitHub API) +- Recent Projects (using GitHub API) (optional) - Footer - Acknowledgements (contributors) - Copyrights - open source @@ -70,6 +72,8 @@ You should have [Node.js](https://nodejs.org/en/) and [Git](https://git-scm.com/ "homepage": "https://.github.io/home" ``` + Or for custom deployment, refer [create-react-app.dev](https://create-react-app.dev/docs/deployment/) + 6. Edit [title](./public/index.html#L34) and meta [description](./public/index.html#L13) in [public/index.html](./public/index.html). 7. After editing run the following bash commands: @@ -100,30 +104,51 @@ Pull requests are welcome. For major changes, please open an issue first to disc If anyone is looking to make some contribution, the following are issues that you can solve: - [ ] UI improvements -- [x] Grammar check | Spelling mistakes - [ ] Code optimization -- [x] Hover property on social icons -- [ ] Routing +- [x] Routing +- [ ] SEO ## Upcoming Features / Improvements šŸ”— - [x] Button and place for resume/CV. - [x] Option: add or not to add Instagram's display picture. - [x] Number of projects to show in website. -- [ ] If the Number of Projects are zero, hide the heading (Recent Projects) +- [x] If the Number of Projects are zero, hide the heading (Recent Projects). +- [ ] Blogs page. - [ ] Make resume optional. ## Showcase šŸš€ Have you changed something in the code to create your own version? Feel free to share with me, I will list them in this space. -Following awesome people have created their own version. - -1. [@khizarkhizar](https://github.com/khizarkhizar) version: https://khizarkhizar.github.io/home/ - -2. [@meullah](https://github.com/meullah) version: https://meullah.github.io/home/ - -3. [@AymunTariq](https://github.com/AymunTariq) version: https://github.com/AymunTariq/home/ + + + + + + +
+ + +
+ Khizar Hayyat + +
+ 		+ + +
+ Hamza Sohail + +
+ 		+ + +
+ Aymun Tariq + +
+
## Contributors āœØ diff --git a/READMEdocs/aymuntariq-github-io-home.gif b/READMEdocs/aymuntariq-github-io-home.gif new file mode 100644 index 0000000000..6fdece2394 Binary files /dev/null and b/READMEdocs/aymuntariq-github-io-home.gif differ diff --git a/READMEdocs/hamzasohail0-github-io-home.gif b/READMEdocs/hamzasohail0-github-io-home.gif new file mode 100644 index 0000000000..e05423cf5a Binary files /dev/null and b/READMEdocs/hamzasohail0-github-io-home.gif differ diff --git a/READMEdocs/khizarkhizar-github-io-home.gif b/READMEdocs/khizarkhizar-github-io-home.gif new file mode 100644 index 0000000000..e639841aab Binary files /dev/null and b/READMEdocs/khizarkhizar-github-io-home.gif differ diff --git a/package-lock.json b/package-lock.json index d0ae72a307..be0c926910 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10841,6 +10841,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-photo-gallery": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/react-photo-gallery/-/react-photo-gallery-8.0.0.tgz", + "integrity": "sha512-Y9458yygEB9cIZAWlBWuenlR+ghin1RopmmU3Vice8BeJl0Se7hzfxGDq8W1armB/ic/kphGg+G1jq5fOEd0sw==", + "requires": { + "prop-types": "~15.7.2", + "resize-observer-polyfill": "^1.5.0" + } + }, "react-router": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", @@ -11253,6 +11262,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz", diff --git a/package.json b/package.json index a2858696ed..d724a31eb3 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "jquery": "^3.4.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-photo-gallery": "^8.0.0", + "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "^3.4.1", "react-typist": "^2.0.5", diff --git a/src/App.css b/src/App.css index 05804027b0..3b22b3e458 100644 --- a/src/App.css +++ b/src/App.css @@ -2,13 +2,11 @@ /* background: linear-gradient(136deg, #1ad7c0, #8E44AD, #ff9b11, #1F3A93, #ddd8c6, #000000, #000000); */ background: linear-gradient( 136deg, - #1f3a93, #4484ce, #1ad7c0, #ff9b11, #9b59b6, - #efefef, - #000000, + #ff7f7f, #ecf0f1 ); @@ -83,3 +81,7 @@ transition: all 0.8s; margin: 4px; } + +.bg-gradient { + background: linear-gradient(rgba(245, 245, 245), rgba(245, 245, 245, 0)); +} diff --git a/src/App.js b/src/App.js index c57a55e38d..106ac09f6c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,38 @@ import React, { Fragment } from "react"; -import MainBody from "./components/MainBody"; -import AboutMe from "./components/AboutMe"; -import Project from "./components/Project"; +import { BrowserRouter, Route } from "react-router-dom"; +import "bootstrap/dist/css/bootstrap.min.css"; +import "bootstrap/dist/js/bootstrap.bundle.min"; +import "./App.css"; +import { + showNavigationbar, + showBlog, +} from "./editable-stuff/configurations.json"; +import MainBody from "./components/home/MainBody"; +import AboutMe from "./components/home/AboutMe"; +import Project from "./components/home/Project"; import Footer from "./components/Footer"; +import Navbar from "./components/Navbar"; +import { Blog } from "./components/blog/Blog"; +import BlogPost from "./components/blog/BlogPost"; -const App = () => ( - - - - +const Home = () => { + return ( + + + + + + ); +}; + +const App = () => ( + + {showNavigationbar && } + + {showBlog && } + {showBlog && }