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,20 +30,24 @@
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">
<img src="imgs/PC.jpg" <div class="pc-picture">
alt="Close up view of a watercooled CPU"> <img src="imgs/PC.jpg"
<p> alt="Close up view of a watercooled CPU">
I built my computer that I use day in and day out, including </div>
the custom watercooling loop that cools the CPU, with plans <div class="pc-text">
to include the graphics card in the loop later down the road. <p>
It's always a fun challenge to maintain the cooling system I built my computer that I use day in and day out, including
and make further additions to the system that has been a the custom watercooling loop that cools the CPU, with plans
work in progress for the past three years. to include the graphics card in the loop later down the road.
</p> It's always a fun challenge to maintain the cooling system
</section> and make further additions to the system that has been a
work in progress for the past three years.
</p>
</div>
</div>
</div> </div>
<!----====MAIN CONTENT END====----> <!----====MAIN CONTENT END====---->
</div> </div>

View File

@@ -6,13 +6,36 @@
<link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="topnav"> <!----====MAIN CONTAINER START====---->
<ul> <div>
<li><a class="active" href="resume.html">Resume</a></li> <!----====NAVIGATION BAR START====---->
<li><a href="contact.html">Contact</a></li> <div class="topnav">
<li><a href="projects.html">Projects</a></li> <ul>
<li><a href="index.html">Home</a></li> <li><a class="active" href="resume.html">Resume</a></li>
</ul> <li><a href="contact.html">Contact</a></li>
</div> <li><a href="projects.html">Projects</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</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
}