Permalink
Browse files

trial

  • Loading branch information...
AndyMo committed Dec 2, 2019
0 parents commit 31c904a36cb2ce16b925cbbc42c02a95fb5282d3
Showing with 288 additions and 0 deletions.
  1. BIN images/project1.jpg
  2. BIN images/project3.jpg
  3. +64 −0 index.html
  4. +12 −0 scripts.js
  5. +212 −0 styles.css
BIN +37 KB images/project1.jpg
Binary file not shown.
BIN +152 KB images/project3.jpg
Binary file not shown.
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title> Andy's Portfolio </title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<script src='scripts.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header id="header">
<nav>
<div class="logo">
ANDY MO
</div>
<div class="menu">
<ul>
<li><button class="header-btn" type="button" onClick="document.getElementById('header').scrollIntoView();"> Home </button> </li>
<li><button class="header-btn" type="button" onClick="document.getElementById('about').scrollIntoView();"> About </button> </li>
<li><button class="header-btn" type="button" onClick="document.getElementById('projects').scrollIntoView();"> Projects </button> </li>
<li><button class="header-btn" type="button" onClick="document.getElementById('contact').scrollIntoView();"> Contact </button> </li>
</ul>
</div>
</nav>
<section class="div-ball">
<div class="nametag">
<p><b>Andy Mo</b><p>
</div>
</section>
</header>
<div class="content-about" id="about">
<h2 class="header-about">Who Am I?</h2>
<p class="about-p"> Andy Mo is my name and Software Engineering is my game. I am a curious mind with a willingness to learn about anything and everything that interests me.
I aspire to create or be apart of something that will leave its fingerprint on this world. Other than coding, I enjoy playing basketball, hanging out with my friends, and
being around my loved ones.
</p>
</div>
<div class="content-projects row" id="projects">
<div class="project-one column">
<img class="project-one-img" src="./images/project1.jpg">
</div>
<div class="project-one column">
<h2 class="project-one-header">Project Skynet</h2>
<p>This is the very first project I did with a partner in my software engineering course at General Assembly. For this project,
I mainly worked in the backend. This was my first experience working on the backend and I struggled quite a bit while doing it but
I believe I learned a lot about what I needed to work on and got a good first taste of what it is like building a full stack application.
</p>
</div>
</div>
<div class="content-contact" id="contact">
<h2>Contact</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam eos nulla beatae doloremque perspiciatis culpa recusandae, sequi natus
id porro maxime facilis nisi molestiae esse delectus nam ratione corporis sint.</p>
</div>
</div>
</body>
</html>
@@ -0,0 +1,12 @@
{/* <input type="button"
onClick="document.getElementById('middle').scrollIntoView();" /> */}

$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}

else {
$('nav').removeClass('black');
}
})
@@ -0,0 +1,212 @@
html, body {
margin: 0;
padding: 0;
width: 100%;
}

body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;

}

header {
width: 100%;
height: 100vh;
background: url(https://pbs.twimg.com/media/DeZGYLXW4AATYP6?format=jpg&name=medium) no-repeat 100% 100%;
background-size: cover;
}

.header-btn{
text-decoration: none;
font-size: 16px;
all: unset;
cursor: pointer;
}

.header-about{
margin-top: 0;
padding-top: 12%;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 30px;
}

.about-p{
font-family: 'Montserrat', sans-serif;
font-size: 22px;
}

.column {
flex: 50%;
height: 100vh;
}

.content-projects{
background-color: whitesmoke;
}

.row{
display:flex;
}



/* .content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
} */

.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 11px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}

nav {
position: fixed;
width: 100%;
line-height: 60px;
}

nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}

nav.black ul {
background: #000;
}

nav ul li {
display: inline-block;
padding: 0 40px;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}

.div-ball{
height: 100%;
padding-top: 20%;
padding-bottom: 20%;
z-index: 2;
}
.nametag{
/* border-radius: 50%; */
border: 1px solid black;
height: 100px;
width: 275px;
margin: 0 auto;
background-color: grey;
opacity: 0.5;
}
.nametag p {
text-align: center;
font-size: 32px;
font-family: 'Montserrat', sans-serif;
font-style: black;
}

.menu {
background-color: rgba(0, 0, 0, .6);
height: 45px;
padding: 1%;
}

.content-about{
text-align: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: grey;
}

.content-about p{
padding-left: 28%;
padding-right:28%;
width: 44%;
}

.project-one-img{
width: 80%;
height: 65%;
padding-top: 20%;
padding-left: 10%;
}

.project-one-header{
font-size: 24px;
padding-top: 20%;
text-align: center;

}
.project-one p{
padding-left: 10%;
width: 60%;
font-size: 20px;
}
/* .menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
} */

@media(max-width: 786px) {

.logo {
position: fixed;
top: 0;
margin-top: 16px;
}

nav ul {
max-height: 0px;
background: #000;
}

nav.black ul {
background: #000;
}

.showing {
max-height: 34em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}

.menu-icon {
display: block;
}

}

0 comments on commit 31c904a

Please sign in to comment.