DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'style-rework'

Browse source
This commit is contained in:
Rosia E Evans 2022-12-23 20:03:01 +00:00
commit 9c9194a15f
35 changed files with 702 additions and 532 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -2,4 +2,6 @@
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
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/
..hopefully

BIN
files/CV.pdf
View file

Binary file not shown.

BIN
files/RosiaEvansCV.pdf Normal file
View file

Binary file not shown.

BIN
images/Profile.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.5 MiB

BIN
images/Profile3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
images/Profile4.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/popup-tongue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/popup-tongue.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 640 B

BIN
images/wallpaper.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 685 KiB

BIN
images/wallpaperPaper.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 347 KiB

BIN
images/wallpaperPaper1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 641 KiB

169
index.html
View file

@ -1,121 +1,154 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "pages\basic.css">
<link rel = "stylesheet" href = "pages\mainpage.css">
<link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico">
<link rel="preload" href="fonts/Roboto/RobotoMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin> <!--we preload the font to stop a flash of unstyled text-->
<meta charset="UTF-8">
<script src = "scripts\gallery.js" type = "module"></script>
<script src = "scripts\autoScroll.js" type = "module"></script>
<title>Rosia Evans Portfolio</title>
</header>
<body>
<div id = "introScreenSpace">
<h1>
<h1 id = "Title">
<div id = "siteTitle">Rosia Evans</div>
<div class = "subTitle">Portfolio</div>
</h1>
</div>
<div class = "textBox">
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.
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.
</div>
<div style = "text-align: center;">
<img src = "images/Profile3.png" id = "profileImage" class = "profileImage orangeBorder" alt = "me">
<div class = "profileImageContainer orangeBorder">
<img src = "images/Profile4.webp" alt = "An image of Rosia Evans, Me" class = "profileImage">
</div>
</div>
<div class = "textBox" style = "margin-bottom: 5vh;">
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 <a href = "pages/CVPage.html">here</a>.
Most of my experience relates to personal projects, however I have previously worked at <a href = "https://www.skipton.co.uk/">Skipton Building Society</a>, 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 <a href = "files/RosiaEvansCV.pdf" target="_blank">here</a>.
</div>
<div class = "textBox" id = "galleryHeader">
Check out my larger projects here:
<div style = "font-size: 60%;">click a project to find out more</div>
<div style = "font-size: 60%;">hover over or click a project to find out more</div>
</div>
<div class = "galleryContainer">
<div class = "gallery">
<!-- gallery slides defined here, originally we had one slide and just changed its values but loading images is slow, easier to load them before hand and just hide or show them-->
<div class = "programGallery">
<p class = "galleryTitle">VR physics engine</p>
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryLink">
<img src = "./pages/gallery/epq-project/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a>
<p class = "galleryCaption">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.<br><br>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.
</p>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
<div class = "galleryItem">
<a href = "./pages/gallery/epq-project/epq-project.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/epq-project/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;" alt = "A virtual hand grabbing a cube">
</a>
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/epq-project/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;" alt = "A virtual hand grabbing a cube">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/epq-project/epq-project.html">
<p class = "galleryTitle">VR physics engine</p>
<p class = "galleryCaption">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.
</p>
</a>
</div>
<div class = "galleryItem">
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/mind-map/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;" alt = "A mind-map being build in a program">
</a>
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/mind-map/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;" alt = "A mind-map being build in a program">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/mind-map/mind-map.html">
<p class = "galleryTitle">Unity based Mind Map software</p>
<p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> 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.
</p>
</a>
</div>
<div class = "galleryItem">
<a href = "./pages/gallery/sbs-work/sbs-work.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/sbs-work/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;" alt = "A game which displays a road with cats attacking wool along it">
</a>
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/sbs-work/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;" alt = "The Skipton Building Society Logo, a blue castle">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/sbs-work/sbs-work.html">
<p class = "galleryTitle">Work for Skipton Building Society</p>
<p class = "galleryCaption">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.
</p>
</a>
</div>
<div class = "galleryItem">
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryImageContainer galleryLink">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.webp" class = "galleryImage" style = "object-position: center;" alt = "A virtual hand playing cards">
</a>
<img src = "./images/popup-tongue.webp" class = "popupTongue">
</div>
<div class = "galleryPopup">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.webp" class = "popupImage" style = "object-position: center;" alt = "A virtual hand playing cards">
<a class = "popupTextContainer galleryLink" href = "./pages/gallery/aardvark-work/aardvark-work.html">
<p class = "galleryTitle">Work on Aardvark XR</p>
<p class = "galleryCaption">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.<br><br>
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.
</p>
</a>
</div>
</div>
</div>
<div class = "programGallery">
<p class = "galleryTitle">Tower defence game</p>
<a href = "./pages/gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<img src = "./pages/gallery/cat-tower-defence/projectHeaderImage.png" class = "galleryImage" style = "object-position: top;">
</a>
<p class = "galleryCaption">One of my first projects, this was created with a friend to help us gain a better understanding of python. <br><br> This was a basic tower defence game but featured a fully scalable
level design system.
</p>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
<div id="galleryOutroLink">
<a href = "pages/AllProjects.html">See all my projects here</a>
</div>
<div class = "programGallery">
<p class = "galleryTitle">Work on Aardvark XR</p>
<a href = "./pages/gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<img src = "./pages/gallery/aardvark-work/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a>
<p class = "galleryCaption">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.<br><br>
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.
</p>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div>
<div class = "programGallery">
<p class = "galleryTitle">Unity based Mind Map software</p>
<a href = "./pages/gallery/mind-map/mind-map.html" class = "galleryLink">
<img src = "./pages/gallery/mind-map/projectHeaderImage.png" class = "galleryImage" style = "object-position: center;">
</a>
<p class = "galleryCaption">A project done as my final piece for my A-level computer science course. <br> <br> 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.
</p>
<button class = "galleryLeftArrow" onClick = "window.parent.lastSlide();">◄</button>
<button class = "galleryRightArrow" onClick = "window.parent.nextSlide();">►</button>
</div>
<div class = "textBox" id= "outroText">
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.
</div>
<div id = "socialBar">
<a rel="me" href="https://fosstodon.org/@Wi__Ro" target="_blank">Mastodon</a>
&NonBreakingSpace;
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
&NonBreakingSpace;
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>
&NonBreakingSpace;
<a href="https://github.com/Wil-Ro" target="_blank">Github</a>
&NonBreakingSpace;
<a href = "https://dev.to/willowro" target="_blank">Dev.to</a>
&NonBreakingSpace;
<a href = "./pages/CVPage.html">CV</a>
<a href = "./files/RosiaEvansCV.pdf" target="_blank">CV</a>
</div>
</body>

