Skip to content

Commit

Permalink
added website code
Browse files Browse the repository at this point in the history
  • Loading branch information
Charles Wu committed Jul 14, 2018
1 parent ae0e7b0 commit ce7e665
Show file tree
Hide file tree
Showing 4 changed files with 291 additions and 0 deletions.
34 changes: 34 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Charles's Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>
<script src="matterDraw.js"></script>
</head>
<nav>
<a class="active" href="index.html">Home</a>
<a href="projects.html">Projects</a>
</nav>
<body id="main-pg" onload="start()">
<p id="my-name">Hi, my name is Charles Wu!</p>
<p id="about-me"></p>
<script>
const aboutMe = "I'm a third year student at the University of Waterloo, studying Computer Science and Statistics.";

function typeAboutMe() {
var type = new Typewriter($("#about-me")[0], {
typingSpeed: 30
});
type.typeString(aboutMe).start();
}

function start() {
setPhysics();
typeAboutMe();
}
</script>
</body>
</html>
100 changes: 100 additions & 0 deletions matterDraw.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
function setPhysics() {
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies,
Common = Matter.Common,

engine = Engine.create(),
world = engine.world,

render = Render.create({
element: document.body,
engine: engine,
options: {
width: screen.width,
height: screen.height,
showAngleIndicator: false,
wireframes: false,
background: "#FFFFFF",
showAxes: true
}
});

Render.run(render);

var runner = Runner.create();
Runner.run(runner, engine);


var base = Bodies.rectangle(screen.width * 0.5, screen.height * 0.73, screen.width, screen.height * 0.2, {
isStatic: true,
render: {
fillStyle: '#FFDD99'
}
});

var computer = [
Bodies.rectangle(screen.width * 0.25, screen.height * 0.35, screen.width * 0.03, screen.height * 0.4),

Bodies.rectangle(screen.width * 0.75, screen.height * 0.35, screen.width * 0.03, screen.height * 0.4),

Bodies.rectangle(screen.width * 0.5, screen.height * 0.15, screen.width * 0.53, screen.height * 0.025),

Bodies.rectangle(screen.width * 0.5, screen.height * 0.55, screen.width * 0.53, screen.height * 0.025),

Bodies.rectangle(screen.width * 0.5, screen.height * 0.59, screen.width * 0.07, screen.height * 0.08),

Bodies.rectangle(screen.width * 0.5, screen.height * 0.63, screen.width * 0.25, screen.height * 0.05)
];


for (var i = 0; i < computer.length; ++i) {
computer[i].isStatic = true;
computer[i].render.fillStyle = "#000000";
}

World.add(world, [base].concat(computer));

function drawCircles(xCenter) {
return Composites.stack(xCenter, -700, 30, 10, 10, 10, function(x, y) {
return Bodies.circle(x, y, Common.random(10, 25), {
restitution: 0.7,
friction: 0.3
});
})
}

World.add(world, [drawCircles(screen.width * 0.05), drawCircles(screen.width * 0.75)]);


var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});

World.add(world, mouseConstraint);

render.mouse = mouse;

Render.lookAt(render, {
min: {
x: 0,
y: 0
},
max: {
x: screen.width,
y: screen.height
}
});
};
54 changes: 54 additions & 0 deletions projects.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>Charles's Projects</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<nav>
<a href="index.html">Home</a>
<a class="active" href="projects.html">Projects</a>
</nav>
<body id="projects-pg">
<section class="project">
<h1>Synchronized Tutoring System</h1>
<p class="about-project">
Connect tutors and students with concurrent network sessions, each consisting of<br>
an instant messaging system and a sequence of virtual blackboards and embedded<br>
web browsers that are synchronized in real time across the network.
</p>
<section class="project-images">
<img class="thumbnail" src="Screenshots/TutoringSystem1.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem2.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem3.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem4.png" onmouseover="display(1, this)">
<img class="thumbnail" src="Screenshots/TutoringSystem5.png" onmouseover="display(1, this)">
<img class="display" id="project1-display" src="Screenshots/TutoringSystem1.png">
</section>
</section>
<section class="project">
<h1>Media Note Taker</h1>
<p class="about-project">
Users can play video/audio files with a built-in multimedia player and take notes<br>
that get “bookmarked” along the progress bar.
</p>
<section class="project-images">
<img class="thumbnail" src="Screenshots/NoteTaker1.png" onmouseover="display(2, this)">
<img class="thumbnail" src="Screenshots/NoteTaker2.png" onmouseover="display(2, this)">
<img class="display" id="project2-display" src="Screenshots/NoteTaker1.png">
</section>
</section>
<script>
var prevImg;

function display(projectNum, img) {
if (prevImg == img) return;
var name = "#project" + projectNum + "-display";
$(name)[0].src = img.src;
if (prevImg) prevImg.className = "thumbnail";
img.className = "thumbnail-selected";
prevImg = img;
}
</script>
</body>
</html>
103 changes: 103 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
html, #main-pg, #projects-pg {
height: 100%;
margin: 0;
padding: 0;
}

#main-pg {
position: fixed;
z-index: 2;
}

nav {
text-align: center;
background-color: #00FF99;
overflow: hidden;
}

nav a {
display: inline-block;
color: #8080FF;
padding: 15px;
text-decoration: none;
font-size: 17px;
}

nav a:hover {
background-color: #FF80B3;
color: white;
}

nav a.active {
background-color: #E6005C;
color: white;
}

nav a, p, h1 {
font-family: Arial;
}

#about-me, #my-name {
position: fixed;
z-index: 1;
margin-left: 35%;
margin-right: 35%;
}

#my-name {
margin-top: 15%;
font-size: 30px;
color: #E600AC;
}

#about-me {
margin-top: 20%;
font-size: 20px;
}

#projects-pg h1 {
font-weight: bold;
font-size: xx-large;
color: #25468D;
}

.project {
text-align: center;
margin-top: 4%;
margin-bottom: 3%;
}

.about-project {
text-align: left;
display: table;
margin-left: auto;
margin-right: auto;
margin-bottom: 2%;
padding: 2%;
border: solid;
border-width: thick;
border-color: #FF9933;
background-color: #FFE683;
}

.display {
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
}

.thumbnail-selected, .thumbnail {
display: inline-block;
width: 5%;
margin-left: 0.3%;
margin-right: 0.3%;
margin-bottom: 1.2%;
border-style: solid;
border-color: #99FFCC;
border-width: medium;
}

.thumbnail-selected {
border-color: #FF0066;
}

0 comments on commit ce7e665

Please sign in to comment.