From e60442936cf4ad95dbec5eed7d09e4a6f4dc36bc Mon Sep 17 00:00:00 2001 From: Nye Evans Date: Thu, 16 Sep 2021 12:03:36 +0100 Subject: [PATCH] final save before rewriting gallery again --- images/popup-tongue.png | Bin 0 -> 3291 bytes index.html | 108 +++++++++------- pages/mainpage.css | 272 ++++++++-------------------------------- 3 files changed, 112 insertions(+), 268 deletions(-) create mode 100644 images/popup-tongue.png diff --git a/images/popup-tongue.png b/images/popup-tongue.png new file mode 100644 index 0000000000000000000000000000000000000000..a5020490727315acb376468c32cc4340f242a6b0 GIT binary patch literal 3291 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 - + 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; - } -} - - - - -