diff --git a/asset-manifest.json b/asset-manifest.json index e049466..3971a9e 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,6 +1,6 @@ { "files": { - "main.css": "/static/css/main.31fd3bab.css", + "main.css": "/static/css/main.99841b7d.css", "main.js": "/static/js/main.c7bbdebf.js", "static/media/specializedPreview.png": "/static/media/specializedPreview.8b64ea4c3c5c40097a66.png", "static/media/myntraPreview.png": "/static/media/myntraPreview.0dc084dfacc871608f9a.png", @@ -9,11 +9,11 @@ "static/media/spendwisePreview.png": "/static/media/spendwisePreview.cb9b324a4c1c9af329fd.png", "static/media/todoappPreview.png": "/static/media/todoappPreview.32768c52ad531dd7375e.png", "index.html": "/index.html", - "main.31fd3bab.css.map": "/static/css/main.31fd3bab.css.map", + "main.99841b7d.css.map": "/static/css/main.99841b7d.css.map", "main.c7bbdebf.js.map": "/static/js/main.c7bbdebf.js.map" }, "entrypoints": [ - "static/css/main.31fd3bab.css", + "static/css/main.99841b7d.css", "static/js/main.c7bbdebf.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index e964e54..9b388ba 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Portfolio
\ No newline at end of file +Portfolio
\ No newline at end of file diff --git a/static/css/main.31fd3bab.css b/static/css/main.31fd3bab.css deleted file mode 100644 index 5e77b0c..0000000 --- a/static/css/main.31fd3bab.css +++ /dev/null @@ -1,2 +0,0 @@ -#nav-menu{background-color:#f8f6f7;display:flex;font-size:1.5rem;font-weight:400;gap:5vw;justify-content:center;padding:.75em;position:fixed;top:0;width:100vw;z-index:1}#nav-menu .nav-link{color:#000;display:inline;overflow:hidden;position:relative;text-decoration:none}#nav-menu .nav-link:before{background-color:#000;bottom:0;content:"";display:block;height:3px;left:0;position:absolute;transform:scaleX(0);transform-origin:top left;transition:transform .3s ease;width:100%}#nav-menu .nav-link:hover:before{transform:scaleX(1)}@keyframes typing{0%{width:0}to{width:90%}}#home{background-color:#d7d4d6;border-radius:1em;margin:5em auto 1em;max-width:2000px;padding:0 .5em .5em}#terminal-header{display:flex;justify-content:flex-start}#terminal-header span{display:flex;margin:0 auto}#terminal-header span svg{margin-top:.8em}#buttons{align-items:center;display:flex;gap:.5em}#buttons button{border:none;border-radius:50%;height:1em}#red{background-color:red}#yellow{background-color:#fcba01}#green{background-color:#01d642}#terminal-body{background-color:#5b5c7a;border-bottom-left-radius:1em;border-bottom-right-radius:1em;color:#f8f6f7;display:flex;flex-direction:column;height:40vw;justify-content:center;padding:1em}#terminal-body h1{animation:typing 3s steps(13) forwards;font-size:6vw;letter-spacing:2vw;margin-bottom:.15em;overflow:hidden;text-align:left;white-space:nowrap;width:0}#terminal-body h1 span{color:#e6d184}#terminal-body p{font-size:1.5vw;margin-bottom:1vw;margin-top:.15em;width:0}#welcome-msg{animation:typing 5s steps(30) forwards;animation-delay:2.8s;letter-spacing:.2em;overflow:hidden;white-space:nowrap}#welcome-msg span{color:#3df6f8}#user-detail-name{animation:typing 5s steps(45) forwards;animation-delay:6s;letter-spacing:.2em;overflow:hidden;white-space:nowrap}#user-detail-name span{color:#a1a8ea}#contact{margin:10vh .5em .5em}#contact h1{color:#a1a8ea;font-size:4em;margin-top:0;text-align:center}#contact div{display:flex;gap:4em;justify-content:center;padding-bottom:2em}#contact div svg{height:2.5em;margin-top:0;width:2.5em}#contact div svg:hover{cursor:pointer}#contact-email,#contact-github,#contact-linkedin,#contact-phone{display:flex;flex-direction:column;gap:0;justify-content:center;position:relative}#contact-email:hover .tooltip,#contact-github:hover .tooltip,#contact-linkedin:hover .tooltip,#contact-phone:hover .tooltip{display:inline}.tooltip{background-color:#e6d184;border-radius:10%;color:#fff;display:none;left:-.7em;opacity:.5;padding:.2em;position:absolute;top:-2em}.tooltip:after{border:5px solid #0000;border-top-color:#e6d184;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}#projects{border:1px solid #f8f6f7;margin:0}#projects>h1{color:#a1a8ea;font-size:4rem;margin-bottom:10vh;margin-top:1em;text-align:center}.project-card{background-color:#5b5c7a;border:none;border-radius:1em;box-shadow:0 2px 8px 0 #63636333;display:flex;gap:2em;margin:1.5em;padding:1em}.project-card img{border:none;border-radius:1em;transform-origin:left;transition:transform 2s ease;width:50%}.project-card img:hover{cursor:e-resize;transform:scaleX(2)}.buttons-container{display:flex;justify-content:space-between;margin-top:1em;padding:.5em}.buttons-container button{border:none;border-radius:.5em;color:#f8f6f7;cursor:pointer;font-size:1.5em;padding:.5em;transition:transform .5s}.buttons-container button:hover{transform:translateY(-.25em)}.project-github-link{background-color:#000}.project-deployed-link{background-color:#129ecb}.project-title{color:#3df6f8;font-size:3rem;margin-bottom:0}.project-description{color:#f8f6f7;font-size:1.5rem;letter-spacing:.1em;margin-top:.5em}.project-tech-stack{display:flex;gap:1em;justify-content:flex-start}.project-tech-stack span{border:none;border-radius:.2em;color:#f8f6f7;padding:.5em}.HTML{background-color:#e44d25}.CSS{background-color:#274ce4}.Javascript{background-color:#feca3b}.React{background-color:#129ecb}.Redux{background-color:#774abd}@media screen and not (min-width:1000px){.project-card{flex-direction:column}.project-card img{transition:none;width:100%}.project-card img:hover{cursor:default;transform:none}.project-description{padding:1em}.project-tech-stack{justify-content:center}}@media screen and not (min-width:501px){#projects>h1{font-size:2rem}.project-title{font-size:1.5rem}.project-description{font-size:.75rem}.project-tech-stack{gap:.25em}}#skills{padding:2em}#skills h1{color:#a1a8ea;font-size:4rem;margin-top:1.25em;text-align:center}#skills-container{grid-gap:2em;display:grid;gap:2em;grid-template-columns:repeat(5,1fr);margin:1em}.skills-card{border-radius:.5em;box-shadow:0 2px 8px 0 #63636333;padding:1em;text-align:center;transition:transform .5s ease}.skills-card:hover{cursor:pointer;transform:scale(1.1)}.skills-card-img{height:4em;width:4em}.skills-card-name{color:#5b5c7a}.html{color:#e44d25}.css{color:#274ce4}.javascript{color:#feca3b}.react{color:#129ecb}.redux{color:#774abd}.jira{color:#2584ff}.firebase{color:#fea20b}.mongodb{color:#01694b}.node{color:#026f02}.sass{color:#cd669b}@media screen and (min-width:761px)and (max-width:1000px){#skills-container{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:760px){#skills-container{grid-template-columns:repeat(2,1fr)}}#about{align-items:center;display:flex;justify-content:center;margin:10vh 1em 1em;padding:20vh 0}#about div{width:35%}#about div h1{color:#a1a8ea;font-size:4rem;margin-bottom:0;margin-top:0}#about div p{font-size:1.2rem;letter-spacing:.1em;margin-top:.25em}#about div a{background-color:#a1a8ea;border:none;border-radius:1vw;color:#f8f6f7;cursor:pointer;display:block;font-size:2rem;margin:0 auto;padding:.5em;text-decoration:none;transition:transform .5s ease;width:5.5em}#about div a:hover{transform:translateY(-1vh)}#about img{border-radius:50%;box-shadow:0 2px 8px 0 #63636333;margin-right:2em;shape-outside:circle()}.yellow{color:#e6d184}@media screen and not (min-width:1050px){#about{flex-direction:column}#about div{width:90%}}@media screen and not (min-width:500px){#about img{width:50%}#about div h1{font-size:2rem}#about div p{font-size:1rem}}#statistics{align-items:center;display:flex;gap:.5em;justify-content:center;padding:1em}#statistics img{border:1px solid red;width:30vw}article{align-items:center;background-color:#5b5c7a;border-radius:1em;box-shadow:0 2px 8px 0 #63636333;color:#fff;display:flex;flex-direction:column;font-size:1em;margin:2.5vh;padding:1em;width:90vw}h1{color:#a1a8ea;font-size:4em;margin-top:10vh;text-align:center}@media screen and not (min-width:1000px){#statistics{flex-direction:column}#statistics img{width:70vw}}body{background-color:#f8f6f7;font-family:Roboto Mono,monospace;margin:0;padding:0} -/*# sourceMappingURL=main.31fd3bab.css.map*/ \ No newline at end of file diff --git a/static/css/main.31fd3bab.css.map b/static/css/main.31fd3bab.css.map deleted file mode 100644 index 6671e08..0000000 --- a/static/css/main.31fd3bab.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"static/css/main.31fd3bab.css","mappings":"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","sources":["components/navbar/index.scss","_variables.scss","components/home/index.scss","components/contact/index.scss","components/projects/index.scss","components/skills/index.scss","components/about/index.scss","components/statistics/index.scss","index.scss"],"sourcesContent":["@import \"../../variables\";\n#nav-menu {\n position: fixed;\n width: 100vw;\n top: 0;\n display: flex;\n justify-content: center;\n gap: 5vw;\n padding: 0.75em;\n font-size: 1.5rem;\n font-weight: 400;\n background-color: $white;\n z-index: 1;\n\n .nav-link {\n text-decoration: none;\n color: $black;\n display: inline;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: \"\";\n position: absolute;\n display: block;\n width: 100%;\n height: 3px;\n left: 0;\n bottom: 0;\n background-color: $black;\n transform: scaleX(0);\n transform-origin: top left;\n transition: transform 0.3s ease;\n }\n\n &:hover::before {\n transform: scaleX(1);\n }\n }\n}\n","$white: #f8f6f7;\n$black: #000;\n$purple: #a1a8ea;\n$yellow: #e6d184;\n$blue: #3df6f8;\n$html: #e44d25;\n$css: #274ce4;\n$js: #feca3b;\n$react: #129ecb;\n$redux: #774abd;\n$terminal: #5b5c7a;\n$mongodb: #01694b;\n$firebase: #fea20b;\n$jira: #2584ff;\n$node: #026f02;\n$sass: #cd669b;\n","@import \"../../variables\";\n\n@keyframes typing {\n from {\n width: 0;\n }\n to {\n width: 90%;\n }\n}\n\n#home {\n margin: 1em auto;\n margin-top: 5em;\n border-radius: 1em;\n background-color: #d7d4d6;\n padding: 0 0.5em;\n padding-bottom: 0.5em;\n max-width: 2000px;\n}\n#terminal-header {\n display: flex;\n justify-content: flex-start;\n span {\n display: flex;\n margin: 0 auto;\n svg {\n margin-top: 0.8em;\n }\n }\n}\n#buttons {\n display: flex;\n gap: 0.5em;\n align-items: center;\n button {\n border-radius: 50%;\n border: none;\n height: 1em;\n }\n}\n#red {\n background-color: red;\n}\n#yellow {\n background-color: #fcba01;\n}\n#green {\n background-color: #01d642;\n}\n\n#terminal-body {\n background-color: $terminal;\n color: $white;\n padding: 1em;\n height: 40vw;\n border-bottom-left-radius: 1em;\n border-bottom-right-radius: 1em;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n h1 {\n width: 0;\n font-size: 6vw;\n letter-spacing: 2vw;\n margin-bottom: 0.15em;\n overflow: hidden;\n white-space: nowrap;\n animation: typing 3s steps(13, end) forwards;\n text-align: left;\n\n span {\n color: $yellow;\n }\n }\n\n p {\n width: 0;\n font-size: 1.5vw;\n margin-bottom: 1vw;\n margin-top: 0.15em;\n }\n}\n#welcome-msg {\n overflow: hidden;\n letter-spacing: 0.2em;\n white-space: nowrap;\n animation: typing 5s steps(30, end) forwards;\n animation-delay: 2.8s;\n\n span {\n color: $blue;\n }\n}\n#user-detail-name {\n overflow: hidden;\n letter-spacing: 0.2em;\n white-space: nowrap;\n animation: typing 5s steps(45, end) forwards;\n animation-delay: 6s;\n\n span {\n color: $purple;\n }\n}\n","@import \"../../variables\";\n\n#contact {\n margin: 0.5em;\n margin-top: 10vh;\n h1 {\n text-align: center;\n font-size: 4em;\n color: $purple;\n margin-top: 0;\n }\n div {\n display: flex;\n justify-content: center;\n gap: 4em;\n padding-bottom: 2em;\n svg {\n width: 2.5em;\n height: 2.5em;\n margin-top: 0;\n &:hover {\n cursor: pointer;\n }\n }\n }\n}\n#contact-github,\n#contact-linkedin,\n#contact-phone,\n#contact-email {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n justify-content: center;\n\n &:hover {\n .tooltip {\n display: inline;\n }\n }\n}\n.tooltip {\n position: absolute;\n display: none;\n top: -2em;\n left: -0.7em;\n padding: 0.2em;\n background-color: $yellow;\n opacity: 0.5;\n color: white;\n border-radius: 10%;\n\n &::after {\n content: \" \";\n position: absolute;\n top: 100%; /* At the bottom of the tooltip */\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: $yellow transparent transparent transparent;\n }\n}\n","@import \"../../variables\";\n\n#projects {\n border: 1px solid $white;\n margin: 0;\n}\n#projects > h1 {\n color: $purple;\n font-size: 4rem;\n text-align: center;\n margin-top: 1em;\n margin-bottom: 10vh;\n}\n\n.project-card {\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n background-color: $terminal;\n border: none;\n border-radius: 1em;\n margin: 1.5em;\n display: flex;\n gap: 2em;\n padding: 1em;\n\n img {\n border: none;\n border-radius: 1em;\n width: 50%;\n transition: transform 2s ease;\n transform-origin: left;\n\n &:hover {\n transform: scaleX(2);\n cursor: e-resize;\n }\n }\n}\n.buttons-container {\n display: flex;\n justify-content: space-between;\n margin-top: 1em;\n padding: 0.5em;\n button {\n font-size: 1.5em;\n padding: 0.5em;\n border-radius: 0.5em;\n border: none;\n color: $white;\n transition: transform 500ms;\n cursor: pointer;\n &:hover {\n transform: translateY(-0.25em);\n }\n }\n}\n.project-github-link {\n background-color: $black;\n}\n.project-deployed-link {\n background-color: $react;\n}\n.project-title {\n font-size: 3rem;\n color: $blue;\n margin-bottom: 0;\n}\n.project-description {\n margin-top: 0.5em;\n font-size: 1.5rem;\n letter-spacing: 0.1em;\n color: $white;\n}\n.project-tech-stack {\n display: flex;\n justify-content: flex-start;\n gap: 1em;\n\n span {\n border: none;\n padding: 0.5em;\n border-radius: 0.2em;\n color: $white;\n }\n}\n.HTML {\n background-color: $html;\n}\n.CSS {\n background-color: $css;\n}\n.Javascript {\n background-color: $js;\n}\n.React {\n background-color: $react;\n}\n.Redux {\n background-color: $redux;\n}\n\n@media screen and not (min-width: 1000px) {\n .project-card {\n flex-direction: column;\n img {\n width: 100%;\n transition: none;\n\n &:hover {\n cursor: default;\n transform: none;\n }\n }\n }\n .project-description {\n padding: 1em;\n }\n .project-tech-stack {\n justify-content: center;\n }\n}\n\n@media screen and not (min-width: 501px) {\n #projects > h1 {\n font-size: 2rem;\n }\n .project-title {\n font-size: 1.5rem;\n }\n .project-description {\n font-size: 0.75rem;\n }\n .project-tech-stack {\n gap: 0.25em;\n }\n}\n","@import \"../../variables\";\n#skills {\n padding: 2em;\n h1 {\n color: $purple;\n text-align: center;\n font-size: 4rem;\n margin-top: 1.25em;\n }\n}\n#skills-container {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 2em;\n margin: 1em;\n}\n.skills-card {\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n text-align: center;\n padding: 1em;\n border-radius: 0.5em;\n transition: transform 500ms ease;\n\n &:hover {\n cursor: pointer;\n transform: scale(1.1);\n }\n}\n.skills-card-img {\n height: 4em;\n width: 4em;\n}\n.skills-card-name {\n color: $terminal;\n}\n.html {\n color: $html;\n}\n.css {\n color: $css;\n}\n.javascript {\n color: $js;\n}\n.react {\n color: $react;\n}\n.redux {\n color: $redux;\n}\n.jira {\n color: $jira;\n}\n.firebase {\n color: $firebase;\n}\n.mongodb {\n color: $mongodb;\n}\n.node {\n color: $node;\n}\n.sass {\n color: $sass;\n}\n@media screen and (min-width: 761px) and (max-width: 1000px) {\n #skills-container {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n@media screen and (max-width: 760px) {\n #skills-container {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n","@import \"../../variables\";\n\n#about {\n margin: 1em;\n margin-top: 10vh;\n padding: 20vh 0;\n display: flex;\n justify-content: center;\n align-items: center;\n div {\n width: 35%;\n h1 {\n font-size: 4rem;\n margin-top: 0;\n margin-bottom: 0;\n color: $purple;\n }\n p {\n margin-top: 0.25em;\n font-size: 1.2rem;\n letter-spacing: 0.1em;\n }\n a {\n display: block;\n text-decoration: none;\n color: $white;\n margin: 0 auto;\n padding: 0.5em;\n font-size: 2rem;\n background-color: $purple;\n border: none;\n border-radius: 1vw;\n cursor: pointer;\n transition: transform 500ms ease;\n width: 5.5em;\n &:hover {\n transform: translateY(-1vh);\n }\n }\n }\n img {\n border-radius: 50%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n shape-outside: circle();\n margin-right: 2em;\n }\n}\n.yellow {\n color: $yellow;\n}\n\n@media screen and not (min-width: 1050px) {\n #about {\n flex-direction: column;\n div {\n width: 90%;\n }\n }\n}\n@media screen and not (min-width: 500px) {\n #about {\n img {\n width: 50%;\n }\n div {\n h1 {\n font-size: 2rem;\n }\n p {\n font-size: 1rem;\n }\n }\n }\n}\n","@import \"../../variables\";\n#statistics {\n padding: 1em;\n display: flex;\n gap: 0.5em;\n justify-content: center;\n align-items: center;\n img {\n border: 1px solid red;\n width: 30vw;\n }\n}\n\narticle {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1em;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n margin-top: 5vh;\n border-radius: 1em;\n background-color: $terminal;\n color: white;\n font-size: 1em;\n margin: 2.5vh;\n width: 90vw;\n}\n\nh1 {\n color: $purple;\n font-size: 4em;\n text-align: center;\n margin-top: 10vh;\n}\n\n@media screen and not (min-width: 1000px) {\n #statistics {\n flex-direction: column;\n\n img {\n width: 70vw;\n }\n }\n}\n","@import \"./variables\";\nbody {\n background-color: $white;\n font-family: \"Roboto Mono\", monospace;\n margin: 0;\n padding: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/static/css/main.99841b7d.css b/static/css/main.99841b7d.css new file mode 100644 index 0000000..999fc80 --- /dev/null +++ b/static/css/main.99841b7d.css @@ -0,0 +1,2 @@ +#nav-menu{background-color:#f8f6f7;display:flex;font-size:1.5rem;font-weight:400;gap:5vw;justify-content:center;padding:.75em;position:fixed;top:0;width:100vw;z-index:1}#nav-menu .nav-link{color:#000;display:inline;overflow:hidden;position:relative;text-decoration:none}#nav-menu .nav-link:before{background-color:#000;bottom:0;content:"";display:block;height:3px;left:0;position:absolute;transform:scaleX(0);transform-origin:top left;transition:transform .3s ease;width:100%}#nav-menu .nav-link:hover:before{transform:scaleX(1)}@keyframes typing{0%{width:0}to{width:90%}}#home{background-color:#d7d4d6;border-radius:1em;margin:5em auto 1em;max-width:2000px;padding:0 .5em .5em}#terminal-header{display:flex;justify-content:flex-start}#terminal-header span{display:flex;margin:0 auto}#terminal-header span svg{margin-top:.8em}#buttons{align-items:center;display:flex;gap:.5em}#buttons button{border:none;border-radius:50%;height:1em}#red{background-color:red}#yellow{background-color:#fcba01}#green{background-color:#01d642}#terminal-body{background-color:#5b5c7a;border-bottom-left-radius:1em;border-bottom-right-radius:1em;color:#f8f6f7;display:flex;flex-direction:column;height:40vw;justify-content:center;padding:1em}#terminal-body h1{animation:typing 3s steps(13) forwards;font-size:6vw;letter-spacing:2vw;margin-bottom:.15em;overflow:hidden;text-align:left;white-space:nowrap;width:0}#terminal-body h1 span{color:#e6d184}#terminal-body p{font-size:1.5vw;margin-bottom:1vw;margin-top:.15em;width:0}#welcome-msg{animation:typing 5s steps(30) forwards;animation-delay:2.8s;letter-spacing:.2em;overflow:hidden;white-space:nowrap}#welcome-msg span{color:#3df6f8}#user-detail-name{animation:typing 5s steps(45) forwards;animation-delay:6s;letter-spacing:.2em;overflow:hidden;white-space:nowrap}#user-detail-name span{color:#a1a8ea}#contact{border:1px solid red;margin:10vh .5em .5em}#contact h1{color:#a1a8ea;font-size:4em;margin-top:0;text-align:center}#contact div{display:flex;gap:4em;justify-content:center;padding-bottom:2em}#contact div svg{height:2.5em;margin-top:0;width:2.5em}#contact div svg:hover{cursor:pointer}#contact-email,#contact-github,#contact-linkedin,#contact-phone{display:flex;flex-direction:column;gap:0;justify-content:center;position:relative}#contact-email:hover .tooltip,#contact-github:hover .tooltip,#contact-linkedin:hover .tooltip,#contact-phone:hover .tooltip{display:inline}.tooltip{background-color:#e6d184;border-radius:10%;color:#fff;display:none;left:-.7em;opacity:.5;padding:.2em;position:absolute;top:-2em}.tooltip:after{border:5px solid #0000;border-top-color:#e6d184;content:" ";left:50%;margin-left:-5px;position:absolute;top:100%}@media screen and not (min-width:501px){#contact h1{font-size:2rem}}#projects{border:1px solid #f8f6f7;margin:0}#projects>h1{color:#a1a8ea;font-size:4rem;margin-bottom:10vh;margin-top:1em;text-align:center}.project-card{background-color:#5b5c7a;border:none;border-radius:1em;box-shadow:0 2px 8px 0 #63636333;display:flex;gap:2em;margin:1.5em;padding:1em}.project-card img{border-radius:1em;transform-origin:left;transition:transform 2s ease;width:50%}.project-card img:hover{cursor:e-resize;transform:scaleX(2)}.buttons-container{display:flex;justify-content:space-between;margin-top:1em;padding:.5em}.buttons-container button{border:none;border-radius:.5em;color:#f8f6f7;cursor:pointer;font-size:1.5em;padding:.5em;transition:transform .5s}.buttons-container button:hover{transform:translateY(-.25em)}.project-github-link{background-color:#000}.project-deployed-link{background-color:#129ecb}.project-title{color:#3df6f8;font-size:3rem;margin-bottom:0}.project-description{color:#f8f6f7;font-size:1.5rem;letter-spacing:.1em;margin-top:.5em}.project-tech-stack{display:flex;gap:1em;justify-content:flex-start}.project-tech-stack span{border:none;border-radius:.2em;color:#f8f6f7;padding:.5em}.HTML{background-color:#e44d25}.CSS{background-color:#274ce4}.Javascript{background-color:#feca3b}.React{background-color:#129ecb}.Redux{background-color:#774abd}@media screen and not (min-width:1000px){.project-card{flex-direction:column}.project-card img{transition:none;width:100%}.project-card img:hover{cursor:default;transform:none}.project-description{padding:1em}.project-tech-stack{justify-content:center}}@media screen and not (min-width:501px){#projects>h1{font-size:2rem;margin-bottom:0;margin-top:2.5em}.project-card{gap:0}.project-title{font-size:1.5rem;margin-top:1em}.project-description{font-size:.75rem}.project-tech-stack{gap:.25em}}#skills{padding:2em}#skills h1{color:#a1a8ea;font-size:4rem;margin-top:1.25em;text-align:center}#skills-container{grid-gap:2em;display:grid;gap:2em;grid-template-columns:repeat(5,1fr);margin:1em}.skills-card{border-radius:.5em;box-shadow:0 2px 8px 0 #63636333;padding:1em;text-align:center;transition:transform .5s ease}.skills-card:hover{cursor:pointer;transform:scale(1.1)}.skills-card-img{height:4em;width:4em}.skills-card-name{color:#5b5c7a}.html{color:#e44d25}.css{color:#274ce4}.javascript{color:#feca3b}.react{color:#129ecb}.redux{color:#774abd}.jira{color:#2584ff}.firebase{color:#fea20b}.mongodb{color:#01694b}.node{color:#026f02}.sass{color:#cd669b}@media screen and (min-width:761px)and (max-width:1000px){#skills-container{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:760px){#skills-container{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:501px){#skills h1{font-size:2rem;margin-bottom:1.5em;margin-top:0}#skills-container{grid-template-columns:repeat(1,1fr)}}#about{align-items:center;display:flex;justify-content:center;margin:10vh 1em 1em;padding:20vh 0}#about div{width:35%}#about div h1{color:#a1a8ea;font-size:4rem;margin-bottom:0;margin-top:0}#about div p{font-size:1.2rem;letter-spacing:.1em;margin-top:.25em}#about div a{background-color:#a1a8ea;border:none;border-radius:.5em;color:#f8f6f7;cursor:pointer;display:block;font-size:2rem;margin:0 auto;padding:.5em;text-decoration:none;transition:transform .5s ease;width:5.5em}#about div a:hover{transform:translateY(-1vh)}#about img{border-radius:50%;box-shadow:0 2px 8px 0 #63636333;margin-right:2em;shape-outside:circle()}.yellow{color:#e6d184}@media screen and not (min-width:1050px){#about{flex-direction:column}#about div{width:90%}}@media screen and not (min-width:500px){#about{margin-top:0;padding:.5em}#about img{width:50%}#about div h1{font-size:2rem}#about div a,#about div p{font-size:1rem}#about div a{border-radius:.25em}}#statistics{align-items:center;display:flex;gap:.5em;justify-content:center;padding:1em}#statistics img{width:30vw}article{align-items:center;background-color:#5b5c7a;border-radius:1em;box-shadow:0 2px 8px 0 #63636333;color:#fff;display:flex;flex-direction:column;font-size:1em;margin:1em auto;padding:1em;width:70vw}h1{color:#a1a8ea;font-size:4em;margin-top:10vh;text-align:center}@media screen and not (min-width:1000px){#statistics{flex-direction:column}#statistics img{width:70vw}}@media screen and not (min-width:501px){h1{font-size:2rem;margin-top:1em}}body{background-color:#f8f6f7;font-family:Roboto Mono,monospace;margin:0;padding:0} +/*# sourceMappingURL=main.99841b7d.css.map*/ \ No newline at end of file diff --git a/static/css/main.99841b7d.css.map b/static/css/main.99841b7d.css.map new file mode 100644 index 0000000..7840d10 --- /dev/null +++ b/static/css/main.99841b7d.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.99841b7d.css","mappings":"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","sources":["components/navbar/index.scss","_variables.scss","components/home/index.scss","components/contact/index.scss","components/projects/index.scss","components/skills/index.scss","components/about/index.scss","components/statistics/index.scss","index.scss"],"sourcesContent":["@import \"../../variables\";\n#nav-menu {\n position: fixed;\n width: 100vw;\n top: 0;\n display: flex;\n justify-content: center;\n gap: 5vw;\n padding: 0.75em;\n font-size: 1.5rem;\n font-weight: 400;\n background-color: $white;\n z-index: 1;\n\n .nav-link {\n text-decoration: none;\n color: $black;\n display: inline;\n position: relative;\n overflow: hidden;\n\n &::before {\n content: \"\";\n position: absolute;\n display: block;\n width: 100%;\n height: 3px;\n left: 0;\n bottom: 0;\n background-color: $black;\n transform: scaleX(0);\n transform-origin: top left;\n transition: transform 0.3s ease;\n }\n\n &:hover::before {\n transform: scaleX(1);\n }\n }\n}\n","$white: #f8f6f7;\n$black: #000;\n$purple: #a1a8ea;\n$yellow: #e6d184;\n$blue: #3df6f8;\n$html: #e44d25;\n$css: #274ce4;\n$js: #feca3b;\n$react: #129ecb;\n$redux: #774abd;\n$terminal: #5b5c7a;\n$mongodb: #01694b;\n$firebase: #fea20b;\n$jira: #2584ff;\n$node: #026f02;\n$sass: #cd669b;\n","@import \"../../variables\";\n\n@keyframes typing {\n from {\n width: 0;\n }\n to {\n width: 90%;\n }\n}\n\n#home {\n margin: 1em auto;\n margin-top: 5em;\n border-radius: 1em;\n background-color: #d7d4d6;\n padding: 0 0.5em;\n padding-bottom: 0.5em;\n max-width: 2000px;\n}\n#terminal-header {\n display: flex;\n justify-content: flex-start;\n span {\n display: flex;\n margin: 0 auto;\n svg {\n margin-top: 0.8em;\n }\n }\n}\n#buttons {\n display: flex;\n gap: 0.5em;\n align-items: center;\n button {\n border-radius: 50%;\n border: none;\n height: 1em;\n }\n}\n#red {\n background-color: red;\n}\n#yellow {\n background-color: #fcba01;\n}\n#green {\n background-color: #01d642;\n}\n\n#terminal-body {\n background-color: $terminal;\n color: $white;\n padding: 1em;\n height: 40vw;\n border-bottom-left-radius: 1em;\n border-bottom-right-radius: 1em;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n h1 {\n width: 0;\n font-size: 6vw;\n letter-spacing: 2vw;\n margin-bottom: 0.15em;\n overflow: hidden;\n white-space: nowrap;\n animation: typing 3s steps(13, end) forwards;\n text-align: left;\n\n span {\n color: $yellow;\n }\n }\n\n p {\n width: 0;\n font-size: 1.5vw;\n margin-bottom: 1vw;\n margin-top: 0.15em;\n }\n}\n#welcome-msg {\n overflow: hidden;\n letter-spacing: 0.2em;\n white-space: nowrap;\n animation: typing 5s steps(30, end) forwards;\n animation-delay: 2.8s;\n\n span {\n color: $blue;\n }\n}\n#user-detail-name {\n overflow: hidden;\n letter-spacing: 0.2em;\n white-space: nowrap;\n animation: typing 5s steps(45, end) forwards;\n animation-delay: 6s;\n\n span {\n color: $purple;\n }\n}\n","@import \"../../variables\";\n\n#contact {\n border: 1px solid red;\n margin: 0.5em;\n margin-top: 10vh;\n h1 {\n text-align: center;\n font-size: 4em;\n color: $purple;\n margin-top: 0;\n }\n div {\n display: flex;\n justify-content: center;\n gap: 4em;\n padding-bottom: 2em;\n svg {\n width: 2.5em;\n height: 2.5em;\n margin-top: 0;\n &:hover {\n cursor: pointer;\n }\n }\n }\n}\n#contact-github,\n#contact-linkedin,\n#contact-phone,\n#contact-email {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n justify-content: center;\n\n &:hover {\n .tooltip {\n display: inline;\n }\n }\n}\n.tooltip {\n position: absolute;\n display: none;\n top: -2em;\n left: -0.7em;\n padding: 0.2em;\n background-color: $yellow;\n opacity: 0.5;\n color: white;\n border-radius: 10%;\n\n &::after {\n content: \" \";\n position: absolute;\n top: 100%; /* At the bottom of the tooltip */\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: $yellow transparent transparent transparent;\n }\n}\n\n@media screen and not (min-width: 501px) {\n #contact {\n h1 {\n font-size: 2rem;\n }\n }\n}\n","@import \"../../variables\";\n\n#projects {\n margin: 0;\n border: 1px solid $white;\n}\n#projects > h1 {\n color: $purple;\n font-size: 4rem;\n text-align: center;\n margin-top: 1em;\n margin-bottom: 10vh;\n}\n\n.project-card {\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n background-color: $terminal;\n border: none;\n border-radius: 1em;\n margin: 1.5em;\n display: flex;\n gap: 2em;\n padding: 1em;\n\n img {\n border-radius: 1em;\n width: 50%;\n transition: transform 2s ease;\n transform-origin: left;\n\n &:hover {\n transform: scaleX(2);\n cursor: e-resize;\n }\n }\n}\n.buttons-container {\n display: flex;\n justify-content: space-between;\n margin-top: 1em;\n padding: 0.5em;\n button {\n font-size: 1.5em;\n padding: 0.5em;\n border-radius: 0.5em;\n border: none;\n color: $white;\n transition: transform 500ms;\n cursor: pointer;\n &:hover {\n transform: translateY(-0.25em);\n }\n }\n}\n.project-github-link {\n background-color: $black;\n}\n.project-deployed-link {\n background-color: $react;\n}\n.project-title {\n font-size: 3rem;\n color: $blue;\n margin-bottom: 0;\n}\n.project-description {\n margin-top: 0.5em;\n font-size: 1.5rem;\n letter-spacing: 0.1em;\n color: $white;\n}\n.project-tech-stack {\n display: flex;\n justify-content: flex-start;\n gap: 1em;\n\n span {\n border: none;\n padding: 0.5em;\n border-radius: 0.2em;\n color: $white;\n }\n}\n.HTML {\n background-color: $html;\n}\n.CSS {\n background-color: $css;\n}\n.Javascript {\n background-color: $js;\n}\n.React {\n background-color: $react;\n}\n.Redux {\n background-color: $redux;\n}\n\n@media screen and not (min-width: 1000px) {\n .project-card {\n flex-direction: column;\n img {\n width: 100%;\n transition: none;\n\n &:hover {\n cursor: default;\n transform: none;\n }\n }\n }\n .project-description {\n padding: 1em;\n }\n .project-tech-stack {\n justify-content: center;\n }\n}\n\n@media screen and not (min-width: 501px) {\n #projects > h1 {\n font-size: 2rem;\n margin-top: 2.5em;\n margin-bottom: 0;\n }\n .project-card {\n gap: 0;\n }\n .project-title {\n font-size: 1.5rem;\n margin-top: 1em;\n }\n .project-description {\n font-size: 0.75rem;\n }\n .project-tech-stack {\n gap: 0.25em;\n }\n}\n","@import \"../../variables\";\n#skills {\n padding: 2em;\n h1 {\n color: $purple;\n text-align: center;\n font-size: 4rem;\n margin-top: 1.25em;\n }\n}\n#skills-container {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 2em;\n margin: 1em;\n}\n.skills-card {\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n text-align: center;\n padding: 1em;\n border-radius: 0.5em;\n transition: transform 500ms ease;\n\n &:hover {\n cursor: pointer;\n transform: scale(1.1);\n }\n}\n.skills-card-img {\n height: 4em;\n width: 4em;\n}\n.skills-card-name {\n color: $terminal;\n}\n.html {\n color: $html;\n}\n.css {\n color: $css;\n}\n.javascript {\n color: $js;\n}\n.react {\n color: $react;\n}\n.redux {\n color: $redux;\n}\n.jira {\n color: $jira;\n}\n.firebase {\n color: $firebase;\n}\n.mongodb {\n color: $mongodb;\n}\n.node {\n color: $node;\n}\n.sass {\n color: $sass;\n}\n@media screen and (min-width: 761px) and (max-width: 1000px) {\n #skills-container {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n@media screen and (max-width: 760px) {\n #skills-container {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@media screen and (max-width: 501px) {\n #skills {\n h1 {\n margin-top: 0;\n margin-bottom: 1.5em;\n font-size: 2rem;\n }\n }\n #skills-container {\n grid-template-columns: repeat(1, 1fr);\n }\n}\n","@import \"../../variables\";\n\n#about {\n margin: 1em;\n margin-top: 10vh;\n padding: 20vh 0;\n display: flex;\n justify-content: center;\n align-items: center;\n div {\n width: 35%;\n h1 {\n font-size: 4rem;\n margin-top: 0;\n margin-bottom: 0;\n color: $purple;\n }\n p {\n margin-top: 0.25em;\n font-size: 1.2rem;\n letter-spacing: 0.1em;\n }\n a {\n display: block;\n text-decoration: none;\n color: $white;\n margin: 0 auto;\n padding: 0.5em;\n font-size: 2rem;\n background-color: $purple;\n border: none;\n border-radius: 0.5em;\n cursor: pointer;\n transition: transform 500ms ease;\n width: 5.5em;\n &:hover {\n transform: translateY(-1vh);\n }\n }\n }\n img {\n border-radius: 50%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n shape-outside: circle();\n margin-right: 2em;\n }\n}\n.yellow {\n color: $yellow;\n}\n\n@media screen and not (min-width: 1050px) {\n #about {\n flex-direction: column;\n div {\n width: 90%;\n }\n }\n}\n@media screen and not (min-width: 500px) {\n #about {\n margin-top: 0;\n padding: 0.5em;\n img {\n width: 50%;\n }\n div {\n h1 {\n font-size: 2rem;\n }\n p {\n font-size: 1rem;\n }\n a {\n font-size: 1rem;\n border-radius: 0.25em;\n }\n }\n }\n}\n","@import \"../../variables\";\n#statistics {\n padding: 1em;\n display: flex;\n gap: 0.5em;\n justify-content: center;\n align-items: center;\n img {\n width: 30vw;\n }\n}\n\narticle {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1em;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n margin-top: 5vh;\n border-radius: 1em;\n background-color: $terminal;\n color: white;\n font-size: 1em;\n margin: 1em auto;\n width: 70vw;\n}\n\nh1 {\n color: $purple;\n font-size: 4em;\n text-align: center;\n margin-top: 10vh;\n}\n\n@media screen and not (min-width: 1000px) {\n #statistics {\n flex-direction: column;\n\n img {\n width: 70vw;\n }\n }\n}\n@media screen and not (min-width: 501px) {\n h1 {\n font-size: 2rem;\n margin-top: 1em;\n }\n}\n","@import \"./variables\";\nbody {\n background-color: $white;\n font-family: \"Roboto Mono\", monospace;\n margin: 0;\n padding: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file