did some html and css work. Added nav bar on top to aid in navigation. Added resizing of window fix, but aspect ratio messed up.
This commit is contained in:
Icybear
parent
32975a66ca
commit
76b02b6a8d
18
index.html
18
index.html
@ -9,19 +9,31 @@
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<canvas id="bg"></canvas>
|
||||
|
||||
<div id="div1" class="page-wrapper">
|
||||
<div class="navbar">
|
||||
<a href="#description">About</a>
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#jobs">Experience</a>
|
||||
<a href="#school">Education</a>
|
||||
<a href="https://whoisthisjoker.com">Blog</a>
|
||||
</div>
|
||||
<header>
|
||||
<h1> Daniel Jones</h1>
|
||||
<p>Web Developer, Game Designer, and Blogger.</p>
|
||||
</header>
|
||||
<div id="description">
|
||||
<h1>About Me</h1>
|
||||
<p>
|
||||
My name is Daniel Jones. I have been programming as a hobby since I was twelve years old.
|
||||
<br>
|
||||
I went to college for Information Systems, and have been using those skills professionally since 2021.
|
||||
<br>
|
||||
My interests include geocaching, Rust programming, web development, and puzzle solving.
|
||||
My interests include geocaching, programming, web development, and puzzle solving.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -100,7 +112,9 @@
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="attribution">
|
||||
|
||||
11
main.js
11
main.js
@ -2,7 +2,7 @@
|
||||
Author: Daniel Jones
|
||||
IDE: VSCodium
|
||||
Browsers tested: Firefox 125
|
||||
Last change: 08/01/24
|
||||
Last change: 08/02/24
|
||||
purpose: portfolio website to show to potential freelance customers/web developer positions
|
||||
*/
|
||||
|
||||
@ -38,16 +38,16 @@ renderer.render(scene, camera);
|
||||
|
||||
|
||||
//code to import GLTF file
|
||||
let loadedModel;
|
||||
let loadedCmpModel; // model for PC
|
||||
const cmpLoader = new GLTFLoader();
|
||||
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
|
||||
loadedModel = gltfScene;
|
||||
loadedCmpModel = gltfScene;
|
||||
console.log("UwU whats this? My comupter model loaded! OwO");
|
||||
gltfScene.scene.position.z = 50; //for reference tomorrow when I work on this again...gltfScene is the actual object that you set attributes to. Mess with that.
|
||||
gltfScene.scene.position.y = 20;
|
||||
gltfScene.scene.scale.set(10,10,10);
|
||||
|
||||
scene.add(loadedModel.scene);
|
||||
scene.add(loadedCmpModel.scene);
|
||||
|
||||
}
|
||||
);
|
||||
@ -63,7 +63,7 @@ scene.add(ambientLight);
|
||||
|
||||
//background texture
|
||||
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
|
||||
spaceTexture.magFilter = THREE.NearestFilter;
|
||||
spaceTexture.minFilter = THREE.LinearFilter;
|
||||
scene.background = spaceTexture;
|
||||
|
||||
//turning off orbit controls and lighthelper. Not needed. Kept in code in case if I want to use it again.
|
||||
@ -98,6 +98,7 @@ window.addEventListener("scroll", updateCamera);
|
||||
//animation loop every cycle.
|
||||
function animate(){
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
requestAnimationFrame(animate);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
48
style.css
48
style.css
@ -32,17 +32,12 @@ body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
grid-column: 3 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
@ -51,7 +46,7 @@ header {
|
||||
#description {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
@ -60,8 +55,7 @@ header {
|
||||
#projects {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
@ -69,7 +63,7 @@ header {
|
||||
#jobs {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
@ -77,8 +71,36 @@ header {
|
||||
#school {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(128, 128, 128, 0.5);
|
||||
background-color: rgba(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
/* The navigation bar */
|
||||
.navbar {
|
||||
position: fixed; /* Set the navbar to fixed position */
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
left:0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Links inside the navbar */
|
||||
.navbar a {
|
||||
margin: 0px;
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: left;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Change background on mouse-over */
|
||||
.navbar a:hover {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
Loading…
Reference in New Issue
Block a user