+# developer-portfolio
+
## Software Developer Portfolio Template built with react.js bootstrap that helps you showcase your work and skills as a software developer.
@@ -13,21 +14,22 @@ Just Edit `src/portfolio.js` to get your personal portfolio. Feel free to use it
But if you want to **contribute** and make this much better for other developer have a look at [Issues](https://github.com/1hanzla100/developer-portfolio/issues).
-
If you created something awesome and want to contribute then feel free to open an [pull request](https://github.com/1hanzla100/developer-portfolio/pulls).
## Table of Contents
-- [Sections](#sections)
-- [Getting Started](#getting-started)
-- [How to Use](#how-to-use)
-- [Linking portfolio to Github](#linking-portfolio-to-github)
-- [Change and Customize](#change-and-customize-every-section-according-to-your-need)
-- [Technologies Used](#technologies-used)
-- [Illustrations](#illustrations)
-- [For the Future](#for-the-future)
-- [Contributors](#project-maintainers)
+
+- [Sections](#sections)
+- [Getting Started](#getting-started)
+- [How to Use](#how-to-use)
+- [Linking portfolio to Github](#linking-portfolio-to-github)
+- [Change and Customize](#change-and-customize-every-section-according-to-your-need)
+- [Technologies Used](#technologies-used)
+- [Illustrations](#illustrations)
+- [For the Future](#for-the-future)
+- [Contributors](#project-maintainers)
## Sections
+
✔️ Summary and About me\
✔️ Skills\
✔️ Education\
@@ -35,23 +37,23 @@ If you created something awesome and want to contribute then feel free to open a
✔️ Projects\
✔️ Github Profile
-
-
-
## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer.
+ {education.desc}
- {education.desc}
-
+**For Windows** Install Visual C++ Build Environment: [Visual Studio Build Tools](https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools)
```
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
```
-## How To Use
-From your command line, clone and run developerFolio:
+## How To Use
+
+From your command line, clone and run developer-portolio:
```bash
# Clone this repository
@@ -61,16 +63,16 @@ $ git clone https://github.com/1hanzla100/developer-portfolio.git
$ cd developer-portfolio
# Install dependencies
-$ npm install
+$ yarn
#Start's development server
-$ npm start
+$ yarn start
```
## Linking Portfolio to Github
```javascript
- // portfolio.js
+ // portfolio.js
githubUserName: 'YOUR GITHUB USERNAME HERE',
```
@@ -78,23 +80,25 @@ $ npm start
For adding emoji 😃 into the texts in `Portfolio.js`, use the `emoji()` function and pass the text you need as an argument. This would help in keeping emojis compatible across different browsers and platforms.
-## Technologies Used
+## Technologies Used
-- [React](https://reactjs.org/)
-- [axios](https://www.npmjs.com/package/axios)
-- [reactstrap](https://reactstrap.github.io/)
-- [react-reveal](https://www.react-reveal.com/)
-- [react-lottie](https://www.npmjs.com/package/react-lottie)
-- [react-easy-emoji](https://github.com/appfigures/react-easy-emoji)
-- [react-headroom](https://github.com/KyleAMathews/react-headroom)
-- [color-thief](https://github.com/lokesh/color-thief)
+- [React](https://reactjs.org/)
+- [axios](https://www.npmjs.com/package/axios)
+- [reactstrap](https://reactstrap.github.io/)
+- [react-reveal](https://www.react-reveal.com/)
+- [react-lottie](https://www.npmjs.com/package/react-lottie)
+- [react-easy-emoji](https://github.com/appfigures/react-easy-emoji)
+- [react-headroom](https://github.com/KyleAMathews/react-headroom)
+- [color-thief](https://github.com/lokesh/color-thief)
## Illustrations
-- [Lottie File Source](https://lottiefiles.com)
+
+- [Lottie File Source](https://lottiefiles.com)
## For the Future
+
If you can help us with these. Please don't hesitate to open a [pull request](https://github.com/saadpasta/developerFolio/pulls).
-- Enable Dark Mode
+- Enable Dark Mode
-- Add More Sections
+- Add More Sections
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index 593dfc7c5..000000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,77 +0,0 @@
-const gulp = require("gulp");
-const gap = require("gulp-append-prepend");
-
-gulp.task("licenses", async function() {
- // this is to add Creative Tim licenses in the production mode for the minified js
- await gulp
- .src("build/static/js/*chunk.js", { base: "./" })
- .pipe(
- gap.prependText(`/*!
-
-=========================================================
-* Argon Design System React - v1.1.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-design-system-react
-* Copyright 2020 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/`)
- )
- .pipe(gulp.dest("./", { overwrite: true }));
-
- // this is to add Creative Tim licenses in the production mode for the minified html
- await gulp
- .src("build/index.html", { base: "./" })
- .pipe(
- gap.prependText(``)
- )
- .pipe(gulp.dest("./", { overwrite: true }));
-
- // this is to add Creative Tim licenses in the production mode for the minified css
- await gulp
- .src("build/static/css/*chunk.css", { base: "./" })
- .pipe(
- gap.prependText(`/*!
-
-=========================================================
-* Argon Design System React - v1.1.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/argon-design-system-react
-* Copyright 2020 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/`)
- )
- .pipe(gulp.dest("./", { overwrite: true }));
- return;
-});
diff --git a/package.json b/package.json
index b5206a392..bb9d651c5 100644
--- a/package.json
+++ b/package.json
@@ -1,64 +1,50 @@
{
- "name": "developer-portfolio",
- "version": "1.0.0",
- "description": "Software Developer Portfolio Template built with react.js bootstrap that helps you showcase your work and skills as a software developer.",
- "main": "index.js",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/creativetimofficial/argon-design-system-react.git"
- },
- "author": "1hanzla100",
- "license": "MIT",
- "bugs": {
- "url": "https://hanzla.ga"
- },
- "homepage": "",
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build && gulp licenses",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": "react-app"
- },
- "browserslist": [
- ">0.2%",
- "not dead",
- "not ie <= 11",
- "not op_mini all"
- ],
- "dependencies": {
- "@apollo/client": "^3.3.6",
- "axios": "^0.21.1",
- "bootstrap": "4.3.1",
- "classnames": "2.2.6",
- "colorthief": "^2.3.0",
- "graphql": "^15.4.0",
- "headroom.js": "0.11.0",
- "moment": "2.24.0",
- "node-sass": "4.13.1",
- "nouislider": "14.1.1",
- "react": "16.12.0",
- "react-datetime": "2.16.3",
- "react-dom": "16.12.0",
- "react-easy-emoji": "^1.3.0",
- "react-headroom": "^3.0.0",
- "react-lottie": "^1.2.3",
- "react-reveal": "^1.2.2",
- "react-router": "5.1.2",
- "react-router-dom": "5.1.2",
- "react-scripts": "^4.0.1",
- "reactstrap": "8.4.1"
- },
- "devDependencies": {
- "@types/googlemaps": "3.39.2",
- "@types/markerclustererplus": "2.1.33",
- "@types/react": "16.9.19",
- "eslint-plugin-flowtype": "3.13.0",
- "gulp": "4.0.2",
- "gulp-append-prepend": "1.0.8",
- "jquery": "^3.5.1",
- "typescript": "3.7.5"
- }
+ "name": "developer-portfolio",
+ "version": "1.0.0",
+ "description": "Software Developer Portfolio Template built with react.js bootstrap that helps you showcase your work and skills as a software developer.",
+ "main": "index.js",
+ "repository": "https://github.com/1hanzla100/hanzla-portfolio.git",
+ "author": "Hanzla <59178380+1hanzla100@users.noreply.github.com>",
+ "license": "MIT",
+ "dependencies": {
+ "@apollo/client": "^3.3.21",
+ "axios": "^0.21.1",
+ "bootstrap": "^5.0.2",
+ "classnames": "^2.3.1",
+ "colorthief": "^2.3.2",
+ "graphql": "^15.5.1",
+ "headroom.js": "^0.12.0",
+ "moment": "^2.29.1",
+ "nouislider": "^15.2.0",
+ "react": "^17.0.2",
+ "react-datetime": "^3.0.4",
+ "react-dom": "^17.0.2",
+ "react-easy-emoji": "^1.5.0",
+ "react-headroom": "^3.1.1",
+ "react-lottie": "^1.2.3",
+ "react-reveal": "^1.2.2",
+ "react-router": "^5.2.0",
+ "react-router-dom": "^5.2.0",
+ "react-scripts": "^4.0.3",
+ "react-typist": "^2.0.5",
+ "reactstrap": "^8.9.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
}
diff --git a/src/components/EdutionCard.jsx b/src/components/EdutionCard.jsx
index c52306ac1..2bf62855c 100644
--- a/src/components/EdutionCard.jsx
+++ b/src/components/EdutionCard.jsx
@@ -1,44 +1,36 @@
-import React from 'react';
-import {
- Card,
- CardBody,
- Badge
-} from "reactstrap";
+import React from "react";
+import { Card, CardBody, Badge } from "reactstrap";
+import { Fade } from "react-reveal";
-import { Fade } from 'react-reveal';
+const EdutionCard = ({ education }) => {
+ return (
+
+
+
+
+
+ {education.schoolName}
+
+ {education.subHeader}
+
+ {education.descBullets
+ ? education.descBullets.map((desc) => {
+ return
+
-
-
-
-
- {education.schoolName}
-
- {education.subHeader}
-
- {
- education.descBullets ?
- education.descBullets.map((desc) => {
- return
-
-