├── .gitignore ├── LICENSE ├── README.md └── public ├── i ├── avatar.jpg ├── logo_apple.svg ├── logo_cr.svg ├── logo_facebook.svg ├── logo_github.svg └── logo_twitter.svg ├── index.html └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .DS_Store 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | 76 | # parcel-bundler cache (https://parceljs.org/) 77 | .cache 78 | 79 | # Next.js build output 80 | .next 81 | 82 | # Nuxt.js build / generate output 83 | .nuxt 84 | dist 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vladimir Kharlampidi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Personal website with Codersrank Widgets -------------------------------------------------------------------------------- /public/i/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nolimits4web/personal-website-with-widgets/c327dae4bfd6d7209aa637d23a40a3407f496e17/public/i/avatar.jpg -------------------------------------------------------------------------------- /public/i/logo_apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/i/logo_cr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/i/logo_facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/i/logo_github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/i/logo_twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vladimir Kharlampidi - Front-end Developer 7 | 8 | 9 | 10 |
11 |
12 | Avatar 13 |
14 |

Hi 🖐
My name is Vladimir Kharlampidi

15 |
16 | UX/UI • 17 | Front-end Developer • 18 | All Things JavaScript • 19 | Husband & Dad • 20 | Rostov-on-Don, Russia 🇷🇺 21 |
22 |
23 | 24 | 25 | GitHub 26 | 27 | GitHub 28 | 29 | 30 | 31 | CodersRank 32 | 33 | CodersRank 34 | 35 | 36 | 37 | AppStore 38 | 39 | AppStore 40 | 41 | 42 | 43 | Twitter 44 | 45 | Twitter 46 | 47 | 48 | 49 | Facebook 50 | 51 | Facebook 52 | 53 |
54 |
55 | 56 |
57 |
58 |

My Coding Activity & Stats

59 |

Powered by CodersRank

60 | 68 |
69 | 78 |
79 | 80 | 91 |
92 |
93 |

Recent Projects

94 |

I am very passionate about building mobile and desktop web applications, user interfaces, and contributing to open-source community by creating great and popular open-source projects.

95 | 102 |
103 |
104 |

Work Experience & Education

