diff --git a/content/img/pfp_edit.png b/content/img/pfp_edit.png new file mode 100644 index 0000000..79888ae Binary files /dev/null and b/content/img/pfp_edit.png differ diff --git a/content/img/placeholder.png b/content/img/placeholder.png new file mode 100644 index 0000000..8bbe28e Binary files /dev/null and b/content/img/placeholder.png differ diff --git a/content/img/sample-square0.png b/content/img/sample-square0.png deleted file mode 100644 index d0df398..0000000 Binary files a/content/img/sample-square0.png and /dev/null differ diff --git a/content/img/sample-square1.png b/content/img/sample-square1.png deleted file mode 100644 index 90431f3..0000000 Binary files a/content/img/sample-square1.png and /dev/null differ diff --git a/content/img/sample-square2.png b/content/img/sample-square2.png deleted file mode 100644 index 4d12fdc..0000000 Binary files a/content/img/sample-square2.png and /dev/null differ diff --git a/content/img/sample-square3.png b/content/img/sample-square3.png deleted file mode 100644 index 1c4e5a0..0000000 Binary files a/content/img/sample-square3.png and /dev/null differ diff --git a/css/style.css b/css/style.css index 9871ccf..7b21113 100644 --- a/css/style.css +++ b/css/style.css @@ -1,132 +1,1424 @@ -html { - background-color: #2D132C; - color: #EE4540; - font-family: "JetBrains Mono", monospace; - font-optical-sizing: auto; - font-weight: 300; - font-style: normal;;} - -h1,h2,h3,h4,h5,h6 {color:#e5ff00;} - -#WIP { - text-align: center; - margin: 0; - background-color: rgba(0, 0, 0, 0.692); - position: fixed; - width: 100%; +@charset "UTF-8"; +:root { + --x: -8px; + --y: -8px; } + +html { + background-color: #1b1b1b; + color: #00ffc8; + font-family: "JetBrains Mono", monospace; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; +} + +h1, h2, h3, h4, h5, h6 { + color: #e5ff00; +} + +#WIP { + text-align: center; + font-size: 20px; + margin: 0; + background-color: rgba(0, 0, 0, 0.692); + position: fixed; + top: 0; /* Add this line to ensure it's at the top */ + left: 0; /* Optional: ensures it's aligned to the left */ + width: 100%; + z-index: 1000; /* Optional: ensures it stays above other elements */ +} + .page-container { - padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/ - display: grid; - grid-template-columns: 1fr 2fr 1fr; - grid-template-rows: 0.5fr 0.5fr 0.5fr 2fr 0.5fr; - gap: 30px 0px; - grid-auto-flow: row; - grid-template-areas: - ". name ." - ". about-me ." - ". skills ." - ". my-projects ." - ". get-in-touch .";} + padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/ + display: grid; + grid-template-columns: 0.5fr 2.5fr 0.75fr; + grid-template-rows: 0.4fr 0.5fr 0.5fr 2fr 0.5fr; + gap: 30px 0px; + grid-auto-flow: row; + grid-template-areas: ". name ." ". about-me ." ". skills ." ". my-projects ." ". get-in-touch ."; +} .name { - grid-area: name; - text-align: center; - margin-right: 150px; - margin-left: 150px;} + display: grid; + grid-auto-flow: row dense; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 2fr; + gap: 0px 0px; + grid-template-areas: ". ."; + grid-area: name; + justify-items: start; + align-items: start; + max-height: -moz-fit-content; + max-height: fit-content; +} + +.name img { + grid-column: 1; + grid-row: 1/4; /* span 3 rows */ + justify-self: center; + border-radius: 5%; + width: 185px; + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + rotate: -5deg; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.555); +} .name h1 { - font-size: 40px; - font-weight: 1000; - text-transform: uppercase;} + position: relative; + font-size: 55px; + font-weight: 1000; + grid-column: 2; + grid-row: 1; + text-transform: uppercase; + text-shadow: 5px 2px #1a1a1a, 2px 4px #1a1a1a, 3px 5px #1a1a1a; + margin-bottom: 0%; +} -.name h2 {color:#EE4540;} -.name h3 {color:#801336;} +.name h3 { + color: #3f3f3f; + grid-column: 2; + grid-row: 3; + margin-top: 0px; +} -.profile-pic { - float: left;} +.word { + grid-column: 2; + grid-row: 2; + margin-top: 0%; + text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.486), 1px 2px 4px currentColor; +} -.about-me { - grid-area: about-me; - text-align: center; - margin-left: 15%; - margin-right: 15%; - font-size: larger; - text-align: justify;} +.word-container { + display: block; + position: relative; + float: inline-start; + font-family: monospace; + font-size: 40px; + font-weight: 600; + width: 100%; + height: 100%; + min-height: 150px; + max-width: 450px; + color: rgb(255, 255, 255); +} +.word-container > .word { + pointer-events: none; +} +.word-container > .word::before { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + white-space: break-spaces; + will-change: content; + animation: typed-0 15.44s linear 1s infinite forwards; +} +.word-container > .word::after { + content: ""; + position: relative; + display: inline-block; + padding-right: 6px; + border-right: 4px solid currentColor; + white-space: nowrap; + animation: typed-0-caret 0.75s linear 1s infinite forwards; +} +@keyframes typed-0 { + 0%, 0.4307789292% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 0.4317789292%, 0.8625578584% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 0.8635578584%, 1.2943367876% { + content: "a J"; + content: "a J"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 1.2953367876%, 1.7261157168% { + content: "a Ju"; + content: "a Ju"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 1.7271157168%, 2.1578946459% { + content: "a Jun"; + content: "a Jun"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 2.1588946459%, 2.5896735751% { + content: "a Juni"; + content: "a Juni"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 2.5906735751%, 3.0214525043% { + content: "a Junio"; + content: "a Junio"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 3.0224525043%, 3.4532314335% { + content: "a Junior"; + content: "a Junior"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 3.4542314335%, 3.8850103627% { + content: "a Junior "; + content: "a Junior "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 3.8860103627%, 4.3167892919% { + content: "a Junior F"; + content: "a Junior F"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 4.3177892919%, 4.7485682211% { + content: "a Junior Fu"; + content: "a Junior Fu"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 4.7495682211%, 5.1803471503% { + content: "a Junior Ful"; + content: "a Junior Ful"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 5.1813471503%, 5.6121260794% { + content: "a Junior Full"; + content: "a Junior Full"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 5.6131260794%, 6.0439050086% { + content: "a Junior Full-"; + content: "a Junior Full-"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 6.0449050086%, 6.4756839378% { + content: "a Junior Full-S"; + content: "a Junior Full-S"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 6.4766839378%, 6.907462867% { + content: "a Junior Full-St"; + content: "a Junior Full-St"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 6.908462867%, 7.3392417962% { + content: "a Junior Full-Sta"; + content: "a Junior Full-Sta"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 7.3402417962%, 7.7710207254% { + content: "a Junior Full-Stac"; + content: "a Junior Full-Stac"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 7.7720207254%, 8.2027996546% { + content: "a Junior Full-Stack"; + content: "a Junior Full-Stack"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 8.2037996546%, 8.6345785838% { + content: "a Junior Full-Stack "; + content: "a Junior Full-Stack "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 8.6355785838%, 9.066357513% { + content: "a Junior Full-Stack D"; + content: "a Junior Full-Stack D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 9.067357513%, 9.4981364421% { + content: "a Junior Full-Stack De"; + content: "a Junior Full-Stack De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 9.4991364421%, 9.9299153713% { + content: "a Junior Full-Stack Dev"; + content: "a Junior Full-Stack Dev"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 9.9309153713%, 10.3616943005% { + content: "a Junior Full-Stack Deve"; + content: "a Junior Full-Stack Deve"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 10.3626943005%, 10.7934732297% { + content: "a Junior Full-Stack Devel"; + content: "a Junior Full-Stack Devel"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 10.7944732297%, 11.2252521589% { + content: "a Junior Full-Stack Develo"; + content: "a Junior Full-Stack Develo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 11.2262521589%, 11.6570310881% { + content: "a Junior Full-Stack Develop"; + content: "a Junior Full-Stack Develop"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 11.6580310881%, 12.0888100173% { + content: "a Junior Full-Stack Develope"; + content: "a Junior Full-Stack Develope"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 12.0898100173%, 21.5015906736% { + content: "a Junior Full-Stack Developer"; + content: "a Junior Full-Stack Developer"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 21.5025906736%, 21.8470138169% { + content: "a Junior Full-Stack Develope"; + content: "a Junior Full-Stack Develope"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 21.8480138169%, 22.1924369603% { + content: "a Junior Full-Stack Develop"; + content: "a Junior Full-Stack Develop"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 22.1934369603%, 22.5378601036% { + content: "a Junior Full-Stack Develo"; + content: "a Junior Full-Stack Develo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 22.5388601036%, 22.883283247% { + content: "a Junior Full-Stack Devel"; + content: "a Junior Full-Stack Devel"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 22.884283247%, 23.2287063903% { + content: "a Junior Full-Stack Deve"; + content: "a Junior Full-Stack Deve"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 23.2297063903%, 23.5741295337% { + content: "a Junior Full-Stack Dev"; + content: "a Junior Full-Stack Dev"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 23.5751295337%, 23.919552677% { + content: "a Junior Full-Stack De"; + content: "a Junior Full-Stack De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 23.920552677%, 24.2649758204% { + content: "a Junior Full-Stack D"; + content: "a Junior Full-Stack D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 24.2659758204%, 24.6103989637% { + content: "a Junior Full-Stack "; + content: "a Junior Full-Stack "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 24.6113989637%, 24.9558221071% { + content: "a Junior Full-Stack"; + content: "a Junior Full-Stack"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 24.9568221071%, 25.3012452504% { + content: "a Junior Full-Stac"; + content: "a Junior Full-Stac"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 25.3022452504%, 25.6466683938% { + content: "a Junior Full-Sta"; + content: "a Junior Full-Sta"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 25.6476683938%, 25.9920915371% { + content: "a Junior Full-St"; + content: "a Junior Full-St"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 25.9930915371%, 26.3375146805% { + content: "a Junior Full-S"; + content: "a Junior Full-S"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 26.3385146805%, 26.6829378238% { + content: "a Junior Full-"; + content: "a Junior Full-"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 26.6839378238%, 27.0283609672% { + content: "a Junior Full"; + content: "a Junior Full"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 27.0293609672%, 27.3737841105% { + content: "a Junior Ful"; + content: "a Junior Ful"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 27.3747841105%, 27.7192072539% { + content: "a Junior Fu"; + content: "a Junior Fu"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 27.7202072539%, 28.0646303972% { + content: "a Junior F"; + content: "a Junior F"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 28.0656303972%, 28.4100535406% { + content: "a Junior "; + content: "a Junior "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 28.4110535406%, 28.7554766839% { + content: "a Junior"; + content: "a Junior"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 28.7564766839%, 29.1008998273% { + content: "a Junio"; + content: "a Junio"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 29.1018998273%, 29.4463229706% { + content: "a Juni"; + content: "a Juni"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 29.4473229706%, 29.791746114% { + content: "a Jun"; + content: "a Jun"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 29.792746114%, 30.1371692573% { + content: "a Ju"; + content: "a Ju"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 30.1381692573%, 30.4825924007% { + content: "a J"; + content: "a J"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 30.4835924007%, 30.828015544% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 30.829015544%, 31.1734386874% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 31.1744386874%, 35.4912279793% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + color: #ff3c00; + } + 35.4922279793%, 35.9230069085% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 35.9240069085%, 36.3547858377% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 36.3557858377%, 36.7865647668% { + content: "a D"; + content: "a D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 36.7875647668%, 37.218343696% { + content: "a De"; + content: "a De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 37.219343696%, 37.6501226252% { + content: "a Des"; + content: "a Des"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 37.6511226252%, 38.0819015544% { + content: "a Desi"; + content: "a Desi"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 38.0829015544%, 38.5136804836% { + content: "a Desig"; + content: "a Desig"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 38.5146804836%, 38.9454594128% { + content: "a Design"; + content: "a Design"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 38.9464594128%, 39.377238342% { + content: "a Designe"; + content: "a Designe"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 39.378238342%, 48.7900189983% { + content: "a Designer"; + content: "a Designer"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 48.7910189983%, 49.1354421416% { + content: "a Designe"; + content: "a Designe"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 49.1364421416%, 49.480865285% { + content: "a Design"; + content: "a Design"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 49.481865285%, 49.8262884283% { + content: "a Desig"; + content: "a Desig"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 49.8272884283%, 50.1717115717% { + content: "a Desi"; + content: "a Desi"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 50.1727115717%, 50.517134715% { + content: "a Des"; + content: "a Des"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 50.518134715%, 50.8625578584% { + content: "a De"; + content: "a De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 50.8635578584%, 51.2079810017% { + content: "a D"; + content: "a D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 51.2089810017%, 51.5534041451% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 51.5544041451%, 51.8988272884% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 51.8998272884%, 56.2166165803% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff7300; + color: #ff7300; + color: #ff7300; + color: #ff7300; + } + 56.2176165803%, 56.6483955095% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 56.6493955095%, 57.0801744387% { + content: "an"; + content: "an"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 57.0811744387%, 57.5119533679% { + content: "an "; + content: "an "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 57.5129533679%, 57.9437322971% { + content: "an A"; + content: "an A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 57.9447322971%, 58.3755112263% { + content: "an AI"; + content: "an AI"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 58.3765112263%, 58.8072901554% { + content: "an AI "; + content: "an AI "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 58.8082901554%, 59.2390690846% { + content: "an AI A"; + content: "an AI A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 59.2400690846%, 59.6708480138% { + content: "an AI Ar"; + content: "an AI Ar"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 59.6718480138%, 60.102626943% { + content: "an AI Art"; + content: "an AI Art"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 60.103626943%, 60.5344058722% { + content: "an AI Arti"; + content: "an AI Arti"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 60.5354058722%, 60.9661848014% { + content: "an AI Artis"; + content: "an AI Artis"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 60.9671848014%, 70.3789654577% { + content: "an AI Artist"; + content: "an AI Artist"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 70.3799654577%, 70.724388601% { + content: "an AI Artis"; + content: "an AI Artis"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 70.725388601%, 71.0698117444% { + content: "an AI Arti"; + content: "an AI Arti"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 71.0708117444%, 71.4152348877% { + content: "an AI Art"; + content: "an AI Art"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 71.4162348877%, 71.7606580311% { + content: "an AI Ar"; + content: "an AI Ar"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 71.7616580311%, 72.1060811744% { + content: "an AI A"; + content: "an AI A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 72.1070811744%, 72.4515043178% { + content: "an AI "; + content: "an AI "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 72.4525043178%, 72.7969274611% { + content: "an AI"; + content: "an AI"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 72.7979274611%, 73.1423506045% { + content: "an A"; + content: "an A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 73.1433506045%, 73.4877737478% { + content: "an "; + content: "an "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 73.4887737478%, 73.8331968912% { + content: "an"; + content: "an"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 73.8341968912%, 74.1786200345% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 74.1796200345%, 78.4964093264% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ff9900; + color: #ff9900; + color: #ff9900; + color: #ff9900; + } + 78.4974093264%, 78.9281882556% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 78.9291882556%, 79.3599671848% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 79.3609671848%, 79.791746114% { + content: "a d"; + content: "a d"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 79.792746114%, 80.2235250432% { + content: "a do"; + content: "a do"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 80.2245250432%, 80.6553039724% { + content: "a dog"; + content: "a dog"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 80.6563039724%, 81.0870829016% { + content: "a dog "; + content: "a dog "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 81.0880829016%, 81.5188618307% { + content: "a dog l"; + content: "a dog l"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 81.5198618307%, 81.9506407599% { + content: "a dog lo"; + content: "a dog lo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 81.9516407599%, 82.3824196891% { + content: "a dog lov"; + content: "a dog lov"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 82.3834196891%, 82.8141986183% { + content: "a dog love"; + content: "a dog love"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 82.8151986183%, 92.2269792746% { + content: "a dog lover"; + content: "a dog lover"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 92.2279792746%, 92.572402418% { + content: "a dog love"; + content: "a dog love"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 92.573402418%, 92.9178255613% { + content: "a dog lov"; + content: "a dog lov"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 92.9188255613%, 93.2632487047% { + content: "a dog lo"; + content: "a dog lo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 93.2642487047%, 93.608671848% { + content: "a dog l"; + content: "a dog l"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 93.609671848%, 93.9540949914% { + content: "a dog "; + content: "a dog "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 93.9550949914%, 94.2995181347% { + content: "a dog"; + content: "a dog"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 94.3005181347%, 94.6449412781% { + content: "a do"; + content: "a do"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 94.6459412781%, 94.9903644214% { + content: "a d"; + content: "a d"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 94.9913644214%, 95.3357875648% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 95.3367875648%, 95.6812107081% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } + 95.6822107081%, 100% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + color: #ffbb00; + } +} +@keyframes typed-0-caret { + 75% { + border-color: transparent; + } +} +.about-me { + grid-area: about-me; + text-align: center; + margin-left: 15%; + margin-right: 15%; + font-size: larger; + text-align: justify; +} .about-me h2 { - text-align: center; - text-transform: uppercase;} + text-align: center; + text-transform: uppercase; + margin: 0; + color: #1b1b1b; + font-size: 55px; + font-weight: 1000; +} + +.about-me a { + -webkit-text-decoration: wavy underline; + text-decoration: wavy underline; + text-decoration-thickness: 1px; + text-decoration-color: #e5ff00; + color: #00ffc8; +} .skills { - grid-area: skills; - display: inline-flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: baseline; - font-size: larger;} + grid-area: skills; + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: baseline; + font-size: larger; +} .dev-skills > label, .other-skills > label { - margin-bottom: 5px; - margin-top: 15px;} + margin-bottom: 5px; + margin-top: 15px; +} .skills h3 { - text-transform: uppercase;} - -progress { - border-radius: 10px;} - - progress::-webkit-progress-bar { - background-color: #801336; - border-radius: 10px;} - - progress::-webkit-progress-value { - background-color: #e5ff00; - border-radius: 10px;} - - progress::-moz-progress-bar { - background-color: #78fff8; - border-radius: 10px;} + text-transform: uppercase; + font-size: 30px; + font-weight: 1000; + color: #1b1b1b; + padding-left: 10px; + padding-right: 10px; + white-space: nowrap; /* Prevent text from wrapping */ + overflow: visible; /* Allow overflow (default behavior) */ +} .dev-skills { - display: grid; - justify-items: center; - align-content:center ;} + display: grid; + justify-items: center; + align-content: center; +} .other-skills { - display: grid; - justify-items: center; - align-content:center ;} - - .my-projects { - grid-area: my-projects; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - gap: 20px; - width: 100%; - } - - .project { - width: 300px; - display: flex; - flex-direction: column; - flex-grow: 0; - flex-shrink: 0; - align-self: auto; - order: 0; - text-align: center; - } + display: grid; + justify-items: center; + align-content: center; +} + +progress { + border-radius: 10px; +} + +progress::-webkit-progress-bar { + background-color: rgba(224, 189, 200, 0.0549019608); + border-radius: 10px; +} + +progress::-webkit-progress-value { + background-color: #e5ff00; + border-radius: 10px; +} + +progress::-moz-progress-bar { + background-color: #801336; + border-radius: 10px; +} + +progress::-moz-progress-value { + background-color: #e5ff00; + border-radius: 10px; +} + +.my-projects { + grid-area: my-projects; + display: flex; + flex-direction: column; /* Stack h3 and projects vertically */ + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + gap: 20px; + width: 100%; +} + +.my-projects h3 { + text-transform: uppercase; + font-size: 55px; + font-weight: 1000; + position: relative; + color: #1b1b1b; + width: 100%; /* Make sure the h3 spans the full width */ + text-align: center; /* Optional: Center align the h3 text */ +} + +.project { + width: 300px; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + text-align: center; +} + .project img { - width: 300px;} - + width: 300px; +} + .get-in-touch { - display: inline-flex; - grid-area: get-in-touch; - flex-direction: row; - justify-content: space-evenly; - align-items: center;} + display: inline-flex; + grid-area: get-in-touch; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +#mouseShadow1 { + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} + +#mouseShadow2 { + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} + +#mouseShadow3 { + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} + +#mouseShadow4 { + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} + +@media (max-width: 768px) { + .name { + display: span 2; + } + .name img { + width: 200px; + rotate: 0deg; + box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.555); + } + .about-me { + margin-left: 10%; + margin-right: 10%; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..d539a8e --- /dev/null +++ b/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css","style.scss","typed.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/css/style.css_backup b/css/style.css_backup new file mode 100644 index 0000000..fd50acf --- /dev/null +++ b/css/style.css_backup @@ -0,0 +1,1385 @@ +@charset "UTF-8"; +html { + background-color: #1b1b1b; + color: #00ffc8; + font-family: "JetBrains Mono", monospace; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; +} + +h1, h2, h3, h4, h5, h6 { + color: #e5ff00; +} + +#WIP { + text-align: center; + margin: 0; + background-color: rgba(0, 0, 0, 0.692); + position: fixed; + top: 0; /* Add this line to ensure it's at the top */ + left: 0; /* Optional: ensures it's aligned to the left */ + width: 100%; + z-index: 1000; /* Optional: ensures it stays above other elements */ +} + +.page-container { + padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/ + display: grid; + grid-template-columns: 0.5fr 2.5fr 0.75fr; + grid-template-rows: 0.4fr 0.5fr 0.5fr 2fr 0.5fr; + gap: 30px 0px; + grid-auto-flow: row; + grid-template-areas: ". name ." ". about-me ." ". skills ." ". my-projects ." ". get-in-touch ."; +} + +.name { + display: grid; + grid-auto-flow: row dense; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 2fr; + gap: 0px 0px; + grid-template-areas: ". ."; + grid-area: name; + justify-items: start; + align-items: start; + max-height: -moz-fit-content; + max-height: fit-content; +} + +.name img { + grid-column: 1; + grid-row: 1/4; /* span 3 rows */ + justify-self: center; + border-radius: 5%; + width: 185px; + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + rotate: -5deg; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.555); +} + +.name h1 { + position: relative; + font-size: 40px; + font-weight: 1000; + grid-column: 2; + grid-row: 1; + text-transform: uppercase; + text-shadow: 5px 2px #1a1a1a, 2px 4px #1a1a1a, 3px 5px #1a1a1a; + margin-bottom: 0%; +} + +.name h3 { + color: #3f3f3f; + grid-column: 2; + grid-row: 3; + margin-top: 0px; +} + +.word { + grid-column: 2; + grid-row: 2; + margin-top: 0%; + text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.486), 1px 2px 4px currentColor; +} + +.word-container { + display: block; + position: relative; + float: inline-start; + font-family: monospace; + font-size: 40px; + font-weight: 600; + width: 100%; + height: 100%; + min-height: 150px; + color: rgb(255, 255, 255); +} +.word-container > .word { + pointer-events: none; +} +.word-container > .word::before { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + white-space: break-spaces; + will-change: content; + animation: typed-0 15.44s linear 1s infinite forwards; +} +.word-container > .word::after { + content: ""; + position: relative; + display: inline-block; + padding-right: 6px; + border-right: 4px solid currentColor; + white-space: nowrap; + animation: typed-0-caret 0.75s linear 1s infinite forwards; +} +@keyframes typed-0 { + 0%, 0.4307789292% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 0.4317789292%, 0.8625578584% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 0.8635578584%, 1.2943367876% { + content: "a J"; + content: "a J"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 1.2953367876%, 1.7261157168% { + content: "a Ju"; + content: "a Ju"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 1.7271157168%, 2.1578946459% { + content: "a Jun"; + content: "a Jun"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 2.1588946459%, 2.5896735751% { + content: "a Juni"; + content: "a Juni"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 2.5906735751%, 3.0214525043% { + content: "a Junio"; + content: "a Junio"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 3.0224525043%, 3.4532314335% { + content: "a Junior"; + content: "a Junior"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 3.4542314335%, 3.8850103627% { + content: "a Junior "; + content: "a Junior "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 3.8860103627%, 4.3167892919% { + content: "a Junior F"; + content: "a Junior F"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 4.3177892919%, 4.7485682211% { + content: "a Junior Fu"; + content: "a Junior Fu"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 4.7495682211%, 5.1803471503% { + content: "a Junior Ful"; + content: "a Junior Ful"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 5.1813471503%, 5.6121260794% { + content: "a Junior Full"; + content: "a Junior Full"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 5.6131260794%, 6.0439050086% { + content: "a Junior Full-"; + content: "a Junior Full-"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 6.0449050086%, 6.4756839378% { + content: "a Junior Full-S"; + content: "a Junior Full-S"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 6.4766839378%, 6.907462867% { + content: "a Junior Full-St"; + content: "a Junior Full-St"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 6.908462867%, 7.3392417962% { + content: "a Junior Full-Sta"; + content: "a Junior Full-Sta"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 7.3402417962%, 7.7710207254% { + content: "a Junior Full-Stac"; + content: "a Junior Full-Stac"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 7.7720207254%, 8.2027996546% { + content: "a Junior Full-Stack"; + content: "a Junior Full-Stack"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 8.2037996546%, 8.6345785838% { + content: "a Junior Full-Stack "; + content: "a Junior Full-Stack "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 8.6355785838%, 9.066357513% { + content: "a Junior Full-Stack D"; + content: "a Junior Full-Stack D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 9.067357513%, 9.4981364421% { + content: "a Junior Full-Stack De"; + content: "a Junior Full-Stack De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 9.4991364421%, 9.9299153713% { + content: "a Junior Full-Stack Dev"; + content: "a Junior Full-Stack Dev"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 9.9309153713%, 10.3616943005% { + content: "a Junior Full-Stack Deve"; + content: "a Junior Full-Stack Deve"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 10.3626943005%, 10.7934732297% { + content: "a Junior Full-Stack Devel"; + content: "a Junior Full-Stack Devel"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 10.7944732297%, 11.2252521589% { + content: "a Junior Full-Stack Develo"; + content: "a Junior Full-Stack Develo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 11.2262521589%, 11.6570310881% { + content: "a Junior Full-Stack Develop"; + content: "a Junior Full-Stack Develop"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 11.6580310881%, 12.0888100173% { + content: "a Junior Full-Stack Develope"; + content: "a Junior Full-Stack Develope"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 12.0898100173%, 21.5015906736% { + content: "a Junior Full-Stack Developer"; + content: "a Junior Full-Stack Developer"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 21.5025906736%, 21.8470138169% { + content: "a Junior Full-Stack Develope"; + content: "a Junior Full-Stack Develope"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 21.8480138169%, 22.1924369603% { + content: "a Junior Full-Stack Develop"; + content: "a Junior Full-Stack Develop"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 22.1934369603%, 22.5378601036% { + content: "a Junior Full-Stack Develo"; + content: "a Junior Full-Stack Develo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 22.5388601036%, 22.883283247% { + content: "a Junior Full-Stack Devel"; + content: "a Junior Full-Stack Devel"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 22.884283247%, 23.2287063903% { + content: "a Junior Full-Stack Deve"; + content: "a Junior Full-Stack Deve"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 23.2297063903%, 23.5741295337% { + content: "a Junior Full-Stack Dev"; + content: "a Junior Full-Stack Dev"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 23.5751295337%, 23.919552677% { + content: "a Junior Full-Stack De"; + content: "a Junior Full-Stack De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 23.920552677%, 24.2649758204% { + content: "a Junior Full-Stack D"; + content: "a Junior Full-Stack D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 24.2659758204%, 24.6103989637% { + content: "a Junior Full-Stack "; + content: "a Junior Full-Stack "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 24.6113989637%, 24.9558221071% { + content: "a Junior Full-Stack"; + content: "a Junior Full-Stack"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 24.9568221071%, 25.3012452504% { + content: "a Junior Full-Stac"; + content: "a Junior Full-Stac"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 25.3022452504%, 25.6466683938% { + content: "a Junior Full-Sta"; + content: "a Junior Full-Sta"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 25.6476683938%, 25.9920915371% { + content: "a Junior Full-St"; + content: "a Junior Full-St"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 25.9930915371%, 26.3375146805% { + content: "a Junior Full-S"; + content: "a Junior Full-S"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 26.3385146805%, 26.6829378238% { + content: "a Junior Full-"; + content: "a Junior Full-"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 26.6839378238%, 27.0283609672% { + content: "a Junior Full"; + content: "a Junior Full"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 27.0293609672%, 27.3737841105% { + content: "a Junior Ful"; + content: "a Junior Ful"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 27.3747841105%, 27.7192072539% { + content: "a Junior Fu"; + content: "a Junior Fu"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 27.7202072539%, 28.0646303972% { + content: "a Junior F"; + content: "a Junior F"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 28.0656303972%, 28.4100535406% { + content: "a Junior "; + content: "a Junior "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 28.4110535406%, 28.7554766839% { + content: "a Junior"; + content: "a Junior"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 28.7564766839%, 29.1008998273% { + content: "a Junio"; + content: "a Junio"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 29.1018998273%, 29.4463229706% { + content: "a Juni"; + content: "a Juni"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 29.4473229706%, 29.791746114% { + content: "a Jun"; + content: "a Jun"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 29.792746114%, 30.1371692573% { + content: "a Ju"; + content: "a Ju"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 30.1381692573%, 30.4825924007% { + content: "a J"; + content: "a J"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 30.4835924007%, 30.828015544% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 30.829015544%, 31.1734386874% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 31.1744386874%, 35.4912279793% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: blueviolet; + color: blueviolet; + color: blueviolet; + color: blueviolet; + } + 35.4922279793%, 35.9230069085% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 35.9240069085%, 36.3547858377% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 36.3557858377%, 36.7865647668% { + content: "a D"; + content: "a D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 36.7875647668%, 37.218343696% { + content: "a De"; + content: "a De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 37.219343696%, 37.6501226252% { + content: "a Des"; + content: "a Des"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 37.6511226252%, 38.0819015544% { + content: "a Desi"; + content: "a Desi"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 38.0829015544%, 38.5136804836% { + content: "a Desig"; + content: "a Desig"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 38.5146804836%, 38.9454594128% { + content: "a Design"; + content: "a Design"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 38.9464594128%, 39.377238342% { + content: "a Designe"; + content: "a Designe"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 39.378238342%, 48.7900189983% { + content: "a Designer"; + content: "a Designer"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 48.7910189983%, 49.1354421416% { + content: "a Designe"; + content: "a Designe"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 49.1364421416%, 49.480865285% { + content: "a Design"; + content: "a Design"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 49.481865285%, 49.8262884283% { + content: "a Desig"; + content: "a Desig"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 49.8272884283%, 50.1717115717% { + content: "a Desi"; + content: "a Desi"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 50.1727115717%, 50.517134715% { + content: "a Des"; + content: "a Des"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 50.518134715%, 50.8625578584% { + content: "a De"; + content: "a De"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 50.8635578584%, 51.2079810017% { + content: "a D"; + content: "a D"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 51.2089810017%, 51.5534041451% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 51.5544041451%, 51.8988272884% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 51.8998272884%, 56.2166165803% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + color: rgb(179, 0, 0); + } + 56.2176165803%, 56.6483955095% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 56.6493955095%, 57.0801744387% { + content: "an"; + content: "an"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 57.0811744387%, 57.5119533679% { + content: "an "; + content: "an "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 57.5129533679%, 57.9437322971% { + content: "an A"; + content: "an A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 57.9447322971%, 58.3755112263% { + content: "an AI"; + content: "an AI"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 58.3765112263%, 58.8072901554% { + content: "an AI "; + content: "an AI "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 58.8082901554%, 59.2390690846% { + content: "an AI A"; + content: "an AI A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 59.2400690846%, 59.6708480138% { + content: "an AI Ar"; + content: "an AI Ar"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 59.6718480138%, 60.102626943% { + content: "an AI Art"; + content: "an AI Art"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 60.103626943%, 60.5344058722% { + content: "an AI Arti"; + content: "an AI Arti"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 60.5354058722%, 60.9661848014% { + content: "an AI Artis"; + content: "an AI Artis"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 60.9671848014%, 70.3789654577% { + content: "an AI Artist"; + content: "an AI Artist"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 70.3799654577%, 70.724388601% { + content: "an AI Artis"; + content: "an AI Artis"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 70.725388601%, 71.0698117444% { + content: "an AI Arti"; + content: "an AI Arti"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 71.0708117444%, 71.4152348877% { + content: "an AI Art"; + content: "an AI Art"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 71.4162348877%, 71.7606580311% { + content: "an AI Ar"; + content: "an AI Ar"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 71.7616580311%, 72.1060811744% { + content: "an AI A"; + content: "an AI A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 72.1070811744%, 72.4515043178% { + content: "an AI "; + content: "an AI "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 72.4525043178%, 72.7969274611% { + content: "an AI"; + content: "an AI"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 72.7979274611%, 73.1423506045% { + content: "an A"; + content: "an A"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 73.1433506045%, 73.4877737478% { + content: "an "; + content: "an "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 73.4887737478%, 73.8331968912% { + content: "an"; + content: "an"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 73.8341968912%, 74.1786200345% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 74.1796200345%, 78.4964093264% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: darkorange; + color: darkorange; + color: darkorange; + color: darkorange; + } + 78.4974093264%, 78.9281882556% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 78.9291882556%, 79.3599671848% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 79.3609671848%, 79.791746114% { + content: "a d"; + content: "a d"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 79.792746114%, 80.2235250432% { + content: "a do"; + content: "a do"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 80.2245250432%, 80.6553039724% { + content: "a dog"; + content: "a dog"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 80.6563039724%, 81.0870829016% { + content: "a dog "; + content: "a dog "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 81.0880829016%, 81.5188618307% { + content: "a dog l"; + content: "a dog l"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 81.5198618307%, 81.9506407599% { + content: "a dog lo"; + content: "a dog lo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 81.9516407599%, 82.3824196891% { + content: "a dog lov"; + content: "a dog lov"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 82.3834196891%, 82.8141986183% { + content: "a dog love"; + content: "a dog love"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 82.8151986183%, 92.2269792746% { + content: "a dog lover"; + content: "a dog lover"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 92.2279792746%, 92.572402418% { + content: "a dog love"; + content: "a dog love"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 92.573402418%, 92.9178255613% { + content: "a dog lov"; + content: "a dog lov"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 92.9188255613%, 93.2632487047% { + content: "a dog lo"; + content: "a dog lo"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 93.2642487047%, 93.608671848% { + content: "a dog l"; + content: "a dog l"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 93.609671848%, 93.9540949914% { + content: "a dog "; + content: "a dog "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 93.9550949914%, 94.2995181347% { + content: "a dog"; + content: "a dog"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 94.3005181347%, 94.6449412781% { + content: "a do"; + content: "a do"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 94.6459412781%, 94.9903644214% { + content: "a d"; + content: "a d"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 94.9913644214%, 95.3357875648% { + content: "a "; + content: "a "/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 95.3367875648%, 95.6812107081% { + content: "a"; + content: "a"/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } + 95.6822107081%, 100% { + content: ""; + content: ""/"a Junior Full-Stack Developer"; + alt: "a Junior Full-Stack Developer"; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + color: #00e1ff; + } +} +@keyframes typed-0-caret { + 75% { + border-color: transparent; + } +} + +.about-me { + grid-area: about-me; + text-align: center; + margin-left: 15%; + margin-right: 15%; + font-size: larger; + text-align: justify; +} + +.about-me h2 { + text-align: center; + text-transform: uppercase; + margin: 0; +} + +.about-me a { + -webkit-text-decoration: wavy underline; + text-decoration: wavy underline; + text-decoration-thickness: 1px; + text-decoration-color: #e5ff00; + color: #00ffc8; +} + +.skills { + grid-area: skills; + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: baseline; + font-size: larger; +} + +.dev-skills > label, .other-skills > label { + margin-bottom: 5px; + margin-top: 15px; +} + +.skills h3 { + text-transform: uppercase; +} + +progress { + border-radius: 10px; +} + +progress::-webkit-progress-bar { + background-color: rgba(224, 189, 200, 0.0549019608); + border-radius: 10px; +} + +progress::-webkit-progress-value { + background-color: #e5ff00; + border-radius: 10px; +} + +progress::-moz-progress-bar { + background-color: #801336; + border-radius: 10px; +} + +progress::-moz-progress-value { + background-color: #e5ff00; + border-radius: 10px; +} + +.dev-skills { + display: grid; + justify-items: center; + align-content: center; +} + +.other-skills { + display: grid; + justify-items: center; + align-content: center; +} + +.my-projects { + grid-area: my-projects; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + gap: 20px; + width: 100%; +} + +.my-projects h3 { + text-transform: uppercase; + font-size: 30px; +} + +.project { + width: 300px; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + align-self: auto; + order: 0; + text-align: center; +} + +.project img { + width: 300px; +} + +.get-in-touch { + display: inline-flex; + grid-area: get-in-touch; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +#text { + text-align: center; + position: relative; +} + +.text0, .text2 { + color: #e5ff00; +} + +.text1, .text3 { + color: #e5ff00; +} + +@media (max-width: 768px) { + .name { + display: span 2; + } + .name img { + width: 200px; + rotate: 0deg; + box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.555); + } + .about-me { + margin-left: 10%; + margin-right: 10%; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..3517f33 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,322 @@ +@import 'typed.scss'; + +:root { + --x: -8px; + --y: -8px; + } + +html { + background-color: #1b1b1b; + color: #00ffc8; + font-family: "JetBrains Mono", monospace; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; + } + + h1, h2, h3, h4, h5, h6 { + color: #e5ff00; + } + + #WIP { + text-align: center; + font-size: 20px; + margin: 0; + background-color: rgba(0, 0, 0, 0.692); + position: fixed; + top: 0; /* Add this line to ensure it's at the top */ + left: 0; /* Optional: ensures it's aligned to the left */ + width: 100%; + z-index: 1000; /* Optional: ensures it stays above other elements */ + } + + .page-container { + padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/ + display: grid; + grid-template-columns: 0.5fr 2.5fr 0.75fr; + grid-template-rows: 0.4fr 0.5fr 0.5fr 2fr 0.5fr; + gap: 30px 0px; + grid-auto-flow: row; + grid-template-areas: ". name ." ". about-me ." ". skills ." ". my-projects ." ". get-in-touch ."; + } + + .name { + display: grid; + grid-auto-flow: row dense; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 2fr; + gap: 0px 0px; + grid-template-areas: ". ."; + grid-area: name; + justify-items: start; + align-items: start; + max-height:fit-content; + } + + .name img { + grid-column: 1; + grid-row: 1/4; /* span 3 rows */ + justify-self: center; + border-radius: 5%; + width: 185px; + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + rotate: -5deg; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.555); + } + + .name h1 { + position: relative; + font-size: 55px; + font-weight: 1000; + grid-column: 2; + grid-row: 1; + text-transform: uppercase; + text-shadow: 5px 2px #1a1a1a, 2px 4px #1a1a1a, 3px 5px #1a1a1a; + margin-bottom: 0%; + } + + .name h3 { + color: #3f3f3f; + grid-column: 2; + grid-row: 3; + margin-top: 0px; + } + + .word { + grid-column: 2; + grid-row: 2; + margin-top: 0%; + text-shadow: + 1px 2px 6px rgba(0, 0, 0, 0.486), + 1px 2px 4px currentColor; + } + + .word-container { + display: block; + position: relative; + float:inline-start; + font-family: monospace; + font-size: 40px; + font-weight:600; + width: 100%; + height: 100%; + min-height:150px; + max-width: 450px; + color: rgb(255, 255, 255); + + > .word { + pointer-events: none; + @include typed(( + "a Junior Full-Stack Developer": (color: #ff3c00), + "a Designer": (color: #ff7300), + "an AI Artist": (color: #ff9900), + "a dog lover":(color: #ffbb00)), + 1.5, + ( + caret-width: 4px, + caret-space: 6px + ) + ); + } + } + +.about-me { + grid-area: about-me; + text-align: center; + margin-left: 15%; + margin-right: 15%; + font-size: larger; + text-align: justify; +} + +.about-me h2 { + text-align: center; + text-transform: uppercase; + margin: 0; + color:#1b1b1b; + font-size: 55px; + font-weight: 1000; +} + +.about-me a { + -webkit-text-decoration: wavy underline; + text-decoration: wavy underline; + text-decoration-thickness: 1px; + text-decoration-color: #e5ff00; + color: #00ffc8; +} + +.skills { + grid-area: skills; + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: baseline; + font-size: larger; +} + +.dev-skills > label, .other-skills > label { + margin-bottom: 5px; + margin-top: 15px; +} + +.skills h3 { + text-transform: uppercase; + font-size: 30px; + font-weight: 1000; + color: #1b1b1b; + padding-left: 10px; + padding-right: 10px; + white-space: nowrap; /* Prevent text from wrapping */ + overflow: visible; /* Allow overflow (default behavior) */ + } + +.dev-skills { + display: grid; + justify-items: center; + align-content: center; +} + +.other-skills { + display: grid; + justify-items: center; + align-content: center; +} + +progress { + border-radius: 10px; + } + + progress::-webkit-progress-bar { + background-color: rgba(224, 189, 200, 0.0549019608); + border-radius: 10px; + } + + progress::-webkit-progress-value { + background-color: #e5ff00; + border-radius: 10px; + } + + progress::-moz-progress-bar { + background-color: #801336; + border-radius: 10px; + } + + progress::-moz-progress-value { + background-color: #e5ff00; + border-radius: 10px; +} + +.my-projects { + grid-area: my-projects; + display: flex; + flex-direction: column; /* Stack h3 and projects vertically */ + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + gap: 20px; + width: 100%; + } + + .my-projects h3 { + text-transform: uppercase; + font-size: 55px; + font-weight: 1000; + position: relative; + color: #1b1b1b; + width: 100%; /* Make sure the h3 spans the full width */ + text-align: center; /* Optional: Center align the h3 text */ + } + + .project { + width: 300px; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; + text-align: center; + } + +.project img { + width: 300px; +} + +.get-in-touch { + display: inline-flex; + grid-area: get-in-touch; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +#mouseShadow1 { + // font-weight: 800; + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} +#mouseShadow2 { + // font-weight: 800; + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} +#mouseShadow3 { + // font-weight: 800; + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} +#mouseShadow4 { + // font-weight: 800; + letter-spacing: 4px; + -webkit-text-stroke-width: 0.5px; + -webkit-text-stroke-color: #e5ff00; + text-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #ff9900, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #ff7b00, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #ff3c00; + box-shadow: + calc(var(--x) * -1) calc(var(--y) * -1) 0px #1b1b1b, + calc(var(--x) * -2) calc(var(--y) * -2) 0px #1b1b1b, + calc(var(--x) * -3) calc(var(--y) * -3) 0px #e5ff00; +} +@media (max-width: 768px) { + .name { + display: span 2; + } + .name img { + width: 200px; + rotate: 0deg; + box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.555); + } + .about-me { + margin-left: 10%; + margin-right: 10%; + } +} \ No newline at end of file diff --git a/css/typed.css b/css/typed.css new file mode 100644 index 0000000..c2bf661 --- /dev/null +++ b/css/typed.css @@ -0,0 +1 @@ +/*# sourceMappingURL=typed.css.map */ \ No newline at end of file diff --git a/css/typed.css.map b/css/typed.css.map new file mode 100644 index 0000000..42a3835 --- /dev/null +++ b/css/typed.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"typed.css"} \ No newline at end of file diff --git a/css/typed.scss b/css/typed.scss new file mode 100644 index 0000000..b26a393 --- /dev/null +++ b/css/typed.scss @@ -0,0 +1,443 @@ +$__supports-first-class-calc: calc(1) == 1; +@function __div($number1, $number2) { + @if $__supports-first-class-calc { + @return calc($number1 / $number2); + } @else { + @return $number1 / $number2; + } +} + +$__typed-pauses-chars: (fwd: "\200b", bwd: "\200c", both: "\feff"); +@function __typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $string-nth, $char-nth, $modifier) { + $string: nth($strings, $string-nth); + $length: str-length($string); + $fwd-string: __typed-remove-bwd-pause-chars($string); + $fwd-length: str-length($fwd-string); + $bwd-string: __typed-remove-fwd-pause-chars($string); + $bwd-length: str-length($bwd-string); + $combined-length: $fwd-length + $bwd-length; + $strings-past: $string-nth - 1; + $time: 0; + @while $strings-past > 0 { + $past-string: nth($strings, $strings-past); + $past-length: str-length($past-string); + $past-fwd-length: str-length(__typed-remove-bwd-pause-chars($past-string)); + $past-bwd-length: str-length(__typed-remove-fwd-pause-chars($past-string)); + $time: $time + + $dur-char-fwd * $past-fwd-length + + $dur-char-bwd * $past-bwd-length + + $dur-full-gap + $dur-done-gap; + $strings-past: $strings-past - 1; + } + @if $char-nth <= $fwd-length { + $time: $time + + $dur-char-fwd * ($char-nth - 1); + } @else { + $time: $time + + $dur-char-fwd * $fwd-length + + $dur-full-gap + + $dur-char-bwd * ($char-nth - $fwd-length); + } + @return (__div($time, $dur-total) * 100 + $modifier) + "%"; +} +@function __typed-get-all-keys($lists...) { + $all-keys: (); + @each $list in $lists { + @each $map in $list { + @each $prop in map-keys($map) { + $all-keys: append($all-keys, $prop, comma); + } + } + } + @return $all-keys; +} +@mixin __typed-write-to-content($string, $alt-text, $prefix: "") { + // @supports (content: "x" / "y") { + // content: $string / "#{$alt-text}"; + // } + // @supports not (content: "x" / "y") { + // content: $string; + // alt: "#{$alt-text}"; + // } + content: "#{__typed-sanitize-pause-chars($prefix)}#{__typed-sanitize-pause-chars($string)}"; + content: "#{__typed-sanitize-pause-chars($prefix)}#{__typed-sanitize-pause-chars($string)}" / "#{__typed-sanitize-pause-chars($alt-text)}"; + alt: "#{__typed-sanitize-pause-chars($alt-text)}"; +} +@mixin __typed-spread-styles($styles: (), $nth: null, $addtl-styles...) { + @if type-of($styles) == list { + @if (length($styles) > 0 and $nth != null) or length($addtl-styles) > 0 { + $all-props: __typed-get-all-keys($styles, $addtl-styles); + @if length($styles) > 0 and $nth != null { $styles: nth($styles, $nth); } + @if length($addtl-styles) > 0 { + @each $style-group in $addtl-styles { + // @error "#{$style-group}"; + $styles: map-merge($styles, $style-group); + } + } + @each $prop in $all-props { + $value: if(map-get($styles, $prop) == null, unset, map-get($styles, $prop)); + #{$prop}: if(type-of($value) == list, append($value, null, auto), $value); + } + } + } @else if type-of($styles) == map { + @if length(map-keys($styles)) > 0 { + @each $prop, $value in $styles { + #{$prop}: if(type-of($value) == list, append($value, null, auto), $value); + } + } + } @else { + @error "__typed-spread-styles requires the $styles argument to be either a map or a list of maps."; + } +} +@mixin __typed-final-build-animation($dur-char-fwd, $string, $animation-name, $alt-text, $prefix, $end-styles: (), $styles: ()) { + @keyframes #{$animation-name}-final { + @for $i from 1 through str-length($string) { + $modifier: .001; + @if $i == 1 { $modifier: 0; } + #{__div(($i - 1), str-length($string)) * 100 + $modifier}%, #{__div($i, str-length($string)) * 100}% { + @include __typed-write-to-content(str-slice($string, 1, $i), $alt-text, $prefix); + @if $i == str-length($string) { + @include __typed-spread-styles(map-merge($styles, $end-styles)); + } @else { + @include __typed-spread-styles($styles); + } + } + } + } +} +@function __typed-instances-of($data, $search) { + $instances: 0; + @if type-of($data) == list or type-of($data) == map { @each $item in $data { @if $item == $search { $instances: $instances + 1; } } } + @else if type-of($data) == string { + @if type-of($search) != string { @error "When searching a string using instances-of, your search argument must also be a string."; } + @if str-length($search) < 1 { @error "When searching a string using instances-of, your search string must be at least one character in length."; } + @for $i from 1 through str-length($data) - str-length($search) + 1 { @if str-slice($data, $i, $i + str-length($search) - 1) == $search { $instances: $instances + 1; } } + } @else { @error "instances-of requires one parameter of type map, list, or string, and a second argument of the value searching for within that data."; } + @return $instances; +} +@function __typed-instances-of-not($data, $search) { + @if type-of($data) == list or type-of($data) == map { @return length($data) - __typed-instances-of($data, $search); } + @else if type-of($data) == string { @return str-length($data) - __typed-instances-of($data, $search); } + @else { @error "instances-of requires one parameter of type map, list, or string, and a second argument of the value searching for within that data."; } +} +// ... +// +// CREDIT BEGIN :: aliased str-replace/to-length/to-number functions are courtesy of Kitty Giraudel (kittygiraudel.com) + @function __typed-str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + @if $index { @return str-slice($string, 1, $index - 1) + $replace + __typed-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } + @return $string; + } + @function __typed-to-length($value, $unit) { + $units: ("px": 1px, "cm": 1cm, "mm": 1mm, "%": 1%, "ch": 1ch, "pc": 1pc, "in": 1in, "em": 1em, "rem": 1rem, "pt": 1pt, "ex": 1ex, "vw": 1vw, "vh": 1vh, "vmin": 1vmin, "vmax": 1vmax); + @if not index(map-keys($units), $unit) { $_: log("Invalid unit `#{$unit}`."); } + @return $value * map-get($units, $unit); + } + @function __typed-to-number($value) { + @if type-of($value) == "number" { @return $value; } + @else if type-of($value) != "string" { $_: log("Value for `__typed-to-number` should be a number or a string."); } + $result: 0; $digits: 0; $minus: str-slice($value, 1, 1) == "-"; $numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9); + @for $i from if($minus, 2, 1) through str-length($value) { + $character: str-slice($value, $i, $i); + @if not (index(map-keys($numbers), $character) or $character == ".") { @return __typed-to-length(if($minus, -$result, $result), str-slice($value, $i)) } + @if $character == "." { $digits: 1; } + @else if $digits == 0 { $result: $result * 10 + map-get($numbers, $character); } + @else { $digits: $digits * 10; $result: $result + __div(map-get($numbers, $character), $digits); } + } + @return if($minus, -$result, $result); + } +// CREDIT END +// +// ... +@function __typed-str-replace-multi($string, $searches, $replace: "") { + @each $search in $searches { $string: __typed-str-replace($string, $search, $replace); } + @return $string; +} +@function __typed-remove-pause-chars($str) { @return __typed-str-replace-multi($str, map-values($__typed-pauses-chars)); } +@function __typed-remove-fwd-pause-chars($str) { @return __typed-str-replace($str, map-get($__typed-pauses-chars, fwd)); } +@function __typed-remove-bwd-pause-chars($str) { @return __typed-str-replace($str, map-get($__typed-pauses-chars, bwd)); } +@function __typed-remove-both-pause-chars($str) { @return __typed-str-replace($str, map-get($__typed-pauses-chars, both)); } +@function __typed-sanitize-pause-chars($str) { @return __typed-remove-pause-chars(__typed-inject-pauses($str)); } +@function __typed-inject-pauses($str, $default-mode: "fwd") { + @while str-index($str, "<[") != null and str-index($str, "]>") != null and str-index($str, "]>") > str-index($str, "<[") { + $start: str-index($str, "<["); $end: str-index($str, "]>"); + $is-fwd: str-slice($str, $start + 2, $start + 2) == "_"; + $is-bwd: str-slice($str, $end - 1, $end - 1) == "_"; + $is-both: $is-fwd and $is-bwd; + $space-char: + if($is-both, + map-get($__typed-pauses-chars, both), + if($is-bwd, + map-get($__typed-pauses-chars, bwd), + if($is-fwd, + map-get($__typed-pauses-chars, fwd), + map-get($__typed-pauses-chars, $default-mode) + ) + ) + ); + $value: __typed-to-number(str-slice($str, $start + if($is-fwd, 3, 2), $end - if($is-bwd, 2, 1))); + $spaces: ""; @for $i from 0 to $value { $spaces: $spaces + $space-char; } + $str: str-slice($str, 1, $start - 1) + $spaces + str-slice($str, $end + 2, -1); + } + @return $str; +} +$__typed-id: 0; +@mixin typed($parameters...) { + $strings: (); + $strings-styles: (); + $final-string-styles: (); + $speeds: ( + type: .1, + pause-typed: 2, + delete: .08, + pause-deleted: 1 + ); + $options: ( + name: "", + iterations: infinite, + caret: true, + caret-speed: .75, + caret-width: 1ch, + caret-color: currentColor, + caret-space: .1ch, + styles: (), + end-styles: (), + delay: 1, + type-pausing: true, + type-pausing-default: "fwd", + prefix: "", + end-on: "", + alt-text: "" + ); + $strings-complete: false; + $speeds-complete: false; + $options-complete: false; + $parameter-nth: 1; + @each $parameter in $parameters { + @if not $strings-complete { + @if $parameter-nth == 1 and type-of($parameter) == map { + $strings: join($strings, map-keys($parameter)); + $strings-styles: join($strings-styles, map-values($parameter)); + $strings-complete: true; + } @else if type-of($parameter) == string { + $strings: append($strings, $parameter); + } @else { + @error "Strings are required in the formats of either separate sequential string arguments, or a single map with each string represented as the key of its own map of associated styles."; + } + @if length($parameters) > $parameter-nth and type-of(nth($parameters, $parameter-nth + 1)) != string { + $strings-complete: true; + } + } @else if not $speeds-complete { + @if type-of($parameter) == map { + @each $key, $value in $parameter { + @if map-get($speeds, $key) == null { + @error "#{$key} is not a valid speed property. Accepted speed property keys are #{append(map-keys($speeds), null, comma)}."; + } + @if type-of($value) != number { + @error "The value #{$value} is not a number."; + } + $speeds: map-merge($speeds, ($key: $value)); + } + } @else if type-of($parameter) == list { + @if length($parameter) > 4 { + @error "The speed list argument only accepts 4 numbers when used a list."; + } + @for $i from 1 through length($parameter) { + @if nth($parameter, $i) != null and type-of(nth($parameter, $i)) != number { + @error "The value #{$value} is not a number."; + } + @if nth($parameter, $i) != null { + $speeds: map-merge($speeds, (nth(map-keys($speeds), $i): nth($parameter, $i))); + } + } + } @else if type-of($parameter) == number { + @if $parameter <= 0 { + @error "When passing a numeric value into the $speeds argument, it works as a multiplier and thereby requires a positive non-zero number (integer or float). To slow down the default speed, use a decimal number between 0 and 1. To speed up the default speed, use a number greater than 1. A value of 0.5 will reduce the speed by 50%, where a value of 2 will double the speed."; + } + @each $key, $value in $speeds { + $speeds: map-merge($speeds, ($key: $value * __div(1, $parameter))); + } + } @else if $parameter != null { + @error "The speed argument requires either a map, list, or null value." + } + $speeds-complete: true; + } @else if not $options-complete { + @if $parameter != null { + @if type-of($parameter) != map { + @error "#{$key} is not a valid options configuration map."; + } + @each $key, $value in $parameter { + @if map-get($options, $key) == null { + @error "#{$key} is not a valid options property. Accepted options property keys are #{append(map-keys($options), null, comma)}."; + } + @if $key == iterations { + @if $value != infinite and (type-of($value) == number and ($value < 0 or $value != round($value))) { + @error "The iterations value #{$value} requires a positive integer or infinite."; + } + } @else if $key == end-on { + @if type-of($value) == map { + @if length($value) != 1 { + @error "When using the end-on property as a map, the map must house a single value, also a map, with the map value containing the SCSS styles to apply to the end-on string."; + } + @each $end-on, $end-on-styles in $value { + @if type-of($end-on) == string { + @if $end-on == "" { + @error "The end-on property requires a non-empty string."; + } + } @else if type-of($end-on) == number { + @if $end-on < 0 or $end-on > length($strings) or $end-on != round($end-on) { + @error "If using a numeric end-on property value, it must be a positive integer between 1 and the number of the strings being used."; + } + $end-on: nth($strings, $end-on); + } + $final-string-styles: $end-on-styles; + $value: $end-on; + } + } @else if type-of($value) == string { + @if $value == "" { + @error "The end-on property requires a non-empty string."; + } + } @else if type-of($value) == number { + @if $value < 0 or $value > length($strings) or $value != round($value) { + @error "If using a numeric end-on property value, it must be a positive integer between 1 and the number of the strings being used."; + } + $value: nth($strings, $value); + } + } @else if $key == caret-color { + @if $value != currentColor and type-of($value) != color { + @error "The caret-color property requires a value of type color, or currentColor."; + } + } @else if ($key == styles or $key == end-styles) and not type-of($value) != map { + @if type-of($value) != map { + @error "The #{$key} property requires a value of type map."; + } + } @else if $key == type-pausing-default { + @if type-of($value) != string or ($value != "fwd" and $value != "bwd" and $value != "both") { + @error "The #{$key} property requires a value of either \"fwd\", \"bwd\", or \"both\"."; + } + } @else if type-of($value) != type-of(map-get($options, $key)) { + @error "The #{$key} value #{$value} of type #{type-of($value)} does not match the required type #{type-of(map-get($options, $key))}."; + } + $options: map-merge($options, ($key: $value)); + } + @if map-get($options, end-on) != "" and map-get($options, iterations) == infinite { + @warn "The end-on string will only be rendered when iterating a finite number of times. The current animation has an iterations value of infinite so the end-on value will be ignored and never rendered."; + } + } + $options-complete: true; + } @else { + @error "No additional arguments are permitted after the options object."; + } + $parameter-nth: $parameter-nth + 1; + } + $dur-char-fwd: map-get($speeds, type); + $dur-full-gap: map-get($speeds, pause-typed); + $dur-char-bwd: map-get($speeds, delete); + $dur-done-gap: map-get($speeds, pause-deleted); + $animation-delay: map-get($options, delay); + $final-string: __typed-inject-pauses(if(map-get($options, end-on) != "", map-get($options, end-on), nth($strings, 1))); + $alt-text: if(map-get($options, alt-text) != "", map-get($options, alt-text), $final-string); + $caret-width: map-get($options, caret-width); + $caret-color: map-get($options, caret-color); + $caret-space: map-get($options, caret-space); + $caret-speed: map-get($options, caret-speed); + $global-styles: map-get($options, styles); + $end-styles: map-get($options, end-styles); + $type-pausing: map-get($options, type-pausing); + $type-pausing-default: map-get($options, type-pausing-default); + $prefix: map-get($options, prefix); + @if $type-pausing { + @for $nth from 1 through length($strings) { + $strings: set-nth($strings, $nth, __typed-inject-pauses(nth($strings, $nth), $type-pausing-default)); + } + } + @if $caret-speed < 0s { + @error "Delay requires a positive number value (integer or float) without units. #{$caret-speed} is less than 0."; + } + @if $animation-delay < 0s { + @error "Delay requires a positive number value (integer or float) without units. #{$animation-delay} is less than 0."; + } + $iterations: map-get($options, iterations); + // initializing some values ✊🏼 + $animation-name: ""; + @if map-get($options, name) != "" { + $animation-name: #{map-get($options, name)}; + } @else { + $animation-name: typed-#{$__typed-id}; + $__typed-id: $__typed-id + 1 !global; + } + $dur-total: 0; + @each $string in $strings { + $fwd-length: str-length(__typed-remove-bwd-pause-chars($string)); + $bwd-length: str-length(__typed-remove-fwd-pause-chars($string)); + $dur-total: $dur-total + + $dur-char-fwd * $fwd-length + + $dur-full-gap + + $dur-char-bwd * $bwd-length + + $dur-done-gap + } + &::before { + @include __typed-write-to-content("", $alt-text, $prefix); + white-space: break-spaces; + will-change: content; + @if $iterations == infinite { + animation: #{$animation-name} #{$dur-total}s linear #{$animation-delay}s #{$iterations} forwards; + } @else { + animation: + #{$animation-name} #{$dur-total}s linear #{$animation-delay}s #{$iterations} forwards, + #{$animation-name}-final #{str-length($final-string) * $dur-char-fwd}s linear #{$dur-total * $iterations + $animation-delay}s 1 forwards; + @include __typed-final-build-animation($dur-char-fwd, $final-string, $animation-name, $alt-text, $prefix, $end-styles, map-merge($global-styles, $final-string-styles)); + } + } + @if map-get($options, caret) { + &::after { + content: ""; + position: relative; + display: inline-block; + padding-right: $caret-space; + border-right: #{$caret-width} solid #{$caret-color}; + white-space: nowrap; + animation: #{$animation-name}-caret #{$caret-speed}s linear #{$animation-delay}s infinite forwards; + } + } + // now THIS is where the magic happens... ✨ + @keyframes #{$animation-name} { + @for $i from 1 through length($strings) { + $string: nth($strings, $i); + $fwd-string: __typed-remove-bwd-pause-chars($string); + $fwd-length: str-length($fwd-string); + $bwd-string: __typed-remove-fwd-pause-chars($string); + $bwd-length: str-length($bwd-string); + $combined-length: $fwd-length + $bwd-length; + @for $j from 1 through $combined-length { + @if $j < $combined-length { + #{__typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $i, $j, 0)}, #{__typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $i, $j+1, -.001)} { + @if $j <= $fwd-length { + @include __typed-write-to-content("#{str-slice($fwd-string, 1, $j)}", $alt-text, $prefix); + } @else { + @include __typed-write-to-content("#{str-slice($bwd-string, 1, $bwd-length - ($j - $fwd-length))}", $alt-text, $prefix); + } + @include __typed-spread-styles($strings-styles, $i, $global-styles); + } + } @else { + @if $i < length($strings) { + #{__typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $i, $j, 0)}, #{__typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $i+1, 1, -.001)} { + @include __typed-write-to-content("", $alt-text, $prefix); + @include __typed-spread-styles($strings-styles, $i, $global-styles); + } + } @else { + #{__typed-percent-calculate($dur-char-fwd, $dur-full-gap, $dur-char-bwd, $dur-done-gap, $dur-total, $strings, $i, $j, 0)}, 100% { + @include __typed-write-to-content("", $alt-text, $prefix); + @include __typed-spread-styles($strings-styles, $i, $global-styles); + } + } + } + } + } + } + @if map-get($options, caret) { + @keyframes #{$animation-name}-caret { + 75% { border-color: transparent; } + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 75d8cec..15552ea 100644 --- a/index.html +++ b/index.html @@ -2,56 +2,63 @@ - +
-I’d love to drop anchor in your lagoon. There comes a time in most men’s lives where they feel the need to raise the Black Flag. Always be yourself, unless you can be a pirate. Then always be a pirate.
-Wanna shiver me timbers? That’s quite a cutlass ye got thar, what ye need is a good scabbard! Not all treasure is silver and gold Well actualy piracy is a democracy with captains voted for by the crew.
-Pardon me, but would ya mind if I fired me cannon through your porthole? That’s the finest pirate booty I’ve ever laid eyes on. And that was done without a single drop of rum… You will always remember this as the day you almost caught Captain Jack Sparrow. Life’s pretty good, and why wouldn’t it be? I’m a pirate, after all.
+I'm a passionate beginner full-stack web developer with a love for coding and web design. Eager to learn and expand my skills, I also have a strong interest in AI image generation and machine learning, especially in chatbots and creative AI. I believe these technologies should enhance, not replace, human work, and I'm excited about how they can shape the future.
+In my younger years I studied to be an electrician, but working in this field would not have fulfilled me. I went through a lot of short-term jobs before being employed by several companies as a sales professional.
+My goal is to work as a full-stack developer and contribute to meaningful projects, such as Pivoneers.eu — a startup aimed at renovating and revitalizing old websites. I aspire to be part of a dedicated team that brings fresh life to the digital world.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.
+ +PLACEHOLDER TEXT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.
+ +PLACEHOLDER TEXT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.
+ +PLACEHOLDER TEXT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.
+ +PLACEHOLDER TEXT
=Qa(be,he)){if(ie&&Ae()&&!de)for(i=ie.parentNode;i&&i!==We;)i._pinOffset&&(B-=i._pinOffset,q-=i._pinOffset),i=i.parentNode}else o=mb(ae),s=he===Fe,a=Ae(),G=parseFloat(j(he.a))+_,!y&&1=q})},Te.update=function(e,t,r){if(!de||r||e){var n,o,i,a,s,l,c,u=!0===rt?re:Te.scroll(),f=e?0:(u-B)/N,d=f<0?0:1u+(u-R)/(at()-Ke)*M&&(d=.9999)),d!==p&&Te.enabled){if(a=(s=(n=Te.isActive=!!d&&d<1)!=(!!p&&p<1))||!!d!=!!p,Te.direction=p =Qa(be,he),fe)if(e||!n&&!l)oc(ae,U);else{var g=wt(ae,!0),h=u-B;oc(ae,We,g.top+(he===Fe?h:0)+xt,g.left+(he===Fe?0:h)+xt)}Et(n||l?W:V),$&&d<1&&n||b(G+(1!==d||l?0:Q))}}else b(Ia(G+Q*d));!ue||A.tween||je||it||te.restart(!0),S&&(s||ce&&d&&(d<1||!tt))&&Ve(S.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](S.className)}),!T||ve||e||T(Te),a&&!je?(ve&&(c&&("complete"===i?O.pause().totalProgress(1):"reset"===i?O.restart(!0).pause():"restart"===i?O.restart(!0):O[i]()),T&&T(Te)),!s&&tt||(k&&s&&Xa(Te,k),xe[o]&&Xa(Te,xe[o]),ce&&(1===d?Te.kill(!1,1):xe[o]=0),s||xe[o=1===d?1:3]&&Xa(Te,xe[o])),pe&&!n&&Math.abs(Te.getVelocity())>(Ua(pe)?pe:2500)&&(Wa(Te.callbackAnimation),ee?ee.progress(1):Wa(O,"reverse"===i?1:!d,1))):ve&&T&&!je&&T(Te)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(Y._isFlipped?1:0)),x(v)}C&&C(-u/de.duration()*(de._caScrollDist||0))}},Te.enable=function(e,t){Te.enabled||(Te.enabled=!0,wb(be,"resize",Lb),me||wb(be,"scroll",Jb),Se&&wb(ScrollTrigger,"refreshInit",Se),!1!==e&&(Te.progress=Oe=0,D=R=Me=Ae()),!1!==t&&Te.refresh())},Te.getTween=function(e){return e&&A?A.tween:ee},Te.setPositions=function(e,t,r,n){if(de){var o=de.scrollTrigger,i=de.duration(),a=o.end-o.start;e=o.start+a*e/i,t=o.start+a*t/i}Te.refresh(!1,!1,{start:Da(e,r&&!!Te._startClamp),end:Da(t,r&&!!Te._endClamp)},n),Te.update()},Te.adjustPinSpacing=function(e){if(Z&&e){var t=Z.indexOf(he.d)+1;Z[t]=parseFloat(Z[t])+e+xt,Z[1]=parseFloat(Z[1])+e+xt,Et(Z)}},Te.disable=function(e,t){if(Te.enabled&&(!1!==e&&Te.revert(!0,!0),Te.enabled=Te.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Se&&xb(ScrollTrigger,"refreshInit",Se),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=Tt.length;r--;)if(Tt[r].scroller===be&&Tt[r]!==Te)return;xb(be,"resize",Lb),me||xb(be,"scroll",Jb)}},Te.kill=function(e,t){Te.disable(e,t),ee&&!t&&ee.kill(),a&&delete St[a];var r=Tt.indexOf(Te);0<=r&&Tt.splice(r,1),r===Qe&&0 i&&(b()>i?a.progress(1)&&b(i):a.resetTo("scrollY",i))}Va(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,i,l,o,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||Je,g=He.core.globals().ScrollSmoother,h=g&&g.get(),v=E&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=K(p,Fe),m=K(p,Ye),y=1,x=(k.isTouch&&Ne.visualViewport?Ne.visualViewport.scale*Ne.visualViewport.width:Ne.outerWidth)/Ne.innerWidth,w=0,_=Ta(t)?function(){return t(n)}:function(){return t||2.8},C=xc(p,e.type,!0,r),T=Ha,S=Ha;return v&&He.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return E&&"touchmove"===e.type&&function ignoreDrag(){if(o){requestAnimationFrame(zq);var e=Ia(n.deltaY/2),t=S(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ia((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=Ie.cache,Z()}return!0}b.offset&&Dq(),o=!0}()||1.05 =i||i-1<=r)&&He.to({},{onUpdate:Jq,duration:o})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3 a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0 X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur (n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&Ct(t,"onInterrupt"),t}function wb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Wt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(ze,i,_e)}else At.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1 >16,e>>8&St,e&St]:0:zt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),zt[e])p=zt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=c=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3 =U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(Z(i)?i[0]:i).totalDuration()),1 =r&&t e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start =n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0 =this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0 =i&&(a instanceof $t?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0 r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=$t.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||X,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||Z(t)||$(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(Z(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Nt,Gt,Wt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?re:te:Zt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(d=ka(p,n)+(Ya(p)||0))&&0!==d||(n=d))),!f||p!==n||Gt)return isNaN(p*n)||""===n?(c||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ka(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m ")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o =t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),D.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||Rt.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Gt=1,t.vars[e]="+=0",Qt(t,s),Gt=0,o?R(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ia(r)+Ya(h.e)),h.b&&(h.b=u.s+Ya(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Mt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa($t.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){$t[r]=function(){var t=new Xt,e=kt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Zt=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:Zt},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ae,this.d=s||this,this.set=o||Zt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=$t,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2 { + const text = document.getElementById(element.id); + const range = element.range; + + function updateShadow(event) { + const x = Math.round(event.clientX * range / window.innerWidth) - range / 2; + const y = Math.round(event.clientY * range / window.innerHeight) - range / 2; + gsap.to(text, { + '--x': x, + '--y': y, + }); + } + + document.body.addEventListener('mousemove', updateShadow); +}); \ No newline at end of file diff --git a/script/wordflick.js b/script/wordflick.js new file mode 100644 index 0000000..e936b93 --- /dev/null +++ b/script/wordflick.js @@ -0,0 +1,72 @@ +var words = ['a Junior Full-Stack Developer', 'a Designer', 'an AI Artist', 'a dog lover'], + part, + i = 0, + offset = 0, + len = words.length, + forwards = true, + skip_count = 0, + skip_delay = 15, + speed = 100; + +var cursorVisible = true; // Flag to control cursor visibility + +// Function to create a flashing cursor +var createFlashingCursor = function() { + var cursor = document.createElement('span'); + cursor.className = 'cursor'; + cursor.textContent = '|'; // Cursor character + return cursor; +}; + +var wordflick = function () { + setInterval(function () { + if (forwards) { + if (offset >= words[i].length) { + ++skip_count; + if (skip_count == skip_delay) { + forwards = false; + skip_count = 0; + } + } + } else { + if (offset == 0) { + forwards = true; + i++; + offset = 0; + if (i >= len) { + i = 0; + } + } + } + part = words[i].substr(0, offset); + if (skip_count == 0) { + if (forwards) { + offset++; + } else { + offset--; + } + } + + // Update the text and append the cursor + var wordElement = $('.word'); // Cache the jQuery selector + wordElement.html(' ' + part + '
'); // Update the text in the h2 + + // Clear previous cursor and append new one + $('.cursor').remove(); // Remove existing cursor if present + wordElement.append(createFlashingCursor()); // Append new cursor + }, speed); +}; + +// Function to handle the blinking cursor effect +var blinkCursor = function() { + setInterval(function () { + var cursorElement = $('.cursor'); + cursorVisible = !cursorVisible; // Toggle visibility + cursorElement.css('opacity', cursorVisible ? 1 : 0); // Change opacity for blinking effect + }, 500); // Change this value to adjust the blinking speed (e.g., 500 ms) +}; + +$(document).ready(function () { + wordflick(); // Start the word flicking animation + blinkCursor(); // Start the cursor blinking effect +}); \ No newline at end of file