diff --git a/assets/headshot.jpg b/assets/headshot.jpg deleted file mode 100644 index 3b2341c..0000000 Binary files a/assets/headshot.jpg and /dev/null differ diff --git a/assets/headshot.png b/assets/headshot.png new file mode 100644 index 0000000..297f6dd Binary files /dev/null and b/assets/headshot.png differ diff --git a/index.html b/index.html index 1b676a0..cec0632 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,89 @@ - - - - Notoric's Portfolio - - - - - - -
-
-
-
-

Hi, my name is

-

Tom Cornes

-

I'm a Software Developer based in Leicestershire, England.

-
-
-
-
-
-

About Me

-
-

I am a 22 year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.

-
-
-
-

Projects

-
-
-

The Button

-
-

HTML

-

CSS

-

JS

-

Apr 2024

-
-

The Button is a game created by Elendow on Steam. I have recreated this game in a single day using a basic web development stack. The user is presented with a button which contains a number. When the user clicks the button, the button with either reset back to zero or increase it's counter by one. The counter also represents the percantage chance of the button resetting to zero on the next press.

-
- -
-
-
-

Orion

-
-

Java

-

NoSQL

-

Jan 2024

-
-

Orion is a discord music bot built using the Java Discord Api. Orion was a project that me and a friend worked on as a way to further develop our programming knowledge during our degree, and to practise the skills we were learning. Orion utilises Maven to manage dependencies and Lavaplayer to play music. Secrets are managed via Dotenv to ensure that no sensitive data is made public.

-
- -
-
-
-

DMU - Front End Module

-
-

HTML

-

CSS

-

JS

-

Feb 2024

-
-

This website is my final hand-in for my Front End Web Development module at De Montfort University. Most of the features in this website were created to meet hand-in requirements. This website uses no libraries and has been coded from scratch using the standard web languages. This website uses the PokeAPI to pull data for the pokedex.

-
- -
-
-
- - + + + + Notoric's Portfolio + + + + + + +
+
+
+
+

Hi, my name is

+

Tom Cornes

+

I'm a Software Developer based in Leicestershire, England.

+
+
+
+
+
+

About Me

+
+

I am a 22 year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.

+
+
+
+

Projects

+
+
+

The Button

+
+

HTML

+

CSS

+

JS

+

Apr 2024

+
+

The Button is a game created by Elendow on Steam. I have recreated this game in a single day using a basic web development stack. The user is presented with a button which contains a number. When the user clicks the button, the button with either reset back to zero or increase it's counter by one. The counter also represents the percantage chance of the button resetting to zero on the next press.

+
+ +
+
+
+

Orion

+
+

Java

+

NoSQL

+

Jan 2024

+
+

Orion is a discord music bot built using the Java Discord Api. Orion was a project that me and a friend worked on as a way to further develop our programming knowledge during our degree, and to practise the skills we were learning. Orion utilises Maven to manage dependencies and Lavaplayer to play music. Secrets are managed via Dotenv to ensure that no sensitive data is made public.

+
+ +
+
+
+

DMU - Front End Module

+
+

HTML

+

CSS

+

JS

+

Feb 2024

+
+

This website is my final hand-in for my Front End Web Development module at De Montfort University. Most of the features in this website were created to meet hand-in requirements. This website uses no libraries and has been coded from scratch using the standard web languages. This website uses the PokeAPI to pull data for the pokedex.

