diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a8971e --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + [Your Name] · [Your Title] + + + + + + + + + + + +
+
+
+ + + +
+

+ Hello, I'm [Your Name] + ( + @[Your Handle] + ) +

+

+ I'm a [Your Title] +

+

+ I'm a [Your Role] at [Your Company], [Brief company description]. +

+
+

+ Your personal statement about what you do and what you're interested in. Add your contact preferences here. +

+
+

+ — + [Your Name] + @[Your Handle] + ) +

+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6d6e057 --- /dev/null +++ b/style.css @@ -0,0 +1,137 @@ +body { + margin: 0; + padding: 0; + background: #000; + color: #f4f4f4; + font-family: "Graphik Web", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Segoe UI", Roboto, Ubuntu, sans-serif; + font-weight: 400; + font-smooth: antialiased; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + a { + color: #ff310a; + text-decoration: none; + } + + a:hover { + color: #CFEF54 + } + + .content { + max-width: 40rem; + margin: 0 auto; + } + + img.photo { + border-radius: 50%; + } + + p { + font-size: 1.5rem; + line-height: 1.4; + margin: 0; + letter-spacing: -0.05rem; + } + + h2 { + font-weight: 400; + line-height: 1.3; + letter-spacing: -0.05rem; + } + + .smallcaps { + font-variant: small-caps; + color:#333; + } + + .gray{ + color: #999; + } + + .preloader { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + height: -moz-available; + height: -webkit-fill-available; + height: fill-available; + width: 100%; + background: #000; + position: fixed; + top: 0; + left: 0; + z-index: 9999; + transition: opacity 0.3s linear; + transform: translate3d(0, 0, 0); + } + + body.loaded .preloader { + opacity: 0; + } + + .fade { + animation: fadeIn 1s ease-in-out both; + } + + .fade:nth-child(2) { + animation-delay: 1s; + } + + .fade:nth-child(3) { + animation-delay: 2s; + } + + .fade:nth-child(4) { + animation-delay: 3s; + } + + .fade:nth-child(5) { + animation-delay: 4s; + } + + .fade:nth-child(6) { + animation-delay: 5s; + } + + .fade:nth-child(7) { + animation-delay: 6s; + } + + .fade:nth-child(8) { + animation-delay: 7s; + } + + .fade:nth-child(9) { + animation-delay: 8s; + } + + .fade:nth-child(10) { + animation-delay: 9s; + } + + .fade:nth-child(11) { + animation-delay: 10s; + } + + .fade:nth-child(12) { + animation-delay: 11s; + } + + .fade:nth-child(13) { + animation-delay: 12s; + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translate3d(0, 0%, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } + \ No newline at end of file