diff --git a/index.html b/index.html index 99bc7d9..367ec87 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

Adrian Jules Sales

-

Aspiring Software Developer

+

Aspiring Software Developer

@@ -216,4 +216,4 @@

Connect with me!

- \ No newline at end of file + diff --git a/style.css b/style.css index 4d26a11..2d5f188 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); html { scroll-behavior: smooth; scroll-padding-top: 64px; @@ -8,7 +10,8 @@ body { } h1, h2, h3, h4, h5, h6, p.title, .company { - font-family: 'Alegreya Sans SC', sans-serif; + font-family: 'Bebas Neue', sans-serif; + letter-spacing: 4px; } p, a { @@ -200,3 +203,38 @@ h4 { margin: auto; width: 25%; } + + + +#main { + border-right: solid 3px rgba(0,255,0,.75); + white-space: nowrap; + overflow: hidden; + font-family: 'Source Code Pro', monospace; + font-size: 28px; + color: rgba(255,255,255,.70); + text-align: center; + margin: auto; +} + +/* Animation */ +#main { + animation: animated-text 4s steps(29,end) 1s 1 normal both, + animated-cursor 600ms steps(29,end) infinite; +} + +/* text animation */ + +@keyframes animated-text{ + from{width: 0;} + to{width: 472px;} +} + +/* cursor animations */ + +@keyframes animated-cursor{ + from{border-right-color: rgba(0,255,0,.75);} + to{border-right-color: transparent;} +} + +