24
pages/AllProjects.css Normal file
View file

@ -0,0 +1,24 @@
.projectThumbnail{
width: 16vh;
}
h2{
text-align: center;
margin-bottom: 10vh;
}
.item{
display: flex;
margin-top: 4vh;
}
.itemText{
display: flex;
flex-direction: column;
padding: 10px;
color: #ffd256;
}
body{
margin: 20vw;
}

103
pages/AllProjects.html Normal file
View file

@ -0,0 +1,103 @@
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "basic.css">
<link rel = "stylesheet" href = "AllProjects.css">
<link rel = "stylesheet" href = "effects.css">
<link rel = "icon" href = "..\images\Icon.ico">
<meta charset="UTF-8">
<title>Nye Evans Portfolio</title>
</header>
<body>
<h1>All Projects</h1>
<h2>click to find out more</h2>
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/aardvark-work/projectHeaderImage.webp" class = "orangeBorder projectThumbnail" alt = "A virtual hand playing"></img>
<div class = "itemText">
<h3>Aardvark XR</h3>
<div>
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.
</div>
</div>
</div>
</a>
<a href = "./gallery/epq-project/epq-project.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/epq-project/projectHeaderImage.webp" class = "orangeBorder projectThumbnail" alt = "A virtual hand grabbing a cube"></img>
<div class = "itemText">
<h3>Vr interaction system</h3>
<div>
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.
</div>
</div>
</div>
</a>
<a href = "./gallery/mind-map/mind-map.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/mind-map/projectHeaderImage.webp" class = "orangeBorder projectThumbnail" alt = "A mind-map being build in a program"></img>
<div class = "itemText">
<h3>Mind map tool</h3>
<div>
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.
</div>
</div>
</div>
</a>
<a href = "./gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/cat-tower-defence/projectHeaderImage.webp" class = "orangeBorder projectThumbnail" alt = "A game which displays a road with cats attacking wool along it"></img>
<div class = "itemText">
<h3>Cat Tower Defence</h3>
<div>
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.
</div>
</div>
</div>
</a>
<a href = "./gallery/sbs-work/sbs-work.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/sbs-work/projectHeaderImage.webp" class = "orangeBorder projectThumbnail" alt = "the logo of Skipton Building Society, a blue castle"></img>
<div class = "itemText">
<h3>Work for Skipton Building Society</h3>
<div>
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.
</div>
</div>
</div>
</a>
<div id = "backButtonContainer">
<a onclick = "history.back()" class = "backButton"> <-Back to main page</a>
</div>
<div id = "socialBar" style = "margin-top: 3vh;">
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
&NonBreakingSpace;
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>
&NonBreakingSpace;
<a href="https://github.com/Wil-Ro" target="_blank">Github</a>
&NonBreakingSpace;
<a href = "https://dev.to/willowro" target="_blank">Dev.to</a>
&NonBreakingSpace;
<a href = "./pages/CVPage.html">CV</a>
</div>
</body>
</HTML>

