├── .gitignore ├── LICENSE.md ├── README.md ├── archetypes └── default.md ├── exampleSite ├── config.toml ├── content │ └── .gitkeep └── data │ ├── config.json │ ├── experience.json │ ├── services.json │ ├── sidebar.json │ ├── skills.json │ ├── social.json │ └── socialfas.json ├── images ├── screenshot.png └── tn.png ├── layouts ├── 404.html ├── index.html └── partials │ ├── contact.html │ ├── experience.html │ ├── footer-scripts.html │ ├── footer.html │ ├── header.html │ ├── seo_schema.html │ ├── services.html │ ├── sidebar.html │ └── skills.html ├── static ├── css │ ├── highlight.css │ ├── styles.css │ ├── styles.css.map │ └── styles.scss ├── images │ └── sim.jpg └── js │ └── main.js └── theme.toml /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | exampleSite/themes 3 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 UICardio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hugo Uilite Portfolio theme 2 | 3 | ![Hugo UILite Portfolio](https://api.uicard.io/uploads/fbb72e1060675dc28fd8a6f02b0be9c4.jpg) 4 | 5 | Hugo UILite portfolio theme is designed especially for designers and developers who need a good-looking portfolio website without much efforts. It includes all the components to showcase the skills and work. 6 | 7 | ### Free version includes 8 | 9 | - Skills section 10 | - Experience timeline 11 | - Service section 12 | - Contact Form 13 | - Social links 14 | - Good SEO 15 | 16 | ### Pro version also includes 17 | 18 | - Blog 19 | - Work/portfolio 20 | - Disqus 21 | - Documentation 22 | - Support 23 | 24 | ### Useful Links 25 | 26 | [Free Demo](https://demo.uicard.io/hugo-uilite-free/) | [Pro Demo](https://demo.uicard.io/hugo-uilite-portfolio-demo/) | [More Info](https://uicard.io/products/hugo-uilite-pro?utm_source=github) 27 | 28 | ### Contact via Formspree 29 | 30 | - [Register](https://formspree.io/) 31 | - [Create a Project and a Form](https://help.formspree.io/hc/en-us/articles/360053239754-Getting-started-with-projects) 32 | - Add your **form endpoint** to `data/config.json` -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "https://demo.uicard.io/hugo-uilite-free/" 2 | languageCode = "en-us" 3 | title = "Valentina" 4 | theme = "hugo-uilite" 5 | -------------------------------------------------------------------------------- /exampleSite/content/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uicardioHQ/hugo-uilite/0b625104854cb06afaf1f1260eabedb07c0d4706/exampleSite/content/.gitkeep -------------------------------------------------------------------------------- /exampleSite/data/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "author" : "Arvind Singh", 3 | "email" : "youremailhere@gmail.com", 4 | "formspree" : "https://your-form-endpoint-goes-here" 5 | } 6 | -------------------------------------------------------------------------------- /exampleSite/data/experience.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "Experience", 3 | "experience" : [ 4 | { 5 | "timeperiod" : "May 2017 - Nov 2017", 6 | "company" : "Uber", 7 | "website": "https://www.uber.com", 8 | "description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. " 9 | }, 10 | { 11 | "timeperiod" : "Nov 2017 - Present", 12 | "company" : "Google", 13 | "description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. " 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /exampleSite/data/services.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "Services", 3 | "services" : [ 4 | { 5 | "icon" : "pencil-ruler", 6 | "title" : "Logo Design", 7 | "description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. " 8 | }, 9 | { 10 | "icon" : "pen-nib", 11 | "title" : "Graphics Design", 12 | "description" : "Nunc sapien nisi, maximus eleifend hendrerit sit amet, rutrum vel diam. Duis quam nibh, tincidunt eget nunc nec, suscipit pretium dolor. " 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /exampleSite/data/sidebar.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "hey world, i'm", 3 | "highlightedText" : "valentina", 4 | "description" : "A graphics designer, based in Germany.", 5 | "displayPicture" : "sim.jpg" 6 | } 7 | -------------------------------------------------------------------------------- /exampleSite/data/skills.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "Skills", 3 | "skills" : { 4 | "Sketch" : "90", 5 | "Adobe XD" : "80", 6 | "Illustrator" : "65", 7 | "Photoshop" : "97" 8 | } 9 | } -------------------------------------------------------------------------------- /exampleSite/data/social.json: -------------------------------------------------------------------------------- 1 | { 2 | "facebook" : "https://facebook.com/", 3 | "instagram" : "https://instagram.com/", 4 | "dribbble" : "https://dribbble.com/", 5 | "behance" : "https://behnace.com/" 6 | } -------------------------------------------------------------------------------- /exampleSite/data/socialfas.json: -------------------------------------------------------------------------------- 1 | { 2 | "envelope" : "mailto:@gmail.com" 3 | } 4 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uicardioHQ/hugo-uilite/0b625104854cb06afaf1f1260eabedb07c0d4706/images/screenshot.png -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uicardioHQ/hugo-uilite/0b625104854cb06afaf1f1260eabedb07c0d4706/images/tn.png -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 |

simple 404 error page

-------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 | {{ partial "sidebar.html" . }} 3 | 4 |
5 | {{ if .Site.Data.skills }}{{ partial "skills.html" . }}{{ end }} 6 | {{ if .Site.Data.experience }}{{ partial "experience.html" . }}{{ end }} 7 | {{ if .Site.Data.services }}{{ partial "services.html" . }}{{ end }} 8 |
9 | 10 |
11 | {{ if gt (len (where .Data.Pages "Type" "blog")) 0 }}{{ partial "blog.html" . }}{{ end }} 12 | {{ if gt (len (where .Data.Pages "Type" "work")) 0 }}{{ partial "work.html" . }}{{ end }} 13 |
14 | 15 |
16 | {{ partial "contact.html" . }} 17 |
18 | 19 | {{ partial "footer-scripts.html" . }} 20 | -------------------------------------------------------------------------------- /layouts/partials/contact.html: -------------------------------------------------------------------------------- 1 | {{ $config := .Site.Data.config }} 2 | 3 |
4 |
5 |

Contact

6 | 7 |
8 | {{ $config.message }} 9 |
10 | 11 |
12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 |
24 | 25 | 26 |
27 | 28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /layouts/partials/experience.html: -------------------------------------------------------------------------------- 1 | {{ $experience := .Site.Data.experience }} 2 | 3 |
4 |

{{ $experience.title }}

5 |
6 | {{ range $index, $element := $experience.experience }} 7 |
8 |
9 | 10 |
11 | {{ $element.timeperiod }} 12 |
{{ $element.company }}
13 | {{ $website := $element.website }} 14 | {{ if $website }} 15 | 16 | 17 | {{ $website }} 18 | 19 | {{ end }} 20 |

{{ $element.description }}

21 |
22 |
23 | {{ end }} 24 |
25 | 26 |
-------------------------------------------------------------------------------- /layouts/partials/footer-scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | {{ $footer := .Site.Data.footer }} 2 | 3 |
4 | {{ $footer.text }} 5 |
-------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | {{ $config := .Site.Data.config }} 2 | 3 | 4 | 5 | 6 | 7 | {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }} 8 | {{ if .IsHome }} 9 | {{ .Site.Title }} 10 | {{ else if .Params.heading }} 11 | {{ .Params.heading }} 12 | {{ else }} 13 | {{ .Title }} | {{ .Site.Title }} 14 | {{ end }} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | {{ range .AlternativeOutputFormats -}} 35 | 36 | {{ end -}} 37 | 38 | {{ partial "seo_schema.html" . }} 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /layouts/partials/seo_schema.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {{ if .IsHome }} 17 | 30 | {{ end }} 31 | {{ if .IsPage }} 32 | 57 | {{ end }} -------------------------------------------------------------------------------- /layouts/partials/services.html: -------------------------------------------------------------------------------- 1 | {{ $services := .Site.Data.services }} 2 | 3 |
4 |

