Fix PC picture. Add Resume page buttons.

This commit is contained in:
2022-10-02 17:07:11 -04:00
parent d8cefca69d
commit fb73730680
4 changed files with 89 additions and 29 deletions

BIN
JYack_Resume_Public.pdf Normal file

Binary file not shown.

View File

@@ -21,7 +21,7 @@
<!----====MAIN CONTENT START====----> <!----====MAIN CONTENT START====---->
<div class="main-content"> <div class="main-content">
<!----====INTRO START====----> <!----====INTRO START====---->
<section class="intro"> <div class="intro">
<h1>ABOUT ME</h1> <h1>ABOUT ME</h1>
<p> <p>
I'm an undergraduate Computer Science student at the I'm an undergraduate Computer Science student at the
@@ -30,11 +30,14 @@
enjoy the problem solving aspects, especially after enjoy the problem solving aspects, especially after
solving an issue that has been giving me trouble. solving an issue that has been giving me trouble.
</p> </p>
</section> </div>
<!----====INTRO END====----> <!----====INTRO END====---->
<section class="pc"> <div class="pc">
<div class="pc-picture">
<img src="imgs/PC.jpg" <img src="imgs/PC.jpg"
alt="Close up view of a watercooled CPU"> alt="Close up view of a watercooled CPU">
</div>
<div class="pc-text">
<p> <p>
I built my computer that I use day in and day out, including I built my computer that I use day in and day out, including
the custom watercooling loop that cools the CPU, with plans the custom watercooling loop that cools the CPU, with plans
@@ -43,7 +46,8 @@
and make further additions to the system that has been a and make further additions to the system that has been a
work in progress for the past three years. work in progress for the past three years.
</p> </p>
</section> </div>
</div>
</div> </div>
<!----====MAIN CONTENT END====----> <!----====MAIN CONTENT END====---->
</div> </div>

View File

@@ -6,6 +6,9 @@
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
</head> </head>
<body> <body>
<!----====MAIN CONTAINER START====---->
<div>
<!----====NAVIGATION BAR START====---->
<div class="topnav"> <div class="topnav">
<ul> <ul>
<li><a class="active" href="resume.html">Resume</a></li> <li><a class="active" href="resume.html">Resume</a></li>
@@ -14,5 +17,25 @@
<li><a href="index.html">Home</a></li> <li><a href="index.html">Home</a></li>
</ul> </ul>
</div> </div>
<!----====NAVIGATION BAR END====---->
<!----====MAIN CONTENT START====---->
<div class="main-content">
<!----====RESUME START====---->
<div class="resume-text">
<h1>Looking to hire me?</h1>
<p>
You can view or download my resume below, and I look forward
to hearing from you! Alternatively, you can send me a message
via the Contact page.
</div>
<!----====RESUME END====---->
<div class="buttons">
<a href="JYack_Resume_Public.pdf" class="btn" download="JYack_Resume.pdf">Download Resume</a>
<a href="contact.html" class="btn">Contact Me</a>
</div>
</div>
<!----====MAIN CONTENT END====---->
</div>
<!----====MAIN CONTAINER END====---->
</body> </body>
</html> </html>

View File

@@ -1,6 +1,7 @@
html { html {
background-color: #303030; background-color: #303030;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
color: aliceblue;
} }
body { body {
@@ -56,20 +57,52 @@ body {
.intro { .intro {
text-align: center; text-align: center;
bottom margin: 20vh; margin-bottom: 20vh;
} }
.pc { .pc {
margin: 20vh 0; margin: 20vh 0;
width: 100%; width: 100%;
text-align: left;
} }
.pc img { .pc-picture img {
display: block; width: auto;
max-width: 10vw; height: 50vh;
object-fit: contain; float: right;
object-position: right;
padding-left: 3vw; padding-left: 3vw;
} }
.pc-text {
text-align: left;
padding: 20vh 0;
}
.resume-text {
text-align: center;
}
.buttons {
width: 50vw;
margin: auto;
text-align: center;
}
.btn {
font-size: 16px;
font-weight: 500;
text-decoration: none;
padding: 12px 35px;
margin: 3vh 5vw;
color: aliceblue;
border-radius: 40px;
display: inline-block;
white-space: nowrap;
border: none;
background: #2727af;
transition: all 0.3s ease;
}
.btn:hover {
transform: scale(1.05);
background: #191970
}