135
pages/CVPage.css
View file

@ -12,14 +12,12 @@ body{
background-color: #181818;
line-height: 1.3;
margin: 3vw;
}
h1{
font-size: clamp(20px, 4vw, 170px);
text-align: left;
margin-top: 25vh;
margin-left: 10vh;
margin-bottom: 5vh;
}
@ -39,9 +37,8 @@ ul{
}
li{
padding-top: 20px;
padding-top: 10px;
font-size: 0.8vw;
padding-right: 50px;
}
a:link, a:visited{
@ -50,148 +47,76 @@ a:link, a:visited{
.backButton{
text-align: center;
font-size: clamp(20px, 2vw, 170px);
font-size: clamp(20px, 1vw, 170px);
margin-top: 10vh;
}
.backButton{
font-size: clamp(20px, 2vw, 170px);
margin-top: 10vh;
margin-bottom: 5vh;
text-decoration: none;
}
#backButtonContainer{
text-align: center;
margin-bottom: 7vh;
margin-top: 7vh;
}
#cvBody{
display: grid;
margin-left: 5vw;
margin-right: 5vw;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
min-height: 200px;
min-width: 90vw;
border: solid 2px #ffd256;
border-radius: 5px;
#cv{
display: flex;
flex-direction: column;
padding: 10px;
padding-bottom: 7vh;
}
font-size: 1vw;
#cvBody{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#introText{
grid-column: 1/3;
grid-row: 1;
border-bottom: solid 2px #ffd256;
font-size: 1.2rem;
text-align: left;
padding-bottom: 20px;
}
#workExperienceText{
grid-column: 1;
grid-row: 2;
margin-top: 10px;
width: 50%;
}
#extraNotesText{
grid-column: 2;
grid-row: 2;
margin-top: 10px;
width: 50%;
}
#cvDownload{
margin-top: 10px;
margin-left: 5vw;;
text-align: center;
}
@media (orientation:portrait){
body{
touch-action: manipulation; /*stops double tap zoom*/
-webkit-text-size-adjust: none; /*stops browsers messing with text size*/
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
line-height: 1.5em;
#cv{
font-size: 1.8rem;
}
h1{
margin-left: 0;
margin-top: 5vh;
text-align: center;
font-size: clamp(20px, 10vw, 170px);
}
h2{
padding-top: 10px;
padding-bottom: 10px;
font-size: 3vw;
}
h3{
font-size: 2.4vw;
padding-bottom: 4px;
}
ul{
list-style-type: circle;
padding-bottom: 5px;
padding-left: 20px;
}
li{
padding-top: 20px;
font-size: 2vw;
padding-right: 50px;
font-size: 1.3rem;
}
.backButton{
font-size: clamp(20px, 4vw, 170px);
margin-top: 10vh;
margin-bottom: 5vh;
text-decoration: none;
h3{
font-size: 1.7rem;
}
#workExperienceText{
width: 100%;
}
#extraNotesText{
width: 100%;
}
#introText{
grid-column: 1/3;
grid-row: 1;
border-bottom: solid 2px #ffd256;
padding-bottom: 20px;
font-size: 2vw;
font-size: 1.28rem;
}
#cvDownload{
margin-top: 10px;
margin-left: 5vw;;
font-size: 3vw;
}
#cvBody{
margin-left: 3vw;
margin-right: 3vw
}
}

138
pages/CVPage.html
View file

