├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── public └── index.html └── src ├── assets ├── fonts │ ├── ubuntu-300.woff │ ├── ubuntu-300.woff2 │ ├── ubuntu-500.woff │ ├── ubuntu-500.woff2 │ ├── ubuntu-regular.woff │ └── ubuntu-regular.woff2 └── images │ ├── github.png │ ├── instagram.png │ └── twitter.png ├── index.js ├── styles └── main.css ├── templates └── Template.js └── utils └── getData.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Oscar Barajas Tavares 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 | # js-portfolio -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-portfolio", 3 | "version": "1.0.0", 4 | "description": "A minimal portfolio with Vanilla JavaScript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/gndx/js-portfolio.git" 12 | }, 13 | "keywords": [ 14 | "javascript", 15 | "html", 16 | "css" 17 | ], 18 | "author": "oscar barajas ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/gndx/js-portfolio/issues" 22 | }, 23 | "homepage": "https://github.com/gndx/js-portfolio#readme" 24 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JS Portfolio 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-300.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-300.woff -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-300.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-500.woff -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-500.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/ubuntu-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/fonts/ubuntu-regular.woff2 -------------------------------------------------------------------------------- /src/assets/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/images/github.png -------------------------------------------------------------------------------- /src/assets/images/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/images/instagram.png -------------------------------------------------------------------------------- /src/assets/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gndx/js-portfolio/6cf560dc218de1086105ddf7513a53ad3d73a15b/src/assets/images/twitter.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Template from './templates/Template.js'; 2 | console.log('hola'); 3 | 4 | (async function App() { 5 | const main = null || document.getElementById('main'); 6 | main.innerHTML = await Template(); 7 | })(); 8 | -------------------------------------------------------------------------------- /src/styles/main.css: -------------------------------------------------------------------------------- 1 | @import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500"; 2 | 3 | html { 4 | font-family: sans-serif; 5 | -ms-text-size-adjust: 100%; 6 | -webkit-text-size-adjust: 100% 7 | } 8 | 9 | body { 10 | margin: 0 11 | } 12 | 13 | article, 14 | aside, 15 | details, 16 | figcaption, 17 | figure, 18 | footer, 19 | header, 20 | hgroup, 21 | main, 22 | nav, 23 | section, 24 | summary { 25 | display: block 26 | } 27 | 28 | audio, 29 | canvas, 30 | progress, 31 | video { 32 | display: inline-block; 33 | vertical-align: baseline 34 | } 35 | 36 | audio:not([controls]) { 37 | display: none; 38 | height: 0 39 | } 40 | 41 | [hidden], 42 | template { 43 | display: none 44 | } 45 | 46 | a { 47 | background: 0 0 48 | } 49 | 50 | a:active, 51 | a:hover { 52 | outline: 0 53 | } 54 | 55 | abbr[title] { 56 | border-bottom: 1px dotted 57 | } 58 | 59 | b, 60 | strong { 61 | font-weight: 700 62 | } 63 | 64 | dfn { 65 | font-style: italic 66 | } 67 | 68 | h1 { 69 | font-size: 2em; 70 | margin: .67em 0 71 | } 72 | 73 | mark { 74 | background: #ff0; 75 | color: #000 76 | } 77 | 78 | small { 79 | font-size: 80% 80 | } 81 | 82 | sub, 83 | sup { 84 | font-size: 75%; 85 | line-height: 0; 86 | position: relative; 87 | vertical-align: baseline 88 | } 89 | 90 | sup { 91 | top: -.5em 92 | } 93 | 94 | sub { 95 | bottom: -.25em 96 | } 97 | 98 | img { 99 | border: 0 100 | } 101 | 102 | svg:not(:root) { 103 | overflow: hidden 104 | } 105 | 106 | figure { 107 | margin: 1em 40px 108 | } 109 | 110 | hr { 111 | box-sizing: content-box; 112 | height: 0 113 | } 114 | 115 | pre { 116 | overflow: auto 117 | } 118 | 119 | code, 120 | kbd, 121 | pre, 122 | samp { 123 | font-family: monospace, monospace; 124 | font-size: 1em 125 | } 126 | 127 | button, 128 | input, 129 | optgroup, 130 | select, 131 | textarea { 132 | color: inherit; 133 | font: inherit; 134 | margin: 0 135 | } 136 | 137 | button { 138 | overflow: visible 139 | } 140 | 141 | button, 142 | select { 143 | text-transform: none 144 | } 145 | 146 | button, 147 | html input[type=button], 148 | input[type=reset], 149 | input[type=submit] { 150 | -webkit-appearance: button; 151 | cursor: pointer 152 | } 153 | 154 | button[disabled], 155 | html input[disabled] { 156 | cursor: default 157 | } 158 | 159 | button::-moz-focus-inner, 160 | input::-moz-focus-inner { 161 | border: 0; 162 | padding: 0 163 | } 164 | 165 | input { 166 | line-height: normal 167 | } 168 | 169 | input[type=checkbox], 170 | input[type=radio] { 171 | box-sizing: border-box; 172 | padding: 0 173 | } 174 | 175 | input[type=number]::-webkit-inner-spin-button, 176 | input[type=number]::-webkit-outer-spin-button { 177 | height: auto 178 | } 179 | 180 | input[type=search] { 181 | -webkit-appearance: textfield; 182 | box-sizing: content-box 183 | } 184 | 185 | input[type=search]::-webkit-search-cancel-button, 186 | input[type=search]::-webkit-search-decoration { 187 | -webkit-appearance: none 188 | } 189 | 190 | fieldset { 191 | border: 1px solid silver; 192 | margin: 0 2px; 193 | padding: .35em .625em .75em 194 | } 195 | 196 | legend { 197 | border: 0; 198 | padding: 0 199 | } 200 | 201 | textarea { 202 | overflow: auto 203 | } 204 | 205 | optgroup { 206 | font-weight: 700 207 | } 208 | 209 | table { 210 | border-collapse: collapse; 211 | border-spacing: 0 212 | } 213 | 214 | td, 215 | th { 216 | padding: 0 217 | } 218 | 219 | body { 220 | background-color: #f9f9f9; 221 | font-family: Ubuntu, sans-serif; 222 | } 223 | 224 | .center { 225 | position: relative; 226 | left: 50%; 227 | transform: translateX(-50%) 228 | } 229 | 230 | .About { 231 | align-items: center; 232 | display: grid; 233 | grid-template-columns: minmax(auto, 1024px); 234 | justify-content: center; 235 | padding: 4em 0; 236 | } 237 | 238 | .card { 239 | position: relative; 240 | padding: 20px 0; 241 | width: 100%; 242 | background: #fff; 243 | border-radius: 3px; 244 | box-shadow: 0 0 1px rgba(0, 0, 0, .5); 245 | overflow: hidden; 246 | text-align: center; 247 | z-index: 5 248 | } 249 | 250 | .card:after { 251 | content: ""; 252 | display: block; 253 | position: absolute; 254 | width: 100%; 255 | height: 130px; 256 | top: 0; 257 | background: #f9f9f9; 258 | border-bottom: 1px solid rgba(0, 0, 0, .15); 259 | z-index: -1 260 | } 261 | 262 | .card_photo { 263 | position: relative; 264 | background: #fff; 265 | padding: 5px; 266 | width: 190px; 267 | height: 190px; 268 | border-radius: 50%; 269 | margin-bottom: 30px; 270 | border: 1px solid rgba(0, 0, 0, .25) 271 | } 272 | 273 | .card_photo img { 274 | width: 150px; 275 | border-radius: 50% 276 | } 277 | 278 | .card_title { 279 | color: #999; 280 | font-size: 18px; 281 | margin: 0 282 | } 283 | 284 | .card_value { 285 | color: #2c2e31; 286 | font-size: 38px; 287 | margin: 5px; 288 | text-transform: capitalize 289 | } 290 | 291 | .card ul { 292 | list-style-type: none; 293 | } 294 | 295 | .card li { 296 | display: inline-block; 297 | margin: 0 1em 0 0 298 | } 299 | 300 | .card_social { 301 | width: 400px; 302 | display: flex; 303 | justify-content: space-between; 304 | align-items: center; 305 | margin: 0 auto; 306 | padding: 1em 0; 307 | } 308 | .card_social img { 309 | width: 32px; 310 | height: 32px; 311 | } 312 | 313 | .card_social a { 314 | text-decoration: none; 315 | } 316 | 317 | .circle { 318 | position: relative; 319 | } 320 | 321 | .circle svg { 322 | fill: none; 323 | stroke: #8a3ab9; 324 | stroke-linecap: round; 325 | stroke-width: 3; 326 | stroke-dasharray: 1; 327 | stroke-dashoffset: 0; 328 | animation: stroke-draw 6s ease-out infinite alternate; 329 | } 330 | .circle img { 331 | position: absolute; 332 | left: 50%; 333 | top: 50%; 334 | transform: translate(-50%, -50%); 335 | } 336 | 337 | @keyframes stroke-draw { 338 | from { 339 | stroke: #8a3ab9; 340 | stroke-dasharray: 1; 341 | } 342 | to { 343 | stroke: #cd486b; 344 | transform: rotate(180deg); 345 | stroke-dasharray: 8; 346 | } 347 | } -------------------------------------------------------------------------------- /src/templates/Template.js: -------------------------------------------------------------------------------- 1 | import getData from '../utils/getData.js'; 2 | 3 | const Template = async () => { 4 | const data = await getData(); 5 | const view = ` 6 |
7 |
8 |
9 |
10 | ${data.name.first} 11 | 13 | 14 | 15 |
16 |

Hi, My name is

17 |

${data.name.first} ${data.name.last}

18 |
19 |
20 |
    21 |
  • ${data.email}
    • 22 |
  • ${data.location.country}
    • 23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 | `; 39 | return view; 40 | }; 41 | 42 | export default Template; -------------------------------------------------------------------------------- /src/utils/getData.js: -------------------------------------------------------------------------------- 1 | const API = 'https://randomuser.me/api/'; 2 | 3 | const getData = async (id) => { 4 | const apiURl = id ? `${API}${id}` : API; 5 | try { 6 | const response = await fetch(apiURl); 7 | const data = await response.json(); 8 | return data.results[0]; 9 | } catch (error) { 10 | console.log('Fetch Error', error); 11 | }; 12 | }; 13 | 14 | export default getData; --------------------------------------------------------------------------------