jme9
4.8 KiB
Jesse M. Ellis - Development notebook for my personal website.
Note: Revision 1 will be developed from 11/24/2024 to 12/11/2024.
Table of Contents
11/24/2024 - First things first
The point of this website is to build a personal website that highlight's personal projects using concepts we've learned in Caterina Paun's Intro to WebDev at PSU. I am going to attempt to create something that is more oriented toward my personal game development endeavours by theme-ing the website with elements from LunaLight. I will highlight some of the milestones in that project as well as other projects I have done.
Some technical constraints
To check the boxes around concepts learned in WebDev this site should be built using the following:
- HTML
- CSS
- JavaScript
- GitHub pages for deployment
High Level Implementation Plan
Concept: This will be a single-page scrolling website with a fixed navigation bar that alows the user to jump to sections.
-
Sketch a layout design for the following required sections:
- Navbar: Fixed at the top.
- About: Brief introduction and a professional photo.
- Previous Work: Resume highlights or course/skills section.
- Projects: Showcase 2-3 projects with links to GitHub/deployed sites.
- Contact: Form for user inquiries.
-
Build basic HTML structure to represent each section.
-
Style the website with CSS.
-
Implement website interactivity with Javascript.
- Scrolling
- Form validation
- Email contact
- Embedded YouTube Video
-
Test, Refine and Repeat (steps 3-5)
-
Deployment with GitHub pages (we'll worry about this when we get there)
A starting point
Just to get things going I'm going to bring some initial files that create a form with user input functionality.
form.html, form.js and styles.css
These files create a simple form that gets user input and prints it to the console. We will build the entire website from here ;)
11/25/2024 - Design
Here's a quick design sketch that captures te aesthetic of the site and some styling. I want the site to mainy highlight my current retro-style game ev project so I think using some pixel art fro mthat as the background is a cool idea.
Note: I did this in procreate, which is not great for this sort of thing.
11/27/2024 - Figma Design
I decided to go ahead and design the website using Figma so that everything I need is ready to go when I start actual implementation.
11/30/2024 - Navbar and background
To get started on the above design I think we should get a simple navbar working that can scroll to the various sections. We should classes to make things easier later.
<body>
<header class="site-header">
<nav class="navbar">
<a href="#about" class="nav-link">About</a>
<a href="#work" class="nav-link">Work</a>
<a href="#projects" class="nav-link">Projects</a>
<a href="#contact" class="nav-link">Contact</a>
</nav>
</header>
<section id="about" class="about-section">
<h1 class="section-title">About Me</h1>
</section>
<section id="work" class="work-section">
<h2 class="section-title">Previous Work</h2>
</section>
<section id="projects" class="projects-section">
<h2 class="section-title">Projects</h2>
</section>
<section id="contact" class="contact-section">
<h2 class="section-title">Contact</h2>
</section>
</body>
This is a pretty bland webpage with just the html, so let's add the backgound image and some styling.
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url("../images/Clouds.png");
background-size: cover; /* Ensure the image covers the entire viewport */
background-position: left; /* Center the image */
background-attachment: fixed; /* Make the image fixed during scrolling */
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 1rem;
text-align: center;
}
.nav-link {
color: #fff;
margin-right: 1rem;
text-decoration: none;
}
section {
padding: 2rem;
color: #fff;
margin-top: 2rem;
}
Much nicer!!! Now let's add in some simple JavaScript to scroll to the different sections by clicking the navbar links.
document.querySelectorAll('.nav-link').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Lookin pretty good!
