diff --git a/About.html b/About.html index 49ae922..b5b718a 100644 --- a/About.html +++ b/About.html @@ -1,45 +1,50 @@ - - - - - + + + + About Me page - - + + + - +
- - + +
-
- -
- -
-

About Me

-

Frontend Dev, Computer programmer, video editor, hardware maintainance...

-

I am also a Computer Science major at the University of Buea with a particular proclivity towards programming concepts, priblem solving and birthing creative and innivative ideas and solutions to said problems...

- Read More -
- +
+ +
+ +
+

About Me

+

+ Frontend Dev, Computer programmer, video editor, hardware + maintainance... +

+

+ I am also a Computer Science major at the University of Buea with a + particular proclivity towards programming concepts, priblem solving + and birthing creative and innivative ideas and solutions to said + problems... +

+ Read More +
- - - - \ No newline at end of file + + diff --git a/Services.html b/Services.html index 7d9dc30..f58740c 100644 --- a/Services.html +++ b/Services.html @@ -7,6 +7,7 @@ Services page + @@ -23,7 +24,7 @@

Our Services

-
+
diff --git a/contact.html b/contact.html index 7159c57..8c00910 100644 --- a/contact.html +++ b/contact.html @@ -1,32 +1,50 @@ - - - - - + + + + Contact page - - + + + - +
- - + +
- - -
-

Contact Me

-

-
- + +
+

Contact Me

+
+ +
+ +
+
-
- - \ No newline at end of file +
+ diff --git a/index.html b/index.html index 7452791..f3c5dcb 100644 --- a/index.html +++ b/index.html @@ -1,56 +1,75 @@ - - - - - + + + + Portfolio - - - + + + + - +
- - + +
-
-
-

Hello and welcome to my site, it's TC

-

TATAW CLARKSON

-

And I'm a Frontend Developer and Computer programmer

-

I'm passionate about programming, problem solving and innovative thinking and the achievement of goals leading towards a larger objective or aim. -

-

We build, bringing forth the desired output for innovative and purposed projects


-

Our aim is bent on achieving our objective efficiently and in time and making it usable upon release, and satisfying demand

-

Come and let's achieve greatness together

- - Download resume -
-
- +
+

Hello and welcome to my site, it's TC

+

TATAW CLARKSON

+

+ And I'm a Frontend Developer and + Computer programmer +

+

+ I'm passionate about programming, problem solving and innovative + thinking and the achievement of goals leading towards a larger + objective or aim. +

+

+ We build, bringing forth the desired output for innovative and + purposed projects +

+
+

+ Our aim is bent on achieving our objective efficiently and in time and + making it usable upon release, and satisfying demand +

+

+ Come and let's achieve greatness together +

