diff --git a/images/popup-tongue.png b/images/popup-tongue.png new file mode 100644 index 0000000..a502049 Binary files /dev/null and b/images/popup-tongue.png differ diff --git a/index.html b/index.html index 9f556a0..f8c2d01 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + Nye Evans Portfolio @@ -48,61 +48,75 @@ -
-

VR physics engine

- - - -

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

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

- - -
+
-
-

Tower defence game

- - +
+
+ +
+
+ + +
+

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

+
-

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

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

- - -
-
-

Work on Aardvark XR

- - +
+
+ +
+
+ + +
+

Cat Tower Defence

+ +

A small game made with a group of friends over a summer to help us learn pythons graphics library "pygame", we designed to be fully scalable and allowed players to create their + own maps or add new towers +

+
-

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

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

- - -
-
-

Unity based Mind Map software

- - +
+
+ +
+
+ + +
+

AardvarkXR

+ +

AardvarkXR was a small open source project that would run over the top of any VR game that allowed users to open small web-based apps, known as "gadgets", over the top of other vr + programs, for instance a user could open a note taking app within a puzzle game without the puzzle game needed to even be aware of the notepad app. +

+
-

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

- - + +
+
+ +
+
+ + +
+

Mind Map software

+ +

A project made in unity for a my final alevel practical, +

+
+ +
- - - -
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.
diff --git a/pages/mainpage.css b/pages/mainpage.css index 30be467..f897ffd 100644 --- a/pages/mainpage.css +++ b/pages/mainpage.css @@ -28,7 +28,7 @@ button:focus { outline: none; } -a:link, a:visited{ +a:link:not(.galleryLink), a:visited:not(.galleryLink){ color: #ffd256; border-radius: 2px; transition: background-color 0.5s, color 0.5s; @@ -94,92 +94,74 @@ h1{ font-size: clamp(1rem, 1.2vw, 3rem); } -.programGallery{ - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-template-rows: repeat(10, 1fr); +.gallery{ + display: flex; + margin-left: 10vw; + margin-right: 10vw; + height: 10vw; +} - height: 70vh; - width: 70vw; - - min-width: 800px; - min-height: 500px; - - margin-left: auto; - margin-right: auto; - margin-top: 10vh; +.galleryItem{ + margin-left: 4vw; + height: 10vw; } -.galleryImage{ /*all images should be 700x700*/ - grid-column: 2/8; - grid-row: 2/12; - - object-fit: cover; - - width: 100%; - height: 100%; - - border: 2px solid #ffd256; - border-bottom-left-radius: 5px; - box-sizing: border-box; - - padding: 5px; +.galleryItem:hover + .galleryPopup{ + visibility: visible; + opacity: 1; } -.galleryLink{ - grid-column: 2/8; - grid-row: 2/12; - - object-fit: cover; +.popupImage:hover, .galleryPopup{ + visibility: visible; + opacity: 1; +} +.galleryPopup a{ width: 100%; height: 100%; } -.galleryTitle{ - grid-column: 2/12; - grid-row: 1; +.galleryPopup{ + visibility: hidden; + opacity: 0; - 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; + display: flex; + z-index: 5; + position: absolute; + background-color: #ffd256; + border-radius: 2px; + color: #181818; + width: 67.5vw; + height: 15vw; + margin-left: 4vw; + text-decoration: none; + transition: visibility 0.3s, opacity 0.5s; } -.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) +.popupImage{ + padding: 10px; } -.galleryLeftArrow{ - grid-column: 1; - grid-row: 5/6; - - font-size: 7vw; +.popupTextContainer{ + display: flex; + flex-direction: column; + padding: 6px; } -.galleryRightArrow{ - grid-column: 12; - grid-row: 5/6; - - font-size: 7vw; +.galleryImage{ + width: 100%; + height: 100%; + padding: 10px; +} + +.galleryImageContainer{ + height: 13.5vw; + width: 13.5vw; +} + +.galleryTitle{ + font-weight: 700; } #outroText{ @@ -198,155 +180,3 @@ h1{ - -@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{ - font-size: 10vw; - - margin-left: 0vw; - margin-right: 0vw; - margin-top: 5vh; - margin-bottom: 85vh; - - padding-top: 0.5vh; - - border-radius: 0; - - height: 10vh; - - } - - .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); - } - - .profileImage{ - width: 90%; - } - - .orangeBorder{ - border: 5px solid #ffd256; - border-radius: 10px; - } - - #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; - - 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; - } - - .galleryLeftArrow{ - grid-column: 1; - grid-row: 12; - font-size: 7vw; - } - - .galleryRightArrow{ - grid-column: 12; - grid-row: 12; - font-size: 7vw; - } - - - - #outroText{ - margin-top: 20vh; - margin-bottom: 20vh; - margin-left: 1vw; - margin-right: 1vw; - } - - #socialBar{ - justify-content: center; - font-size: 5vw; - margin-bottom: 0.8vh; - } -} - - - - -