diff --git a/assets/apple-icon.png b/assets/apple-icon.png
new file mode 100644
index 0000000..ab2930c
Binary files /dev/null and b/assets/apple-icon.png differ
diff --git a/index.html b/index.html
index 4469174..680d023 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,63 @@
+
- Document
-
+ Profile || Template
+
+
+
+
+
-
-
+
+
+
+
-
-
-
+
+
+
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 1f592fa..375e785 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,24 +1,27 @@
body {
margin: 0;
padding: 0;
+ background-color: #aaa;
font-family: "Poppins", sans-serif;
color: #fff;
}
header {
- height: 100vh;
- background-color: #000;
+ height: 100%;
+ max-height: 720px;
background-image: url("../assets/me2.png");
background-repeat: no-repeat;
- background-position: 45rem 50%;
- background-size: 55%;
+ background-position: 95% 100%;
+ background-size: 45rem;
+ background-color: #000;
+ position: relative;
}
header nav {
- padding: 2rem 5rem;
+ padding: 1% 5%;
}
-header nav p {
+header nav .nav-name {
font-size: 1.5rem;
font-family: "Rubik Mono One", sans-serif;
}
@@ -27,54 +30,44 @@ header .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- padding: 4rem 5%;
+ padding: 1% 5%;
}
header .container .line-section {
position: relative;
- margin-right: auto;
+ margin-right: 5%;
}
header .container .line-section .line {
- width: 1px;
- height: 350px;
- background-color: #fff;
+ width: 0.5px;
+ height: 70%;
+ background-color: #ffffff;
margin: 1rem auto;
}
-header .container .line-section p {
+header .container .line-section #year {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
- margin: auto;
+ margin: 0.5rem auto;
}
header .container .line-section::after {
content: '';
position: absolute;
- width: 2rem;
- height: 2rem;
+ width: 1.5rem;
+ height: 1.5rem;
background-color: #fff;
border-radius: 50%;
- left: -3px;
- bottom: 2rem;
-}
-
-header .container .line-section::before {
- content: '';
- position: absolute;
- width: 2.5rem;
- height: 2.5rem;
- border: 2px solid #aaa;
- border-radius: 50%;
- left: -9px;
- bottom: 1rem;
+ left: 0;
+ bottom: auto;
+ -webkit-box-shadow: 1px 1px 50px #56cbf2;
+ box-shadow: 1px 1px 50px #56cbf2;
}
header .container .header-text {
- margin-right: 50%;
- padding: 5%;
+ padding: 2rem;
}
header .container .header-text .display-6 {
@@ -85,6 +78,9 @@ header .container .header-text .display-6 {
header .container .header-text .display-1 {
font-size: 5rem;
margin-top: 0;
+ text-shadow: 2px 2px 100px #56cbf2;
+ -webkit-animation: blink 1s linear infinite;
+ animation: blink 1s linear infinite;
}
header .container .header-text .hr-1 {
@@ -111,32 +107,31 @@ header .container .header-text .hr-3 {
border-radius: 1rem;
}
-header .container .header-img img {
- width: 41rem;
-}
-
header .foot {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: auto;
- padding: 0 5rem;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 1% 5%;
}
header .foot .contact .lead {
font-family: "Poppins", sans-serif;
font-size: 1rem;
+ margin-top: 2rem;
+ margin-bottom: auto;
}
header .foot .contact-div {
- margin-left: auto;
width: auto;
}
header .foot .contact-div .contact-me {
font-family: "Rubik Mono One", sans-serif;
- margin-top: 0;
font-size: 1.2em;
+ text-align: center;
}
header .foot .contact-div .icon-tray {
@@ -153,9 +148,207 @@ header .foot .contact-div .icon-tray {
header .foot .contact-div .icon-tray .hr-3 {
margin: auto;
- width: 20%;
+ width: 5rem;
height: 5px;
background-color: #fff;
border-radius: 1rem;
}
+
+header .foot .contact-div .icon-tray .button {
+ margin: 0 4%;
+ padding: 0.5rem 2.5rem;
+ border-radius: 2rem;
+ -webkit-box-shadow: 1px 1px 150px #56cbf2;
+ box-shadow: 1px 1px 150px #56cbf2;
+ background-image: -webkit-gradient(linear, left top, right top, from(#56cbf2), to(#2f81ed));
+ background-image: linear-gradient(to right, #56cbf2 0%, #2f81ed 100%);
+}
+
+header .foot .contact-div .icon-tray .button .a-tag {
+ text-decoration: none;
+ color: #fff;
+}
+
+header .foot .contact-div .icon-tray .button:hover {
+ -webkit-transition: 0.5s all ease-in-out;
+ transition: 0.5s all ease-in-out;
+ -webkit-box-shadow: 10px -10px 200px #56cbf2;
+ box-shadow: 10px -10px 200px #56cbf2;
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+header .foot .contact-div .icon-tray .button:active {
+ -webkit-transition: 0.5s all ease-in-out;
+ transition: 0.5s all ease-in-out;
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+}
+
+@-webkit-keyframes blink {
+ 0% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 0.8;
+ }
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 75% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 0.8;
+ }
+}
+
+@media screen and (max-width: 1260px) {
+ header {
+ height: 100%;
+ max-height: 720px;
+ background-image: url("../assets/me2.png");
+ background-repeat: no-repeat;
+ background-position: 100% 100%;
+ background-size: 70%;
+ background-color: #000;
+ }
+ header .container {
+ padding: 4% 5%;
+ }
+ header .container .header-text {
+ padding: auto;
+ }
+ header .container .header-text .display-6 {
+ font-size: 2.5rem;
+ }
+ header .container .header-text .display-1 {
+ font-size: 4.5rem;
+ }
+ header .container .header-text .hr-1 {
+ margin-top: 1rem;
+ width: auto;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+ header .container .header-text .hr-2 {
+ margin-top: 1rem;
+ width: 50%;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+ header .container .header-text .hr-3 {
+ margin-top: 1rem;
+ width: 30%;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+}
+
+@media (max-width: 720px) {
+ header nav {
+ padding: auto;
+ }
+ header nav .nav-name {
+ font-size: 1.2rem;
+ }
+ header .container {
+ padding: 1% 5%;
+ }
+ header .container .header-text {
+ padding: 10% 2% 20% 2%;
+ }
+ header .container .header-text .display-6 {
+ font-size: 5vw;
+ }
+ header .container .header-text .display-1 {
+ font-size: 10vw;
+ }
+ header .container .header-text .hr-1 {
+ margin-top: 1rem;
+ width: auto;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+ header .container .header-text .hr-2 {
+ margin-top: 1rem;
+ width: 40%;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+ header .container .header-text .hr-3 {
+ margin-top: 1rem;
+ width: 20%;
+ height: 1rem;
+ background-color: #fff;
+ border-radius: 1rem;
+ }
+ header .foot {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ header .foot .contact .lead {
+ text-align: center;
+ margin: auto;
+ }
+ header .foot .contact-div .contact-me {
+ text-align: center;
+ }
+}
+
+@media (max-width: 480px) {
+ header {
+ height: 100%;
+ max-height: 720px;
+ background-image: url("../assets/me2.png");
+ background-repeat: no-repeat;
+ background-position: 8rem 100%;
+ background-size: 35rem;
+ background-color: #000;
+ height: 100vh;
+ }
+ header nav {
+ padding: 4% 8%;
+ }
+ header nav .nav-name {
+ font-size: 1rem;
+ }
+ header .container {
+ padding: 6% 8%;
+ }
+ header .container .header-text {
+ padding: 20% 2%;
+ }
+ header .foot {
+ padding: 5%;
+ }
+ header .foot .contact .lead {
+ font-size: 0.8rem;
+ padding-top: 5%;
+ text-align: center;
+ margin: 2rem auto auto auto;
+ }
+ header .foot .contact-div .contact-me {
+ text-align: center;
+ }
+}
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/styles/style.css.map b/styles/style.css.map
index bdadda2..01381c4 100644
--- a/styles/style.css.map
+++ b/styles/style.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
- "mappings": "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",
+ "mappings": "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",
"sources": [
"style.scss"
],
diff --git a/styles/style.scss b/styles/style.scss
index 3de1cef..e94ba23 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -8,22 +8,26 @@ $contactFontFamily: 'Goldman',cursive;
$boldFont:'Rubik Mono One',sans-serif;
$display-1: 5rem;
$display-6:3rem;
+$display-1-size: 4.5rem;
+$display-6-size: 2.5rem;
$textColor: #fff;
-@mixin bg() {
- height: 100vh;
- background-color: #000;
+@mixin bg($position-X, $position-Y, $size) {
+ height: 100%;
+ max-height: 720px;
background-image: url('../assets/me2.png');
background-repeat: no-repeat;
- background-position: 45rem 50%;
- background-size: 55%;
-
+ //background-position: 95% 50%;
+ //background-size: 45rem;
+ background-position: $position-X $position-Y;
+ background-size: $size;
+ background-color: #000;
}
@mixin hr($widthY) {
- margin-top:1rem;
+ margin-top: 1rem;
width: $widthY;
height: 1rem;
background-color: #fff;
@@ -36,137 +40,348 @@ $textColor: #fff;
body {
margin: 0;
padding: 0;
+ background-color: #aaa;
font-family: $commonFontFamily;
color: $textColor;
+ //text-shadow: 2px 2px 5px #56cbf2;
}
header {
- @include bg();
+ @include bg(95%, 100%, 45rem);
+ position: relative;
nav {
- padding: 2rem 5rem;
+ padding: 1% 5%;
//background-color: #1a1a1a;
- p {
+ .nav-name {
font-size: $navHeader;
-
font-family: $boldFont;
}
}
.container {
display: flex;
- padding: 4rem 5%;
-
+ padding: 1% 5%;
+
+
//border: 2px solid #aaa;
.line-section {
- //border: 2px solid #aaa;
- position: relative;
- margin-right: auto ;
+ //border: 2px solid #aaa;
+ position: relative;
+ margin-right: 5%;
+
.line {
- width: 1px;
- height: 350px;
- background-color: #fff;
+ width: 0.5px;
+ height: 70%;
+ background-color: #ffffff;
margin: 1rem auto;
+
}
- p {
+ #year {
writing-mode: vertical-rl;
text-orientation: upright;
- margin: auto;
+ margin: 0.5rem auto;
}
- &::after{
+
+ &::after {
content: '';
position: absolute;
- width: 2rem;
- height: 2rem;
+ width: 1.5rem;
+ height: 1.5rem;
background-color: #fff;
border-radius: 50%;
- left: -3px;
- bottom: 2rem;
- }
- &::before{
- content: '';
- position: absolute;
- width: 2.5rem;
- height: 2.5rem;
- border: 2px solid #aaa;
- border-radius: 50%;
- left: -9px;
- bottom: 1rem;
+ left: 0;
+ bottom: auto;
+ box-shadow: 1px 1px 50px #56cbf2;
}
+
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // width: 2.5rem;
+ // height: 2.5rem;
+ // border: 0.5px solid #a1a1a1;
+ // border-radius: 50%;
+ // left: -9px;
+ // bottom: -40px;
+ // }
}
- .header-text{
- margin-right:50%;
- padding: 5%;
- //border: 2px solid #aaa;
- .display-6{
+ .header-text {
+ //margin-right: 40%;
+ padding: 2rem;
+
+ //border: 2px solid #313131;
+ .display-6 {
font-size: $display-6;
margin-bottom: 0;
}
- .display-1{
+
+ .display-1 {
font-size: $display-1;
margin-top: 0;
+ text-shadow: 2px 2px 100px #56cbf2;
+ animation: blink 1s linear infinite;
}
- .hr-1{
+
+ .hr-1 {
@include hr(auto)
}
- .hr-2{
+
+ .hr-2 {
@include hr(60%)
}
- .hr-3{
- @include hr(40%)
- }
- }
- .header-img{
- //border: 2px solid #aaa;
-
- img{
-
- width: 41rem;
+ .hr-3 {
+ @include hr(40%)
}
}
}
- .foot{
+ .foot {
display: flex;
+ justify-content: space-between;
+ padding: 1% 5%;
+ //margin-top: auto;
+ //border: 0.5px solid #aaa;
//background-color: #1a1a1a;
- margin: auto;
- padding: 0 5rem;
- //border: 2px solid #aaa;
- .contact{
- // border: 2px solid #aaa;
- .lead{
- font-family: $commonFontFamily;
- font-size: 1rem;
+
+ .contact {
+ //border: 0.5px solid #aaa;
+
+ .lead {
+ font-family: $commonFontFamily;
+ font-size: 1rem;
+ margin-top: 2rem;
+ margin-bottom: auto;
}
}
- .contact-div{
- margin-left: auto;
- //border: 2px solid #aaa;
+ .contact-div {
width: auto;
- .contact-me{
+ //border: 2px solid #aaa;
+
+ .contact-me {
font-family: $boldFont;
- margin-top: 0;
- font-size: 1.2em;
+ //margin-top: 0;
+ font-size: 1.2em;
+ text-align: center;
}
- .icon-tray{
+
+ .icon-tray {
display: flex;
justify-content: center;
align-items: center;
- .hr-3{
+
+ .hr-3 {
margin: auto;
- width: 20%;
+ width: 5rem;
height: 5px;
background-color: #fff;
border-radius: 1rem;
}
+
+ .button {
+ margin: 0 4%;
+ padding: 0.5rem 2.5rem;
+ //border: 1px solid #919191;
+ border-radius: 2rem;
+ box-shadow: 1px 1px 150px #56cbf2;
+ background-image: linear-gradient(to right, #56cbf2 0%, #2f81ed 100%);
+
+ .a-tag {
+ text-decoration: none;
+ color: $textColor;
+ }
+ }
+
+ .button:hover {
+ transition: 0.5s all ease-in-out;
+ box-shadow: 10px -10px 200px #56cbf2;
+ transform: scale(1.05);
+ }
+
+ .button:active {
+ transition: 0.5s all ease-in-out;
+ transform: scale(0.8);
+ }
+
}
}
}
+}
+
+
+@keyframes blink {
+ 0% {
+ opacity: 0.2;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+
+ 75% {
+ opacity: 0.5;
+ }
+
+ 100% {
+ opacity: 0.8;
+ }
+}
+
+
+@media screen and (max-width: 1260px) {
+
+ header {
+ @include bg(100%, 100%, 70%);
+
+ .container {
+ padding: 4% 5%;
+
+ .header-text {
+ //border: 2px solid #aaa;
+ padding: auto;
+
+ .display-6 {
+ font-size: $display-6-size;
+ }
+
+ .display-1 {
+ font-size: $display-1-size;
+ }
+
+ .hr-1 {
+ @include hr(auto)
+ }
+
+ .hr-2 {
+ @include hr(50%)
+ }
+
+ .hr-3 {
+ @include hr(30%)
+ }
+ }
+ }
+ }
+
+}
+
+@media (max-width: 720px) {
+ header {
+
+ // @include bg(100%, 100%, 35rem);
+ nav {
+ padding: auto;
+ //background-color: #1a1a1a;
+
+ .nav-name {
+ font-size: 1.2rem;
+ }
+ }
+
+ .container {
+ padding: 1% 5%;
+
+
+ .header-text {
+ padding: 10% 2% 20% 2%;
+
+ //border: 2px solid #aaa;
+ .display-6 {
+ font-size: 5vw;
+ }
+
+ .display-1 {
+ font-size: 10vw;
+ }
+
+ .hr-1 {
+ @include hr(auto)
+ }
+
+ .hr-2 {
+ @include hr(40%)
+ }
+
+ .hr-3 {
+ @include hr(20%)
+ }
+ }
+ }
+
+ .foot {
+ flex-direction: column;
+
+ //padding: 5%;
+ //margin-top:2rem ;
+ .contact {
+ .lead {
+ text-align: center;
+ margin: auto;
+ }
+ }
+
+ .contact-div {
+
+ //margin-top: 2rem;
+ .contact-me {
+ text-align: center;
+ }
+ }
+
+ }
+ }
+}
+
+@media (max-width: 480px) {
+ header {
+ @include bg(8rem, 100%, 35rem);
+ height: 100vh;
+
+ nav {
+ padding: 4% 8%;
+ //background-color: #1a1a1a;
+
+ .nav-name {
+ font-size: 1rem;
+ }
+ }
+
+ .container {
+ padding: 6% 8%;
+
+ .header-text {
+ padding: 20% 2%;
+ }
+ }
+
+ .foot {
+ padding: 5%;
+
+ //margin-top:2rem ;
+ .contact {
+ .lead {
+ font-size: 0.8rem;
+ padding-top: 5%;
+ text-align: center;
+ margin: 2rem auto auto auto;
+ }
+ }
+
+ .contact-div {
+
+ //margin-top: 5%;
+ .contact-me {
+ text-align: center;
+ }
+ }
+
+ }
+ }
}
\ No newline at end of file