+ - + Download resume +
+
+ +
- - - - \ No newline at end of file + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9ce913f --- /dev/null +++ b/script.js @@ -0,0 +1,6 @@ +window.onload = function () { + var reveals = document.querySelectorAll(".reveal"); + for (var i = 0; i < reveals.length; i++) { + reveals[i].classList.add("active"); + } +}; diff --git a/sheet.css b/sheet.css index 4ad4408..c92ef54 100644 --- a/sheet.css +++ b/sheet.css @@ -1,281 +1,320 @@ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - border: none; - scroll-behavior: smooth; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - :root { - --bg-color: #1f242d; - --second-bg-color: #323946; - --text-color: #fff; - --main-color: #56d448; - } - - html { - font-size: 62.5%; - overflow-x: hidden; - } - - body { - background: var(--bg-color); - color: var(--text-color); - } - - .header { - position: fixed; - top: 0; - left: 0; - width: 100%; - padding: 2rem 9%; - background: var(--bg-color); - display: flex; - justify-content: space-between; - align-items: center; - z-index: 100; - } - - .home { - padding-top: 200px; - padding-left: 20px; - display: flex; - justify-content: center; - align-items: center; - } - - .home-content p { - font-size: 1.8rem; - font-weight: 600; - } - - .home-content h1 { - font-size: 5rem; - font-weight: 800; - line-height: 1; - } - - .home-content h3 { - font-size: 3rem; - font-weight: 600; - } - - .home-content h3:nth-of-type(2) { - margin-bottom: 2rem; - } - - .logo { - font-size: 2.5rem; - color: var(--text-color); - font-weight: 600; - cursor: default; - } - - .navbar a { - font-size: 1.2rem; - color: var(--text-color); - margin-left: 4rem; - transition: 1s; - } - - .navbar a:hover, - .navbar a.active { - color: rgb(10, 68, 215); - } - - .icons { - width: 20px; - height: 1cm; - } - - .home-image img { - height: 300px; - width: 400px; - } - - .social-media a { - display: inline-flex; - justify-content: center; - align-items: center; - width: 30px; - height: 30px; - background: white; - border: solid var(--main-color); - border-radius: 50%; - color: var(--main-color); - margin: 3rem; - transition: 0.5s ease; - box-shadow: 0 0 1rem rgb(35, 243, 184); - } - - .social-media a :hover { - background: transparent; - color: rgb(244, 245, 249); - box-shadow: none; - border-radius: 60%; - justify-content: center; - margin: 3rem; - } - - span { - color: #56d448; - } - - .btn { - margin-top: 40px; - display: inline-block; - padding: 1rem 2.8rem; - background: var(--main-color); - border-radius: 4rem; - box-shadow: 0 0 1rem var(--main-color); - font-size: 1.6rem; - color: var(--second-bg-color); - letter-spacing: 0.2rem; - font-weight: 600; - transition: 0.5s ease; - } - - .btn:hover { - background: none; - color: rgb(255, 254, 253); - } - - .about { - padding-top: 5rem; - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - background: var(--second-bg-color); - } - - .about-img { - width: 100%; - } - - .about-img img { - padding: 4rem 4rem; - height: 400px; - width: 400px; - } - - .heading { - text-align: center; - font-size: 3rem; - font-weight: 500; - } - - .about-content h2 { - text-align: left; - line-height: 1.2; - } - - .about-content h3 { - font-size: 2.6rem; - } - - .about-content p { - font-size: 1.6rem; - word-spacing: 0.2rem; - margin: 2rem; - } - - .services-box { - display: flex; - } - - .services h3 { - font-size: 3.5rem; - font-weight: 400; - } - - .services h2 { - font-size: 4.5rem; - font-weight: 500; - } - - .services p { - font-size: 1.5rem; - font-weight: 400; - } - - .services { - margin-top: 100px; - padding-left: 100px; - justify-content: center; - } - - .services img { - margin-top: 15px; - margin-left: 15px; - background-color: rgb(241, 212, 212); - } - - u { - background-color: rgb(145, 146, 146); - } - - .services-container { - margin-top: 100px; - display: flex; - justify-content: center; - text-align: center; - border-radius: 2rem; - border: .2rem solid var(--bg-color); - } - - .service-container1 { - background-color: var(--second-bg-color); - text-align: left; - border-radius: 2rem; - border: .2rem solid var(--bg-color); - margin-left: -20px; - margin-right: 100px; - margin-bottom: 40px; - padding-left: 30px; - } - - .services-container2 { - margin-bottom: 40px; - margin-right: 50px; - padding-left: 30px; - background-color: var(--second-bg-color); - text-align: center; - border-radius: 3rem; - border: .2rem solid var(--bg-color); - padding-bottom: 50px - } - - .contact { - justify-content: center; - margin-top: 100px; - } - - .contact_me { - text-align: center; - } - - .contact_me input, - .contact_me textarea { - text-align: center; - letter-spacing: 0.5; - margin: 20px 20px; - } - - #entry { - width: 500px; - border-radius: 30px; - } - - #num { - width: 8cm; - height: 40px; - } - - #email { - border-radius: 30px; - width: 7cm; - height: 30px; - } \ No newline at end of file +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + border: none; + scroll-behavior: smooth; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +:root { + --bg-color: #1f242d; + --second-bg-color: #323946; + --text-color: #fff; + --main-color: #56d448; +} + +html { + font-size: 62.5%; + overflow-x: hidden; +} + +body { + background: var(--bg-color); + color: var(--text-color); +} + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 2rem 9%; + background: var(--bg-color); + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +.navbar { + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: var(--bg-color); + border-top: 1rem solid rgba(0, 0, 0, -2); + box-shadow: 0.5rem 1rem rgba(0, 0, 0, -2); +} + +.navbar.active { + display: block; +} + +.home { + padding-top: 200px; + padding-left: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.home-content p { + font-size: 1.8rem; + font-weight: 600; +} + +.home-content h1 { + font-size: 5rem; + font-weight: 800; + line-height: 1; +} + +.home-content h3 { + font-size: 3rem; + font-weight: 600; +} + +.home-content h3:nth-of-type(2) { + margin-bottom: 2rem; +} + +.logo { + font-size: 2.5rem; + color: var(--text-color); + font-weight: 600; + cursor: default; +} + +.navbar a { + font-size: 1.2rem; + color: var(--text-color); + margin-left: 4rem; + transition: 1s; +} + +.navbar a:hover, +.navbar a.active { + color: rgb(10, 68, 215); +} + +.icons { + width: 20px; + height: 1cm; +} + +.home-image img { + height: 300px; + width: 400px; + animation: floatImage 4s ease-in-out infinite; +} + +@keyframes floatImage { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-2.4rem); + } + 100% { + transform: translateY(0); + } +} + +.social-media a { + display: inline-flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + background: white; + border: solid var(--main-color); + border-radius: 50%; + color: var(--main-color); + margin: 3rem; + transition: 0.5s ease; + box-shadow: 0 0 1rem rgb(35, 243, 184); +} + +.social-media a :hover { + background: transparent; + color: rgb(244, 245, 249); + box-shadow: none; + border-radius: 60%; + justify-content: center; + margin: 3rem; +} + +span { + color: #56d448; +} + +.btn { + margin-top: 40px; + display: inline-block; + padding: 1rem 2.8rem; + background: var(--main-color); + border-radius: 4rem; + box-shadow: 0 0 1rem var(--main-color); + font-size: 1.6rem; + color: var(--second-bg-color); + letter-spacing: 0.2rem; + font-weight: 600; + transition: 0.5s ease; +} + +.btn:hover { + background: none; + color: rgb(255, 254, 253); +} + +.about { + padding-top: 5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + background: var(--second-bg-color); +} + +.about-img { + width: 100%; +} + +.about-img img { + padding: 4rem 4rem; + height: 400px; + width: 400px; +} + +.heading { + text-align: center; + font-size: 3rem; + font-weight: 500; +} + +.about-content h2 { + text-align: left; + line-height: 1.2; +} + +.about-content h3 { + font-size: 2.6rem; +} + +.about-content p { + font-size: 1.6rem; + word-spacing: 0.2rem; + margin: 2rem; +} + +.services-box { + display: flex; +} + +.services h3 { + font-size: 3.5rem; + font-weight: 400; +} + +.services h2 { + font-size: 4.5rem; + font-weight: 500; +} + +.services p { + font-size: 1.5rem; + font-weight: 400; +} + +.services { + margin-top: 100px; + padding-left: 100px; + justify-content: center; +} + +.services img { + margin-top: 15px; + margin-left: 15px; + background-color: rgb(241, 212, 212); +} + +u { + background-color: rgb(145, 146, 146); +} + +.services-container { + margin-top: 100px; + display: flex; + justify-content: center; + text-align: center; + border-radius: 2rem; + border: 0.2rem solid var(--bg-color); +} + +.service-container1 { + background-color: var(--second-bg-color); + text-align: left; + border-radius: 2rem; + border: 0.2rem solid var(--bg-color); + margin-left: -20px; + margin-right: 100px; + margin-bottom: 40px; + padding-left: 30px; +} + +.services-container2 { + margin-bottom: 40px; + margin-right: 50px; + padding-left: 30px; + background-color: var(--second-bg-color); + text-align: center; + border-radius: 3rem; + border: 0.2rem solid var(--bg-color); + padding-bottom: 50px; +} + +.contact { + justify-content: center; + margin-top: 100px; +} + +.contact_me { + text-align: center; +} + +.contact_me input, +.contact_me textarea { + text-align: center; + letter-spacing: 0.5; + margin: 20px 20px; +} + +#entry { + width: 500px; + border-radius: 30px; +} + +#num { + width: 8cm; + height: 40px; +} + +#email { + border-radius: 30px; + width: 7cm; + height: 30px; +} + +.reveal { + opacity: 0; + transform: translateY(-20px); + transition: opacity 2s ease-in-out, transform 2s ease-in-out; +} + +.reveal.active { + opacity: 1; + transform: translateY(0); +}