diff options
Diffstat (limited to 'static/css/index.css')
| -rw-r--r-- | static/css/index.css | 529 |
1 files changed, 529 insertions, 0 deletions
diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..0d79215 --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,529 @@ +/* Animation */
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes fade-bottom {
+ 0% {
+ transform: translateY(50px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+@keyframes fade-left {
+ 0% {
+ transform: translateX(-10px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fade-right {
+ 0% {
+ transform: translateX(20px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+/* Header animation */
+@keyframes fade-up {
+ 0% {
+ transform: translateY(-10px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+header .navbar {
+ animation: fade-up 0.5s ease-in;
+}
+
+/* ToolTip */
+
+.tooltip {
+ line-height: 1rem;
+ border-radius: .5rem !important;
+}
+.tooltip-inner {
+ line-height: 1rem;
+}
+.tooltip .tooltip-arrow {
+ visibility: hidden !important;
+}
+
+/* hero */
+
+#hero {
+ min-height: 100vh;
+ line-height: 2rem;
+ max-width: 100%;
+}
+
+#hero .content {
+ animation: fade-left 1s ease-out;
+}
+
+#hero .hero-bottom-svg {
+ opacity: 0.5;
+ position: absolute;
+ bottom: -50px;
+ left: -150px;
+}
+
+#hero .subtitle {
+ font-size: clamp(14px,5vw,16px);
+ opacity: 0.6;
+}
+
+#hero h2 {
+ font-size: clamp(40px, 8vw, 80px);
+ color: var(--primary-color) !important;
+}
+
+#hero h3 {
+ font-size: clamp(40px, 8vw, 60px);
+ /* color: var(--primary-color) !important; */
+ opacity: 0.5;
+}
+
+#hero p {
+ margin: 20px 0px 0px;
+ max-width: 640px;
+ opacity: 0.8;
+}
+
+#hero .image img {
+ animation: fade-in 1s ease-out;
+ box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+ transition: box-shadow 0.3s;
+ padding: 0;
+ border: 0;
+ border: 2px solid var(--secondary-color);
+ border-radius: 1rem;
+}
+
+#hero .image img:hover {
+ box-shadow: 0 0 11px rgb(15 80 100 / 20%);
+ filter: contrast(1.2);
+ cursor: pointer;
+}
+
+#hero a.btn.social-icon {
+ color: var(--primary-color) !important;
+ line-height: 0%;
+ border-radius: 50%;
+ margin-top: 50px;
+ padding: 0.7rem;
+ border: 1px solid var(--primary-color);
+ transition: none;
+}
+
+#hero a.btn.social-icon img {
+ width: 1em;
+}
+
+#hero a.btn.social-icon:hover {
+ opacity: 0.8;
+}
+
+#hero a.btn {
+ margin-top: 50px;
+ padding: 0.7rem 1.75rem;
+ border: 1px solid var(--primary-color);
+ color: var(--text-color) !important;
+ border-radius: .75rem;
+ transition: none;
+}
+
+#hero a.btn:focus {
+ box-shadow: none;
+}
+
+#hero a.btn:hover {
+ background-color: var(--secondary-color) !important;
+ color: var(--text-color) !important;
+ opacity: 0.9;
+}
+
+#hero a.btn.social-icon:hover {
+ background-color: var(--background-color) !important;
+ opacity: 0.7;
+}
+
+#hero .hero-content > a {
+ display: inline-block;
+ text-decoration: none;
+ color: var(--primary-color) !important;
+}
+
+#hero .hero-content > a::after {
+ content: "";
+ display: block;
+ width: 0px;
+ height: 2px;
+ bottom: 0.37em;
+ background-color: var(--primary-color);
+ transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+ opacity: 0.5;
+}
+
+#hero .hero-content > a:hover::after, #hero .hero-content > a:focus::after, #hero .hero-content > a:active::after {
+ width: 100%;
+}
+
+/* about me */
+#about h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#about .image img {
+ box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+ transition: box-shadow 0.3s;
+ padding: 0;
+ border: 0;
+}
+
+#about .image img:hover {
+ box-shadow: 0 0 11px rgb(15 80 100 / 20%);
+}
+
+#about ul {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(140px, 200px));
+ gap: 0px 10px;
+ padding: 0px;
+ margin: 20px 0px 0px;
+ overflow: hidden;
+ list-style: none;
+}
+
+#about ul li {
+ position: relative;
+ margin-bottom: 10px;
+ padding-left: 20px;
+}
+
+#about ul li::before {
+ content: "▹";
+ color: var(--primary-color);
+ position: absolute;
+ left: 0px;
+}
+
+#about .content {
+ font-weight: 500;
+ opacity: 0.9 !important;
+ line-height: 1.7rem !important;
+}
+
+#about a {
+ display: inline-block;
+ text-decoration: none;
+ color: var(--primary-color) !important;
+}
+
+#about a::after {
+ content: "";
+ display: block;
+ width: 0px;
+ height: 2px;
+ bottom: 0.37em;
+ background-color: var(--primary-color);
+ transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+ opacity: 0.5;
+}
+
+#about a:hover::after, #about a:focus::after, #about a:active::after {
+ width: 100%;
+}
+
+/* experience */
+
+#experience h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#experience * {
+ background-color: transparent !important;
+}
+
+#experience .tab-pane > * {
+ opacity: 0.9;
+}
+
+#experience .tab-pane small {
+ opacity: 0.8;
+}
+
+#experience .tab-pane ul {
+ padding-top: 1%;
+ padding-bottom: 1%;
+}
+
+#experience .experience-container .tab-content > .tab-pane p {
+ padding: 1% 0;
+ margin: 0;
+}
+
+#experience .experience-container {
+ background-color: var(--secondary-color) !important;
+ border-radius: .75rem;
+ box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
+}
+
+#experience .nav-item .nav-link {
+ color: var(--text-color) !important;
+ border-bottom: 2px solid transparent;
+ border-radius: 0%;
+ transition: none;
+}
+
+#experience .nav-item .nav-link.active {
+ color: var(--text-color) !important;
+ border-bottom: 2px solid var(--primary-color);
+ opacity: 0.8;
+}
+
+#experience .nav-item .nav-link.active:hover {
+ transition: none !important;
+}
+
+#experience .nav-item .nav-link:hover {
+ border-bottom: 2px solid var(--primary-color);
+ opacity: 0.8;
+}
+
+#experience a {
+ opacity: 0.9;
+ display: inline-block;
+ text-decoration: none;
+ color: var(--primary-color) !important;
+}
+
+#experience a::after {
+ content: "";
+ display: block;
+ width: 0px;
+ height: 2px;
+ bottom: 0.37em;
+ background-color: var(--primary-color);
+ transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+ opacity: 0.5;
+}
+
+#experience a:hover::after, #experience a:focus::after, #experience a:active::after {
+ width: 100%;
+}
+
+#experience .experience-container .tab-content .tab-pane ul {
+ overflow: hidden;
+ list-style: none;
+ margin-bottom: 0;
+}
+
+#experience .experience-container .tab-content .tab-pane ul li {
+ position: relative;
+ margin-bottom: 10px;
+ padding-left: 20px;
+}
+
+#experience .experience-container .tab-content .tab-pane ul li::before {
+ content: "▹";
+ color: var(--primary-color);
+ position: absolute;
+ left: 0px;
+}
+
+#experience .experience-container .tab-content .tab-pane .featuredLink a::after {
+ display: block;
+ width: auto;
+ height: auto;
+ bottom: 0em;
+ background-color: transparent;
+ transition: none;
+ opacity: 1;
+}
+
+#experience .experience-container .tab-content .tab-pane .featuredLink a.btn {
+ border: 1px solid var(--primary-color);
+ border-radius: .75rem;
+ transition: none;
+}
+
+#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus {
+ box-shadow: none;
+}
+
+#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover {
+ color: var(--text-color) !important;
+ opacity: 0.7;
+}
+
+/* Education */
+
+#education .container > h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#education .row .index {
+ opacity: 0.8;
+ padding: 13px 20px;
+ line-height: 0%;
+ border-radius: 50%;
+ max-height: 50px;
+ z-index: 2;
+ background-color: var(--primary-color) !important;
+ color: var(--secondary-color) !important;
+ font-weight: bold;
+}
+
+#education .card * {
+ background-color: var(--secondary-color) !important;
+}
+
+#education .card {
+ border-radius: 1.5rem;
+ box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
+ border: 2px solid var(--text-secondary-color) !important;
+ transition: box-shadow .2s linear,opacity .2s linear;
+ transition: transform 0.2s;
+}
+
+#education .card .card-body {
+ border-radius: 1.5rem;
+ padding: 2rem;
+}
+
+@media all and (max-width:768px) {
+ #education .card .card-body {
+ padding: 2rem 1rem;
+ }
+}
+
+#education .card:hover {
+ transition: 0.3s;
+ box-shadow: 0 4px 11px rgb(15 80 100 / 16%);
+ border: 2px solid var(--primary-color) !important;
+}
+
+#education .card .card-body .education-content a {
+ color: var(--primary-color) !important;
+ text-decoration: none;
+ opacity: 0.9;
+}
+
+#education .card .card-body > a h6 {
+ display: inline-block;
+ text-decoration: none;
+ color: var(--primary-color) !important;
+}
+
+#education .card .card-body > a h6::after {
+ content: "";
+ display: block;
+ width: 0px;
+ height: 2px;
+ bottom: 0.37em;
+ background-color: var(--primary-color);
+ transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+ opacity: 0.5;
+}
+
+#education .card .card-body > a h6:hover::after, #education .card .card-body > a h6:focus::after, #education .card .card-body > a h6:active::after {
+ width: 100%;
+}
+
+#education .card .card-body a.btn {
+ opacity: 0.9;
+ border: 1px solid var(--primary-color) !important;
+ color: var(--text-color) !important;
+ border-radius: .75rem;
+ box-shadow: none;
+ transition: none;
+}
+
+#education .card .card-body a.btn:hover {
+ opacity: 0.8;
+}
+
+/* achievements */
+
+#achievements a {
+ text-decoration: none;
+}
+
+#achievements h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#achievements .card {
+ background-color: var(--secondary-color) !important;
+ border-radius: 1rem;
+ box-shadow: 0 0 36px rgba(0,0,0,0.1);
+ /* transform: translate3d(0, 0, 0); */
+ transition: box-shadow .2s linear,opacity .2s linear;
+ border: 2px solid transparent;
+}
+
+#achievements a.card {
+ cursor: alias;
+}
+
+#achievements .card h5 {
+ color: var(--text-color) !important;
+ opacity: 0.9;
+}
+
+#achievements .card:hover {
+ border: 2px solid var(--text-color);
+ transition: .3s;
+}
+#achievements .card:focus {
+ border: 2px solid var(--text-color);
+ transition: .3s;
+}
+
+#achievements .card-text {
+ background-color: var(--secondary-color) !important;
+ color: var(--text-secondary-color) !important;
+}
+
+/* contact */
+
+#contact h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#contact .btn {
+ transition: none;
+ transition: opacity 0.3s;
+ border-radius: .5rem !important;
+ border-color: var(--primary-color) !important;
+ background-color: var(--secondary-color) !important;
+ color: var(--text-color) !important;
+}
+
+#contact .btn:hover {
+ opacity: .7;
+}
+
+#contact .btn:focus {
+ box-shadow: none !important;
+}
\ No newline at end of file |