r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1 from jpez-development/portfolio_page 

Portfolio page
This commit is contained in:
Joshua Perry 2022-04-13 10:45:23 +01:00 committed by GitHub
parent 1a76ba36d9 21925b2da9
commit 43cae90c8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 97 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/portfolio/images/efron.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
assets/portfolio/images/website.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
assets/portfolio/videos/ardent.mp4 Normal file
View File

Binary file not shown.

5
home/index.css
View File

@ -17,7 +17,6 @@
.profileImg {
content: url("../assets/images/profileImage.png");
size: 10%;
max-height: 20em;
border: solid #f29602;
border-radius: 1000%;
@ -135,8 +134,4 @@ main {
main > h1 {
max-width: 20em;
}
.hidenav {
display: none;
}

5
home/index.html
View File

@ -10,13 +10,14 @@
<base href="../">
<title>J-Pez Development</title>
<title>Home: J-Pez Development</title>
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="stylesheet" href="style/main.css" media = "screen">
<link rel="stylesheet" href="home/index.css" media="screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
</head>
<body id="clicked">
<nav class="navigation">
@ -25,7 +26,7 @@
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a>
<a class="arrow"></a>
</nav>
<main>

64
portfolio/portfolio.css
View File

@ -0,0 +1,64 @@
body {
grid-template-areas:
"nav nav nav"
"main main main"
"footer footer footer";
}
main {
display: grid;
grid-template-rows: auto;
grid-template-areas:
"ardent"
"efron"
"website"
;
}
.project {
background-color: rgba(0, 0, 0, 70%);
color: #e5e5e5;
}
.right {
margin-top: 2em;
margin-left: 20em;
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
padding-left: 5em;
padding-bottom: 1em;
}
.left {
margin-top: 2em;
margin-right: 20em;
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
padding-left: 0.5em;
padding-bottom: 1em;
}
.project > img {
border-radius: 1em;
max-width: 50em;
float: left;
margin-right: 1em;
}
.project > video {
max-width: 50em;
float: left;
border-radius: 1em;
margin-right: 1em;
}
#ardent {
grid-area: ardent;
}
#efron {
grid-area: efron;
}
#website {
grid-area: website;
}

24
portfolio/portfolio.html
View File

@ -10,7 +10,7 @@
<base href="../">
<title>J-Pez Development</title>
<title>Portfolio: J-Pez Development</title>
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="stylesheet" href="style/main.css" media = "screen">
@ -25,11 +25,31 @@
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a>
<a class="arrow"></a>
</nav>
<main>
<a class="shownav" href="portfolio/portfolio.html#clicked"></a>
<section class="project left">
<h1 class="title">Ardent</h1>
<video controls alt="An image of the project site">
<source src="assets/portfolio/videos/ardent.mp4" type="video/mp4"/>
</video>
<p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, odit aut quod quam dolores fuga dolor illum neque, sunt laboriosam consequuntur harum, assumenda id soluta aliquid dolorum ullam deleniti vero.</p>
</section>
<section class="project right">
<h1 class="title">Efron's Dice</h1>
<img src="assets/portfolio/images/efron.png" alt="An image of the output of the project script"/>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo commodi eveniet porro hic saepe ratione adipisci soluta consectetur voluptates id, asperiores voluptatum fugiat reiciendis impedit quasi quae aliquam? Atque, ipsum!</p>
</section>
<section class="project left">
<h1 class="title">Portfolio Website</h1>
<img src="assets/portfolio/images/website.png" alt="An image of the project site"/>
<p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, odit aut quod quam dolores fuga dolor illum neque, sunt laboriosam consequuntur harum, assumenda id soluta aliquid dolorum ullam deleniti vero.</p>
</section>
</main>
<footer>

13
style/main.css
View File

@ -25,7 +25,8 @@ main {
.navigation {
top: 0em;
margin: 0;
margin-right: -24em;
grid-area: nav;
width: 80em;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-areas: "home port blog contact arrow";
@ -95,7 +96,7 @@ nav > .link:hover {
}
.arrow {
margin-left: 6em;
margin-left: 12em;
margin-top: 1em;
border:0.5em solid #f29602;
border-width: 0em 0.5em 0.5em 0em;
@ -105,12 +106,10 @@ nav > .link:hover {
padding: 0.5em;
opacity: 1;
transition: opacity 1s ease-in;
}
.right {
transform: rotate(-45deg);
}
.moreInfo {
position: relative;
text-decoration: underline;
@ -147,4 +146,8 @@ nav > .link:hover {
@font-face {
font-family: body;
src: url("../assets/fonts/Yomogi-Regular.woff");
}
.hidenav {
display: none;
}