diff --git a/Tom Cornes CV.pdf b/Tom Cornes CV.pdf new file mode 100644 index 0000000..af29796 Binary files /dev/null and b/Tom Cornes CV.pdf differ diff --git a/index.html b/index.html index 425e66a..604d507 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,28 @@ +
+

Looking to hire me?

+ +

Contact me here

+
+
+ + hireme@notoric.net +

Email me directly for any job opportunities or questions.

+
+
+ + 07938135980 +

I prefer to be contacted via WhatsApp, but I am also available via text or phone.

+
+
+ + Tom Cornes +

Connect with me on LinkedIn for professional networking.

+
+
+
diff --git a/scripts/homepage.js b/scripts/homepage.js index 2040671..619efed 100644 --- a/scripts/homepage.js +++ b/scripts/homepage.js @@ -1,48 +1,55 @@ -const navbtn = document.getElementById('nav-btn'); -const topshrtct = document.getElementById('top-shrtct'); - -navbtn.addEventListener('click', () => { - const navbar = document.getElementById('navbar'); - navbar.classList.toggle('expanded'); - navbtn.classList.toggle('expanded'); -}); - -window.addEventListener('scroll', () => { - if (window.scrollY > 100) { - topshrtct.classList.add('visible'); - } else { - topshrtct.classList.remove('visible'); - } -}); - -topshrtct.addEventListener('click', () => { - if (window.scrollY > 100) { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } -}); - -let links = document.getElementById('navbar').getElementsByTagName('a'); - -for (let link of links) { - link.addEventListener('click', () => { - const navbar = document.getElementById('navbar'); - navbar.classList.remove('expanded'); - navbtn.classList.remove('expanded'); - }); -} - -async function updateAge() { - setInterval(() => { - const birthdate = new Date('2002-02-12T07:35:00Z'); - let age = Date.now() - birthdate.getTime(); - age = age / 31556952000; - - age = age.toFixed(9); - - const ageElement = document.getElementById('age'); - ageElement.textContent = age; - - }, 50); -} - +const navbtn = document.getElementById('nav-btn'); +const topshrtct = document.getElementById('top-shrtct'); +const logo = document.getElementById('logo'); + +navbtn.addEventListener('click', () => { + const navbar = document.getElementById('navbar'); + navbar.classList.toggle('expanded'); + navbtn.classList.toggle('expanded'); +}); + +window.addEventListener('scroll', () => { + if (window.scrollY > 100) { + topshrtct.classList.add('visible'); + } else { + topshrtct.classList.remove('visible'); + } +}); + +topshrtct.addEventListener('click', () => { + if (window.scrollY > 100) { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } +}); + +logo.addEventListener('click', () => { + if (window.scrollY > 100) { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } +}); + +let links = document.getElementById('navbar').getElementsByTagName('a'); + +for (let link of links) { + link.addEventListener('click', () => { + const navbar = document.getElementById('navbar'); + navbar.classList.remove('expanded'); + navbtn.classList.remove('expanded'); + }); +} + +async function updateAge() { + setInterval(() => { + const birthdate = new Date('2002-02-12T07:35:00Z'); + let age = Date.now() - birthdate.getTime(); + age = age / 31556952000; + + age = age.toFixed(9); + + const ageElement = document.getElementById('age'); + ageElement.textContent = age; + + }, 50); +} + updateAge(); \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index f43ef5e..027f28a 100644 --- a/styles/global.css +++ b/styles/global.css @@ -18,6 +18,13 @@ body { overflow-y: scroll; } +em { + color: hsl(30, 100%, 65%); + font-style: normal; +} + +/* Header */ + #top-shrtct { position: fixed; bottom: 30px; @@ -59,21 +66,10 @@ body { z-index: 10; } -main { - max-width: 1300px; - margin: 0 auto; - padding-inline: 30px; - flex-direction: column; -} - -em { - color: hsl(30, 100%, 65%); - font-style: normal; -} - #logo { font-family: "Fira Mono", monospace; font-weight: 500; + cursor: pointer; } #navbar p { @@ -133,6 +129,17 @@ em { padding-right: 8px; } +/* Body */ + +main { + max-width: 1300px; + margin: 0 auto; + padding-inline: 30px; + flex-direction: column; +} + +/* Landing */ + #homepage { width: 100%; height: calc(100vh - 60px); @@ -249,6 +256,8 @@ em { font-weight: 700; } +/* About */ + #box-with-title { border-radius: 60px; padding-inline: 50px; @@ -318,6 +327,8 @@ em { font-family: "Fira Mono", monospace; } +/* Projects */ + #projects { margin: auto; width: fit-content; @@ -418,6 +429,114 @@ em { margin: 0; } +/* Contact */ + +#contact { + margin: auto; + width: fit-content; + padding-top: 100px; +} + +#contact h1 { + padding-left: 75px; +} + +#cv-button { + position: relative; + overflow: hidden; + height: 2em; + width: 2em; + font-size: 5em; + font-family: "Fira Mono", monospace; + font-weight: 800; + color: var(--accent); + background: linear-gradient(120deg, #7520ff, #ff0050, #ff8000); + border-radius: 12%; + border: none; + display: block; + margin: auto; + margin-block: 40px; + cursor: pointer; + padding: 0; +} + +#cv-button-wrapper { + color: var(--accent); + text-decoration: none; +} + +#cv-button::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 0deg, + transparent, + rgba(255, 255, 255, 0.35), + transparent + ); + transform: rotate(45deg) translateY(-50%); + transition: transform 0.5s ease; +} + +#cv-button:hover::before { + transform: rotate(45deg) translateY(50%); +} + +#contact h2 { + padding-left: 75px; +} + +#contact-showcase { + max-width: 800px; + padding-inline: 50px; + padding-block: 20px; + gap: 30px; +} + +.contact-area { + width: 280px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-bottom: auto; +} + +.contact-area svg { + width: 8em; + height: 8em; +} + +.contact-area a { + color: var(--accent); + text-decoration: underline; + font-size: 1.4em; + margin: 0; + font-family: "Fira Mono", monospace; + margin-top: 0.3em; +} + +.contact-area p { + font-size: 1.1em; + text-align: center; +} + +#email-link:hover { + color: #7520ff +} + +#phone-link:hover { + color: #ff0050 +} + +#linkedin-link:hover { + color: #ff8000 +} + @media screen and (max-width: 1100px) { body { @@ -509,7 +628,6 @@ em { #links a:after, #nav a:after { right: auto; height: 1.2em; - } #nav { @@ -589,5 +707,59 @@ em { transform: translateY(170px); top: -3em; } + + #contact { + width: 100%; + } + + #contact h1 { + padding: 0; + width: fit-content; + margin-inline: auto; + } + + #contact-showcase { + flex-direction: column; + } + + .contact-area { + display: grid; + width: calc(100vw - 192px); + } + + .contact-area svg { + grid-column: 1; + grid-row: 1 / span 2; + } + + .contact-area a { + grid-column: 2; + grid-row: 1; + width: fit-content; + margin-top: auto; + } + + .contact-area p { + grid-column: 2; + grid-row: 2; + width: auto; + text-align: left; + margin-bottom: auto; + } } +@media screen and (max-width: 650px) { + + body { + font-size: 15px; + } + + #aboutme h1 { + transform: translateY(170px); + top: -3.5em; + } + + #contact-showcase { + padding-inline: 20px; + } +} \ No newline at end of file