Added Profile pic and initial section set-up
This commit is contained in:
jme9
+132
-25
@@ -1,12 +1,12 @@
|
||||
# Jesse M. Ellis - Development notebook for my personal website.
|
||||
|
||||
Note: *Revision 1 will be developed from 11/24/2024 to 12/11/2024.*
|
||||
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](#11/24/2024---First-things-first)
|
||||
|
||||
---
|
||||
|
||||
@@ -25,25 +25,23 @@ To check the boxes around concepts learned in WebDev this site should be built u
|
||||
|
||||
### 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.*
|
||||
**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)*
|
||||
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
|
||||
|
||||
@@ -59,20 +57,20 @@ These files create a simple form that gets user input and prints it to the conso
|
||||
|
||||
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.
|
||||
_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.
|
||||
We should use classes to make things easier later.
|
||||
|
||||
```
|
||||
<body>
|
||||
@@ -139,6 +137,7 @@ section {
|
||||
```
|
||||
|
||||
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) {
|
||||
@@ -152,4 +151,112 @@ document.querySelectorAll('.nav-link').forEach(anchor => {
|
||||
|
||||
Lookin pretty good!
|
||||
|
||||
|
||||
|
||||
|
||||
## 12/01/2024 - Profile Pic
|
||||
|
||||
As in the Figma design I want the profile pic and name to be in a rounded box (pill shape) over the background such that it sends focus to the pixel art in the background and then name and pic of the person who created it. Which is me in this case ;). The html portion is not terribly complicated:
|
||||
|
||||
```
|
||||
<section id="title" class="title-section">
|
||||
<div class="title-box">
|
||||
<div class="title-text">
|
||||
<p>Developer Profile</p>
|
||||
<h1>Jesse M. Ellis</h1>
|
||||
</div>
|
||||
<img
|
||||
src="images/Profile.png"
|
||||
alt="Profile Picture"
|
||||
class="profile-pic"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
The CSS is a little more tricky as I need the position to be off center to highlight the background but also responsive when changing screen size or scrolling the view. Here is what I came up with:
|
||||
|
||||
```
|
||||
.title-section {
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 100px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #f0caca;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
While were at it we can use a similar approach and set up our other sections. We'll want to add a class for a box in each section like this,
|
||||
|
||||
```
|
||||
<section id="about" class="about-section">
|
||||
<div class="about-box">
|
||||
<h1>About Me</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
Then we can add some initial CSS styling,
|
||||
|
||||
```
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-box,
|
||||
.work-box,
|
||||
.project-box,
|
||||
.contact-box {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 621 KiB |
@@ -9,33 +9,59 @@
|
||||
<script defer src="site.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<header id="top" 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>
|
||||
<div class="nav-left">
|
||||
<a href="#top" class="nav-link">The Ravenwood Arts</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="title" class="title-section">
|
||||
|
||||
</section>
|
||||
<div class="title-box">
|
||||
<div class="title-text">
|
||||
<p>Developer Profile</p>
|
||||
<h1>Jesse M. Ellis</h1>
|
||||
</div>
|
||||
<img
|
||||
src="images/Profile.png"
|
||||
alt="Profile Picture"
|
||||
class="profile-pic"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about-section">
|
||||
<h1 class="section-title">About Me</h1>
|
||||
<div class="about-box">
|
||||
<div class="about-text">
|
||||
<h1 class="about-title">About Me</h1>
|
||||
<p class="about-paragraph">Hey this is about me!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="work-section">
|
||||
<h2 class="section-title">Previous Work</h2>
|
||||
<div class="work-box">
|
||||
<h2 class="section-title">Previous Work</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="projects-section">
|
||||
<h2 class="section-title">Projects</h2>
|
||||
<div class="project-box">
|
||||
<h2 class="section-title">Projects</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact-section">
|
||||
<h2 class="section-title">Contact</h2>
|
||||
<div class="contact-box">
|
||||
<h2 class="section-title">Contact</h2>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,16 +5,28 @@ body {
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
background-attachment: fixed;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@@ -24,11 +36,78 @@ body {
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 400;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: 3rem;
|
||||
margin-right: 10rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 100px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-width: 80%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.title-text h1 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
color: #f0caca;
|
||||
}
|
||||
|
||||
.title-text p {
|
||||
margin: 0;
|
||||
color: #a07d7d;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.work-section,
|
||||
.projects-section,
|
||||
.contact-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-box,
|
||||
.work-box,
|
||||
.project-box,
|
||||
.contact-box {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 95%;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user