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

adds interactivity to css

Browse source 
borders now only appear on hover
transition time added
This commit is contained in:
Nye Evans 2021-09-14 11:07:56 +01:00
parent 2b83ad51a1
commit a69bd66d73
10 changed files with 69 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -1,3 +1,4 @@
<!doctype html>
<HTML> <HTML>
<header> <header>
@ -25,9 +26,10 @@
Most of my work is software based, with Python and C++ along with some web-development experience in HTML, CSS, JavaScript and TypeScript. Most of my work is software based, with Python and C++ along with some web-development experience in HTML, CSS, JavaScript and TypeScript.
</div> </div>
<div style = "text-align: center;"> <div style = "text-align: center;">
<img src = "images/Profile3.png" id = "profileImage" class = "profileImage orangeBorder" alt = "me"> <div class = "profileImage orangeBorder" style = "margin: 0 auto;">
<img src = "images/Profile3.png" alt = "me" style = "border-radius: 2px; object-fit: cover; width: 100%; height:100%">
</div>
</div> </div>
<div class = "textBox" style = "margin-bottom: 5vh;"> <div class = "textBox" style = "margin-bottom: 5vh;">

35
pages/AllProjects.html Normal file
View file

@ -0,0 +1,35 @@
<!doctype html>
<HTML>
<header>
<link rel = "stylesheet" href = "pages\mainpage.css">
<link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico">
<meta charset="UTF-8">
<title>Nye Evans Portfolio</title>
</header>
<body>
<div id = "socialBar">
<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>

1
pages/CVPage.html
View file

@ -1,3 +1,4 @@
<!doctype html>
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "CVPage.css"> <link rel = "stylesheet" href = "CVPage.css">

1
pages/NoTwitter.html
View file

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

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

@ -1,3 +1,4 @@
<!doctype html>
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "..\blog-post-default.css"> <link rel = "stylesheet" href = "..\blog-post-default.css">

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

@ -1,3 +1,4 @@
<!doctype html>
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "..\blog-post-default.css"> <link rel = "stylesheet" href = "..\blog-post-default.css">

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

@ -1,3 +1,5 @@
<!doctype html>
<!doctype html>
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "..\blog-post-default.css"> <link rel = "stylesheet" href = "..\blog-post-default.css">

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

@ -1,3 +1,4 @@
<!doctype html>
<HTML> <HTML>
<header> <header>
<link rel = "stylesheet" href = "..\blog-post-default.css"> <link rel = "stylesheet" href = "..\blog-post-default.css">

16
pages/mainpage.css
View file

@ -30,6 +30,8 @@ button:focus {
a:link, a:visited{ a:link, a:visited{
color: #ffd256; color: #ffd256;
border-radius: 2px;
transition: background-color 0.5s, color 0.5s;
} }
h1{ h1{
@ -54,10 +56,17 @@ h1{
} }
.orangeBorder{ .orangeBorder{
border: 2px solid #ffd256; border: 2px solid transparent;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
transition: border 0.5s;
}
.orangeBorder:hover{
border: 2px solid #ffd256;
padding: 5px;
} }
.textBox{ .textBox{
@ -72,7 +81,8 @@ h1{
.profileImage{ .profileImage{
width: 30vw; width: 30vw;
height: auto; height: 30vw;
text-align: center;
} }
#galleryHeader{ #galleryHeader{
@ -114,7 +124,7 @@ h1{
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
padding: 5; padding: 5px;
} }
.galleryLink{ .galleryLink{

13
scripts/gallery.js
View file

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