{{ $services.title }}

5 | 6 |
7 | 8 | {{ range $index, $element := $services.services }} 9 | 10 |
11 |
12 | 13 |
{{ $element.title }}
14 |

{{ $element.description }}

15 |
16 |
17 | 18 | {{ end }} 19 |
20 |
-------------------------------------------------------------------------------- /layouts/partials/sidebar.html: -------------------------------------------------------------------------------- 1 | {{ $sidebar := .Site.Data.sidebar }} 2 | {{ $social := .Site.Data.social }} 3 | {{ $socialfas := .Site.Data.socialfas}} 4 | 5 | 34 | -------------------------------------------------------------------------------- /layouts/partials/skills.html: -------------------------------------------------------------------------------- 1 | {{ $skills := .Site.Data.skills }} 2 | 3 |
4 |

{{ $skills.title }}

5 | 6 | {{ range $key, $value := $skills.skills }} 7 | 8 |
9 | {{ $key }} 10 |
11 |
12 |
13 |
14 | {{ end }} 15 |
-------------------------------------------------------------------------------- /static/css/highlight.css: -------------------------------------------------------------------------------- 1 | .hljs-comment,.hljs-quote{color:#8e908c}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#c82829}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#f5871f}.hljs-attribute{color:#eab700}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#718c00}.hljs-title,.hljs-section{color:#4271ae}.hljs-keyword,.hljs-selector-tag{color:#8959a8}.hljs{display:block;overflow-x:auto;background:white;color:#4d4d4c;padding:0.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold} -------------------------------------------------------------------------------- /static/css/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | overflow-x: hidden; 3 | overflow-y: scroll; 4 | } 5 | a:hover { 6 | text-decoration: none; 7 | } 8 | .sidebar { 9 | position: fixed; 10 | left: 0px; 11 | top: 0px; 12 | right: 552px; 13 | bottom: 0px; 14 | z-index: 1; 15 | width: 40%; 16 | height: 100%; 17 | } 18 | .sidebar .main-info * { 19 | -webkit-transition: all 0.3s ease; 20 | transition: all 0.3s ease; 21 | opacity: 0; 22 | -webkit-transform: translateX(-40px); 23 | transform: translateX(-40px); 24 | } 25 | 26 | .sidebar .main-info *.bs { 27 | -webkit-transform: translateX(0); 28 | transform: translateX(0); 29 | opacity: 1; 30 | } 31 | 32 | .main-content { 33 | position: relative; 34 | overflow: visible; 35 | width: 60%; 36 | max-width: 1200px; 37 | margin-left: 40%; 38 | float: none; 39 | clear: none; 40 | } 41 | 42 | .main-content:after { 43 | position: absolute; 44 | content: ''; 45 | top: 0; 46 | bottom: 0; 47 | left: 0; 48 | right: 0; 49 | -webkit-transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83); 50 | transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83); 51 | background-color: #fff; 52 | } 53 | 54 | .main-content.active:after { 55 | position: absolute; 56 | content: ''; 57 | top: 0; 58 | bottom: 0; 59 | left: 0; 60 | right: 0; 61 | -webkit-transform: translateX(100%); 62 | transform: translateX(100%); 63 | background-color: #fff; 64 | } 65 | 66 | article { 67 | font-size: 18px !important; 68 | line-height: 1.8rem; 69 | } 70 | 71 | article p { 72 | color: rgba(0, 0, 0, 0.8); 73 | } 74 | 75 | article img { 76 | max-width: 100%; 77 | } 78 | 79 | article code { 80 | background-color: #fbfbfb !important; 81 | width: 100%; 82 | max-width: 800px; 83 | margin: 0 auto; 84 | } 85 | 86 | article mark { 87 | background-color: white; 88 | color: #c80000; 89 | } 90 | 91 | .heading, 92 | h1, h2, h3, h4, h5, h6 { 93 | font-family: 'Montserrat', sans-serif !important; 94 | font-weight: 800; 95 | text-transform: uppercase; 96 | } 97 | 98 | .heading { 99 | font-size: 38px; 100 | } 101 | 102 | .highlight { 103 | background-color: #ededed; 104 | padding: 4px 8px; 105 | /*display: inline-block;*/ 106 | } 107 | 108 | .form-control { 109 | border: none; 110 | background-color: #e8ebef !important; 111 | } 112 | 113 | .primaryMenu { 114 | -webkit-transform: translateY(-90px); 115 | transform: translateY(-90px); 116 | -webkit-transition: -webkit-transform 0.3s ease; 117 | transition: -webkit-transform 0.3s ease; 118 | transition: transform 0.3s ease; 119 | transition: transform 0.3s ease, -webkit-transform 0.3s ease; 120 | position: absolute; 121 | margin-left: 35px; 122 | } 123 | 124 | .primaryMenu.active { 125 | -webkit-transform: translateY(0px); 126 | transform: translateY(0px); 127 | } 128 | 129 | .secondaryMenu { 130 | position: absolute; 131 | widows: 100%; 132 | -webkit-transform: translateY(-90px); 133 | transform: translateY(-90px); 134 | margin-left: 25px; 135 | padding-left: 0; 136 | z-index: 2; 137 | -webkit-transition: -webkit-transform 0.3s ease; 138 | transition: -webkit-transform 0.3s ease; 139 | transition: transform 0.3s ease; 140 | transition: transform 0.3s ease, -webkit-transform 0.3s ease; 141 | } 142 | 143 | .secondaryMenu.active { 144 | -webkit-transform: translateY(0px); 145 | transform: translateY(0px); 146 | } 147 | 148 | .btn { 149 | border-radius: 6px; 150 | -webkit-transition: all 0.3s ease; 151 | transition: all 0.3s ease; 152 | } 153 | 154 | .btn.btn-primary { 155 | background-color: #31E7B6; 156 | border-color: #31E7B6; 157 | } 158 | 159 | .btn.btn-primary:hover { 160 | background-color: #32d2a7; 161 | border-color: #32d2a7; 162 | } 163 | 164 | .btn.btn-primary:active { 165 | -webkit-transform: scale(0.95); 166 | transform: scale(0.95); 167 | background-color: #32d2a7; 168 | border-color: #32d2a7; 169 | } 170 | 171 | .btn-dark-faded { 172 | font-weight: 300; 173 | font-family: 'Montserrat', sans-serif !important; 174 | /*text-transform: uppercase;*/ 175 | background-color: rgba(0, 0, 0, 0.07); 176 | color: black; 177 | } 178 | 179 | .social:hover a { 180 | color: rgba(0, 0, 0, 0.4); 181 | } 182 | 183 | .social a { 184 | color: black; 185 | font-size: 28px; 186 | margin-right: 12px; 187 | -webkit-transition: all 0.3s ease; 188 | transition: all 0.3s ease; 189 | } 190 | 191 | .social a:hover { 192 | color: black; 193 | } 194 | 195 | .social a:hover i { 196 | -webkit-transform: scale(1.3); 197 | transform: scale(1.3); 198 | } 199 | 200 | section { 201 | padding: 10%; 202 | } 203 | 204 | section .heading { 205 | margin-bottom: 30px; 206 | } 207 | 208 | section.yellow { 209 | background-color: #ffd061; 210 | color: #000 !important; 211 | } 212 | 213 | section.yellow .progress .bg-blue { 214 | background-color: #c19c43; 215 | } 216 | 217 | section.voilet { 218 | background-color: #4768FD; 219 | } 220 | 221 | section.blue { 222 | background-color: #cadfdf; 223 | } 224 | 225 | section.orange { 226 | color: #fff; 227 | background-color: #fb7833; 228 | } 229 | 230 | section.green { 231 | background-color: #aaffa7; 232 | } 233 | 234 | section.skin { 235 | background-color: #fdead2; 236 | } 237 | 238 | section.aqua { 239 | background-color: #00fefe; 240 | color: #000 !important; 241 | } 242 | 243 | section.pink { 244 | background-color: #fff1f1; 245 | } 246 | 247 | .progress { 248 | height: 0.6rem; 249 | background-color: #fff; 250 | } 251 | 252 | .progress .bg-blue { 253 | background-color: #2e96a5; 254 | } 255 | 256 | .card { 257 | border-radius: 6px; 258 | border: none; 259 | } 260 | 261 | #timeline { 262 | width: 100%; 263 | position: relative; 264 | -webkit-transition: all 0.4s ease; 265 | transition: all 0.4s ease; 266 | } 267 | 268 | #timeline:before { 269 | content: ""; 270 | width: 3px; 271 | height: 100%; 272 | background: #000; 273 | left: 50%; 274 | -webkit-transform: translate(-50%); 275 | transform: translate(-50%); 276 | top: 0; 277 | position: absolute; 278 | } 279 | 280 | #timeline:after { 281 | content: ""; 282 | clear: both; 283 | display: table; 284 | width: 100%; 285 | } 286 | 287 | #timeline .timeline-item { 288 | margin-bottom: 50px; 289 | position: relative; 290 | text-align: right; 291 | } 292 | 293 | #timeline .timeline-item .timeline-icon { 294 | background: #000; 295 | width: 20px; 296 | height: 20px; 297 | position: absolute; 298 | top: 0; 299 | left: 50%; 300 | overflow: hidden; 301 | margin-left: -10px; 302 | border-radius: 50%; 303 | } 304 | 305 | #timeline .timeline-item .timeline-content { 306 | width: 45%; 307 | -webkit-transition: all 0.3s ease; 308 | transition: all 0.3s ease; 309 | } 310 | 311 | #timeline .timeline-item .timeline-content p { 312 | color: rgba(0, 0, 0, 0.7); 313 | } 314 | 315 | #timeline .timeline-item .timeline-content .date { 316 | display: inline-block; 317 | background-color: rgba(0, 0, 0, 0.1); 318 | padding: 10px; 319 | border-radius: 3px; 320 | } 321 | 322 | #timeline .timeline-item .timeline-content.right { 323 | float: right; 324 | text-align: left; 325 | } 326 | 327 | .pagination .page-item.active .page-link { 328 | background-color: black; 329 | border-color: black !important; 330 | color: #fff !important; 331 | } 332 | 333 | .pagination .page-link { 334 | border: none; 335 | color: #000 !important; 336 | } 337 | 338 | .skill { 339 | margin-bottom: 20px; 340 | } 341 | 342 | @media (max-width: 767px) { 343 | .sidebar { 344 | position: static; 345 | width: 100%; 346 | padding-left: 65px; 347 | } 348 | .main-content { 349 | width: 100%; 350 | margin-left: 0%; 351 | } 352 | #timeline { 353 | margin: 30px; 354 | padding: 0px; 355 | width: 90%; 356 | } 357 | #timeline:before { 358 | left: 0; 359 | } 360 | #timeline .timeline-item .timeline-content { 361 | width: 90%; 362 | float: right; 363 | text-align: left; 364 | } 365 | #timeline .timeline-item .timeline-content:before, 366 | #timeline .timeline-item .timeline-content .right:before { 367 | left: 10%; 368 | margin-left: -6px; 369 | border-left: 0; 370 | border-right: 7px solid #ee4d4d; 371 | } 372 | #timeline .timeline-item .timeline-icon { 373 | left: 0; 374 | } 375 | } 376 | 377 | .hamburger-menu, 378 | .hamburger-menu:after, 379 | .hamburger-menu:before { 380 | width: 24px; 381 | height: 4px; 382 | } 383 | 384 | .hamburger-menu { 385 | position: relative; 386 | -webkit-transform: translateY(8px); 387 | transform: translateY(8px); 388 | background: black; 389 | -webkit-transition: all 0ms 300ms; 390 | transition: all 0ms 300ms; 391 | } 392 | 393 | .hamburger-menu.animate { 394 | background: rgba(255, 255, 255, 0); 395 | } 396 | 397 | .hamburger-menu:before { 398 | content: ""; 399 | position: absolute; 400 | left: 0; 401 | bottom: 8px; 402 | background: black; 403 | -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 404 | transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 405 | transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 406 | transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 407 | } 408 | 409 | .hamburger-menu:after { 410 | content: ""; 411 | position: absolute; 412 | left: 0; 413 | top: 8px; 414 | background: black; 415 | -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 416 | transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 417 | transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 418 | transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 419 | } 420 | 421 | .hamburger-menu.animate:after { 422 | top: 0; 423 | -webkit-transform: rotate(45deg); 424 | transform: rotate(45deg); 425 | -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 426 | transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 427 | transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 428 | transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 429 | } 430 | 431 | .hamburger-menu.animate:before { 432 | bottom: 0; 433 | -webkit-transform: rotate(-45deg); 434 | transform: rotate(-45deg); 435 | -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 436 | transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 437 | transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 438 | transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1); 439 | } 440 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /static/css/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } -------------------------------------------------------------------------------- /static/css/styles.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | // outline: 1px solid red; 3 | } 4 | 5 | html{ 6 | overflow-x: hidden; 7 | overflow-y: scroll; 8 | } 9 | 10 | a{ 11 | &:hover{ 12 | text-decoration: none; 13 | } 14 | } 15 | .sidebar{ 16 | position: fixed; 17 | left: 0px; 18 | top: 0px; 19 | 20 | right: 552px; 21 | bottom: 0px; 22 | z-index: 1; 23 | width: 40%; 24 | 25 | height: 100%; 26 | 27 | 28 | .main-info *{ 29 | transition: all 0.3s ease; 30 | opacity: 0; 31 | transform: translateX(-40px); 32 | 33 | &.bs{ 34 | transform: translateX(0); 35 | opacity: 1; 36 | } 37 | 38 | 39 | } 40 | } 41 | 42 | .main-content{ 43 | position: relative; 44 | overflow: visible; 45 | width: 60%; 46 | max-width: 1200px; 47 | margin-left: 40%; 48 | float: none; 49 | clear: none; 50 | 51 | &:after{ 52 | position: absolute; 53 | content: ''; 54 | top: 0; bottom: 0; 55 | left: 0; right: 0; 56 | transition: all 0.8s cubic-bezier(0.79, 0, 0.05, 0.83);; 57 | background-color: #fff; 58 | } 59 | 60 | &.active{ 61 | &:after{ 62 | position: absolute; 63 | content: ''; 64 | top: 0; bottom: 0; 65 | left: 0; right: 0; 66 | transform: translateX(100%); 67 | background-color: #fff; 68 | } 69 | } 70 | } 71 | 72 | 73 | 74 | article{ 75 | font-size: 18px !important; 76 | line-height: 1.8rem; 77 | p{ 78 | color: rgba(0,0,0,0.8); 79 | } 80 | 81 | img{ 82 | max-width: 100%; 83 | } 84 | 85 | code{ 86 | background-color: #fbfbfb !important; 87 | width: 100%; 88 | max-width: 800px; 89 | margin: 0 auto; 90 | } 91 | 92 | mark{ 93 | background-color: white; 94 | color: rgb(200,0,0); 95 | } 96 | 97 | } 98 | 99 | .heading, 100 | h1,h2,h3,h4,h5,h6{ 101 | 102 | font-family: 'Montserrat', sans-serif !important; 103 | font-weight: 800; 104 | text-transform: uppercase; 105 | 106 | } 107 | 108 | .heading{ 109 | font-size: 38px; 110 | } 111 | 112 | .highlight{ 113 | background-color: #ededed; 114 | padding: 4px 8px; 115 | /*display: inline-block;*/ 116 | } 117 | 118 | .form-control{ 119 | border: none; 120 | background-color: #e8ebef !important; 121 | } 122 | 123 | .primaryMenu{ 124 | // margin-top: -90px; 125 | transform: translateY(-90px); 126 | transition: transform 0.3s ease; 127 | position: absolute; 128 | margin-left: 35px; 129 | 130 | &.active{ 131 | transform: translateY(0px); 132 | } 133 | } 134 | 135 | .secondaryMenu{ 136 | position: absolute; 137 | widows: 100%; 138 | // margin-top: -90px; 139 | transform: translateY(-90px); 140 | margin-left: 25px; 141 | padding-left: 0; 142 | z-index: 2; 143 | transition: transform 0.3s ease; 144 | 145 | &.active{ 146 | // margin-top: 0px; 147 | transform: translateY(0px); 148 | } 149 | } 150 | 151 | // styles for buttons 152 | .btn{ 153 | border-radius: 6px; 154 | transition: all 0.3s ease; 155 | 156 | &.btn-primary{ 157 | background-color : #31E7B6; 158 | border-color: #31E7B6; 159 | 160 | &:hover{ 161 | background-color : #32d2a7; 162 | border-color: #32d2a7; 163 | } 164 | 165 | &:active{ 166 | transform: scale(0.95); 167 | background-color : #32d2a7; 168 | border-color: #32d2a7; 169 | } 170 | } 171 | } 172 | 173 | .btn-dark-faded{ 174 | font-weight: 300; 175 | font-family: 'Montserrat', sans-serif !important; 176 | /*text-transform: uppercase;*/ 177 | background-color: rgba(0,0,0,0.07); 178 | color: black; 179 | } 180 | // Styles for social icons 181 | .social{ 182 | &:hover{ 183 | a{ 184 | color: rgba(0,0,0,0.4); 185 | } 186 | } 187 | 188 | a{ 189 | color: rgba(0,0,0,1); 190 | font-size: 28px; 191 | margin-right: 12px; 192 | transition: all 0.3s ease; 193 | 194 | &:hover{ 195 | color: rgba(0,0,0,1); 196 | i{ 197 | transform: scale(1.3); 198 | } 199 | } 200 | } 201 | } 202 | 203 | section{ 204 | padding: 10%; 205 | 206 | .heading{ 207 | margin-bottom: 30px; 208 | } 209 | 210 | &.yellow{ 211 | background-color: #ffd061; 212 | color: #000 !important; 213 | 214 | .progress .bg-blue{ 215 | background-color: #c19c43; 216 | } 217 | } 218 | 219 | &.voilet{ 220 | background-color: #4768FD; 221 | } 222 | 223 | &.blue{ 224 | background-color: #cadfdf; 225 | } 226 | 227 | &.orange{ 228 | color: #fff; 229 | background-color: #fb7833; 230 | } 231 | 232 | &.green{ 233 | background-color: #aaffa7; 234 | } 235 | 236 | &.skin{ 237 | background-color: #fdead2; 238 | } 239 | 240 | &.aqua{ 241 | background-color: #00fefe; 242 | color: #000 !important; 243 | } 244 | 245 | &.pink{ 246 | background-color: #fff1f1; 247 | } 248 | } 249 | 250 | // styles for progress bar 251 | .progress{ 252 | height: 0.6rem; 253 | background-color: #fff; 254 | 255 | .bg-blue{ 256 | background-color: #2e96a5; 257 | } 258 | } 259 | 260 | .card{ 261 | border-radius: 6px; 262 | border: none; 263 | } 264 | 265 | // styles for timeline 266 | 267 | #timeline { 268 | width: 100%; 269 | 270 | position: relative; 271 | -webkit-transition: all 0.4s ease; 272 | -moz-transition: all 0.4s ease; 273 | -ms-transition: all 0.4s ease; 274 | transition: all 0.4s ease; 275 | 276 | &:before { 277 | content: ""; 278 | width: 3px; 279 | height: 100%; 280 | background: #000; 281 | left: 50%; 282 | transform: translate(-50%); 283 | top: 0; 284 | position: absolute; 285 | } 286 | &:after { 287 | content: ""; 288 | clear: both; 289 | display: table; 290 | width: 100%; 291 | } 292 | 293 | .timeline-item { 294 | margin-bottom: 50px; 295 | position: relative; 296 | text-align: right; 297 | 298 | .timeline-icon { 299 | background: #000; 300 | width: 20px; 301 | height: 20px; 302 | position: absolute; 303 | top: 0; 304 | left: 50%; 305 | overflow: hidden; 306 | margin-left: -10px; 307 | -webkit-border-radius: 50%; 308 | -moz-border-radius: 50%; 309 | -ms-border-radius: 50%; 310 | border-radius: 50%; 311 | } 312 | 313 | .timeline-content { 314 | width: 45%; 315 | -webkit-transition: all 0.3s ease; 316 | -moz-transition: all 0.3s ease; 317 | -ms-transition: all 0.3s ease; 318 | transition: all 0.3s ease; 319 | 320 | p { 321 | color: rgba(0,0,0,0.7); 322 | } 323 | 324 | .date{ 325 | display: inline-block; 326 | background-color: rgba(0,0,0,0.1); 327 | padding: 10px; 328 | border-radius: 3px; 329 | } 330 | 331 | &.right { 332 | float: right; 333 | text-align: left; 334 | } 335 | } 336 | } 337 | } 338 | 339 | .pagination{ 340 | .page-item.active{ 341 | .page-link{ 342 | background-color: black; 343 | border-color: black !important; 344 | color: #fff !important; 345 | } 346 | } 347 | .page-link{ 348 | border: none; 349 | color: #000 !important; 350 | } 351 | } 352 | 353 | .skill{ 354 | margin-bottom: 20px; 355 | } 356 | 357 | @media (max-width: 767px){ 358 | .sidebar { 359 | position: static; 360 | width: 100%; 361 | padding-left: 65px; 362 | } 363 | .main-content{ 364 | width: 100%; 365 | margin-left: 0%; 366 | } 367 | 368 | #timeline { 369 | margin: 30px; 370 | padding: 0px; 371 | width: 90%; 372 | 373 | &:before { 374 | left: 0; 375 | } 376 | 377 | .timeline-item{ 378 | .timeline-content { 379 | width: 90%; 380 | float: right; 381 | text-align: left; 382 | 383 | &:before, 384 | .right:before{ 385 | left: 10%; 386 | margin-left: -6px; 387 | border-left: 0; 388 | border-right: 7px solid #ee4d4d; 389 | } 390 | } 391 | .timeline-icon { 392 | left: 0; 393 | } 394 | } 395 | } 396 | } 397 | 398 | $bar-width: 24px; 399 | $bar-height: 4px; 400 | $bar-spacing: 8px; 401 | 402 | .hamburger-menu, 403 | .hamburger-menu:after, 404 | .hamburger-menu:before { 405 | width: $bar-width; 406 | height: $bar-height; 407 | } 408 | 409 | .hamburger-menu { 410 | position: relative; 411 | transform: translateY($bar-spacing); 412 | background: rgba(0, 0, 0, 1); 413 | transition: all 0ms 300ms; 414 | 415 | &.animate { 416 | background: rgba(255, 255, 255, 0); 417 | } 418 | } 419 | 420 | .hamburger-menu:before { 421 | content: ""; 422 | position: absolute; 423 | left: 0; 424 | bottom: $bar-spacing; 425 | background: rgba(0, 0, 0, 1); 426 | transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 427 | } 428 | 429 | .hamburger-menu:after { 430 | content: ""; 431 | position: absolute; 432 | left: 0; 433 | top: $bar-spacing; 434 | background: rgba(0, 0, 0, 1); 435 | transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms cubic-bezier(0.23, 1, 0.32, 1); 436 | } 437 | 438 | .hamburger-menu.animate:after { 439 | top: 0; 440 | transform: rotate(45deg); 441 | transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);; 442 | } 443 | 444 | .hamburger-menu.animate:before { 445 | bottom: 0; 446 | transform: rotate(-45deg); 447 | transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 350ms 350ms cubic-bezier(0.23, 1, 0.32, 1);; 448 | } -------------------------------------------------------------------------------- /static/images/sim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uicardioHQ/hugo-uilite/0b625104854cb06afaf1f1260eabedb07c0d4706/static/images/sim.jpg -------------------------------------------------------------------------------- /static/js/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | *================================= 3 | * Hugo UILite Portfolio v0.8 4 | *================================= 5 | * 6 | * Free version https://uicard.io/products/hugo-uilite 7 | * Pro version https://uicard.io/products/hugo-uilite-pro 8 | * Demo https://demo.uicard.io/hugo-uilite-portfolio-demo/ 9 | * 10 | * Coded By UICardio 11 | * 12 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | * 14 | */ 15 | 16 | 17 | let menuBtn = $("#menuBar"); 18 | 19 | menuBtn.click(function() { 20 | 21 | $('.hamburger-menu').toggleClass('animate'); 22 | 23 | if ($(".secondaryMenu").hasClass("active")) { 24 | 25 | $(".secondaryMenu").removeClass("active"); 26 | setTimeout(function() { 27 | $(".primaryMenu").addClass("active"); 28 | }, 400); 29 | 30 | 31 | } else { 32 | $(".primaryMenu").removeClass("active"); 33 | 34 | setTimeout(function() { 35 | $(".secondaryMenu").addClass("active"); 36 | }, 350); 37 | } 38 | }); 39 | 40 | function scrollTo(target) { 41 | const top = $(target).offset().top; 42 | const duration = 500; 43 | const changeHash = function() { 44 | location.hash = target 45 | }; 46 | $("html, body").animate({ scrollTop: top }, duration, changeHash); 47 | } 48 | 49 | $(document).ready(function() { 50 | var elements = $(".sidebar > .main-info *"); 51 | 52 | console.log(elements); 53 | 54 | for (let i = 0; i < elements.length; i++) { 55 | setTimeout(function() { 56 | $(elements[i].tagName).addClass("bs"); 57 | }, (400 * i) - 90 * i); 58 | } 59 | 60 | setTimeout(function() { 61 | $(".main-content").addClass("active"); 62 | }, 1900); 63 | 64 | $("#sidebar a.btn[href='#contact']").on("click", function (event) { 65 | event.preventDefault(); 66 | 67 | scrollTo($.attr(this, "href")); 68 | }); 69 | }); -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | # theme.toml template for a Hugo theme 2 | # See https://github.com/gohugoio/hugoThemes#themetoml for an example 3 | 4 | name = "UILite" 5 | license = "MIT" 6 | licenselink = "https://github.com/uicardiodev/hugo-uilite/blob/master/LICENSE.md" 7 | description = "Hugo UILite theme is designed for developers and desginers so that they can showcase their work without any struggle" 8 | homepage = "https://uicard.io/products/hugo-uilite" 9 | tags = ["minimal","responsive","clean","modern","colors","portfolio","blog","skills","experience","services","uicardio"] 10 | features = ["blog","services","portfolio","contact","skills","formspree","responsive"] 11 | min_version = "0.31.1" 12 | 13 | [author] 14 | name = "UICardio" 15 | homepage = "https://uicard.io/products/sodium-hugo-theme" 16 | 17 | [developer] 18 | name = "Arvind" 19 | homepage = "https://heyarviind.com" --------------------------------------------------------------------------------