This website was coded entirely from scratch using HTML, CSS, and JS. Bootstrap was used very sparsely for styling and prismJS was used to highlight the text boxes found on each page.
Below you can find one file for each language used in the website. The entirety of the website files can be found on my GitHub.
The website is hosted on AWS Amplify and the domain is registered with Amazon Route53.
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Matt's Web Portfolio</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="slideshow.css">
</head>
<body>
<!--Top Navigation Bar-->
<div class="nav">
<a class = "active" href="#">Homepage</a>
<a href = "alumdb.html">Alumni Database</a>
<a href = "projr.html">Project R</a>
<a href = "planner.html">Meeting Planner</a>
<a href = "website.html">This Website</a>
</div>
<div id = "page-container">
<div id = "content-wrap">
<h1>
Welcome to my web Portfolio!
</h1>
<!--Slideshow-->
<div class="thumbnail">
<div class="img fade">
<img src="Balloon-Day.png" alt="The cube satellite I coded">
</div>
<div class="img fade">
<img src="scouts.JPG" alt="Palm Trees">
</div>
<div class="img fade">
<img src="athens.jpg" alt ="Neon Sign">
</div>
<div class="img fade">
<img src="shm.JPG" alt="The cube satellite I coded">
</div>
<hr style="padding: 0;">
</div>
<div class="bio">
My name's Matthew Keshishian and I am a second year Computer Science student at UCLA. I specialize in software engineering and cyber security, and I have experience with
Java, Python, C++, C#, Arduino, JS, HTML, and CSS. This website has some of my projects that demonstrate my knowledge in these languages. All these projects in their
entirety can be found on my Github. If you have any questions, feel free to reach out to me on LinkedIn or my email! You can find the links at the bottom of
any page.
</div>
</div>
<!--Load footer-->
<footer id="icon-footer" ></footer>
<script async src="footer.js"></script>
<script src="slideshow.js"></script>
</body>
</div>
</html>
/*main.css*/
body {
background-color: #63768D;
}
/*---------------------------------------------------------------------*/
/*This code chunk is for the navigation bar at the top of the page*/
.nav {
background-color: #333;
overflow:hidden;
}
/*Properties of links in nav bar*/
.nav a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20px;
}
/*Tells links what to do when hovered over*/
.nav a:hover{
background-color: #ddd;
color:black;
}
/*Tells links what to do when they are the active page*/
.nav a.active{
background-color: #04aa6d;
color:white;
}
/*---------------------------------------------------------------------*/
/*Style for code boxes*/
.codebox {
/* Below are styles for the codebox (not the code itself) */
border:1px solid black;
background-color:#EEEEFF;
width:300px;
overflow:auto;
padding:10px;
}
.codebox code {
/* Styles in here affect the text of the codebox */
font-size:0.9em;
/* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}
/*---------------------------------------------------------------------*/
/*Style for footer*/
.footer{
position: absolute;
height:auto;
margin:auto;
bottom: 0;
left:0;right:0;
padding: 12px;
background: #ddd;
}
/*Container for .image*/
.container {
position: absolute;
width: 5%;
height:auto;
margin:auto;
bottom: 0;
left:0;right:0;
}
/*Properties of images at bottom of screen*/
.image {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
border-radius: 50%;
display: block;
height:auto;
}
/*Container for .icon*/
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
/*Tells what to do when container is hovered over*/
.container:hover .image { opacity: .3; }
.container:hover .middle { opacity: 1; }
/*Properties for icons that appear when image is hovered over*/
.icon {
text-align: center;
left:0;right:0;
margin: auto;
display: block;
width:100%;
height:auto;
border-radius: 50%;
}
#bruin {
display: block;
float: right;
width: 5%;
height: auto;
}
/*footer.js*/
let webFooter = `
<div class="footer">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<h2 style = "float: left" >Matthew Keshishian</h2>
<!--LinkedIn Icon-->
<div class="container" >
<img src="Profile Pic.jpg" alt="Find me on LinkedIn!" class = "image">
<div class="middle">
<div><a href = "https://www.linkedin.com/in/matthew-e-keshishian/"><img src = "linkedin.png" class = "icon"></a></div>
</div>
</div>
<!--GitHub Icon-->
<div class="container" style = "transform: translate(150%, 0)">
<img src="githublogo.png" alt="Look through my Github!" class = "image">
<div class="middle">
<div><a href = "https://github.com/Aervitas"><img src = "github-logo.png" class = "icon"></a></div>
</div>
</div>
<!--Gmail Icon-->
<div class="container" style = "transform: translate(-150%, 0)">
<img src="email.png" alt="Contact my email!" class = "image">
<div class="middle">
<div><a href = "mailto:matthewkesh8@gmail.com"><img src = "google.png" class = "icon"></a></div>
</div>
</div>
<!--End of Icons-->
<img id = "bruin" src = "uclaicon.png">
</div>
`;
document.getElementById("icon-footer").innerHTML = webFooter;