danjoredd/3d_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Icybear 2024-08-02 18:20:44 -04:00
parent 32975a66ca
commit 76b02b6a8d
3 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -9,19 +9,31 @@
<body> <body>
<canvas id="bg"></canvas> <canvas id="bg"></canvas>
<div id="div1" class="page-wrapper"> <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> <header>
<h1> Daniel Jones</h1> <h1> Daniel Jones</h1>
<p>Web Developer, Game Designer, and Blogger.</p> <p>Web Developer, Game Designer, and Blogger.</p>
</header> </header>
<div id="description"> <div id="description">
<h1>About Me</h1>
<p> <p>
My name is Daniel Jones. I have been programming as a hobby since I was twelve years old. My name is Daniel Jones. I have been programming as a hobby since I was twelve years old.
<br> <br>
I went to college for Information Systems, and have been using those skills professionally since 2021. I went to college for Information Systems, and have been using those skills professionally since 2021.
<br> <br>
My interests include geocaching, Rust programming, web development, and puzzle solving. My interests include geocaching, programming, web development, and puzzle solving.
</p> </p>
</div> </div>
@ -100,7 +112,9 @@
</ul> </ul>
</ul> </ul>
</p> </p>
</div>
</div>
<footer> <footer>
<div id="attribution"> <div id="attribution">

11
main.js
View File

@ -2,7 +2,7 @@
Author: Daniel Jones Author: Daniel Jones
IDE: VSCodium IDE: VSCodium
Browsers tested: Firefox 125 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 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 //code to import GLTF file
let loadedModel; let loadedCmpModel; // model for PC
const cmpLoader = new GLTFLoader(); const cmpLoader = new GLTFLoader();
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{ cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
loadedModel = gltfScene; loadedCmpModel = gltfScene;
console.log("UwU whats this? My comupter model loaded! OwO"); 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.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.position.y = 20;
gltfScene.scene.scale.set(10,10,10); gltfScene.scene.scale.set(10,10,10);
scene.add(loadedModel.scene); scene.add(loadedCmpModel.scene);
} }
); );
@ -63,7 +63,7 @@ scene.add(ambientLight);
//background texture //background texture
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg'); const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
spaceTexture.magFilter = THREE.NearestFilter; spaceTexture.minFilter = THREE.LinearFilter;
scene.background = spaceTexture; scene.background = spaceTexture;
//turning off orbit controls and lighthelper. Not needed. Kept in code in case if I want to use it again. //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. //animation loop every cycle.
function animate(){ function animate(){
renderer.setSize(window.innerWidth, window.innerHeight);
requestAnimationFrame(animate); requestAnimationFrame(animate);
renderer.render(scene, camera); renderer.render(scene, camera);
} }

48
style.css
View File

@ -32,17 +32,12 @@ body {
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); 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 { header {
margin-top: 50px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(128, 128, 128, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
@ -51,7 +46,7 @@ header {
#description { #description {
margin-top: 50px; margin-top: 50px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(128, 128, 128, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
@ -60,8 +55,7 @@ header {
#projects { #projects {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(128, 128, 128, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
@ -69,7 +63,7 @@ header {
#jobs { #jobs {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(128, 128, 128, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
@ -77,8 +71,36 @@ header {
#school { #school {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(128, 128, 128, 0.5); background-color: rgba(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; 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 */