├── .gitignore ├── _config.yml ├── images ├── css.png ├── Frame9.png ├── Shape.png ├── Snap1.png ├── Snap2.png ├── Snap3.png ├── Snap4.png ├── html.png ├── Counter.png ├── Frame10.png ├── Frame11.png ├── contact.png ├── Header_bg.png ├── Snapshoot1.png ├── Snapshoot2.png ├── Snapshoot3.png ├── Snapshoot4.png ├── contactbg.png ├── javaScript.png ├── screenshot.png ├── header-shape.png └── social_media_icons.png ├── .stylelintrc.json ├── .hintrc ├── .eslintrc.json ├── README.md ├── .github └── workflows │ └── linters.yml ├── package.json ├── index.html ├── css ├── style.css └── desktop.css └── js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore node_modules folder 2 | node_modules -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman 2 | google_analytics: UA-214417857-1 3 | -------------------------------------------------------------------------------- /images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/css.png -------------------------------------------------------------------------------- /images/Frame9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Frame9.png -------------------------------------------------------------------------------- /images/Shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Shape.png -------------------------------------------------------------------------------- /images/Snap1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snap1.png -------------------------------------------------------------------------------- /images/Snap2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snap2.png -------------------------------------------------------------------------------- /images/Snap3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snap3.png -------------------------------------------------------------------------------- /images/Snap4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snap4.png -------------------------------------------------------------------------------- /images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/html.png -------------------------------------------------------------------------------- /images/Counter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Counter.png -------------------------------------------------------------------------------- /images/Frame10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Frame10.png -------------------------------------------------------------------------------- /images/Frame11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Frame11.png -------------------------------------------------------------------------------- /images/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/contact.png -------------------------------------------------------------------------------- /images/Header_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Header_bg.png -------------------------------------------------------------------------------- /images/Snapshoot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snapshoot1.png -------------------------------------------------------------------------------- /images/Snapshoot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snapshoot2.png -------------------------------------------------------------------------------- /images/Snapshoot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snapshoot3.png -------------------------------------------------------------------------------- /images/Snapshoot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/Snapshoot4.png -------------------------------------------------------------------------------- /images/contactbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/contactbg.png -------------------------------------------------------------------------------- /images/javaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/javaScript.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /images/header-shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/header-shape.png -------------------------------------------------------------------------------- /images/social_media_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tariktesfa/My-portfolio/HEAD/images/social_media_icons.png -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 10 | } 11 | -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My-Portfolio 2 | 3 | > Portfolio: Desktop version + Mobile Version 4 | 5 | **This is a portfolio website created by using the template provided in Figma.** 6 | 7 | ## Built With 8 | 9 | - HTML 10 | - CSS 11 | 12 | ## Materials required for validation 13 | 14 | - follow this link : 15 | [HTML and CSS Linters link]( https://github.com/microverseinc/linters-config/tree/master/html-css) 16 | 17 | ## Screenshot 18 | 19 | ![readme](https://user-images.githubusercontent.com/38283436/144797274-77c91073-1ef7-4150-821c-c89f298873c7.PNG) 20 | 21 | 22 | ## Live Demo 23 | 24 | [live demo](https://tariktesfa.github.io/My-portfolio/) 25 | 26 | ## Get Started 27 | 28 | To get a local copy up and running follow these simple example steps. 29 | 30 | 1. Clone the Repo or Download the Zip file 31 | 2. Run the live server or simply open index.html with your browser. 32 | 33 | ## Author 34 | 35 | 👤 **Tarikwa Tesfa** 36 | 37 | - GitHub: [@tariktesfa](https://github.com/tariktesfa) 38 | - Twitter: [@tariktesfa](https://twitter.com/tarik_tesfa) 39 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/tarikwa-tesfa-232a64167/) 40 | 41 | ## 🤝 Contributing 42 | 43 | Contributions, issues, and feature requests are welcome! 44 | 45 | Feel free to check the [issues page](../../issues/). 46 | 47 | ## Show your support 48 | 49 | Give a ⭐️ if you like this project! 50 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.25.3", 7 | "hint": "^6.1.9", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | }, 13 | "name": "my-portfolio", 14 | "description": "> Portfolio: Desktop version", 15 | "version": "1.0.0", 16 | "main": "index.js", 17 | "dependencies": { 18 | "acorn": "^8.6.0", 19 | "acorn-jsx": "^5.3.2", 20 | "ajv": "^8.8.2", 21 | "ansi-colors": "^4.1.1", 22 | "ansi-regex": "^5.0.1", 23 | "ansi-styles": "^4.3.0", 24 | "argparse": "^1.0.10", 25 | "array-includes": "^3.1.4", 26 | "array.prototype.flat": "^1.2.5", 27 | "astral-regex": "^2.0.0", 28 | "balanced-match": "^1.0.2", 29 | "brace-expansion": "^1.1.11", 30 | "call-bind": "^1.0.2", 31 | "callsites": "^3.1.0", 32 | "chalk": "^4.1.2", 33 | "color-convert": "^2.0.1", 34 | "color-name": "^1.1.4", 35 | "concat-map": "^0.0.1", 36 | "confusing-browser-globals": "^1.0.10", 37 | "cross-spawn": "^7.0.3", 38 | "debug": "^4.3.2", 39 | "deep-is": "^0.1.4", 40 | "define-properties": "^1.1.3", 41 | "doctrine": "^3.0.0", 42 | "emoji-regex": "^8.0.0", 43 | "enquirer": "^2.3.6", 44 | "es-abstract": "^1.19.1", 45 | "es-to-primitive": "^1.2.1", 46 | "escape-string-regexp": "^1.0.5", 47 | "eslint-import-resolver-node": "^0.3.6", 48 | "eslint-module-utils": "^2.7.1", 49 | "eslint-scope": "^5.1.1", 50 | "eslint-utils": "^2.1.0", 51 | "eslint-visitor-keys": "^2.1.0", 52 | "espree": "^7.3.1", 53 | "esprima": "^4.0.1", 54 | "esquery": "^1.4.0", 55 | "esrecurse": "^4.3.0", 56 | "estraverse": "^5.3.0", 57 | "esutils": "^2.0.3", 58 | "fast-deep-equal": "^3.1.3", 59 | "fast-json-stable-stringify": "^2.1.0", 60 | "fast-levenshtein": "^2.0.6", 61 | "file-entry-cache": "^6.0.1", 62 | "flat-cache": "^3.0.4", 63 | "flatted": "^3.2.4", 64 | "fs.realpath": "^1.0.0", 65 | "function-bind": "^1.1.1", 66 | "functional-red-black-tree": "^1.0.1", 67 | "get-intrinsic": "^1.1.1", 68 | "get-symbol-description": "^1.0.0", 69 | "glob": "^7.2.0", 70 | "glob-parent": "^5.1.2", 71 | "globals": "^11.12.0", 72 | "has": "^1.0.3", 73 | "has-bigints": "^1.0.1", 74 | "has-flag": "^4.0.0", 75 | "has-symbols": "^1.0.2", 76 | "has-tostringtag": "^1.0.0", 77 | "import-fresh": "^3.3.0", 78 | "imurmurhash": "^0.1.4", 79 | "inflight": "^1.0.6", 80 | "inherits": "^2.0.4", 81 | "internal-slot": "^1.0.3", 82 | "is-bigint": "^1.0.4", 83 | "is-boolean-object": "^1.1.2", 84 | "is-callable": "^1.2.4", 85 | "is-core-module": "^2.8.0", 86 | "is-date-object": "^1.0.5", 87 | "is-extglob": "^2.1.1", 88 | "is-fullwidth-code-point": "^3.0.0", 89 | "is-glob": "^4.0.3", 90 | "is-negative-zero": "^2.0.2", 91 | "is-number-object": "^1.0.6", 92 | "is-regex": "^1.1.4", 93 | "is-shared-array-buffer": "^1.0.1", 94 | "is-string": "^1.0.7", 95 | "is-symbol": "^1.0.4", 96 | "is-weakref": "^1.0.2", 97 | "isexe": "^2.0.0", 98 | "js-tokens": "^4.0.0", 99 | "js-yaml": "^3.14.1", 100 | "jsesc": "^2.5.2", 101 | "json-schema-traverse": "^1.0.0", 102 | "json-stable-stringify-without-jsonify": "^1.0.1", 103 | "levn": "^0.4.1", 104 | "lodash.merge": "^4.6.2", 105 | "lodash.truncate": "^4.4.2", 106 | "lru-cache": "^6.0.0", 107 | "minimatch": "^3.0.4", 108 | "minimist": "^1.2.5", 109 | "ms": "^2.1.2", 110 | "natural-compare": "^1.4.0", 111 | "object-inspect": "^1.11.1", 112 | "object-keys": "^1.1.1", 113 | "object.assign": "^4.1.2", 114 | "object.entries": "^1.1.5", 115 | "object.values": "^1.1.5", 116 | "once": "^1.4.0", 117 | "optionator": "^0.9.1", 118 | "parent-module": "^1.0.1", 119 | "path-is-absolute": "^1.0.1", 120 | "path-key": "^3.1.1", 121 | "path-parse": "^1.0.7", 122 | "prelude-ls": "^1.2.1", 123 | "progress": "^2.0.1", 124 | "punycode": "^2.1.1", 125 | "regexpp": "^3.2.0", 126 | "require-from-string": "^2.0.2", 127 | "resolve": "^1.20.0", 128 | "rimraf": "^3.0.2", 129 | "semver": "^7.3.5", 130 | "shebang-command": "^2.0.0", 131 | "shebang-regex": "^3.0.0", 132 | "side-channel": "^1.0.4", 133 | "slice-ansi": "^4.0.0", 134 | "sprintf-js": "^1.0.3", 135 | "string-width": "^4.2.3", 136 | "string.prototype.trimend": "^1.0.4", 137 | "string.prototype.trimstart": "^1.0.4", 138 | "strip-ansi": "^6.0.1", 139 | "strip-bom": "^3.0.0", 140 | "strip-json-comments": "^3.1.1", 141 | "supports-color": "^7.2.0", 142 | "table": "^6.7.3", 143 | "text-table": "^0.2.0", 144 | "to-fast-properties": "^2.0.0", 145 | "tsconfig-paths": "^3.12.0", 146 | "type-check": "^0.4.0", 147 | "type-fest": "^0.20.2", 148 | "unbox-primitive": "^1.0.1", 149 | "uri-js": "^4.4.1", 150 | "v8-compile-cache": "^2.3.0", 151 | "which": "^2.0.2", 152 | "which-boxed-primitive": "^1.0.2", 153 | "word-wrap": "^1.2.3", 154 | "wrappy": "^1.0.2", 155 | "yallist": "^4.0.0" 156 | }, 157 | "scripts": { 158 | "test": "echo \"Error: no test specified\" && exit 1" 159 | }, 160 | "repository": { 161 | "type": "git", 162 | "url": "git+https://github.com/tariktesfa/My-portfolio.git" 163 | }, 164 | "keywords": [], 165 | "author": "", 166 | "license": "ISC", 167 | "bugs": { 168 | "url": "https://github.com/tariktesfa/My-portfolio/issues" 169 | }, 170 | "homepage": "https://github.com/tariktesfa/My-portfolio#readme" 171 | } 172 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Tarikwa's Portfolio 22 | 23 | 24 | 25 |
26 |
27 | 42 |
43 |
44 |
45 |
46 |

