diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 2b323ea..79da12a 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -21,4 +21,4 @@ $font-section: 50pt; $font-section-sub: 16pt; $font-heading: 20pt; $font-regular: 16pt; -$font-panel: 200pt; \ No newline at end of file +$font-panel: 200pt; diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss index ff9a78e..17b085a 100644 --- a/src/scss/pages/_home.scss +++ b/src/scss/pages/_home.scss @@ -7,13 +7,14 @@ main { .content { margin-top: 60px; margin-right: 50px; + max-width: 750px; .tag { font-size: $font-hero; + font-weight: $font-bold; } .para { - max-width: 600px; margin: 40px 0; } } @@ -23,6 +24,23 @@ main { width: 100%; } } + + .underline { + display: inline-block; + position: relative; + color: $primary; + + &::after { + position: absolute; + bottom: 2px; + left: 0; + z-index: -1; + content: ''; + width: 100%; + height: 25%; + background: $secondary; + } + } } .work { @@ -103,11 +121,12 @@ main { .contact { margin: 120px 0; display: flex; + flex-direction: column; justify-content: center; align-items: center; .form { - margin-right: 30px; + margin-top: 30px; padding: 15px 30px; max-width: 500px; width: 100%; @@ -145,7 +164,6 @@ main { } .socials { - max-width: 500px; width: 100%; height: 500px; display: flex; @@ -153,24 +171,40 @@ main { justify-content: center; align-items: center; - span { + .socials-container { + width: 100%; display: flex; - justify-content: center; - align-items: center; .about { - - } - margin: 10px 0; + justify-content: space-between; + align-items: center; - img { - margin-right: 10px; - } + .social { + display: flex; + justify-content: center; + align-items: center; + width: 300px; + height: 100px; + background: $tertiary; + border-radius: 5px; + transition: box-shadow 0.2s linear; + font-size: $font-regular; + + img { + margin-right: 10px; + } - a, - a:active, - a:visited { - color: $primary; - text-decoration: none; + a, + a:active, + a:visited { + color: $fg; + text-decoration: none; + } + + &:hover { + cursor: pointer; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); + } } + } } } @@ -279,4 +313,4 @@ main { } } } -} \ No newline at end of file +} diff --git a/src/views/Home.vue b/src/views/Home.vue index 5363c57..8b90d50 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -3,16 +3,16 @@
- Hey! I'm Ayush Mukherjee. + Hey! I'm Ayush Mukherjee.
I'm a software engineer and open-source enthusiast.
-

This website is the digital home of my projects. You can wait for my upcoming blog, learn more about me or say hi!

+

This website is the digital home of my projects. You can wait for my upcoming blog, learn more about me or say hi!

@@ -95,11 +95,11 @@
-
Ways to
Contact Me
+

Wanna say hi, or discuss a project? Leave a message below!

@@ -121,10 +121,21 @@
- Alternatively, I'm also available via: - me@ayushm.com - @ayush123460 - Ayush#4148 +

Alternatively, I'm also available via:

+
+ + + +