diff --git a/images/Icon.ico b/images/Icon.ico index 4086a97..7dcfbbd 100644 Binary files a/images/Icon.ico and b/images/Icon.ico differ diff --git a/images/Profile2.png b/images/Profile2.png deleted file mode 100644 index 130285c..0000000 Binary files a/images/Profile2.png and /dev/null differ diff --git a/images/Profile3.png b/images/Profile3.png deleted file mode 100644 index 4c0b6e9..0000000 Binary files a/images/Profile3.png and /dev/null differ diff --git a/images/Profile3.webp b/images/Profile3.webp deleted file mode 100644 index 1b601ab..0000000 Binary files a/images/Profile3.webp and /dev/null differ diff --git a/images/Profile5.webp b/images/Profile5.webp new file mode 100644 index 0000000..08e58a7 Binary files /dev/null and b/images/Profile5.webp differ diff --git a/images/Profile6.webp b/images/Profile6.webp new file mode 100644 index 0000000..ab92151 Binary files /dev/null and b/images/Profile6.webp differ diff --git a/images/popup-tongue.png b/images/popup-tongue.png deleted file mode 100644 index a502049..0000000 Binary files a/images/popup-tongue.png and /dev/null differ diff --git a/images/popup-tongue.webp b/images/popup-tongue.webp deleted file mode 100644 index 18ad553..0000000 Binary files a/images/popup-tongue.webp and /dev/null differ diff --git a/images/profile1.jpg b/images/profile1.jpg new file mode 100644 index 0000000..d04ff9b Binary files /dev/null and b/images/profile1.jpg differ diff --git a/index.html b/index.html index bb5d955..f282add 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + @@ -17,127 +18,36 @@ -

-
Rosia Evans
+ Rosia Evans
Portfolio

-
An aspiring developer who specialises in C++, C# and Typescript with an interest in lower level hardware and XR; Most of my work is software based, making tools and messing around with VR software.
-
-
- An image of Rosia Evans, Me + +
+
+ An image of Rosia Evans, Me
-
-
- Most of my experience relates to personal projects, however I have previously worked at Skipton Building Society, working in a small team - to experiment with automating their testing. 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. You can see my full CV here. -
- -
- Check out my larger projects here: -
hover over or click a project to find out more
-
- - - - -
-
- -
- - A virtual hand grabbing a cube - - +
+
+ Most of my experience relates to personal projects, however I have previously worked at Skipton Building Society, working in a small team + to experiment with automating their testing. 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. You can see my full CV here.
-
- A virtual hand grabbing a cube - -

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. -

- -
- - -
- - A mind-map being build in a program - - -
- -
- A mind-map being build in a program - -

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. -

- -
- - -
- - A game which displays a road with cats attacking wool along it - - -
- -
- The Skipton Building Society Logo, a blue castle - -

Work for Skipton Building Society

- -

Work done during an internship as a software tester/software developer in test at Skipton Building Society where I worked with a small team of 2-3 collegues - to push for, implement and later educate other testers on the society's automated UI testing. -

- -
- - -
- - A virtual hand playing cards - - -
- -
- A virtual hand playing cards - -

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. -

