Skip to content

Commit

Permalink
Created first version of about page
Browse files Browse the repository at this point in the history
  • Loading branch information
Dany Hawk committed Sep 20, 2017
1 parent 267c6fd commit 633acf2
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 29 deletions.
4 changes: 2 additions & 2 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
<title>Portfolio | Danny Hawk</title>
</head>
<body>
<div id="sketchHolder"></div>
<div class="container">
<div id="sketchHolder" class="sha"></div>
<div class="container ca">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
Expand Down
11 changes: 9 additions & 2 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ body {
font-family: 'Open Sans', sans-serif;
}

.ca {
width: 40vw;
}

h1, h2 {
padding: 0px;
margin: 0px;
Expand Down Expand Up @@ -198,20 +202,23 @@ article {

/*Sketch Styling*/

#sketchHolder {
width: 50vw;
.sha {
width: 60vw;
}







/*About Me Page*/

.about {
display: flex;
align-items: center;
justify-content: center;
width: 40vw;
}

.me {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<div class="container">
<nav>
<ul>
<!--<li><a href="about.html">About</a></li>-->
<li><a href="about.html">About</a></li>
<li><a href="DannyHawk_Resume.pdf">Resume</a></li>
</ul>
</nav>
Expand Down
134 changes: 112 additions & 22 deletions js/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,20 @@ function setup() {
scrollPos = 0;

//Make a canvas that is half of the window, TODO: Make it resize
var cnv = createCanvas(window.innerWidth * 0.4, window.innerHeight);
var cnv = createCanvas(window.innerWidth * 0.6, window.innerHeight);
cnv.parent("sketchHolder");

//Create the physics engine
engine = Engine.create();
world = engine.world;
world.gravity.scale = 0;
world.gravity.scale = -0.0001;

createBounds();

//Start the simulation that runs at 60 frames per second
Engine.run(engine);

//spawnSkill("I'm a Circle!", 20, unhex(["96", "78", "78"]));
//spawnSkill("I'm a Circle too!", 20, unhex(["96", "78", "78"]));

//connectSkills(objects[0], objects[1], 100, 0.01);
setupSkills();

//Handle mouse Input
var mouse = Mouse.create(cnv.elt);
Expand All @@ -64,7 +61,7 @@ function setup() {
//Called every frame
function draw() {
background(unhex(["EE", "E4", "E4"]));
stroke(unhex(["96", "78", "78"]));
stroke(unhex(["00", "00", "00"]));

//Draw lines
for (var i = 0; i < connections.length; i++) {
Expand All @@ -85,21 +82,114 @@ function draw() {

//Draw bodies
for (var i = 0; i < objects.length; i++) {

//Check if bodies are off the canvas
if (objects[i].body.position.y + objects[i].radius < 0) {
objects[i].translate(0, height + 120);
}

objects[i].show();
objects[i].showText();
}

//Draw text
for (var i = 0; i < objects.length; i++) {
objects[i].showText();
}
//for (var i = 0; i < objects.length; i++) {
//}
}

function loadSkills() {

function setupSkills() {
/**
* 1: 20, A0A1B0
* 2: 30, 898BB0
* 3: 40, 686CB0
* 4: 50, 4C51B0
* 5: 60, 2C33B0
*/

var skill1 = 20;
var skill2 = 30;
var skill3 = 40;
var skill4 = 50;
var skill5 = 60;
var interest1 = unhex(["A0", "A1", "B0"]);
var interest2 = unhex(["89", "8B", "B0"]);
var interest3 = unhex(["68", "6C", "B0"]);
var interest4 = unhex(["4C", "51", "B0"]);
var interest5 = unhex(["2C", "33", "B0"]);

spawnSkill("C#", skill5, interest5); //0
spawnSkill("C++", skill3, interest3); //1
spawnSkill("javaScript", skill5, interest5); //2
spawnSkill("CSS", skill5, interest3); //3
spawnSkill("HTML", skill5, interest3); //4
spawnSkill("Canvas", skill4, interest3); //5
spawnSkill("Processing", skill4, interest3); //6
spawnSkill("Cinder", skill1, interest1); //7
spawnSkill("Java", skill4, interest3); //8
spawnSkill("MonoGame", skill3, interest3); //9
spawnSkill("jQuery", skill3, interest2); //10
spawnSkill("Bootstrap", skill2, interest3); //11
spawnSkill("Node", skill3, interest3); //12
spawnSkill("Ink", skill3, interest3); //13
spawnSkill("Unity", skill4, interest5); //14
spawnSkill("Git", skill4, interest5); //15
spawnSkill("Maya", skill2, interest2); //16
spawnSkill("Visual Studio", skill4, interest3); //17
spawnSkill("VS Code", skill4, interest3); //18
spawnSkill("Photoshop", skill2, interest3); //19
spawnSkill("Twine", skill3, interest2); //20
spawnSkill("HTC Vive", skill4, interest3); //21
spawnSkill("ARKit", skill2, interest2); //22
spawnSkill("UE4", skill2, interest3); //23
spawnSkill("p5.js", skill4, interest3); //24
spawnSkill("matter.js", skill3, interest3); //25
spawnSkill("d3.js", skill1, interest2); //26
spawnSkill("gulp", skill2, interest3); //27
spawnSkill("browserify", skill2, interest3); //28

var connectorWidth = 250;
var connectorStrength = 0.00005;

//c#
//connectSkills(objects[0], objects[9], connectorWidth, connectorStrength);
//connectSkills(objects[0], objects[14], connectorWidth, connectorStrength);
//connectSkills(objects[0], objects[15], connectorWidth, connectorStrength);
//connectSkills(objects[0], objects[17], connectorWidth, connectorStrength);
//connectSkills(objects[0], objects[18], connectorWidth, connectorStrength);

//c++
//connectSkills(objects[1], objects[7], connectorWidth, connectorStrength);
//connectSkills(objects[1], objects[17], connectorWidth, connectorStrength);

//javaScript
//connectSkills(objects[2], objects[5], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[10], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[12], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[15], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[18], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[24], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[25], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[26], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[27], connectorWidth, connectorStrength);
//connectSkills(objects[2], objects[28], connectorWidth, connectorStrength);

//CSS
//connectSkills(objects[3], objects[4], connectorWidth, connectorStrength);
//connectSkills(objects[3], objects[11], connectorWidth, connectorStrength);
//connectSkills(objects[3], objects[18], connectorWidth, connectorStrength);

//HTML
//connectSkills(objects[4], objects[11], connectorWidth, connectorStrength);
//connectSkills(objects[4], objects[18], connectorWidth, connectorStrength);

//Processing
//connectSkills(objects[6], objects[8], connectorWidth, connectorStrength);
}

function spawnSkill(label, size, color) {
objects.push(new Skill(width / 2, height / 2, size, color, label) );
var spawn = randomSpawn(25);

objects.push(new Skill(spawn.x, spawn.y, size, color, label) );
}

function connectSkills(skillA, skillB, length, stiffness) {
Expand All @@ -125,7 +215,7 @@ function connectSkills(skillA, skillB, length, stiffness) {
//A function that returns a random spawn point in the top half of the canvas
function randomSpawn(buffer) {
var randX = random(buffer, width - buffer);
var randY = random(buffer, (height / 2) - buffer);
var randY = random(buffer, height - buffer);

return {
x: randX,
Expand All @@ -135,12 +225,12 @@ function randomSpawn(buffer) {

//Resize the canvas and reset the boundaries on window resize
function windowResized() {
resizeCanvas(window.innerWidth * 0.4, window.innerHeight);
resizeCanvas(window.innerWidth * 0.6, window.innerHeight);

World.remove(world, leftWall);
World.remove(world, rightWall);
World.remove(world, floor);
World.remove(world, ceiling);
//World.remove(world, floor);
//World.remove(world, ceiling);

createBounds();
}
Expand All @@ -158,14 +248,14 @@ function resetBorders() {
//Create the floor and walls out of static rectangles
function createBounds() {
//Floor
floor = Bodies.rectangle(width / 2, height + 50, width, 100, {isStatic: true});
//floor = Bodies.rectangle(width / 2, height + 50, width, 100, {isStatic: true});

//Ceiling
ceiling = Bodies.rectangle(width / 2, -50, width, 100, {isStatic: true});
//ceiling = Bodies.rectangle(width / 2, -50, width, 100, {isStatic: true});

//Walls
leftWall = Bodies.rectangle(-10, height / 2, 20, height + 40, {isStatic: true});
rightWall = Bodies.rectangle(width + 10, height / 2, 20, height + 40, {isStatic: true});
leftWall = Bodies.rectangle(-10, height / 2, 20, height * 2, {isStatic: true});
rightWall = Bodies.rectangle(width + 10, height / 2, 20, height * 2, {isStatic: true});

World.add(world, [floor, ceiling, leftWall, rightWall]);
World.add(world, [leftWall, rightWall]);
}
10 changes: 8 additions & 2 deletions js/skill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ function Skill(x, y, radius, color, label) {
//Called every frame, after the initial draw call
this.showText = function() {
fill(unhex(["26", "21", "21"]));
textSize(radius / 2);
textSize(map(radius, 20, 60, 9, 18));

var pos = this.body.position;
var angle = this.body.angle;

push();
translate(pos.x, pos.y);
text(label, radius + 5, textSize() / 4);
rotate(angle);
text(label, textWidth(label) / -2, textSize() / 4);
pop();
}

Expand All @@ -48,6 +50,10 @@ function Skill(x, y, radius, color, label) {
pos.y - this.radius > height);
}

this.translate = function(x, y) {
Body.translate(this.body, {x: x, y: y});
}

this.removeFromWorld = function() {
World.remove(world, this.body);
}
Expand Down

0 comments on commit 633acf2

Please sign in to comment.