jme9
66 lines
2.4 KiB
Markdown
66 lines
2.4 KiB
Markdown
# 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](#11/24/2024---First-things-first)
|
|
|
|
---
|
|
|
|
## 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.*
|
|
|
|
1) 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.
|
|
2) Build basic HTML structure to represent each section.
|
|
3) Style the website with CSS.
|
|
4) Implement website interactivity with Javascript.
|
|
|
|
- Scrolling
|
|
- Form validation
|
|
- Email contact
|
|
- Embedded YouTube Video
|
|
5) Test, Refine and Repeat (steps 3-5)
|
|
6) 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.
|
|
|
|
|
|
|