full rewite of css
This commit is contained in:
Rosia E Evans
parent
397c6751f1
commit
e11f2c6b82
31 changed files with 274 additions and 450 deletions
BIN
images/Icon.ico
BIN
images/Icon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 521 KiB |
BIN
images/Profile5.webp
Normal file
BIN
images/Profile5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
BIN
images/Profile6.webp
Normal file
BIN
images/Profile6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 640 B |
BIN
images/profile1.jpg
Normal file
BIN
images/profile1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 KiB |
120
index.html
120
index.html
|
|
@ -5,6 +5,7 @@
|
|||
<link rel = "stylesheet" href = "pages\basic.css">
|
||||
<link rel = "stylesheet" href = "pages\mainpage.css">
|
||||
<link rel = "stylesheet" href = "pages\effects.css">
|
||||
<link rel = "stylesheet" href = "pages/variables.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-->
|
||||
|
|
@ -17,127 +18,36 @@
|
|||
</header>
|
||||
|
||||
<body>
|
||||
<div id = "introScreenSpace">
|
||||
<h1 id = "Title">
|
||||
<div id = "siteTitle">Rosia Evans</div>
|
||||
Rosia Evans
|
||||
<div class = "subTitle">Portfolio</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class = "textBox">
|
||||
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;">
|
||||
<div class = "profileImageContainer orangeBorder">
|
||||
<img src = "images/Profile4.webp" alt = "An image of Rosia Evans, Me" class = "profileImage">
|
||||
|
||||
<div id = "mainContent">
|
||||
<div id = "profileImageContainer" class = "orangeBorder">
|
||||
<img src = "images/Profile6.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 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%;">hover over or click a project to find out more</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class = "galleryContainer">
|
||||
<div class = "gallery">
|
||||
|
||||
<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 id = "sideText" class = "textBox">
|
||||
<div>
|
||||
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 = "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>
|
||||
<div id = "galleryButton" class = "textBox">
|
||||
<a href = "pages/AllProjects.html" style = "text-decoration: none;">
|
||||
--> See my work here <--
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="galleryOutroLink">
|
||||
<a href = "pages/AllProjects.html">See all my projects here</a>
|
||||
</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>
|
||||
|
||||
<div id = "socialBar">
|
||||
<a rel="me" href="https://fosstodon.org/@Wi__Ro" target="_blank">Mastodon</a>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.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 <a> effects */
|
||||
a.galleryLink{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,80 +5,66 @@
|
|||
<link rel = "stylesheet" href = "basic.css">
|
||||
<link rel = "stylesheet" href = "AllProjects.css">
|
||||
<link rel = "stylesheet" href = "effects.css">
|
||||
<link rel = "stylesheet" href = "variables.css">
|
||||
<link rel = "icon" href = "..\images\Icon.ico">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<title>Nye Evans Portfolio</title>
|
||||
<title>Rosia 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">
|
||||
<div class = "galleryLinkContainer">
|
||||
<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>
|
||||
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.
|
||||
<div class = "galleryImage">
|
||||
<img src = "gallery/aardvark-work/projectHeaderImage2.webp" >
|
||||
</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">
|
||||
<div class = "galleryLinkContainer">
|
||||
<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>
|
||||
A program made in Unreal Engine that allowed users to grab and interact with physics based objects in a small VR garden.
|
||||
<div class = "galleryImage">
|
||||
<img src = "gallery/epq-project/projectHeaderImage2.webp" >
|
||||
</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">
|
||||
<div class = "galleryLinkContainer">
|
||||
<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>
|
||||
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.
|
||||
<div class = "galleryImage">
|
||||
<img src = "gallery/mind-map/projectHeaderImage2.webp" >
|
||||
</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">
|
||||
<div class = "galleryLinkContainer">
|
||||
<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>
|
||||
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.
|
||||
<div class = "galleryImage">
|
||||
<img src = "gallery/cat-tower-defence/projectHeaderImage2.webp" >
|
||||
</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 class = "galleryLinkContainer">
|
||||
<h3>Work for Skipton Building Society</h3>
|
||||
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.
|
||||
<div class = "galleryImage">
|
||||
<img src = "gallery/sbs-work/projectHeaderImage2.webp" >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
30
pages/Socials.html
Normal file
30
pages/Socials.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<HTML>
|
||||
|
||||
<header>
|
||||
<link rel = "stylesheet" href = "socials.css">
|
||||
|
||||
<link rel = "stylesheet" href = "basic.css">
|
||||
<link rel = "stylesheet" href = "effects.css">
|
||||
<link rel = "stylesheet" href = "variables.css">
|
||||
<link rel = "icon" href = "images/Icon.ico">
|
||||
|
||||
<title>Rosia Evans</title>
|
||||
</header>
|
||||
|
||||
<body style = "padding: 0;">
|
||||
<div id = "title">
|
||||
Rosia Evans - Socials
|
||||
</div>
|
||||
<div id = "container">
|
||||
<a rel="me" href="../index.html" target="_blank">Main Site</a>
|
||||
<a rel="me" href="https://fosstodon.org/@Wi__Ro" target="_blank">Mastodon</a>
|
||||
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
|
||||
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>
|
||||
<a href="https://github.com/Wil-Ro" target="_blank">Github</a>
|
||||
<a href = "./files/RosiaEvansCV.pdf" target="_blank">CV</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</HTML>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
BIN
pages/gallery/aardvark-work/projectHeaderImage2.webp
Normal file
BIN
pages/gallery/aardvark-work/projectHeaderImage2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
BIN
pages/gallery/cat-tower-defence/projectHeaderImage2.webp
Normal file
BIN
pages/gallery/cat-tower-defence/projectHeaderImage2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
|
|
@ -4,6 +4,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
BIN
pages/gallery/epq-project/projectHeaderImage2.webp
Normal file
BIN
pages/gallery/epq-project/projectHeaderImage2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -3,6 +3,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
BIN
pages/gallery/mind-map/projectHeaderImage2.webp
Normal file
BIN
pages/gallery/mind-map/projectHeaderImage2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -4,6 +4,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
BIN
pages/gallery/sbs-work/projectHeaderImage2.webp
Normal file
BIN
pages/gallery/sbs-work/projectHeaderImage2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -4,6 +4,7 @@
|
|||
<link rel = "stylesheet" href = "..\..\basic.css">
|
||||
<link rel = "stylesheet" href = "..\blog-post-default.css">
|
||||
<link rel = "stylesheet" href = "..\..\effects.css">
|
||||
<link rel = "stylesheet" href = "..\..\variables.css">
|
||||
|
||||
<title>Rosia Evans Portfolio</title>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
44
pages/socials.css
Normal file
44
pages/socials.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
7
pages/variables.css
Normal file
7
pages/variables.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
:root{
|
||||
--base: #181818;
|
||||
--secondary: #ffd256;
|
||||
--secondary: #dfdfdf;
|
||||
|
||||
--highlight: #90f3c8;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue