added contact me
This commit is contained in:
Notoric
parent
d2e7849724
commit
038f4f6f31
Binary file not shown.
22
index.html
22
index.html
|
|
@ -83,6 +83,28 @@
|
||||||
<a href="https://ctec3905.notoric.net" target="_blank"><img src="/assets/CTEC3905.png"></a>
|
<a href="https://ctec3905.notoric.net" target="_blank"><img src="/assets/CTEC3905.png"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="contact">
|
||||||
|
<h1>Looking to hire me?</h1>
|
||||||
|
<a id="cv-button-wrapper" href="/Tom Cornes CV.pdf" target="_blank"><button id="cv-button">CV</button></a>
|
||||||
|
<h1>Contact me here</h2>
|
||||||
|
<div id="contact-showcase" class="card">
|
||||||
|
<div class="contact-area" id="email">
|
||||||
|
<svg id="email-logo" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#7520ff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 18L9 12M20 18L15 12M3 8L10.225 12.8166C10.8665 13.2443 11.1872 13.4582 11.5339 13.5412C11.8403 13.6147 12.1597 13.6147 12.4661 13.5412C12.8128 13.4582 13.1335 13.2443 13.775 12.8166L21 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#7520ff" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||||
|
<a id="email-link" href="mailto:hireme@notoric.net" target="_blank">hireme@notoric.net</a>
|
||||||
|
<p id="email-desc">Email me directly for any job opportunities or questions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-area" id="phone">
|
||||||
|
<svg id="phone-logo" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0050" stroke-width="1.92"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><rect x="18" y="8" width="28" height="48" rx="4"></rect><line x1="28" y1="12" x2="36" y2="12"></line><line x1="30" y1="52" x2="34" y2="52"></line></g></svg>
|
||||||
|
<a id="phone-link" href="https://wa.me/447938135980" target="_blank">07938135980</a>
|
||||||
|
<p id="phone-desc">I prefer to be contacted via WhatsApp, but I am also available via text or phone.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-area" id="linkedin">
|
||||||
|
<svg fill="#ff8000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-243 51 700 700" xml:space="preserve" stroke="#ff8000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z M339,617c0,5.5-4.5,10-10,10h-432c-5.5,0-10-4.5-10-10V185c0-5.5,4.5-10,10-10h432c5.5,0,10,4.5,10,10V617z"></path> <rect x="-8.5" y="348.4" width="49.9" height="159.7"></rect> <path d="M177.7,346.9c-28.6,0-46.5,15.6-49.8,26.6v-25.1H71.8c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1 c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4v82.6H241v-88.8C241,369.9,213.2,346.9,177.7,346.9z"></path> <path d="M15.4,273c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7 C45.1,284.9,33.8,273,15.4,273z"></path> </g> </g></svg>
|
||||||
|
<a id="linkedin-link" href="https://www.linkedin.com/in/tom-cornes/" target="_blank">Tom Cornes</a>
|
||||||
|
<p id="linkedin-desc">Connect with me on LinkedIn for professional networking.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script src="/scripts/homepage.js"></script>
|
<script src="/scripts/homepage.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,55 @@
|
||||||
const navbtn = document.getElementById('nav-btn');
|
const navbtn = document.getElementById('nav-btn');
|
||||||
const topshrtct = document.getElementById('top-shrtct');
|
const topshrtct = document.getElementById('top-shrtct');
|
||||||
|
const logo = document.getElementById('logo');
|
||||||
navbtn.addEventListener('click', () => {
|
|
||||||
const navbar = document.getElementById('navbar');
|
navbtn.addEventListener('click', () => {
|
||||||
navbar.classList.toggle('expanded');
|
const navbar = document.getElementById('navbar');
|
||||||
navbtn.classList.toggle('expanded');
|
navbar.classList.toggle('expanded');
|
||||||
});
|
navbtn.classList.toggle('expanded');
|
||||||
|
});
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
if (window.scrollY > 100) {
|
window.addEventListener('scroll', () => {
|
||||||
topshrtct.classList.add('visible');
|
if (window.scrollY > 100) {
|
||||||
} else {
|
topshrtct.classList.add('visible');
|
||||||
topshrtct.classList.remove('visible');
|
} else {
|
||||||
}
|
topshrtct.classList.remove('visible');
|
||||||
});
|
}
|
||||||
|
});
|
||||||
topshrtct.addEventListener('click', () => {
|
|
||||||
if (window.scrollY > 100) {
|
topshrtct.addEventListener('click', () => {
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
if (window.scrollY > 100) {
|
||||||
}
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
});
|
}
|
||||||
|
});
|
||||||
let links = document.getElementById('navbar').getElementsByTagName('a');
|
|
||||||
|
logo.addEventListener('click', () => {
|
||||||
for (let link of links) {
|
if (window.scrollY > 100) {
|
||||||
link.addEventListener('click', () => {
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
const navbar = document.getElementById('navbar');
|
}
|
||||||
navbar.classList.remove('expanded');
|
});
|
||||||
navbtn.classList.remove('expanded');
|
|
||||||
});
|
let links = document.getElementById('navbar').getElementsByTagName('a');
|
||||||
}
|
|
||||||
|
for (let link of links) {
|
||||||
async function updateAge() {
|
link.addEventListener('click', () => {
|
||||||
setInterval(() => {
|
const navbar = document.getElementById('navbar');
|
||||||
const birthdate = new Date('2002-02-12T07:35:00Z');
|
navbar.classList.remove('expanded');
|
||||||
let age = Date.now() - birthdate.getTime();
|
navbtn.classList.remove('expanded');
|
||||||
age = age / 31556952000;
|
});
|
||||||
|
}
|
||||||
age = age.toFixed(9);
|
|
||||||
|
async function updateAge() {
|
||||||
const ageElement = document.getElementById('age');
|
setInterval(() => {
|
||||||
ageElement.textContent = age;
|
const birthdate = new Date('2002-02-12T07:35:00Z');
|
||||||
|
let age = Date.now() - birthdate.getTime();
|
||||||
}, 50);
|
age = age / 31556952000;
|
||||||
}
|
|
||||||
|
age = age.toFixed(9);
|
||||||
|
|
||||||
|
const ageElement = document.getElementById('age');
|
||||||
|
ageElement.textContent = age;
|
||||||
|
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
updateAge();
|
updateAge();
|
||||||
|
|
@ -18,6 +18,13 @@ body {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
color: hsl(30, 100%, 65%);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
#top-shrtct {
|
#top-shrtct {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
|
|
@ -59,21 +66,10 @@ body {
|
||||||
z-index: 10;
|
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 {
|
#logo {
|
||||||
font-family: "Fira Mono", monospace;
|
font-family: "Fira Mono", monospace;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar p {
|
#navbar p {
|
||||||
|
|
@ -133,6 +129,17 @@ em {
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Body */
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 1300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-inline: 30px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landing */
|
||||||
|
|
||||||
#homepage {
|
#homepage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 60px);
|
height: calc(100vh - 60px);
|
||||||
|
|
@ -249,6 +256,8 @@ em {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* About */
|
||||||
|
|
||||||
#box-with-title {
|
#box-with-title {
|
||||||
border-radius: 60px;
|
border-radius: 60px;
|
||||||
padding-inline: 50px;
|
padding-inline: 50px;
|
||||||
|
|
@ -318,6 +327,8 @@ em {
|
||||||
font-family: "Fira Mono", monospace;
|
font-family: "Fira Mono", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Projects */
|
||||||
|
|
||||||
#projects {
|
#projects {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -418,6 +429,114 @@ em {
|
||||||
margin: 0;
|
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) {
|
@media screen and (max-width: 1100px) {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -509,7 +628,6 @@ em {
|
||||||
#links a:after, #nav a:after {
|
#links a:after, #nav a:after {
|
||||||
right: auto;
|
right: auto;
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
|
|
@ -589,5 +707,59 @@ em {
|
||||||
transform: translateY(170px);
|
transform: translateY(170px);
|
||||||
top: -3em;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue