diff --git a/README.md b/README.md index 737e88d..0bb1778 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Portfolio-Site +s + A summary of all my work, also my first proper web-design project. Check out the page for more info on me and my work/for my contact details. Its hosted at https://Wil-Ro.github.io/Portfolio diff --git a/index.html b/index.html index 3b15943..df4add4 100644 --- a/index.html +++ b/index.html @@ -1,122 +1,153 @@ - - -
- - - - - - - - - Nye Evans Portfolio -
- - -
-

-
Nye "Ro" Evans
-
Portfolio
-

-
- -
- An aspiring software developer who specialises in C++, C# and Python, with an intrest in lower level langauges like Assembly; - Most of my work is software based, with Python and C++ along with some web-development experience in HTML, CSS, JavaScript and TypeScript. - -
- -
- me -
- -
- Most of my experience relates to personal projects, however I have previously done work experience at JBA Consulting writing a - program to convert their SQL databases to Excel spreadsheets and am currently working as an intern in software development in test. I also often teach Python and HTML, having taught many students at my school's coding club for over 6 years and having tutored - GCSE students briefly. You can see my full CV here. -
- -
- Check out my larger projects here: -
click a project to find out more
-
- - - - - - -
-

VR physics engine

- - - -

A project done for my EPQ, during post-16, where I aimed to create a virtual reality environment where the user could grab and interact with objects in a semi-physics based - environment.

This system was my introduction to Unreal Engine and mainly used its "Blueprint" visual language, however I later used C++ to try and add my own physics - to it. -

- - -
- -
-

Tower defence game

- - - -

One of my first projects, this was created with a friend to help us gain a better understanding of python.

This was a basic tower defence game but featured a fully scalable - level design system. -

- - -
- -
-

Work on Aardvark XR

- - - -

Aardvark is a web-based virtual reality system which allows users to create and share web apps which are overlayed on top of the users VR experience.

- Over the course of its release I have attended its first hackathon and continued to support it long afterwards, having worked both on my own and with other developers to create apps - for the system to help it gain traction. -

- - -
- -
-

Unity based Mind Map software

- - - -

A project done as my final piece for my A-level computer science course.

This was a program designed to create mind maps, it could have nodes made, and linked, have images added and - included a pen tool to allow the user to draw notes on top of the mind maps. It also had a fully functional undo and redo system and the ability to save and load files. -