+
+ +
+
+
+ + \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 9e6e275..4a9992f 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,594 +1,594 @@ -@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap'); - -html { - scroll-behavior: smooth; -} - -body { - background-color: #111; - color: #eee; - margin: 0; - font-family: "Barlow", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - width: 100vw; - overflow-x: hidden; - overflow-y: scroll; -} - -#top-shrtct { - position: fixed; - bottom: 30px; - right: 30px; - height: 3em; - width: 3em; - padding: 1.5em; - background-color: #0004; - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 10; -} - -#top-shrtct.visible { - opacity: 1; - cursor: pointer; - backdrop-filter: blur(6px); -} - -#nav-btn { - display: none; -} - -#navbar { - background-color: #000c; - backdrop-filter: blur(10px); - margin: 0; - overflow: hidden; - padding-inline: 30px; - font-size: 1.4em; - display: flex; - flex-direction: row; - align-items: center; - height: 60px; - position: sticky; - top: 0; - width: calc(100vw - 60px); - 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; -} - -#navbar p { - margin: 16px; - margin-inline: 0; -} - -#links, #nav { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - position: absolute; -} - -#links { - right: 20px; -} - -#nav { - left: 50%; - transform: translateX(-50%); -} - -#links a, #nav a { - text-decoration: none; - color: #eee; - margin: 16px; - display: flex; - flex-direction: row; - align-items: center; - position: relative; -} - -#links a:after, #nav a:after { - content: ""; - display: block; - border-bottom: solid 3px #f05; - position: absolute; - width: 0; - height: 36px; - transition: width 0.3s ease; -} - -#links a:after { - right: 0; -} - -#links a:hover:after, #nav a:hover:after { - width: 100%; -} - -#links a svg { - fill: #eee; - width: 1em; - height: 1em; - padding-right: 8px; -} - -#homepage { - width: 100%; - height: calc(100vh - 60px); - display: flex; - justify-content: center; - align-items: center; - gap: 70px; -} - -.card { - border-radius: 64px; - display: flex; - justify-content: center; - align-items: center; - backdrop-filter: blur(10px); - background-color: #111c; - position: relative; - overflow: hidden; - background-image: linear-gradient( - 135deg, - hsl(263, 80%, 40%), - hsl(341, 80%, 40%) 12%, - hsl(30, 80%, 40%) 25%, - #161616 35%, - #161616 65%, - #252525 100% - ); - &::after { - content: ""; - position: absolute; - height: calc(100% - 8px); - width: calc(100% - 8px); - z-index: -2; - border-radius: 60px; - background-image: linear-gradient( - 135deg, - hsl(263, 25%, 10%), - hsl(341, 25%, 10%) 10%, - hsl(30, 25%, 10%) 20%, - #161616 32% - ); - } -} - -#homepage .card { - font-family: "Fira Mono", monospace; - flex-direction: row; - padding-block: 80px; - gap: 70px; - width: fit-content; - padding: 50px; -} - -#homepage .card #homepage-text p { - z-index: 3; -} - -#homepage-text { - width: auto; - text-align: right; -} - -#homepage-img { - background-image: url("/assets/headshot.jpg"); - background-size: cover; - background-position: center; - width: 350px; - height: 350px; - aspect-ratio: 1/1; - border-radius: 50%; - position: relative; -} - -#homepage-img::before { - content: ""; - display: block; - width: 100%; - height: 100%; - position: absolute; - background-image: repeating-conic-gradient( - #ff0050 0%, - #ff8000 33.333%, - #7520ff 66.666%, - #ff0050 100% - ); - border-radius: 50%; - z-index: -1; - filter: blur(14px); - animation: rotate 10s linear infinite; -} - -@keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -#homepage p { - margin: 0; - max-width: 800px; -} - -#hi { - font-size: 1.5em; - color: hsl(263, 50%, 65%); -} - -#name { - font-size: 5em; - color: #f05; - font-weight: 700; -} - -#box-with-title { - border-radius: 60px; - padding-inline: 50px; - padding-block: 30px; - position: relative; - max-width: 800px; - margin: auto; - overflow: hidden; - &::after { - content: ""; - position: absolute; - top: 4px; - left: 4px; - height: calc(100% - 8px); - width: calc(100% - 8px); - z-index: 1; - border-radius: 57px; - background-color: #111; - } - &::before { - content: ""; - position: absolute; - top: calc(50% - 100vw); - left: calc(50% - 100vw); - height: 200vw; - width: 200vw; - z-index: 0; - background-image: repeating-conic-gradient( - #ff0050 0%, - #ff8000 33.333%, - #7520ff 66.666%, - #ff0050 100% - ); - animation: rotate 10s linear infinite; - } -} - -#aboutme { - width: fit-content; - height: fit-content; - margin: auto; - position: relative; - font-family: "Barlow", sans-serif; - padding-top: 100px !important; /* padding to make sure that the scroll anchor works properly with the navbar */ -} - -#aboutme h1 { - background-color: #111; - padding-inline: 15px; - position: absolute; - text-align: center; - top: calc(-1.25em + 100px); - left: 70px; - z-index: 2; -} - -#aboutme p { - font-size: 1.1em; -} - -#box-with-title p { - position: relative; - z-index: 2; -} - -#age { - font-family: "Fira Mono", monospace; -} - -#projects { - margin: auto; - width: fit-content; - padding-top: 100px; -} - -#projects h1 { - padding-left: 75px; -} - -.project { - display: flex; - flex-direction: row; - padding: 2em; - width: fit-content; - margin: auto; - gap: 20px; - align-content: center; - justify-content: center; - margin-bottom: 35px; -} - -.project:nth-child(odd) { - flex-direction: row-reverse; -} - -.project .text-content { - display: flex; - flex-direction: column; - align-self: start; -} - -.project h2 { - margin-bottom: 0; -} - -.project img { - width: 400px; - height: 280px; - object-fit: cover; - border-radius: 2em; - border: 0.2em solid #222; - cursor: pointer; -} - -.project-tags { - display: flex; - flex-direction: row; - gap: 10px; - margin: 0; - padding-block: 10px; - font-family: "Fira Mono", monospace; - font-weight: 500; -} - -.HTML { - background-color: #E34F26 !important; -} - -.CSS { - background-color: #1572B6 !important; -} - -.JS { - background-color: #F7DF1E !important; - color: #000; - text-shadow: #eee 0px 0px 2px !important; -} - -.JAVA { - background-color: #f89820 !important; -} - -.NOSQL { - background-color: #47A248 !important; -} - -.date { - margin-left: auto !important; - color: #bbb !important; - width: 6.5em !important; -} - -.project-tags p { - margin: 0; - font-size: 0.8em; - width: 3.5em; - border-radius: 1em; - background-color: #222; - padding: 0.2em; - text-align: center; - text-shadow: #111 0px 0px 2px; -} - -.project-description { - max-width: 23em; - font-size: 1.1em; - margin: 0; -} - -@media screen and (max-width: 1100px) { - - body { - font-size: 30px; - } - - #logo { - display: none; - } - - #nav-btn { - content: ""; - display: block; - position: fixed; - top: 25px; - right: 50px; - z-index: 11; - margin: 0; - background-image: url("/assets/plus.svg"); - background-size: contain; - height: 3em; - width: 3em; - padding: 0px; - transition: transform 0.5s ease; - cursor: pointer; - } - - body::after { - content: "[N]"; - display: flex; - position: fixed; - top: 20px; - left: 50px; - font-size: 3em; - font-weight: 700; - z-index: 11; - margin: 0; - padding: 0px; - font-family: "Fira Mono", monospace; - } - - body::before { - content: ""; - display: flex; - position: fixed; - top: 0; - left: 0; - width: 100%; - background-image: linear-gradient(180deg, #000, #0000); - height: 8em; - z-index: 10; - } - - #nav-btn.expanded { - transform: rotate(225deg); - } - - #navbar { - flex-direction: column; - height: 100vh; - width: 100vw; - justify-content: space-between; - position: fixed; - right: -100vw; - font-size: 3em; - margin: 0; - border: 0; - padding-inline: 0; - transition: transform 0.5s ease; - } - - #navbar.expanded { - transform: translateX(-100vw); - } - - #links, #nav { - position: static; - display: flex; - flex-direction: column; - transform: none; - } - - #links a, #nav a { - justify-content: center; - text-align: right; - } - - #links a:after, #nav a:after { - right: auto; - height: 1.2em; - - } - - #nav { - transform: translatey(2em); - } - - #links a svg { - padding-right: 30px; - } - - #homepage { - margin-bottom: 100px; - } - - #homepage .card { - flex-direction: column-reverse; - padding-block: 80px; - gap: 70px; - width: fit-content; - padding: 80px; - margin-top: 0; - } - - .card::after { - height: calc(100% - 10px); - width: calc(100% - 10px); - } - - #homepage-text { - text-align: center; - max-width: 20em; - } - - #homepage-img { - width: 300px; - height: 300px; - } - - #hi { - font-size: 1.2em; - } - - #name { - font-size: 3em; - } - - .project { - flex-direction: column; - } - - .project img { - width: 25em; - height: 17.5em; - } - - .project:nth-child(odd) { - flex-direction: column; - } - - .project img { - width: calc(100vw - 192px); - height: auto; - } - - #navbar #links { - padding-bottom: 1em; - } - - #homepage-img { - width: 500px; - height: 500px; - } - - #aboutme { - padding-top: 70px; - } - - #aboutme h1 { - transform: translateY(170px); - top: -150px; - } -} - +@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap'); + +html { + scroll-behavior: smooth; +} + +body { + background-color: #111; + color: #eee; + margin: 0; + font-family: "Barlow", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + width: 100vw; + overflow-x: hidden; + overflow-y: scroll; +} + +#top-shrtct { + position: fixed; + bottom: 30px; + right: 30px; + height: 3em; + width: 3em; + padding: 1.5em; + background-color: #0004; + border-radius: 50%; + opacity: 0; + transition: opacity 0.3s ease; + z-index: 10; +} + +#top-shrtct.visible { + opacity: 1; + cursor: pointer; + backdrop-filter: blur(6px); +} + +#nav-btn { + display: none; +} + +#navbar { + background-color: #000c; + backdrop-filter: blur(10px); + margin: 0; + overflow: hidden; + padding-inline: 30px; + font-size: 1.4em; + display: flex; + flex-direction: row; + align-items: center; + height: 60px; + position: sticky; + top: 0; + width: calc(100vw - 60px); + 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; +} + +#navbar p { + margin: 16px; + margin-inline: 0; +} + +#links, #nav { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + position: absolute; +} + +#links { + right: 20px; +} + +#nav { + left: 50%; + transform: translateX(-50%); +} + +#links a, #nav a { + text-decoration: none; + color: #eee; + margin: 16px; + display: flex; + flex-direction: row; + align-items: center; + position: relative; +} + +#links a:after, #nav a:after { + content: ""; + display: block; + border-bottom: solid 3px #f05; + position: absolute; + width: 0; + height: 36px; + transition: width 0.3s ease; +} + +#links a:after { + right: 0; +} + +#links a:hover:after, #nav a:hover:after { + width: 100%; +} + +#links a svg { + fill: #eee; + width: 1em; + height: 1em; + padding-right: 8px; +} + +#homepage { + width: 100%; + height: calc(100vh - 60px); + display: flex; + justify-content: center; + align-items: center; + gap: 70px; +} + +.card { + border-radius: 64px; + display: flex; + justify-content: center; + align-items: center; + backdrop-filter: blur(10px); + background-color: #111c; + position: relative; + overflow: hidden; + background-image: linear-gradient( + 135deg, + hsl(263, 80%, 40%), + hsl(341, 80%, 40%) 12%, + hsl(30, 80%, 40%) 25%, + #161616 35%, + #161616 65%, + #252525 100% + ); + &::after { + content: ""; + position: absolute; + height: calc(100% - 8px); + width: calc(100% - 8px); + z-index: -2; + border-radius: 60px; + background-image: linear-gradient( + 135deg, + hsl(263, 25%, 10%), + hsl(341, 25%, 10%) 10%, + hsl(30, 25%, 10%) 20%, + #161616 32% + ); + } +} + +#homepage .card { + font-family: "Fira Mono", monospace; + flex-direction: row; + padding-block: 80px; + gap: 70px; + width: fit-content; + padding: 50px; +} + +#homepage .card #homepage-text p { + z-index: 3; +} + +#homepage-text { + width: auto; + text-align: right; +} + +#homepage-img { + background-image: url("/assets/headshot.png"); + background-size: cover; + background-position: center; + width: 350px; + height: 350px; + aspect-ratio: 1/1; + border-radius: 50%; + position: relative; +} + +#homepage-img::before { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + background-image: repeating-conic-gradient( + #ff0050 0%, + #ff8000 33.333%, + #7520ff 66.666%, + #ff0050 100% + ); + border-radius: 50%; + z-index: -1; + filter: blur(14px); + animation: rotate 10s linear infinite; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +#homepage p { + margin: 0; + max-width: 800px; +} + +#hi { + font-size: 1.5em; + color: hsl(263, 50%, 65%); +} + +#name { + font-size: 5em; + color: #f05; + font-weight: 700; +} + +#box-with-title { + border-radius: 60px; + padding-inline: 50px; + padding-block: 30px; + position: relative; + max-width: 800px; + margin: auto; + overflow: hidden; + &::after { + content: ""; + position: absolute; + top: 4px; + left: 4px; + height: calc(100% - 8px); + width: calc(100% - 8px); + z-index: 1; + border-radius: 57px; + background-color: #111; + } + &::before { + content: ""; + position: absolute; + top: calc(50% - 100vw); + left: calc(50% - 100vw); + height: 200vw; + width: 200vw; + z-index: 0; + background-image: repeating-conic-gradient( + #ff0050 0%, + #ff8000 33.333%, + #7520ff 66.666%, + #ff0050 100% + ); + animation: rotate 10s linear infinite; + } +} + +#aboutme { + width: fit-content; + height: fit-content; + margin: auto; + position: relative; + font-family: "Barlow", sans-serif; + padding-top: 100px !important; /* padding to make sure that the scroll anchor works properly with the navbar */ +} + +#aboutme h1 { + background-color: #111; + padding-inline: 15px; + position: absolute; + text-align: center; + top: calc(-1.25em + 100px); + left: 70px; + z-index: 2; +} + +#aboutme p { + font-size: 1.1em; +} + +#box-with-title p { + position: relative; + z-index: 2; +} + +#age { + font-family: "Fira Mono", monospace; +} + +#projects { + margin: auto; + width: fit-content; + padding-top: 100px; +} + +#projects h1 { + padding-left: 75px; +} + +.project { + display: flex; + flex-direction: row; + padding: 2em; + width: fit-content; + margin: auto; + gap: 20px; + align-content: center; + justify-content: center; + margin-bottom: 35px; +} + +.project:nth-child(odd) { + flex-direction: row-reverse; +} + +.project .text-content { + display: flex; + flex-direction: column; + align-self: start; +} + +.project h2 { + margin-bottom: 0; +} + +.project img { + width: 400px; + height: 280px; + object-fit: cover; + border-radius: 2em; + border: 0.2em solid #222; + cursor: pointer; +} + +.project-tags { + display: flex; + flex-direction: row; + gap: 10px; + margin: 0; + padding-block: 10px; + font-family: "Fira Mono", monospace; + font-weight: 500; +} + +.HTML { + background-color: #E34F26 !important; +} + +.CSS { + background-color: #1572B6 !important; +} + +.JS { + background-color: #F7DF1E !important; + color: #000; + text-shadow: #eee 0px 0px 2px !important; +} + +.JAVA { + background-color: #f89820 !important; +} + +.NOSQL { + background-color: #47A248 !important; +} + +.date { + margin-left: auto !important; + color: #bbb !important; + width: 6.5em !important; +} + +.project-tags p { + margin: 0; + font-size: 0.8em; + width: 3.5em; + border-radius: 1em; + background-color: #222; + padding: 0.2em; + text-align: center; + text-shadow: #111 0px 0px 2px; +} + +.project-description { + max-width: 23em; + font-size: 1.1em; + margin: 0; +} + +@media screen and (max-width: 1100px) { + + body { + font-size: 30px; + } + + #logo { + display: none; + } + + #nav-btn { + content: ""; + display: block; + position: fixed; + top: 25px; + right: 50px; + z-index: 11; + margin: 0; + background-image: url("/assets/plus.svg"); + background-size: contain; + height: 3em; + width: 3em; + padding: 0px; + transition: transform 0.5s ease; + cursor: pointer; + } + + body::after { + content: "[N]"; + display: flex; + position: fixed; + top: 20px; + left: 50px; + font-size: 3em; + font-weight: 700; + z-index: 11; + margin: 0; + padding: 0px; + font-family: "Fira Mono", monospace; + } + + body::before { + content: ""; + display: flex; + position: fixed; + top: 0; + left: 0; + width: 100%; + background-image: linear-gradient(180deg, #000, #0000); + height: 8em; + z-index: 10; + } + + #nav-btn.expanded { + transform: rotate(225deg); + } + + #navbar { + flex-direction: column; + height: 100vh; + width: 100vw; + justify-content: space-between; + position: fixed; + right: -100vw; + font-size: 3em; + margin: 0; + border: 0; + padding-inline: 0; + transition: transform 0.5s ease; + } + + #navbar.expanded { + transform: translateX(-100vw); + } + + #links, #nav { + position: static; + display: flex; + flex-direction: column; + transform: none; + } + + #links a, #nav a { + justify-content: center; + text-align: right; + } + + #links a:after, #nav a:after { + right: auto; + height: 1.2em; + + } + + #nav { + transform: translatey(2em); + } + + #links a svg { + padding-right: 30px; + } + + #homepage { + margin-bottom: 100px; + } + + #homepage .card { + flex-direction: column-reverse; + padding-block: 80px; + gap: 70px; + width: fit-content; + padding: 80px; + margin-top: 0; + } + + .card::after { + height: calc(100% - 10px); + width: calc(100% - 10px); + } + + #homepage-text { + text-align: center; + max-width: 20em; + } + + #homepage-img { + width: 300px; + height: 300px; + } + + #hi { + font-size: 1.2em; + } + + #name { + font-size: 3em; + } + + .project { + flex-direction: column; + } + + .project img { + width: 25em; + height: 17.5em; + } + + .project:nth-child(odd) { + flex-direction: column; + } + + .project img { + width: calc(100vw - 192px); + height: auto; + } + + #navbar #links { + padding-bottom: 1em; + } + + #homepage-img { + width: 500px; + height: 500px; + } + + #aboutme { + padding-top: 70px; + } + + #aboutme h1 { + transform: translateY(170px); + top: -150px; + } +} +