105 | 111 | 116 |
117 | 118 | 119 |
120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /public/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --theme-color: #FF6033; 3 | --theme-color-rgb: 255, 96, 51; 4 | } 5 | html, 6 | body { 7 | position: relative; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | body { 12 | font-size: 16px; 13 | line-height: 1.5; 14 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 15 | background: #000; 16 | color: #fff; 17 | } 18 | a { 19 | color: var(--theme-color); 20 | } 21 | h1 { 22 | font-size: 3em; 23 | line-height: 1.2; 24 | } 25 | h2 { 26 | font-size: 2.5em; 27 | line-height: 1.25; 28 | margin: 0.75em 0 0.5em; 29 | } 30 | 31 | main { 32 | margin: 0 auto; 33 | max-width: 1200px; 34 | padding: 0 40px; 35 | box-sizing: border-box; 36 | 37 | } 38 | header, section, footer { 39 | margin: 40px 0; 40 | } 41 | /* Header */ 42 | header { 43 | display: flex; 44 | justify-content: space-between; 45 | align-items: flex-start; 46 | } 47 | .avatar { 48 | border: 4px solid #444; 49 | border-radius: 50%; 50 | width: 20%; 51 | margin-right: 40px; 52 | height: auto; 53 | } 54 | 55 | .header-content { 56 | width: 100%; 57 | min-width: 0; 58 | } 59 | header h1 { 60 | line-height: 1.2; 61 | margin: 0; 62 | } 63 | .subtitle { 64 | margin: 1em 0; 65 | } 66 | .subtitle span.dot { 67 | font-size: 14px; 68 | opacity: 0.5; 69 | } 70 | .subtitle span[role="img"] { 71 | vertical-align: middle; 72 | font-size: 1.5em; 73 | } 74 | .contacts a { 75 | padding: 4px 8px; 76 | background: rgba(255, 255, 255, 0.1); 77 | border-radius: 8px; 78 | text-decoration: none; 79 | font-weight: 500; 80 | margin-right: 8px; 81 | margin-bottom: 8px; 82 | display: inline-flex; 83 | font-size: 14px; 84 | align-items: center; 85 | vertical-align: middle; 86 | } 87 | .contacts a:hover { 88 | background: rgba(255,255,255,0.125); 89 | } 90 | .contacts a:active { 91 | background: rgba(255,255,255,0.075); 92 | } 93 | .contacts .icon { 94 | width: 24px; 95 | height: 24px; 96 | display: flex; 97 | align-items: center; 98 | margin-right: 8px; 99 | } 100 | .contacts img { 101 | max-width: 100%; 102 | max-height: 100%; 103 | } 104 | 105 | /* Widgets */ 106 | .branding { 107 | margin-top: -0.25em; 108 | margin-bottom: 2em; 109 | } 110 | .widget { 111 | --preloader-color: var(--theme-color); 112 | } 113 | .widget + .widget { 114 | margin-top: 16px; 115 | } 116 | codersrank-summary { 117 | --bg-color: transparent; 118 | --badge-bg-color: #161616; 119 | --badge-text-color: #fff; 120 | --badges-padding: 0px; 121 | --badge-padding: 8px; 122 | --badge-margin: 16px; 123 | --badge-border-radius: 8px; 124 | --badge-rank-font-size: 16px; 125 | --badge-technology-font-size: 18px; 126 | --badge-location-font-size: 16px; 127 | --badge-icon-size: 32px; 128 | --badge-border: 1px solid rgba(0, 0, 0, 0.1); 129 | --badge-box-shadow: none; 130 | } 131 | .activity-widget { 132 | padding: 8px; 133 | border-radius: 8px; 134 | background: #161616; 135 | } 136 | codersrank-activity { 137 | --bg-color-0: #111; 138 | --bg-color-1: rgba(var(--theme-color-rgb), 0.25); 139 | --bg-color-2: rgba(var(--theme-color-rgb), 0.5); 140 | --bg-color-3: rgba(var(--theme-color-rgb), 0.75); 141 | --bg-color-4: rgba(var(--theme-color-rgb), 1); 142 | --label-text-color: rgba(255, 255, 255, 0.54); 143 | --svg-width: 1080px; 144 | display: flex; 145 | justify-content: flex-end; 146 | overflow: hidden; 147 | padding-top: 100px; 148 | margin-top: -100px; 149 | } 150 | codersrank-skills-chart { 151 | --label-text-color: rgba(255, 255, 255, 0.54); 152 | --chart-bg-color: #161616; 153 | --chart-border-radius: 8px; 154 | --axis-bg-color: transparent; 155 | --label-font-size: 12px; 156 | overflow: hidden; 157 | } 158 | codersrank-portfolio, 159 | codersrank-work-experience, 160 | codersrank-education { 161 | --item-bg-color: #161616; 162 | --item-border-radius: 8px; 163 | --item-spacing: 16px; 164 | --item-padding: 16px; 165 | --logo-size: 64px; 166 | --tag-bg-color: rgba(255,255,255,0.075); 167 | } 168 | codersrank-portfolio { 169 | --grid-columns: 2; 170 | 171 | --link-text-color: var(--theme-color); 172 | --link-bg-color: rgba(255,255,255,0.1); 173 | --link-hover-bg-color: rgba(255,255,255,0.125); 174 | --link-active-bg-color: rgba(255,255,255,0.075); 175 | --link-border-radius: 8px; 176 | --link-padding: 4px 8px; 177 | --link-text-transform: none; 178 | --link-font-weight: 500; 179 | --link-margin: 8px; 180 | } 181 | 182 | /* Footer */ 183 | footer { 184 | text-align: center; 185 | opacity: 0.55; 186 | } 187 | 188 | @media (max-width: 768px) { 189 | header { 190 | display: block; 191 | } 192 | .avatar { 193 | width: 160px; 194 | margin-bottom: 20px; 195 | } 196 | codersrank-portfolio, 197 | codersrank-work-exprerience, 198 | codersrank-education { 199 | --grid-columns: 1; 200 | --item-spacing: 8px; 201 | --logo-size: 48px; 202 | } 203 | } 204 | @media (max-width: 640px) { 205 | main { 206 | padding-left: 20px; 207 | padding-right: 20px; 208 | } 209 | h1 { 210 | font-size: 2em; 211 | } 212 | h2 { 213 | font-size: 1.5em; 214 | } 215 | 216 | .widget + .widget { 217 | margin-top: 8px; 218 | } 219 | codersrank-summary { 220 | --badge-margin: 8px; 221 | } 222 | codersrank-activity { 223 | --svg-width: 640px 224 | } 225 | } 226 | --------------------------------------------------------------------------------