@ -1,4 +1,5 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "CVPage.css">
<link rel = "stylesheet" href = "effects.css">
@ -11,78 +12,85 @@
<body>
<h1>
CV
Curriculum Vitae
</h1>
<div id = "cvBody">
<div id = "cv">
<div id = "introText">
<h2>Rosia Evans</h2>
I’m currently studying Computer Science, Psychology and Philosophy at A-level, as well as completing an Extended Project Qualification (EPQ) in Virtual Reality interaction design
and physics simulation (self-taught). I have a passion for creating new and unique user experiences as well as a strong desire to learn and gain new experience within the software
engineering industry.
Currently running a gap year working as a waiter, creating personal projects and teaching myself vector maths and C++ before moving to aberystwyth university in 2022.
</div>
<div id = "cvBody">
<div id = "workExperienceText">
<h2>Work Experience:</h2>
<ul>
<li>
<h3>2018</h3>
A week's work experience at <a href = "https://www.jbaconsulting.com/">jba consulting</a> writing a
program that converts SQL databases to excel spreadsheets.
<div id = "workExperienceText">
<h2>Work Experience:</h2>
<ul>
<li>
<h3>2018 – 2020</h3>
Kitchen Assistant at The Fleece Inn, Addingham <br>Temporarily left for 6 months to focus on GCSEs, during which I was given a reference by the head chef as one of the most hard-working employees they had.
</li>
<li>
<h3>2018</h3>
A week's work experience at <a href = "https://www.jbaconsulting.com/">jba consulting</a> writing a
program that converts SQL databases to excel spreadsheets.
</li>
</ul>
<h2>Extra Curricular:</h2>
<ul>
<li>
<h3>2012</h3>
Started programming learning Python and Scratch; moved onto HTML in 2015 and C#/C++ in early 2019.
</li>
<li>
<h3>2018 – 2021</h3>
Run school’s Coding Club, teaching younger children to program and running competitions and projects. First joined in 2014 as a first year.
</li>
<li>
<h3>2016</h3>
Creating mods and maps for video games; programming side projects.
</li>
<li>
<h3>2018 – Present</h3>
Creating video games and other programs or experiences for virtual reality and flat-screen platforms
</li>
</li>
</ul>
<h2>Extra Curricular:</h2>
<ul>
<li>
<h3>2012 – Present</h3>
Started programming learning Python and Scratch; moved onto HTML in 2015 and C++ in early 2019.
</li>
<li>
<h3>2018 – Present</h3>
Run school’s Coding Club, teaching younger children to program and running competitions and projects. First joined in 2014 as a first year.
</li>
<li>
<h3>2016 – Present</h3>
Creating mods and maps for video games; programming side projects.
</li>
<li>
<h3>2018 – Present</h3>
Creating video games and other programs or experiences for virtual reality and flat-screen platforms; currently working on a tower defence game in Python; developing a new
programming language based in C++; and a virtual reality revision tool running in Unreal Engine 4 but soon to move to Unity.
</li>
</ul>
</div>
<li>
<h3>2021 – Present</h3>
Tutoring GCSE students in python
</li>
</ul>
</div>
<div id = "extraNotesText">
<h2>Education:</h2>
<ul>
<li>
<h3>2014 – Present</h3>
Student at Ilkley Grammar School <br><br>8 GCSEs grades 7-5<br>Notable Grade 7s in Computer Science, Electronics, and Chemistry<br><br>Current A-levels Computer Science,
Psychology, and Philosophy<br>EPQ in Computer Science with a predicted grade: A-A*
</li>
</ul>
<h2>Skills:</h2>
<ul>
<li>Python</li>
<li>C++</li>
<li>C#</li>
<li>HTML and CSS</li>
<li>JavaScript and TypeScript</li>
<!--
</ul>
<hr style = "color: #ffd256; width: 30%; margin: 0; margin-top: 25px; margin-left: 5px">
<ul>
-->
<li>Blender's full 3D toolset</li>
<li>Unity's basic toolset</li>
<li>Unreal Engine's basic toolset</li>
</ul>
<div id = "extraNotesText">
<h2>Education:</h2>
<ul>
<li>
<h3>2014 – 2021</h3>
Student at Ilkley Grammar School <br><br>
8 GCSEs grades 7-5 <br>
Notable Grade 7s in Computer Science, Electronics, and Chemistry <br><br>
3 A-levels <br>
Computer Science (A), <br>
Psychology (A) <br>
Philosophy (B) <br>
with an EPQ in virtual reality design (A)
</li>
</ul>
<h2>Skills:</h2>
<ul>
<li>Python</li>
<li>C#</li>
<li>HTML and CSS</li>
<li>JavaScript and TypeScript</li>
<li>C++</li>
<!--
</ul>
<hr style = "color: #ffd256; width: 30%; margin: 0; margin-top: 25px; margin-left: 5px">
<ul>
-->
<li>Blender's full 3D toolset</li>
<li>Unity's basic toolset</li>
<li>Unreal Engine's basic toolset</li>
</ul>
</div>
</div>
</div>

1
pages/NoTwitter.html
View file

@ -1,3 +1,4 @@
<!doctype html>
<HTML>
<body>
no twitter here :)<br><br>I'll pop something here eventually, before i start using the site properly