- - -
- - - - - - -
- I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below. -
- -
- Twitter -   - Email -   - Github -   - Dev.to - -   - CV -
- - - + + + + + + + Nye Evans Portfolio + + + + +
+
Nye Evans Portfolio
+
+
+
+
+
+
+ +
+
+ home + skills + projects + contact me +
+
+ +
+
+
Hello 👋
+
+ I'm Nye Ro Evans And I'm
+ software developer +
+ +
My Projects
+ +
+
+
+ +
+
skills
+
+ specialises in TypeScript, C# and python, with an interest in lower + level languages like C++; Most of my work is software based, making + games and tools in python and C#. +
+
+ +
+
+
Work expearince
+
+ Most of my experience relates to personal projects, however I have + previously done work experience at JBA Consulting writing a program to + convert their SQL databases to Excel spreadsheets. I also often teach + Python and HTML, having taught many students at my school's coding + club for over 6 years and having tutored GCSE students +
+
+
+ +
+
My Projects
+ +
+
+
VR physics engine
+
+ A project done for my EPQ, during post-16, where I aimed to create a + virtual reality environment where the user could grab and interact + with objects in a semi-physics based environment. This system was my + introduction to Unreal Engine and mainly used its "Blueprint" visual + language, however I later used C++ to try and add my own physics to + it. +
+
learn more
+
+ +
+
+
Tower defence game
+
+ One of my first projects, this was created with a friend to help us + gain a better understanding of python. +
+
learn more
+
+ +
+
+
Work on Aardvark XR
+
+ Aardvark is a web-based virtual reality system which allows users to + create and share web apps which are overlayed on top of the users VR + experience. + +
learn more
+
+
+
+ + + + +
+
I hope you like my work! If you ever want to
contact me, my Email, Github and Social Medias can be found below.
+ +
+ + + + + + + + + + + + +
+ + + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..edbf348 --- /dev/null +++ b/main.css @@ -0,0 +1,381 @@ +:root { + --bg: #eff7e1; + --bg-1: #214151; + --bg-2: #c8a777; + --bg-3: #744923; + --bg-4: #1DA1F3; +} +/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700); */ +body, +html { + scroll-behavior: smooth; + margin: 0; + font-family: "Roboto", sans-serif; + background-color: var(--bg); +} +a{ + text-decoration: none; +} +.btn { + transition: all 0.2s ease; +} +.btn:active { + transform: scale(0.95); + box-shadow: 0 0 0 wheat; +} +.sec-1 { + transition: all 0.3s ease; +} + +.nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + border-bottom: 1px solid var(--bg-1); + background-color: var(--bg-1); + position: fixed; + left: 0; + top: 0; + right: 0; + color: white; + z-index: 999; +} + +.nav-left { + font-size: 1.3em; + font-weight: 700; + text-transform: capitalize; +} + +.menu-btn { + cursor: pointer; +} +.line { + width: 30px; + height: 3px; + background-color: white; + margin: 5px 0; + position: relative; + transition: all 0.2s ease; + top: 0; + left: 0; + opacity: 100; + border-radius: 0; +} + +.line1.active{ + transform: rotate(45deg); + top: 8px; + border-radius: 5px; +} +.line2.active{ + left: -5px; + opacity: 0; +} +.line3.active{ + transform: rotate(-45deg); + top: -8px; + border-radius: 5px; +} +.menu{ + overflow: hidden; + position: fixed; + inset: 70px 100% 0 0; + /* inset: 70px 0 0 0; */ + background-color: #46708581; + z-index: 998; + transition: all .5s ease-in-out; + display: flex; + justify-content: center; + align-items: center; +} +.menu.open{ + inset: 70px 0 0 0; +} +.menu-inner{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 1.5em; + font-weight: 700; + text-transform: capitalize; + cursor: pointer; + gap: 20px; +} +.menu-inner a{ + color: white; +} +.sec-1 { + position: relative; + top: 100px; + display: grid; + grid-template-columns: 280px minmax(230px, 330px); + grid-template-rows: minmax(300px, 350px); + place-content: center; + padding: 20px; + column-gap: 30px; + row-gap: 5px; +} +.sec1-img { + grid-column: 2/4; + background-image: url(./images/Profile3.png); + background-size: cover; + background-position: center; +} +.sec1-title { + font-size: clamp(2em, 6vmin, 3em); + font-weight: 700; + color: rgb(37, 74, 104); +} +.sec1-body { + font-size: clamp(1.1em, 4vmin, 1.5em); +} +span.colored-text { + color: var(--bg-2); + font-size: clamp(1.1em, 4vmin, 1.5em); + font-weight: 700; +} +.sec1-btn { + margin-top: 35px; + background-color: var(--bg-2); + color: white; + font-size: 1.3em; + font-weight: 700; + padding: 10px 20px; + box-shadow: 6px 6px 2px rgb(182, 182, 182); + width: max-content; + height: max-content; + cursor: pointer; +} +.sec1-left { + align-self: center; +} + +@media (max-width: 600px) { + .sec-1 { + grid-template-columns: 250px minmax(200px, 330px); + } + .nav-left{ + font-size: clamp(1em, 3vmin, 1.5em); + } +} +@media (max-width: 550px) { + .sec-1 { + grid-template-columns: 1fr; + grid-template-rows: auto auto; + text-align: center; + justify-items: center; + row-gap: 20px; + } + .sec1-left { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + } + .sec1-img { + grid-column: 1/2; + grid-row: 1/2; + border-radius: 50%; + width: 100px; + height: 100px; + justify-self: center; + } + .sec1-btn { + margin-top: 15px; + font-size: 1.1em; + } +} + +.sec-2 { + background-color: var(--bg-3); + color: white; + position: relative; + top: 150px; + display: flex; + flex-direction: column; + gap: 10px; + place-items: center; + padding: 50px; + text-align: center; +} +.sec2-title { + font-size: 1.5em; + font-weight: 700; +} +.sec2-body { + font-size: 1.1em; + max-width: 450px; +} + +.sec-3 { + width: 100%; + display: flex; + justify-content: center; +} +.sec3-inner { + position: relative; + top: 190px; + background: #ffffff; + box-shadow: 0px 0px 28.785px 3.59813px #cccccc; + padding: 25px; + margin: 10px; + + text-align: center; + max-width: 480px; + display: flex; + flex-direction: column; + gap: 10px; +} +.sec3-title { + font-size: 1.4em; + font-weight: 700; +} +.sec3-body { + font-size: 1.1em; +} + +/* sec 5 */ + +.sec-5 { + width: 100%; + display: grid; + grid-template-columns: minmax(200px, 750px); + grid-template-rows: auto repeat(4, max-content); + position: relative; + top: 200px; + justify-content: center; +} +.sec5-title { + text-align: center; + font-size: 1.5em; + font-weight: 700; + color: var(--bg-3); +} +.project { + display: grid; + grid-template-columns: minmax(100px, 150px) 1fr; + grid-template-rows: auto 1fr auto; + background: #ffffff; + box-shadow: 0px 0px 28.785px 3.59813px #cccccc; + padding: 25px; + margin: 20px; + column-gap: 20px; + row-gap: 10px; +} +.project-img { + grid-row: 1/4; + background-image: url(./pages/gallery/epq-project/projectHeaderImage.png); + background-size: cover; + background-position: center; +} +.project-title { + font-size: 1.4em; + font-weight: 700; + color: var(--bg-1); +} +.project-body { + font-size: 1em; +} +.proj-learn-more-btn { + background-color: var(--bg-3); + color: white; + width: max-content; + padding: 10px 15px; + font-size: 1.2em; + cursor: pointer; +} + +@media (max-width: 570px) { + .project { + grid-template-columns: 1fr; + grid-template-rows: 200px; + grid-auto-rows: max-content; + } + .proj-learn-more-btn { + font-size: 1em; + } +} + +.sec-6 { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: max-content 1fr; + background-color: var(--bg-1); + padding: 20px; + position: relative; + top: 210px; +} +.sec6-title{ + text-align: center; + font-size: 1em; + color: white; + font-weight: 700; + margin: 0 10px; +} +.contacts { + display: grid; + grid-template-columns: repeat(4, minmax(60px, 80px)); + grid-auto-rows: 70px; + gap: 10px; + justify-content: center; + padding: 20px; +} + +.social-media { + background: #ffffff; + box-shadow: 0px 0px 28.785px 3.59813px #3d3d3d; + padding: 10px; + border-radius: 15px; + height: 100%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto; + color: var(--bg-4); + text-align: center; +} + + + + + + + + + +.s-img{ + width: 40px; + height: 40px; + margin: 5px auto; +} +.twitter{ + background-image: url(./icons/twitter.png); + background-size: contain; + background-position: center; +} +.github{ + background-image: url(./icons/github.png); + background-size: contain; + background-position: center; +} +.email{ + background-image: url(./icons/email.png); + background-size: contain; + background-position: center; +} +.dev{ + background-image: url(./icons/dev.png); + background-size: cover; + background-position: center; +} + + +@media (max-width:370px) { + .contacts{ + grid-template-columns: repeat(2, minmax(60px, 80px)); + column-gap: 10px; + row-gap: 30px; + } +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..b700347 --- /dev/null +++ b/main.js @@ -0,0 +1,16 @@ +const menuBtn=document.querySelector('.menu-btn'); + +menuBtn.addEventListener('click',()=>{ + document.querySelector('.menu-btn').classList.toggle('active'); + document.querySelector('.menu').classList.toggle('open'); + document.querySelector('.line1').classList.toggle('active'); + document.querySelector('.line2').classList.toggle('active'); + document.querySelector('.line3').classList.toggle('active'); +}); + + +// var text=document.querySelector('.colored-text') +// var jobList=["software developer", "python programmer", "php developer"] +// var count=0 + +// // text writing animation