+
- -
- - -
- I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below. -
+
Mastodon diff --git a/pages/AllProjects.css b/pages/AllProjects.css index 78a5c07..f6dce60 100644 --- a/pages/AllProjects.css +++ b/pages/AllProjects.css @@ -1,9 +1,10 @@ -.projectThumbnail{ - width: 16vh; + + +h1{ + font-size: 2rem; } h2{ - text-align: center; margin-bottom: 10vh; } @@ -13,12 +14,57 @@ h2{ } .itemText{ - display: flex; - flex-direction: column; padding: 10px; - color: #ffd256; } -body{ - margin: 20vw; -} \ No newline at end of file +.galleryLinkContainer{ + text-decoration: none; + + transition: background-color 0.5s; + color: var(--secondary); +} + +.galleryLinkContainer:hover{ + background-color: var(--highlight); + color: var(--base); +} + +.galleryLinkContainer:hover, .galleryLinkContainer:hover a{ + color: var(--base); +} + +.galleryImage{ + min-width: 100%; + margin-bottom: 20px; + + overflow: clip; + + visibility: hidden; + max-height: 0px; + + + transition: max-height 1s; + -moz-transition: max-height 1s; +} + +.galleryImage img{ + width: 100%; + max-height: 100%; + object-fit: cover; + object-position: center center; +} + +.galleryLinkContainer:hover .galleryImage{ + visibility: visible; + max-height: 20vh; +} + +.galleryImage:hover{ + visibility: visible; + max-height: 20vh; +} + +/* overwriting effects */ +a.galleryLink{ + text-decoration: none; +} diff --git a/pages/AllProjects.html b/pages/AllProjects.html index 264fc27..5fb14e6 100644 --- a/pages/AllProjects.html +++ b/pages/AllProjects.html @@ -5,80 +5,66 @@ + - Nye Evans Portfolio + Rosia Evans Portfolio

All Projects

click to find out more

- + -
- A virtual hand playing -
+

Aardvark XR

-
- An open source project, this was a platform that would run small web-based apps over the top of other virtual reality programs, like a form of augmented reality within vr. - I helped produce apps, known as "gadgets" for the platform and created small additions to the main functionality of the program, adding a gesture system to allow the menu to be opened through hand gestures. -
+ An open-source VR program that allowed users to overlay tools onto other VR apps. I built tools for this, working with a small number of other + developers from around the world. +
+
-
+ -
- A virtual hand grabbing a cube -
+

Vr interaction system

-
- Done as a final project for my Extended Project Qualification (EPQ) and my first VR project, this was a basic program made in Unreal Engine that allowed users to grab and interact with physics based objects - in a small VR garden. -
+ A program made in Unreal Engine that allowed users to grab and interact with physics based objects in a small VR garden. +
+
-
+ -
- A mind-map being build in a program -
+

Mind map tool

-
- The final project for my A-levels, this was a Unity based tool that allowed the user to create mindmaps using a varied set of tools and a fully functional undo/redo system. -
+ A Unity based tool that allowed the user to create mindmaps using a varied set of tools and an undo/redo system. Built for my Computer Science A-Level. +
+
-
-
- A game which displays a road with cats attacking wool along it -
+

Cat Tower Defence

-
- Cat Tower Defence was a game made with a small group of friends in order to teach ourselves pythons "pygame" library, this was done over the course of a month or so and included some extra - modding space, allowing users to make their own levels. This was one of my first projects with a GUI. -
+ A game made with a small group of friends, done over the course of a month or so and included some extra modding space, allowing users to make their own levels. +
+
- -
+
-
- the logo of Skipton Building Society, a blue castle -
-

Work for Skipton Building Society

-
- Work done during an internship as a software tester/software developer in test at Skipton Building Society where I worked with a small team of 2-3 collegues - to push for, implement and later educate other testers on the society's automated UI testing. -
+
+

Work for Skipton Building Society

+ Work done during an internship as a software tester at Skipton Building Society where I worked with a small team of 2-3 collegues + to push for, implement and later educate other testers on the society's automated UI testing. +
+
-
diff --git a/pages/CVPage.css b/pages/CVPage.css index f6e8040..ed2b922 100644 --- a/pages/CVPage.css +++ b/pages/CVPage.css @@ -7,9 +7,9 @@ } body{ - color: #ffd256; + color: var(--secondary); font-family: "roboto"; - background-color: #181818; + background-color: var(--base); line-height: 1.3; margin: 3vw; @@ -42,7 +42,7 @@ li{ } a:link, a:visited{ - color: #ffd256; + color: var(--secondary); } .backButton{ @@ -72,7 +72,7 @@ a:link, a:visited{ } #introText{ - border-bottom: solid 2px #ffd256; + border-bottom: solid 2px var(--secondary); font-size: 1.2rem; text-align: left; padding-bottom: 20px; diff --git a/pages/Socials.html b/pages/Socials.html new file mode 100644 index 0000000..c9af9c5 --- /dev/null +++ b/pages/Socials.html @@ -0,0 +1,30 @@ + + + +
+ + + + + + + +Rosia Evans +
+ + +
+Rosia Evans - Socials +
+ + + + + \ No newline at end of file diff --git a/pages/basic.css b/pages/basic.css index cc95ffc..0500008 100644 --- a/pages/basic.css +++ b/pages/basic.css @@ -5,21 +5,24 @@ font-weight: 100; src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf") } + html{ font: 100%; } body{ - color: #ffd256; - background-color: #181818; + color: var(--secondary); + background-color: var(--base); font-family: "roboto"; line-height: 1.3; + + padding: 10vw 20vw 10vw 20vw; } button{ background-color: transparent; border: none; - color: #ffd256; + color: var(--secondary); } @@ -28,57 +31,20 @@ button:focus { outline: none; } -a:not(.galleryLink), a:visited:not(.galleryLink){ - color: #ffd256; - border-radius: 2px; - transition: background-color 0.5s, color 0.5s; -} - -.galleryLink{ /*class to be given to any link that doesnt want fancy yellow backgrounds on hover*/ - text-decoration: none; -} - h1{ font-size: clamp(1.2rem, 4vw, 4rem); - - padding-left: 6; - - margin-top: 4vh; - - text-align: center; - -} - -.subTitle{ - font-size: 30%; - padding-top: 10; - padding-left: 5; } #socialBar{ display: flex; - margin-bottom: 5vh; + margin: 2rem 0 5vh 0; + + font-size: 1.2rem; justify-content: center; } #backButtonContainer{ - text-align: center; margin-bottom: 7vh; margin-top: 7vh; } - - -.orangeBorder{ - border: 2px solid transparent; - border-radius: 5px; - - padding: 5px; - - transition: border 0.5s; -} - -.orangeBorder:hover{ - border: 2px solid #ffd256; - padding: 5px; -} \ No newline at end of file diff --git a/pages/effects.css b/pages/effects.css index 5835951..f30f3d1 100644 --- a/pages/effects.css +++ b/pages/effects.css @@ -1,48 +1,48 @@ -a:not(.galleryLink){ - transition: background-color 0.5s +a{ + transition: background-color 0.5s; + color: var(--secondary); } a:hover:not(.galleryLink){ - background-color: #ffd256; - color: #181818; - border-radius: 2px; + background-color: var(--highlight); + color: var(--base); text-decoration: none; } span{ - background-color: #ffd256; - color: #181818; + background-color: var(--secondary); + color: var(--base); border-radius: 2px; } span:hover{ - background-color: #181818; - color: #ffd256; + background-color: var(--base); + color: var(--secondary); border-radius: 2px; - outline: solid 1px #ffd256; + outline: solid 1px var(--secondary); } ::selection { - background-color: #ffd256; - color: #181818; + background-color: var(--highlight); + color: var(--base); } ::-moz-selection { - background-color: #ffd256; - color: #181818; + background-color: var(--highlight); + color: var(--base); } ::-o-selection { - background-color: #ffd256; - color: #181818; + background-color: var(--highlight); + color: var(--base); } ::-ms-selection { - background-color: #ffd256; - color: #181818; + background-color: var(--highlight); + color: var(--base); } ::-webkit-selection { - background-color: #ffd256; - color: #181818; + background-color: var(--highlight); + color: var(--base); } diff --git a/pages/gallery/aardvark-work/aardvark-work.html b/pages/gallery/aardvark-work/aardvark-work.html index f83b070..c32768b 100644 --- a/pages/gallery/aardvark-work/aardvark-work.html +++ b/pages/gallery/aardvark-work/aardvark-work.html @@ -4,6 +4,7 @@ + Rosia Evans Portfolio diff --git a/pages/gallery/aardvark-work/projectHeaderImage2.webp b/pages/gallery/aardvark-work/projectHeaderImage2.webp new file mode 100644 index 0000000..f0cd195 Binary files /dev/null and b/pages/gallery/aardvark-work/projectHeaderImage2.webp differ diff --git a/pages/gallery/blog-post-default.css b/pages/gallery/blog-post-default.css index 65a8a7a..366643c 100644 --- a/pages/gallery/blog-post-default.css +++ b/pages/gallery/blog-post-default.css @@ -7,23 +7,26 @@ } body{ - color: #ffd256; + color: var(--secondary); font-family: "roboto"; - background-color: #181818; + background-color: var(--base); margin-left: 10vw; margin-right: 10vw; + + /* fixes padding inherited from basic.css*/ + padding: 0; } h1{ font-size: clamp(20px, 4vw, 170px); - height: 20vh; - text-align: center; + height: 10vh; + text-align: left; + margin-top: 30px; } - a:link, a:visited{ - color: #ffd256; + color: var(--secondary); text-decoration: none; } @@ -45,14 +48,13 @@ a:link, a:visited{ iframe{ border: 2px solid transparent; - border-radius: 5px; padding: 5px; transition: border 0.5s; } iframe:hover{ - border: 2px solid #ffd256; + border: 2px solid var(--highlight); } .backButton{ @@ -117,7 +119,7 @@ iframe:hover{ } iframe{ - border: 2px solid #ffd256; + border: 2px solid var(--secondary); width: 90vw; height: 50vw; diff --git a/pages/gallery/cat-tower-defence/cat-tower-defence.html b/pages/gallery/cat-tower-defence/cat-tower-defence.html index 8a56901..37c9e3c 100644 --- a/pages/gallery/cat-tower-defence/cat-tower-defence.html +++ b/pages/gallery/cat-tower-defence/cat-tower-defence.html @@ -4,6 +4,7 @@ + Rosia Evans Portfolio diff --git a/pages/gallery/cat-tower-defence/projectHeaderImage2.webp b/pages/gallery/cat-tower-defence/projectHeaderImage2.webp new file mode 100644 index 0000000..e023953 Binary files /dev/null and b/pages/gallery/cat-tower-defence/projectHeaderImage2.webp differ diff --git a/pages/gallery/epq-project/epq-project.html b/pages/gallery/epq-project/epq-project.html index 0491e6f..8c2d0d7 100644 --- a/pages/gallery/epq-project/epq-project.html +++ b/pages/gallery/epq-project/epq-project.html @@ -4,6 +4,7 @@ + Rosia Evans Portfolio diff --git a/pages/gallery/epq-project/projectHeaderImage2.webp b/pages/gallery/epq-project/projectHeaderImage2.webp new file mode 100644 index 0000000..ea262a6 Binary files /dev/null and b/pages/gallery/epq-project/projectHeaderImage2.webp differ diff --git a/pages/gallery/mind-map/mind-map.html b/pages/gallery/mind-map/mind-map.html index bade77d..e8896c1 100644 --- a/pages/gallery/mind-map/mind-map.html +++ b/pages/gallery/mind-map/mind-map.html @@ -3,6 +3,7 @@ + Rosia Evans Portfolio diff --git a/pages/gallery/mind-map/projectHeaderImage2.webp b/pages/gallery/mind-map/projectHeaderImage2.webp new file mode 100644 index 0000000..0f1ef90 Binary files /dev/null and b/pages/gallery/mind-map/projectHeaderImage2.webp differ diff --git a/pages/gallery/room-builder/room-builder.html b/pages/gallery/room-builder/room-builder.html index 77d10d6..25cbf1d 100644 --- a/pages/gallery/room-builder/room-builder.html +++ b/pages/gallery/room-builder/room-builder.html @@ -4,6 +4,7 @@ + Rosia Evans Portfolio diff --git a/pages/gallery/sbs-work/projectHeaderImage2.webp b/pages/gallery/sbs-work/projectHeaderImage2.webp new file mode 100644 index 0000000..4a42c02 Binary files /dev/null and b/pages/gallery/sbs-work/projectHeaderImage2.webp differ diff --git a/pages/gallery/sbs-work/sbs-work.html b/pages/gallery/sbs-work/sbs-work.html index 3ede456..bdc1011 100644 --- a/pages/gallery/sbs-work/sbs-work.html +++ b/pages/gallery/sbs-work/sbs-work.html @@ -4,6 +4,7 @@ + Rosia Evans Portfolio diff --git a/pages/mainpage.css b/pages/mainpage.css index 381a82f..9ee7083 100644 --- a/pages/mainpage.css +++ b/pages/mainpage.css @@ -1,238 +1,65 @@ #Title{ - font-size: clamp(1.2rem, 4vw, 4rem); - - padding-left: 6; - - margin-top: 10vh; - margin-bottom: 70vh; - margin-left: 2vw; - margin-right: 60vw; - - height: 20vh; + font-size: 2rem; text-align: left; + margin-bottom: 2rem; + max-width: 15vw; + + border-bottom: 2px solid var(--secondary); + + transition: background-color 0.5s; + +} + +#Title:hover{ + background-color: var(--highlight); + color: var(--base); + + border-bottom: 2px solid var(--highlight); +} + +.subTitle{ + font-size: 60%; + padding-top: 10; + margin-bottom: 10; } .textBox{ - text-align: center; + text-align: left; font-size: clamp(1rem, 1.2vw, 3rem); - padding: 1.3vh; - margin-top: 8vh; - margin-bottom: 8vh; - margin-left: 10vw; - margin-right: 10vw; } -.profileImageContainer{ - width: 30vw; - height: 30vw; - text-align: center; - margin: 0 auto; + +#mainContent{ + display: flex; + flex-direction: row; + + margin-top: 1rem; +} + +#sideText{ + margin-left: 2rem; +} + +#profileImageContainer{ + min-width: 20vw; + height: 20vw; + + margin-left: 0.5rem; +} + +#galleryButton{ + margin-top: 5vh; } .profileImage{ - border-radius: 2px; object-fit: cover; width: 100%; height:100% } -#galleryHeader{ - margin-left: 30vw; - margin-right: 30vw; - - border-radius: 5px; - - font-size: clamp(1rem, 1.2vw, 3rem); -} - -.gallery{ - display: flex; - margin-left: 10vw; - margin-right: 10vw; - height: 19vh; - margin-bottom: 5vh; - transition: margin-bottom 2s 2s ease-in; - justify-content: space-evenly; -} - -.galleryContainer:hover .gallery{ - margin-bottom: 28vh; - transition: 0.5s; -} - -.galleryItem{ - height: 100%; -} - - -.galleryItem:hover + .galleryPopup{ - visibility: visible; - opacity: 1; -} - -.galleryItem:hover .popupTongue{ - visibility: visible; - opacity: 1; -} - -.galleryPopup:hover{ - visibility: visible; - opacity: 1; -} - -.galleryPopup:hover .popupTongue{ - visibility: visible; - opacity: 1; -} - -.galleryPopup{ - visibility: hidden; - opacity: 0; - - display: flex; - z-index: 5; - position: absolute; - background-color: #ffd256; - border-radius: 2px; - color: #181818; - width: 78.5vw; - height: 19vh; - transition: visibility 0.3s, opacity 0.5s; - margin-top: 20.85vh; -} - -.popupTongue{ - visibility: hidden; - opacity: 0; - transition: visibility 0.3s, opacity 0.5s; - - width: 1.85vh; - height: 1.85vh; - margin-left: 5vw; -} - -.popupImage{ - /*display: none;*/ - padding: 10px; -} - -.popupTextContainer{ - display: flex; - flex-direction: column; - padding: 6px; - color: #181818; -} - -.galleryImage{ - width: 100%; - height: 100%; -} - -.galleryImageContainer{ - height: 100%; - width: 100%; - display: block; -} - -.galleryTitle{ - font-weight: 700; -} - -#galleryOutroLink{ - text-align: center; - margin-top: 5vh; -} - -#outroText{ - margin-top: 12vh; - margin-bottom: 20vh; - margin-left: 27vw; - margin-right: 27vw; -} - @media (orientation:portrait){ - #Title{ - font-size: 10vw; - margin-right: 50vw; - } - - .textBox{ - font-size: 0.7rem; - margin-left: 2vw; - margin-right: 2vw; - } - - .profileImageContainer{ - margin: 2vh; - width: auto; - height: auto; - } - - .profileImage{ - border-radius: 1vw; - } - - #galleryHeader{ - margin-left: 2vw; - margin-right: 2vw; - font-size: 0.7rem; - } - - .gallery{ - margin-left: 2vw; - margin-right: 2vw; - justify-content: flex-start; - flex-wrap: wrap; - height: 100vw; - } - - .galleryItem{ - width: 20vw; - height: 20vw; - margin-bottom: 3vw;; - } - - .galleryPopup{ - visibility: visible; - opacity: 1; - z-index: 0; - position: static; - background-color: transparent; - color: #ffd256; - width: 73.5vw; - height: 20vw; - margin-top: 0vh; - } - - .popupTongue{ - display: none; - } - - .popupImage{ - display: none; - } - - .galleryImage{ - border-radius: 2px; - } - - - #galleryOutroLink{ - font-size: 0.7rem; - } - - #outroText{ - margin-top: 12vh; - margin-bottom: 20vh; - margin-left: 2vw; - margin-right: 2vw; - } - - .galleryLink{ /*this is set in basics, but the gallery on mobile will want to be different*/ - text-decoration: none; - color:#ffd256; - } + } diff --git a/pages/socials.css b/pages/socials.css new file mode 100644 index 0000000..bf62d14 --- /dev/null +++ b/pages/socials.css @@ -0,0 +1,44 @@ +body{ + margin: 0; + padding: 0; +} + +#container{ + display: flex; + flex-direction: column; + +} + +#container a{ + padding: 7vh 0 7vh 0; + text-align: center; + width: 100vw; + + font-size: 3rem; +} + +#title{ + font-size: 3rem; + text-align: center; +} + + + +@media (orientation:portrait){ +#container a{ + font-size: 4rem; + text-decoration: none; +} + +#container a:nth-child(odd){ + background-color: var(--highlight); + color: var(--base); +} + +/*hover colour*/ +#container a:hover{ + background-color: var(--base); + color: var(--highlight); +} + +} diff --git a/pages/variables.css b/pages/variables.css new file mode 100644 index 0000000..c23218b --- /dev/null +++ b/pages/variables.css @@ -0,0 +1,7 @@ +:root{ + --base: #181818; + --secondary: #ffd256; + --secondary: #dfdfdf; + + --highlight: #90f3c8; +} \ No newline at end of file