I'm Tarikwa
Glad to see you!

47 |

I’m a software developer! I can help you build a product , feature or website Look through some of my 48 | work and experience! If you like what you see and have a project you need coded, don’t hestiate to 49 | contact me.

50 |

LET'S CONNECT

51 | 58 |
59 |
60 |
61 |
62 |
63 |

About
Myself

64 |

I’m a software developer! I can help you build a product , feature or website Look through some of my 65 | work and experience! If you like what you see and have a project you need coded, don’t hestiate to 66 | contact me.

67 |

LET'S CONNECT

68 |
    69 |
    • 70 |
    • 71 |
    • 72 |
    • 73 |
    • 74 |
75 | 76 |
77 |
78 |
    79 |
  • 80 |

    Languages

    81 |
    • 82 |
    • 83 |
84 |
85 |
    86 |
  • JavaScript
    • 87 |
  • 88 |

    JavaScript

    89 |
    • 90 |
91 |
    92 |
  • HTML
    • 93 |
  • 94 |

    HTML

    95 |
    • 96 |
97 |
    98 |
  • CSS
    • 99 |
  • 100 |

    CSS

    101 |
    • 102 |
103 |
104 |
    105 |
  • 106 |

    Frameworks

    107 |
    • 108 |
    • 109 |
110 |
    111 |
  • 112 |

    Skills

    113 |
    • 114 |
    • 115 |