84
pages/basic.css Normal file
View file

@ -0,0 +1,84 @@
@import url("reset.css");
@font-face{
font-family:"roboto";
font-weight: 100;
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
html{
font: 100%;
}
body{
color: #ffd256;
background-color: #181818;
font-family: "roboto";
line-height: 1.3;
}
button{
background-color: transparent;
border: none;
color: #ffd256;
}
button:focus {
border: none;
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;
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;
}

6
pages/effects.css
View file

@ -1,3 +1,7 @@
a:not(.galleryLink){
transition: background-color 0.5s
}
a:hover:not(.galleryLink){
background-color: #ffd256;
color: #181818;
@ -41,4 +45,4 @@ span:hover{
::-webkit-selection {
background-color: #ffd256;
color: #181818;
}
}

25
pages/gallery/aardvark-work/aardvark-work.html
View file

@ -1,7 +1,11 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
@ -25,8 +29,7 @@
<div class = "textBox">
<h2>What I did</h2>
During the first hackathon I proposed and worked on an audio visualiser tool that would run in the background of the users environment as they worked, reacting to their desktop audio. I also designed and created 3D models for other
developers programs, such as icons for a playing card app; one of the first apps to be published on the platform. My audio visualiser never got finished due to my lack of experience with typescript and Aardvarks inability to
request desktop audio access at the time.
developers programs, such as icons for a playing card app; one of the first apps to be published on the platform.
<br>
Around 4 months later I revisited Aardvark to create a photo viewing app which was originally a personal project but became a team effort with another member of the community who offered
to join development, the app allowed users to upload images which were stored using ipfs (a decentralized storage system) and had multi-user functionality allowing different people to show each other photos. The main idea of the program was to allow vr artists to
@ -38,14 +41,20 @@
</div>
<div class = "textBox">
As well as this I have also worked on the base code of the project itself. Originally Aardvark had the user open its Ui through a button on their hand which took up valuable space used by alot of other programs,
As well as this I have also worked on the base code of the project itself. Originally Aardvark had the user open its Ui through a button on their hand which took up valuable visual space used by alot of other programs.
I was tasked with creating a more intuitive solution which ended up being a gesture based system. With little to no guidance I had to read and gain a full understanding of the projects mid-level inner workings and
rewrite large sections of it. This resulted in a system where the user would bump the ends of their controllers together to open and close the menu, this addition to the program also utilised hysterisis to ensure the
user had a smooth experience with the project.
rewrite large sections of it. After a week or so I produced a gesture system that allowed the user to bump the ends of their controllers together to open and close the menu. I also created a developer tool to allow
developers to tweak the gesture to ensure it worked for their specific controllers.
</div>
<div class = "videoContainer">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9uG2HSavA1U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/FzQcE9UeOao" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>
</HTML>

BIN
pages/gallery/aardvark-work/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 764 KiB

16
pages/gallery/blog-post-default.css
View file

@ -10,7 +10,8 @@ body{
color: #ffd256;
font-family: "roboto";
background-color: #181818;
margin-left: 10vw;
margin-right: 10vw;
}
h1{
@ -32,6 +33,7 @@ a:link, a:visited{
font-size: 1vw;
margin-top: 3vh;
padding: 2.5vh;
}
@ -42,10 +44,15 @@ a:link, a:visited{
}
iframe{
border: 2px solid #ffd256;
border: 2px solid transparent;
border-radius: 5px;
padding: 5px;
transition: border 0.5s;
}
iframe:hover{
border: 2px solid #ffd256;
}
.backButton{
@ -57,11 +64,6 @@ iframe{
text-decoration: none;
}
#backButtonContainer{
text-align: center;
margin-bottom: 7vh;
margin-top: 7vh;
}
@media (orientation:portrait){

10
pages/gallery/cat-tower-defence/cat-tower-defence.html
View file

@ -1,7 +1,11 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
@ -25,7 +29,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>
</HTML>

BIN
pages/gallery/cat-tower-defence/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

16
pages/gallery/epq-project/epq-project.html
View file

@ -1,7 +1,11 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
@ -9,12 +13,12 @@
</h1>
<div class = "textBox">
<h2>What it is</h2>
This project was completed for my Extended Project Equalification (also knows as EPQ). During the EPQ, a student will pick a subject of their choice, research it and then either write a paper or create a piece of media
This project was completed for my Extended Project Equalification (also known as EPQ). During the EPQ, a student will pick a subject of their choice, research it and then either write a paper or create a piece of media
(an "artefact") based on what they have learnt. For my subject I originally chose physics simulation as at the time I lacked confidence in maths and wanted to force myself to relearn and become more comfortable with it.
The idea of combining VR with this later came about in an attempt to make the project more modern so more primary research and testing could be done.<br><br>
The end result was a system that allowed the user to interact with a virtual environment with 6 degrees of freedom, they could pick up, move and throw objects with their fingers, hands and head being fully tracked to the
real world. Due to time restraints, the physics simulation was released separately and, although fully capable of location and force calculation, could not take rotation of objects into account. The project gains a high A grade.
real world. Due to time restraints, the physics simulation was released separately and, although fully capable of location and force calculation, could not take rotation of objects into account. The project was given a high A grade.
</div>
<div class = "videoContainer">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pSlHM0kMijA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@ -22,14 +26,14 @@
<div class = "textBox">
<h2>What I did</h2>
Over the course of 4-5 months I researched and taught myself a large amount of vector maths, C++, the design of basic physics engines, a large portion of Unreal Engines toolset, a large portion of blenders toolset,
Over the course of 4-5 months I researched and taught myself a large amount of vector maths, the basics of C++, the basics of physics engines, a large portion of Blender and Unreal Engines toolset,
a small amount of 3D rendering theory and the basics of game design for virtual reality. Using this I created a fully functional VR interaction system with many custom made assets, materials and classes as well as a
very basic physics engine built in C++.
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>
</HTML>

BIN
pages/gallery/epq-project/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 450 KiB

17
pages/gallery/mind-map/mind-map.html
View file

@ -1,11 +1,14 @@
<HTML>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
EPQ Project
Mind Mapping Software
</h1>
<div class = "textBox">
<h2>What it is</h2>
@ -19,15 +22,15 @@
<div class = "textBox">
<h2>What I did</h2>
Over the course of 24 hours spread over 2 months I planned, wrote pseudocode for and create the whole system. I chose to write the sofware in Unity as I wanted to learn a new engine and knew the unitys use of scenegraphs
would make the process of development alot faster as I wouldn't have to calculate scales and positions of mind map components as unity would do this all in the background, allowing me to focus on UI, tool, components and the
undo-redo system. <br> <br> As one of the software requirements was to run on very low end computers I also had to ensure I was creating scripts that would run as efficiently as possible when compiled, this regularly meant having to
I independently created this program over the course of 24 hours spread over 2 months. I chose to write the sofware in Unity as I wanted to learn a new engine and knew that unitys use of scenegraphs
would make the process of development alot faster as I wouldn't have to calculate scales and positions of mind map components as unity would do this all in the background, allowing me to focus on the larger aspects of the project. <br> <br>
As one of the software requirements was to run on very low end computers I also had to ensure I was creating scripts that would run as efficiently as possible when compiled, this regularly meant having to
weigh up the strengths and weaknesses of different libraries, often choosing ones with drawbacks in favour of their lower usage of memory.
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>
</HTML>

BIN
pages/gallery/mind-map/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
pages/gallery/room-builder/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

10
pages/gallery/room-builder/room-builder.html
View file

@ -1,7 +1,11 @@
<HTML>
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
@ -23,7 +27,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>
</HTML>

BIN
pages/gallery/sbs-work/projectHeaderImage.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
pages/gallery/sbs-work/projectHeaderImage.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

60
pages/gallery/sbs-work/sbs-work.html Normal file
View file

@ -0,0 +1,60 @@
<!doctype html>
<HTML lang="en-GB">
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
<title>Rosia Evans Portfolio</title>
</header>
<body>
<h1>
Work for Skipton Building Society
</h1>
<div class = "textBox">
<h2>What it is</h2>
Inbetween my time at University and Post-16 I took a gap year where I interned at Skipton Building Society as a software tester. This was a paid 9 month internship where I waspushed for automated testing
with SmartBears TestComplete system and worked with their API team to ensure their software remained stable whilst they slowly worked through all their API's transitioning them from TIBCO to Azure.
<br><br>
I was also asked to research Gherkin and Behaviour Driven Development to see if it would be worth transitioning to, helped to run a coding club to educate other members of the Society and later set-up
the Society's standards for all their future automated testing.
</div>
<div class = "textBox">
<h2>What I did</h2>
I was initially hired to experiment with the idea of automating the Society's testing using SmartBear's TestComplete system. I taught myself a large portion of the tools over the course of a week
and then worked with one other collegue who came from a testing background to fully automate the UI testing of the Ds customer portal system.
From this we decided the tool may be worth using across the wider Society and worked with individual agile scrum teams to help them automate their testing. During this time I produced a presentation
on the inner workings of TestComplete and its benefits to the Society's senior developers convincing them of its worth. I also worked with my collegue to produce an educational talk, some tools and documentation
in order to educate other testers on the system and encourage widespread use.
<br><br>
After 3 months of working on TestComplete I was assigned to an Agile Hub in order to help them with their testing on the side whilst still working on TestComplete. This team was built to slowly
transition all of the societies APIs from TIBCO to Azure and my job was to ensure any software interacting with the API currently being replaced would still work when the team had finished. This was
done through large amounts of manual regression tests and a few automated tests where their work overlapped with my other TestComplete work. This was somewhat challenging for me to begin with as I had
little understanding of alot of the software I was testing and I found myself somewhat anxious when communicating with the team, however I slowly improved at this over time and ended up working with relative
efficiency. I did this through pushing myself to ask people questions and eventually reorganising my time by meeting with all the teams developers at the very start of an API development cycle to have a full
conversation with all of them on what needed to be tested and how rather than individually asking developers and having to compile the individual comments of each developer.
<br><br>
On the side of this I also ran a talk to teach testers the basics of javascript to increase the flexibility of their automated tests and later helped some lead developers to run a bi-weekly "Coding Club" to
educate testers on programming with C#. One of these lead developers also tasked me with researching into the testing language "Gherkin" and the concept of Behaviour Driven Development, I spent 2 months
experimenting with it on the side whilst doing my regular work and produced a presentation to them and a group of senior testers where I then facilitated more conversation on the viability of the system its
usefulness to the Society. I then organised regular meetings to continue the discussion.
</div>
<div class = "textBox">
<h2>Skills Learnt</h2>
Throughout this internship I feel that my social skills developed greatly, I got alot better at giving critisism, being willing to ask questions and admit I didnt understand things and developed my self-confidence.
I also learnt a large amount about Microsoft's Azure Cloud Systems and manual and automated testing. I also gained real experience of an Agile working environment which I greatly enjoyed and I developed a much
stronger understanding of APIs and back-end programming which I had never previously looked into.
<br><br>
Multiple times during my work there I was requested to stay as an apprentice rather than go to University, I did turn this offer down but I intend to work for them over summers and during my industry year at
University as I found it an incredibly friendly and safe feeling place with a really healthy culture. Their attitude towards change was very exciting to work in and multiple times I found I would make a mistake
and be worried my teams would be annoyed or upset only to find they wouldnt even consider it an issue and with zero negative responses they would just ask how they could help to fix it and help me plan a solution.
</div>
<div id = "backButtonContainer">
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

407
pages/mainpage.css
View file

@ -1,38 +1,4 @@
@import url("reset.css");
@font-face{
font-family:"roboto";
font-weight: 100;
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
html{
font: 100%;
}
body{
color: #ffd256;
background-color: #181818;
font-family: "roboto";
line-height: 1.3;
}
button{
background-color: transparent;
border: none;
color: #ffd256;
}
button:focus {
border: none;
outline: none;
}
a:link, a:visited{
color: #ffd256;
}
h1{
#Title{
font-size: clamp(1.2rem, 4vw, 4rem);
padding-left: 6;
@ -47,19 +13,6 @@ h1{
}
.subTitle{
font-size: 30%;
padding-top: 10;
padding-left: 5;
}
.orangeBorder{
border: 2px solid #ffd256;
border-radius: 5px;
padding: 5px;
}
.textBox{
text-align: center;
font-size: clamp(1rem, 1.2vw, 3rem);
@ -70,9 +23,18 @@ h1{
margin-right: 10vw;
}
.profileImage{
.profileImageContainer{
width: 30vw;
height: auto;
height: 30vw;
text-align: center;
margin: 0 auto;
}
.profileImage{
border-radius: 2px;
object-fit: cover;
width: 100%;
height:100%
}
#galleryHeader{
@ -84,259 +46,194 @@ h1{
font-size: clamp(1rem, 1.2vw, 3rem);
}
.programGallery{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(10, 1fr);
height: 70vh;
width: 70vw;
min-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10vh;
.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;
}
.galleryImage{ /*all images should be 700x700*/
grid-column: 2/8;
grid-row: 2/12;
object-fit: cover;
width: 100%;
.galleryItem{
height: 100%;
border: 2px solid #ffd256;
border-bottom-left-radius: 5px;
box-sizing: border-box;
padding: 5;
}
.galleryLink{
grid-column: 2/8;
grid-row: 2/12;
object-fit: cover;
.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%;
}
.galleryTitle{
grid-column: 2/12;
grid-row: 1;
padding: 5px;
font-size: clamp(1rem, 3vw, 3rem);
border-radius: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 2px solid #ffd256;
border-bottom: none;
.galleryImageContainer{
height: 100%;
width: 100%;
display: block;
}
.galleryCaption{
grid-column: 8/12;
grid-row: 2/12;
border-radius: 0;
border-bottom-right-radius: 5px;
border: 2px solid #ffd256;
border-left: none;
padding: 5px;
font-size: clamp(1rem, 1.2vw, 3rem)
.galleryTitle{
font-weight: 700;
}
.galleryLeftArrow{
grid-column: 1;
grid-row: 5/6;
font-size: 7vw;
}
.galleryRightArrow{
grid-column: 12;
grid-row: 5/6;
font-size: 7vw;
#galleryOutroLink{
text-align: center;
margin-top: 5vh;
}
#outroText{
margin-top: 20vh;
margin-top: 12vh;
margin-bottom: 20vh;
margin-left: 27vw;
margin-right: 27vw;
}
#socialBar{
display: flex;
margin-bottom: 5vh;
justify-content: center;
}
@media (orientation:portrait){
body{
/*
touch-action: none;
touch-action: pan-y;
as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
*/
touch-action: manipulation; /*stops double tap zoom*/
-webkit-text-size-adjust: none; /*stops browsers messing with text size*/
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
h1{
#Title{
font-size: 10vw;
margin-left: 0vw;
margin-right: 0vw;
margin-top: 5vh;
margin-bottom: 85vh;
padding-top: 0.5vh;
border-radius: 0;
height: 10vh;
margin-right: 50vw;
}
.textBox{
padding: 0;
margin-top: 3vh;
margin-bottom: 3vh;
margin-left: 15px;
margin-right: 15px;
min-width: inherit;
max-width: inherit;
border: 0;
text-align: left;
font-size: clamp(25px, 3.6vw, 50px);
font-size: 0.7rem;
margin-left: 2vw;
margin-right: 2vw;
}
.profileImageContainer{
margin: 2vh;
width: auto;
height: auto;
}
.profileImage{
width: 90%;
}
.orangeBorder{
border: 5px solid #ffd256;
border-radius: 10px;
border-radius: 1vw;
}
#galleryHeader{
margin-left: 15px;
margin-right: 15px;
font-size: clamp(2rem, 4vw, 5rem);
}
.programGallery{
width: 92vw;
margin-left: 4vw;
margin-right: 4vw;
border: 5px solid #ffd256;
border-radius: 10px;
}
.galleryImage{ /*all images should be 700x700*/
grid-column: 1/13;
grid-row: 2/7;
border-radius: 0;
border: 5px solid #ffd256;
border-left: 0;
border-right: 0;
margin-left: 2vw;
margin-right: 2vw;
font-size: 0.7rem;
}
object-fit: cover;
width: 100%;
height: 100%;
}
.galleryLink{
grid-column: 1/13;
grid-row: 2/7;
object-fit: cover;
width: 100%;
height: 100%;
}
.galleryTitle{
grid-column: 1/13;
grid-row: 1;
padding: 5px;
font-size: clamp(5px, 4vw, 50px);
border: 0;
}
.galleryCaption{
grid-column: 1/13;
grid-row: 7/12;
font-size: clamp(5px, 3vw, 50px);
border: 0;
.gallery{
margin-left: 2vw;
margin-right: 2vw;
justify-content: flex-start;
flex-wrap: wrap;
height: 100vw;
}
.galleryLeftArrow{
grid-column: 1;
grid-row: 12;
font-size: 7vw;
.galleryItem{
width: 20vw;
height: 20vw;
margin-bottom: 3vw;;
}
.galleryRightArrow{
grid-column: 12;
grid-row: 12;
font-size: 7vw;
.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: 20vh;
margin-top: 12vh;
margin-bottom: 20vh;
margin-left: 1vw;
margin-right: 1vw;
margin-left: 2vw;
margin-right: 2vw;
}
#socialBar{
justify-content: center;
font-size: 5vw;
margin-bottom: 0.8vh;
.galleryLink{ /*this is set in basics, but the gallery on mobile will want to be different*/
text-decoration: none;
color:#ffd256;
}
}

9
scripts/gallery.js
View file

@ -1,8 +1,8 @@
var currentSlide = 0;
var allSlides = document.querySelectorAll(".programGallery");
window.nextSlide = function nextSlide(){
// code for gallery to function during use
window.nextSlide = function nextSlide(){
currentSlide++;
updateSlide();
}
@ -30,5 +30,8 @@ function hideAll(){
}
}
// code to set up gallery when site is being loaded
hideAll()
updateSlide();
updateSlide();