116 |
117 |
118 |
119 |
120 |

Contact me

121 |

If you have an application you are interested in developing, a feature that you need 122 | built or a project that needs coding. I’d love to help with it

123 |
124 |
125 |
    126 |
  • 127 |
    • 128 |
    • 129 |
  • 130 |
    • 131 |
    • 132 |
    • 133 |
    • 134 |
    • 135 |
  • shape
    • 136 |
137 |
138 |
139 |
140 |
141 |
142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #e5e5e5; 3 | font-family: Poppins, sans-serif; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | .desk-item, 9 | .desk-item1, 10 | .flex-item2-desk, 11 | .technology-desk, 12 | .lang-container { 13 | display: none; 14 | } 15 | 16 | nav { 17 | display: flex; 18 | flex: 1 1 auto; 19 | justify-content: space-between; 20 | text-align: center; 21 | padding: 1em; 22 | background-color: white; 23 | } 24 | 25 | /* .menu { 26 | display: block; 27 | } */ 28 | 29 | a { 30 | font-style: normal; 31 | font-weight: bold; 32 | font-size: 25px; 33 | line-height: 20px; 34 | color: #6070ff; 35 | text-decoration-line: none; 36 | } 37 | 38 | .headline-section { 39 | background-image: url(../images/header-shape.png); 40 | background-repeat: no-repeat; 41 | background-size: 100% 100%; 42 | background-color: white; 43 | display: flex; 44 | height: 620px; 45 | flex-direction: column; 46 | padding: 20px 20px; 47 | border-bottom-left-radius: 25% 50px; 48 | margin-bottom: 100px; 49 | } 50 | 51 | h1 { 52 | color: #172b4d; 53 | font-weight: bold; 54 | font-size: 40px; 55 | line-height: 52px; 56 | } 57 | 58 | p { 59 | font-weight: normal; 60 | font-size: 16px; 61 | line-height: 24px; 62 | color: #344563; 63 | } 64 | 65 | .connect { 66 | color: #3d4ee4; 67 | font-weight: 500; 68 | font-size: 16px; 69 | line-height: 24px; 70 | } 71 | 72 | ul { 73 | list-style-type: none; 74 | display: flex; 75 | gap: 20px; 76 | padding: 1px; 77 | margin: 1px; 78 | } 79 | 80 | li a { 81 | color: #344563; 82 | margin-left: -40px; 83 | padding-right: 35px; 84 | } 85 | 86 | .social-icon { 87 | margin-left: 35px; 88 | display: flex; 89 | } 90 | 91 | .main-container { 92 | display: grid; 93 | grid-template-columns: 1fr; 94 | } 95 | 96 | .grid-item { 97 | background-color: white; 98 | display: flex; 99 | margin-bottom: 100px; 100 | flex-direction: column; 101 | padding: 20px 20px; 102 | border: 1px solid #e5e5e5; 103 | border-radius: 3%; 104 | } 105 | 106 | .mobile-item { 107 | position: fixed; 108 | height: 100%; 109 | width: 100%; 110 | left: 0; 111 | right: 0; 112 | top: 0; 113 | background-color: #6070fff0; 114 | text-align: left; 115 | display: none; 116 | } 117 | 118 | .mobile-item a { 119 | color: #fff; 120 | } 121 | 122 | .technology a { 123 | font-size: 12px; 124 | font-weight: 500; 125 | color: #6070ff; 126 | border-radius: 8px; 127 | text-align: center; 128 | background: #ebebff; 129 | padding: 5px 10px; 130 | margin-left: 0; 131 | } 132 | 133 | .flex-item3 a { 134 | font-size: 13px; 135 | font-weight: 600; 136 | display: flex; 137 | align-content: space-around; 138 | color: #7a869a; 139 | } 140 | 141 | .mobile-nav a { 142 | font-size: 32px; 143 | } 144 | 145 | .works-flex-pop span a { 146 | text-decoration: none; 147 | font-weight: bolder; 148 | color: #acb7c3; 149 | font-size: 20px; 150 | padding-right: 20px; 151 | } 152 | 153 | .mobile-item .close a { 154 | font-weight: lighter; 155 | font-size: 12px; 156 | } 157 | 158 | .mobile-item .close { 159 | padding-top: 50px; 160 | text-align: right; 161 | padding-right: 38px; 162 | font-weight: lighter; 163 | } 164 | 165 | .mobile-nav { 166 | padding: 15px 28px; 167 | } 168 | 169 | .flex-item2 { 170 | display: flex; 171 | margin-top: -30px; 172 | } 173 | 174 | .flex-item3 { 175 | display: flex; 176 | align-content: space-around; 177 | margin-left: 40px; 178 | } 179 | 180 | .flex-item5 { 181 | display: flex; 182 | } 183 | 184 | .inner-flex-item { 185 | display: flex; 186 | flex-direction: row; 187 | flex-wrap: wrap; 188 | width: 100%; 189 | } 190 | 191 | .expertise { 192 | display: flex; 193 | flex-direction: column; 194 | } 195 | 196 | .outer-flex { 197 | display: flex; 198 | flex-direction: column; 199 | } 200 | 201 | .skills { 202 | display: flex; 203 | flex: 1 1 auto; 204 | justify-content: space-between; 205 | text-align: center; 206 | border-bottom: 1px solid #acb7c3; 207 | } 208 | 209 | .about-myself i { 210 | padding-top: 22px; 211 | align-content: flex-end; 212 | } 213 | 214 | .framework { 215 | display: flex; 216 | text-align: center; 217 | flex: 1 1 auto; 218 | justify-content: space-between; 219 | border-bottom: 1px solid #acb7c3; 220 | } 221 | 222 | .framework p { 223 | color: #000; 224 | font-style: normal; 225 | font-weight: 500; 226 | font-size: 20px; 227 | } 228 | 229 | .skills p { 230 | color: #000; 231 | font-style: normal; 232 | font-weight: 500; 233 | font-size: 20px; 234 | } 235 | 236 | .language { 237 | display: flex; 238 | text-align: center; 239 | flex: 1 1 auto; 240 | justify-content: space-between; 241 | } 242 | 243 | .language p { 244 | color: #000; 245 | font-style: normal; 246 | font-weight: 500; 247 | font-size: 20px; 248 | } 249 | 250 | .outer-item { 251 | display: flex; 252 | text-align: center; 253 | flex: 1 1 auto; 254 | border-color: #acb7c3; 255 | border-radius: 8px; 256 | background-color: #f7f7f9; 257 | padding: 10px 10px; 258 | margin-bottom: 10px; 259 | } 260 | 261 | .outer-item p { 262 | font-weight: 500; 263 | font-size: 15px; 264 | color: #253858; 265 | line-height: 20px; 266 | } 267 | 268 | .grid-item img { 269 | width: 100%; 270 | height: 220px; 271 | } 272 | 273 | .about-myself { 274 | background-color: white; 275 | display: flex; 276 | flex-direction: column; 277 | padding: 20px 20px; 278 | padding-top: 100px; 279 | border-top-right-radius: 25% 50px; 280 | } 281 | 282 | .contact-icon { 283 | margin-left: 45px; 284 | padding-bottom: 20px; 285 | } 286 | 287 | .about-myself button { 288 | border-radius: 8px; 289 | border: 1px solid #3d4ee4; 290 | width: 170px; 291 | height: 50px; 292 | text-align: center; 293 | padding: 10px; 294 | font-weight: 500; 295 | font-size: 17px; 296 | line-height: 24px; 297 | letter-spacing: 0.03em; 298 | color: #396df2; 299 | background-color: white; 300 | margin-bottom: 20px; 301 | } 302 | 303 | .flex-item6 button { 304 | border-radius: 8px; 305 | border: 1px solid #3d4ee4; 306 | width: 140px; 307 | height: 50px; 308 | text-align: center; 309 | padding: 10px; 310 | font-style: normal; 311 | font-weight: 500; 312 | font-size: 17px; 313 | letter-spacing: 0.03em; 314 | color: #396df2; 315 | background-color: white; 316 | margin-top: 30px; 317 | } 318 | 319 | .flex-item3 img { 320 | width: auto; 321 | height: auto; 322 | padding-top: 5px; 323 | } 324 | 325 | .canopy { 326 | font-weight: 600; 327 | font-size: 13px; 328 | line-height: 16px; 329 | color: #344563; 330 | } 331 | 332 | .flex-item4 { 333 | font-size: 15px; 334 | line-height: 24px; 335 | color: #344563; 336 | } 337 | 338 | .flex-item2 h2 { 339 | color: #172b4d; 340 | font-weight: bold; 341 | font-size: 32px; 342 | } 343 | 344 | .inner-list { 345 | display: flex; 346 | flex-direction: column; 347 | } 348 | 349 | .contact { 350 | background-color: #6070ff; 351 | background-image: url(../images/contact.png); 352 | background-size: 100%; 353 | border-top-left-radius: 100px; 354 | margin-top: 100px; 355 | } 356 | 357 | .inner-div { 358 | padding-top: 100px; 359 | padding-right: 30px; 360 | padding-left: 20px; 361 | } 362 | 363 | .inner-div h2 { 364 | color: white; 365 | text-align: center; 366 | font-size: 40px; 367 | font-weight: 400; 368 | padding-bottom: 0; 369 | } 370 | 371 | .inner-div p { 372 | left: 24px; 373 | top: 4802px; 374 | font-size: 20px; 375 | line-height: 28px; 376 | text-align: center; 377 | color: #ebebff; 378 | } 379 | 380 | .form { 381 | padding-right: 30px; 382 | padding-left: 20px; 383 | } 384 | 385 | li input { 386 | background: #fff; 387 | border: 1px solid #cfd8dc; 388 | font-family: Poppins, sans-serif; 389 | border-radius: 8px; 390 | width: 100%; 391 | height: 50px; 392 | padding-left: 10px; 393 | color: #000; 394 | } 395 | 396 | li textarea { 397 | background: #fff; 398 | border: 1px solid #cfd8dc; 399 | font-family: Poppins, sans-serif; 400 | border-radius: 8px; 401 | width: 100%; 402 | height: 150px; 403 | padding-left: 10px; 404 | font-size: 15px; 405 | line-height: 24px; 406 | padding-top: 10px; 407 | } 408 | 409 | .shape { 410 | padding-right: 25%; 411 | padding-left: 35%; 412 | } 413 | 414 | button:hover { 415 | background: #8f9afc; 416 | color: white; 417 | } 418 | 419 | button:active { 420 | background: #0416b6; 421 | color: white; 422 | } 423 | 424 | #portfolioPopup { 425 | position: fixed; 426 | z-index: 1; 427 | left: 0; 428 | top: 0; 429 | width: 100%; 430 | height: 100%; 431 | overflow: auto; 432 | background-color: rgb(76, 78, 82, 0.7); 433 | display: none; 434 | } 435 | 436 | ul.works-flex-item.titles-container { 437 | margin: 10px; 438 | } 439 | 440 | .works-flex { 441 | padding: 20px; 442 | background: #fff; 443 | margin: 25px 20px; 444 | border-radius: 10px; 445 | } 446 | 447 | .work-image > img { 448 | width: 100%; 449 | } 450 | 451 | .titles-item { 452 | font-family: 'Poppins', sans-serif; 453 | font-size: 16px; 454 | color: lightslategray; 455 | font-weight: 500; 456 | list-style-image: url(../images/Counter.png); 457 | padding-right: 25px; 458 | } 459 | 460 | .list-main { 461 | padding-right: 10px; 462 | list-style-type: none; 463 | font-weight: 600; 464 | font-size: 14px; 465 | color: #344563; 466 | line-height: 24px; 467 | } 468 | 469 | .works-flex-pop { 470 | display: flex; 471 | flex-direction: row; 472 | justify-content: space-between; 473 | align-items: baseline; 474 | width: 100%; 475 | margin-left: 10px; 476 | font-size: 25px; 477 | } 478 | 479 | .work-description > p { 480 | font-size: 18px; 481 | color: #344563; 482 | font-weight: lighter; 483 | font-family: Popins, sans-serif; 484 | line-height: 28px; 485 | } 486 | 487 | .project-tags > div { 488 | margin-left: 10px; 489 | } 490 | 491 | .tags > ul { 492 | display: flex; 493 | flex-direction: row; 494 | list-style: none; 495 | margin-left: 5px; 496 | margin-top: 15px; 497 | } 498 | 499 | .lang-group { 500 | display: none; 501 | } 502 | 503 | #mobile { 504 | background: #ebebff; 505 | border-radius: 8px; 506 | font-size: 12px; 507 | padding: 4px 12px 4px; 508 | color: #6070ff; 509 | margin-top: 5px; 510 | line-height: 16px; 511 | } 512 | 513 | .btn-tags { 514 | border-top: 1px solid rgb(236, 234, 234); 515 | padding-top: 20px; 516 | } 517 | 518 | a.btn-see-project { 519 | text-decoration: none; 520 | color: #4053fc; 521 | } 522 | 523 | .btn-see-project { 524 | border: 1px solid #396df2; 525 | padding: 7px; 526 | border-radius: 8px; 527 | font-size: 16px; 528 | font-weight: 300; 529 | text-transform: capitalize; 530 | font-family: 'Poppins', sans-serif; 531 | transition-duration: 0.4s; 532 | margin: 0 5px 0 5px; 533 | } 534 | -------------------------------------------------------------------------------- /css/desktop.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 992px) { 2 | body { 3 | background-color: #e5e5e5; 4 | font-family: Poppins, sans-serif; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | a { 10 | text-decoration: none; 11 | text-decoration-line: none; 12 | } 13 | 14 | .flex-item1, 15 | .shape, 16 | .item, 17 | .flex-item2, 18 | .mobile-item, 19 | .mobile { 20 | display: none; 21 | } 22 | 23 | .desktop { 24 | position: fixed; 25 | width: 100%; 26 | display: flex; 27 | flex: 1 1 auto; 28 | text-align: center; 29 | padding: 1em; 30 | background-color: white; 31 | justify-content: space-between; 32 | } 33 | 34 | .all-item a { 35 | font-style: normal; 36 | font-weight: bold; 37 | font-size: 25px; 38 | line-height: 20px; 39 | color: #6070ff; 40 | margin-left: 150px; 41 | float: right; 42 | } 43 | 44 | .desk-item { 45 | display: flex; 46 | flex-direction: row; 47 | margin-right: 100px; 48 | } 49 | 50 | .desk-item a { 51 | padding-right: 20px; 52 | color: #344563; 53 | font-size: 15px; 54 | font-weight: 500; 55 | line-height: 20px; 56 | text-align: center; 57 | transition: color 2s; 58 | } 59 | 60 | .social-icon a { 61 | font-size: 2em; 62 | color: #344563; 63 | } 64 | 65 | .works-flex-pop span a { 66 | text-decoration: none; 67 | font-weight: bolder; 68 | color: #acb7c3; 69 | font-size: 20px; 70 | padding-right: 20px; 71 | } 72 | 73 | .headline-section { 74 | background-image: url(../images/Header_bg.png); 75 | background-repeat: no-repeat; 76 | background-size: 100% 100%; 77 | background-color: white; 78 | display: flex; 79 | height: 620px; 80 | flex-direction: column; 81 | padding: 300px 200px 50px 250px; 82 | margin-bottom: 120px; 83 | border-bottom-left-radius: 100px; 84 | } 85 | 86 | .headline-section h1 { 87 | color: #091e42; 88 | font-weight: bold; 89 | font-size: 48px; 90 | line-height: 60px; 91 | } 92 | 93 | .headline-section p { 94 | font-weight: normal; 95 | font-size: 20px; 96 | line-height: 28px; 97 | color: #344563; 98 | } 99 | 100 | .social-icon { 101 | list-style-type: none; 102 | display: flex; 103 | gap: 20px; 104 | padding: 1px; 105 | margin: 1px; 106 | } 107 | 108 | .main-container { 109 | display: grid; 110 | grid-template-columns: auto; 111 | grid-gap: 100px; 112 | align-content: space-around; 113 | margin: 100px 100px 150px 130px; 114 | } 115 | 116 | #work-1, 117 | #work-3 { 118 | background-color: white; 119 | display: flex; 120 | height: 450px; 121 | flex-direction: row; 122 | padding: 20px 20px; 123 | border: 1px solid #e5e5e5; 124 | border-radius: 30px; 125 | } 126 | 127 | #work-2, 128 | #work-4 { 129 | background-color: white; 130 | display: flex; 131 | height: 450px; 132 | flex-direction: row-reverse; 133 | padding: 20px 20px; 134 | border: 1px solid #e5e5e5; 135 | border-radius: 30px; 136 | } 137 | 138 | .desk-item1 { 139 | padding-right: 30px; 140 | } 141 | 142 | .desk-col { 143 | display: flex; 144 | flex-direction: column; 145 | padding: 1px 10px 100px 20px; 146 | } 147 | 148 | .desk-col h2 { 149 | font-weight: 700; 150 | font-size: 40px; 151 | line-height: 52px; 152 | color: #091e42; 153 | } 154 | 155 | ul { 156 | list-style-type: none; 157 | display: flex; 158 | gap: 20px; 159 | padding: 1px; 160 | margin-left: -40px; 161 | margin-top: -20px; 162 | } 163 | 164 | .inner-element li a { 165 | color: #6b778c; 166 | font-size: 18px; 167 | line-height: 24px; 168 | } 169 | 170 | .canopy { 171 | font-weight: 600; 172 | font-weight: bold; 173 | font-size: 18px; 174 | line-height: 24px; 175 | color: #344563; 176 | } 177 | 178 | .flex-item4 { 179 | padding-bottom: 25px; 180 | } 181 | 182 | .flex-item4 p { 183 | font-style: normal; 184 | font-weight: normal; 185 | font-size: 16px; 186 | line-height: 24px; 187 | color: #344563; 188 | } 189 | 190 | .flex-item3 { 191 | display: flex; 192 | align-content: space-around; 193 | margin-left: 40px; 194 | } 195 | 196 | .flex-item5 { 197 | display: flex; 198 | margin-left: 50px; 199 | } 200 | 201 | .inner-flex-item { 202 | display: flex; 203 | column-gap: 10px; 204 | } 205 | 206 | .inner-flex-item li a { 207 | font-size: 12px; 208 | font-weight: 500; 209 | color: #6070ff; 210 | border-radius: 8px; 211 | text-align: center; 212 | background: #ebebff; 213 | padding: 5px 10px; 214 | } 215 | 216 | .flex-item6 button { 217 | border: 1px solid #dfe1e6; 218 | border-radius: 8px; 219 | width: 140px; 220 | height: 50px; 221 | text-align: center; 222 | padding: 10px; 223 | font-style: normal; 224 | font-weight: 500; 225 | font-size: 17px; 226 | letter-spacing: 0.03em; 227 | color: #396df2; 228 | background-color: white; 229 | margin-top: 30px; 230 | } 231 | 232 | .resume { 233 | border: 1px solid #dfe1e6; 234 | border-radius: 8px; 235 | width: 180px; 236 | height: 50px; 237 | text-align: center; 238 | font-style: normal; 239 | font-weight: 500; 240 | font-size: 17px; 241 | letter-spacing: 0.03em; 242 | color: #396df2; 243 | background-color: white; 244 | } 245 | 246 | button:hover { 247 | background: #8f9afc; 248 | color: white; 249 | } 250 | 251 | button:active { 252 | background: #0416b6; 253 | color: white; 254 | box-shadow: 0 8px 16px; 255 | } 256 | 257 | .about-myself { 258 | background-color: white; 259 | display: flex; 260 | flex-direction: row; 261 | padding: 100px 20px 150px 20px; 262 | border-top-right-radius: 100px; 263 | height: 680px; 264 | } 265 | 266 | .desk-about { 267 | display: flex; 268 | flex-direction: column; 269 | width: 400px; 270 | padding: 80px 10px 100px 120px; 271 | } 272 | 273 | .expertise { 274 | display: flex; 275 | flex-direction: column; 276 | margin-right: 130px; 277 | margin-left: 80px; 278 | width: 500px; 279 | } 280 | 281 | .desk-programming { 282 | display: flex; 283 | flex-direction: row; 284 | } 285 | 286 | .outer-item { 287 | display: flex; 288 | flex-direction: column; 289 | width: 120px; 290 | height: 100px; 291 | background: #f7f7f9; 292 | border-radius: 8px; 293 | margin-right: 55px; 294 | margin-top: 2px; 295 | padding: 10px 10px 10px 10px; 296 | } 297 | 298 | .work-description > p { 299 | font-size: 18px; 300 | color: #344563; 301 | font-weight: lighter; 302 | font-family: Popins, sans-serif; 303 | line-height: 28px; 304 | } 305 | 306 | .outer-item li p { 307 | color: #253858; 308 | font-weight: 500; 309 | font-size: 15px; 310 | line-height: 20px; 311 | margin-top: -10px; 312 | } 313 | 314 | .desk-about h1 { 315 | color: #091e42; 316 | font-style: normal; 317 | font-weight: bold; 318 | font-size: 40px; 319 | line-height: 52px; 320 | } 321 | 322 | .desk-about li p { 323 | color: #344563; 324 | font-size: 16px; 325 | line-height: 24px; 326 | } 327 | 328 | p.connect { 329 | color: #3d4ee4; 330 | font-weight: 500; 331 | font-size: 16px; 332 | line-height: 24px; 333 | } 334 | 335 | .contact-icon { 336 | margin-left: 1px; 337 | padding: 10px; 338 | } 339 | 340 | .contact-icon li a { 341 | font-size: 1.5em; 342 | color: #505f79; 343 | } 344 | 345 | .language { 346 | display: flex; 347 | text-align: center; 348 | margin-top: 120px; 349 | justify-content: space-between; 350 | } 351 | 352 | .skills { 353 | display: flex; 354 | justify-content: space-between; 355 | text-align: center; 356 | padding-top: 20px; 357 | border-bottom: 1px solid #acb7c3; 358 | } 359 | 360 | .framework { 361 | display: flex; 362 | text-align: center; 363 | justify-content: space-between; 364 | border-bottom: 1px solid #acb7c3; 365 | padding-top: 20px; 366 | } 367 | 368 | .contact { 369 | background-color: #6070ff; 370 | background-image: url(../images/contactbg.png); 371 | background-size: 100%; 372 | border-top-left-radius: 100px; 373 | margin-top: -100px; 374 | padding: 150px 400px 150px 400px; 375 | } 376 | 377 | .inner-div { 378 | padding-right: 30px; 379 | padding-left: 20px; 380 | width: 550px; 381 | height: 100px; 382 | margin-bottom: 100px; 383 | } 384 | 385 | .inner-div h2 { 386 | color: white; 387 | text-align: center; 388 | font-size: 40px; 389 | font-weight: 400; 390 | padding-bottom: 0; 391 | } 392 | 393 | #inner-div { 394 | font-size: 20px; 395 | line-height: 28px; 396 | text-align: center; 397 | color: #ebebff; 398 | } 399 | 400 | .form { 401 | padding: 20px; 402 | } 403 | 404 | li input { 405 | background: #fff; 406 | border: 1px solid #cfd8dc; 407 | font-family: Poppins, sans-serif; 408 | border-radius: 8px; 409 | width: 100%; 410 | height: 50px; 411 | padding-left: 10px; 412 | color: #000; 413 | } 414 | 415 | li textarea { 416 | background: #fff; 417 | border: 1px solid #cfd8dc; 418 | font-family: Poppins, sans-serif; 419 | border-radius: 8px; 420 | width: 100%; 421 | height: 150px; 422 | padding-left: 10px; 423 | font-size: 15px; 424 | line-height: 24px; 425 | padding-top: 10px; 426 | } 427 | 428 | .inner-list { 429 | display: flex; 430 | flex-direction: column; 431 | margin: auto; 432 | width: 100%; 433 | } 434 | 435 | .inner-list .flex-item6 button { 436 | margin-left: 150px; 437 | margin-top: 1px; 438 | } 439 | 440 | .all-item:hover { 441 | transform: scale(1, 0.8); 442 | } 443 | 444 | .desk-item a:hover { 445 | color: #3d4ee4; 446 | } 447 | 448 | #portfolioPopup { 449 | position: fixed; 450 | z-index: 1; 451 | left: 0; 452 | top: 0; 453 | width: 100%; 454 | height: 100%; 455 | overflow: auto; 456 | background-color: rgb(76, 78, 82, 0.7); 457 | display: none; 458 | } 459 | 460 | ul.works-flex-item.titles-container { 461 | margin: 10px; 462 | } 463 | 464 | .works-flex { 465 | padding: 20px; 466 | background: #fff; 467 | margin: 50px 100px; 468 | border-radius: 10px; 469 | } 470 | 471 | .work-image > img { 472 | width: 100%; 473 | } 474 | 475 | .titles-item { 476 | font-family: 'Poppins', sans-serif; 477 | font-size: 16px; 478 | color: lightslategray; 479 | font-weight: 500; 480 | list-style-image: url(../images/Counter.png); 481 | padding-right: 25px; 482 | } 483 | 484 | .list-main { 485 | padding-right: 25px; 486 | list-style-type: none; 487 | font-weight: 600; 488 | font-size: 18px; 489 | color: #344563; 490 | line-height: 24px; 491 | } 492 | 493 | .works-flex-pop { 494 | display: flex; 495 | flex-direction: row; 496 | justify-content: space-between; 497 | align-items: baseline; 498 | width: 100%; 499 | margin-left: 10px; 500 | font-size: 25px; 501 | } 502 | 503 | .project-tags { 504 | display: flex; 505 | flex-direction: row; 506 | } 507 | 508 | .work-description { 509 | width: 75%; 510 | } 511 | 512 | .project-tags > div { 513 | margin-left: 10px; 514 | } 515 | 516 | .tags { 517 | width: 25%; 518 | } 519 | 520 | .tags > ul { 521 | display: flex; 522 | flex-direction: row; 523 | flex-wrap: wrap; 524 | list-style: none; 525 | margin-left: 5px; 526 | margin-top: 15px; 527 | } 528 | 529 | .lang-group, 530 | .lang-group-2 { 531 | background: #ebebff; 532 | border-radius: 8px; 533 | font-size: 12px; 534 | padding: 4px 12px 4px; 535 | color: #6070ff; 536 | margin-top: 5px; 537 | line-height: 16px; 538 | } 539 | 540 | .btn-tags { 541 | border-top: 1px solid rgb(236, 234, 234); 542 | padding-top: 20px; 543 | } 544 | 545 | a.btn-see-project { 546 | text-decoration: none; 547 | color: #4053fc; 548 | } 549 | 550 | .btn-see-project { 551 | border: 1px solid #396df2; 552 | padding: 7px; 553 | border-radius: 8px; 554 | font-size: 16px; 555 | font-weight: 300; 556 | text-transform: capitalize; 557 | font-family: 'Poppins', sans-serif; 558 | transition-duration: 0.4s; 559 | margin: 0 5px 0 5px; 560 | } 561 | } 562 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const menuItem = document.querySelector('.mobile-item'); 2 | const closeMobileItems = document.querySelectorAll('.closeMenu'); 3 | const displayMobileMenu = () => { 4 | menuItem.style.display = 'block'; 5 | }; 6 | const closeMobileMenu = () => { 7 | menuItem.style.display = 'none'; 8 | }; 9 | document.querySelector('.openMenu').addEventListener('click', displayMobileMenu); 10 | closeMobileItems.forEach(((element) => element.addEventListener('click', closeMobileMenu))); 11 | /* Project Detail objects */ 12 | const projectDetail = [{ 13 | title: 'Tonic', 14 | exprience: ['CANOPY', 'Back End Dev', '2015'], 15 | desription: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 16 | popDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum han printer took a galley of type and scrambled it 1960s with the releawn printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the relea', 17 | technologies: ['html', 'css', 'javascript'], 18 | popupTech: ['html', 'css', 'javaScript', 'github', 'Ruby', 'Bootstrap'], 19 | image: './images/Snap1.png', 20 | imageMobile: './images/Snapshoot1.png', 21 | imagePopup: './images/Snap1.png', 22 | imageMobilePopup: './images/Snapshoot1.png', 23 | seeLive: 'https://tariktesfa.github.io/My-portfolio/', 24 | seeSource: 'https://github.com/tariktesfa/My-portfolio', 25 | }, 26 | { 27 | title: 'Multi-Post Stories', 28 | exprience: ['FACEBOOK', 'Back End Dev', '2015'], 29 | desription: 'Experimental content creation feature that allows users to add to an existing story over the course of a day without spamming their friends.', 30 | popDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum han printer took a galley of type and scrambled it 1960s with the releawn printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the relea', 31 | technologies: ['html', 'Ruby on rails', 'css', 'javascript'], 32 | popupTech: ['html', 'css', 'javaScript', 'github', 'Ruby', 'Bootstrap'], 33 | image: './images/Snap2.png', 34 | imageMobile: './images/Snapshoot2.png', 35 | imagePopup: './images/Snap2.png', 36 | imageMobilePopup: './images/Snapshoot2.png', 37 | seeLive: 'https://tariktesfa.github.io/My-portfolio/', 38 | seeSource: 'https://github.com/tariktesfa/My-portfolio', 39 | }, 40 | { 41 | title: 'Facebook 360', 42 | exprience: ['FACEBOOK', 'Back End Dev', '2015'], 43 | desription: 'Exploring the future of media in Facebook first Virtual Reality app; a place to discover and enjoy 360 photos and videos on Gear VR.', 44 | popDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum han printer took a galley of type and scrambled it 1960s with the releawn printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the relea', 45 | technologies: ['html', 'Ruby on rails', 'css', 'javascript'], 46 | popupTech: ['html', 'css', 'javaScript', 'github', 'Ruby', 'Bootstrap'], 47 | image: './images/Snap3.png', 48 | imageMobile: './images/Snapshoot3.png', 49 | imagePopup: './images/Snap3.png', 50 | imageMobilePopup: './images/Snapshoot3.png', 51 | seeLive: 'https://tariktesfa.github.io/My-portfolio/', 52 | seeSource: 'https://github.com/tariktesfa/My-portfolio', 53 | }, 54 | { 55 | title: 'Uber Navigation', 56 | exprience: ['UBER', 'Lead Developer', '2018'], 57 | desription: 'A smart assistant to make driving more safe, efficient, and fun by unlocking your most expensive computer: your car.', 58 | popDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum han printer took a galley of type and scrambled it 1960s with the releawn printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the relea.', 59 | technologies: ['html', 'Ruby on rails', 'css', 'javascript'], 60 | popupTech: ['html', 'css', 'javaScript', 'github', 'Ruby', 'Bootstrap'], 61 | image: './images/Snap4.png', 62 | imageMobile: './images/Snapshoot4.png', 63 | imagePopup: './images/Snap4.png', 64 | imageMobilePopup: './images/Snapshoot4.png', 65 | seeLive: 'https://tariktesfa.github.io/My-portfolio/', 66 | seeSource: 'https://github.com/tariktesfa/My-portfolio', 67 | }, 68 | ]; 69 | /* End of project detail object */ 70 | 71 | /* Populate object to html elements when the page loads */ 72 | for (let i = 0; i < projectDetail.length; i += 1) { 73 | let tech = ''; 74 | let experienceList = ''; 75 | 76 | for (let j = 0; j < projectDetail[i].technologies.length; j += 1) { 77 | tech += `
  • ${projectDetail[i].technologies[j]}
    • `; 78 | } 79 | 80 | for (let k = 0; k < projectDetail[i].exprience.length; k += 1) { 81 | experienceList += (k === 0) ? `
  • ${projectDetail[i].exprience[k]}
    • ` : `
  • ${projectDetail[i].exprience[k]}
    • `; 82 | if (k !== projectDetail[i].exprience.length - 1) experienceList += '
  • dot
    • '; 83 | } 84 | document.querySelector('#portfolio').innerHTML += `
    85 |
    86 |
    my tonic project
    87 |
    my tonic project
    88 |
    89 |
    90 |

    ${projectDetail[i].title}

    91 |
    92 |
    93 |

    ${projectDetail[i].title}

    94 |
    95 |
    96 |
      97 | ${experienceList} 98 |
    99 |
    100 |
    101 |

    ${projectDetail[i].desription}

    102 |
    103 |
    104 |
      105 | ${tech} 106 |
    107 |
    108 |
    109 |
    110 |
    `; 111 | } 112 | /* End of project detail population when the pages loads */ 113 | 114 | /* Display Popup modal */ 115 | 116 | const popupModal = document.querySelector('#portfolioPopup'); 117 | const displayPopupModal = (i) => { 118 | let tech = ''; 119 | let techPop = ''; 120 | let experienceList = ''; 121 | 122 | for (let j = 0; j < projectDetail[i].technologies.length; j += 1) { 123 | tech += `
  • ${projectDetail[i].technologies[j]}
    • `; 124 | } 125 | 126 | for (let j = 0; j < projectDetail[i].popupTech.length; j += 1) { 127 | techPop += `
  • ${projectDetail[i].popupTech[j]}
    • `; 128 | } 129 | 130 | for (let k = 0; k < projectDetail[i].exprience.length; k += 1) { 131 | experienceList += (k === 0) ? `
  • ${projectDetail[i].exprience[k]}
    • ` : `
  • ${projectDetail[i].exprience[k]}
    • `; 132 | } 133 | document.querySelector('#portfolioPopup').innerHTML = ` 134 |
    135 |
    136 |
    137 |

    ${projectDetail[i].title}

    138 | X 139 |
    140 |
      141 | ${experienceList} 142 |
    143 |
    144 |
    145 | ${projectDetail[i].title} project screenshot 146 | ${projectDetail[i].title} project screenshot 147 |
    148 |
    149 |
    150 |

    151 | ${projectDetail[i].popDescription} 152 |

    153 |
    154 |
    155 |
      156 | ${tech} 157 |
    158 |
      159 | ${techPop} 160 |
    161 |
    162 | See Live 163 | 164 | 165 | See Source 166 | 167 | 168 |
    169 |
    170 |
    171 |
    172 | `; 173 | popupModal.style.display = 'block'; 174 | }; 175 | document.querySelectorAll('.see-project').forEach((row) => row.addEventListener('click', () => displayPopupModal(row.getAttribute('data-index')))); 176 | 177 | const closeModal = document.querySelector('#portfolioPopup'); 178 | const closePopupModal = () => { 179 | closeModal.style.display = 'none'; 180 | }; 181 | /* End of display popup modal */ 182 | 183 | /* Contact Form validation */ 184 | // eslint-disable-next-line no-useless-escape 185 | const regex = '[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'; 186 | document.querySelector('#form').addEventListener('submit', (e) => { 187 | for (let i = 0; i < e.target.length; i += 1) { 188 | if (e.target[i].classList.contains('form-control')) { 189 | if (e.target[i].value === '') { 190 | // e.target[i].nextElementSibling.style.display = 'block'; 191 | e.target[i].parentElement.nextElementSibling.innerText = `Please enter your ${e.target[i].getAttribute('placeholder')}`; 192 | e.target[i].parentElement.nextElementSibling.style.color = 'red'; 193 | e.preventDefault(); 194 | } else if (e.target[i].type === 'input' && e.target[i].value.length > e.target[i].getAttribute('maxlength')) { 195 | e.target[i].parentElement.nextElementSibling.innerText = `The maximum number of character is ${e.target[i].getAttribute('maxlength')}`; 196 | e.target[i].parentElement.nextElementSibling.style.color = 'red'; 197 | e.preventDefault(); 198 | } else if (e.target[i].type === 'email' && e.target[i].value !== e.target[1].value.toLowerCase()) { 199 | e.target[i].parentElement.nextElementSibling.innerText = 'Please enter your email in lowercase'; 200 | e.target[i].parentElement.nextElementSibling.style.color = 'red'; 201 | e.preventDefault(); 202 | } else if (e.target[i].type === 'email' && regex.test(e.target[i].value) !== e.target[i].value) { 203 | e.target[i].parentElement.nextElementSibling.textContent = 'Please enter a valid email address'; 204 | e.target[i].parentElement.nextElementSibling.style.color = 'red'; 205 | e.preventDefault(); 206 | } else { 207 | e.target[i].parentElement.nextElementSibling.style.display = 'none'; 208 | e.target[i].parentElement.nextElementSibling.innerText = ''; 209 | } 210 | } 211 | } 212 | }); 213 | /* End of Contact Form Validation */ 214 | --------------------------------------------------------------------------------