Releases: KingPr0o7/KingPr0o7.github.io
Enhancements - v0.9.0
📂 All Pages
🗃️ Improved File Structure
- I've now set the
vite.config.js
root to be thesrc
folder along with a base of./
that so assets can match. - All images and Sass files have been reorganized into sub folders for what they serve.
404-page
folder removed (Contents in src/)main-page
folder removed (Contents in src/)- replace-in-files library removed
- ncp library removed
All of this gets rid of the confusing replacing text and placing files from other folders in package.json
into the dist
directory. This should make the development process a lot cleaner and easier to maintain.
⚙️ Configuration Files
Implemented some configuration files due to the size this website is getting. The main ones being config.js
& blog.js
which control most of the site.
config.js
: Every page, every link, footer injection, animate on scrolling, and fixing Chrome height.
blog.js
: Blog navigation controls. (Back Buttons, home, etc.)
🧽 Cleaner Web Links
With links being under control, I've figured out how to remove the index.html
from web links to make them cleaner and easier to type: ncp.dev/blogs/all-about-me/index.html
-> ncp.dev/all-about-me
🤏🏻 Shorter Event Listeners
I've now shortened all of them to around 1 line, with the use of a function I made travel_to
to handling clicking
and tabbing
to go to either links
or pages
.
👣 Footer Injection
I'm now using the config.js
for the one place that the footer is defined in HTML
. It's placed with innerHTML
and appened to the body for most pages (Except 404.html
).
🐦 Twitter Rebrand
I've switched the logo from the old blue bird to now: 𝕏.
📧 Email Footer Modal
Not everyone uses Gmail, so I've made a modal to either copy my email or directly go to Gmail with the email already filled out!
🦾 Better Meta Data
I've shortened the Meta Data for URL previews and I've change the main site's image. It's now an icon and now all pages have a color! Within doing that, I've also updated the description of the page to be shorter for search engines.
🔒 Privacy Policy
🧱 Rewordding
Changed from Claims
to Legal
❤️ Thank you
I've been gone for a while and was working on a project that I'll reveal soon. The project was nearing the point of a website, and figured I would work on this so that project could have a place! 😉
I always have the users in mind, and hopefully this update and the next should improve the website. If you want to support me I have a Sponsor button or just simply starring this repo will help out a lot!
Streamlining - v0.8.0
💯 Additions
📂 All Pages
📧 Footer Gmail Contact Method
On all footers, I've added another way to contact me. You can still click/tab to it, and it'll bring you to a Gmail link with the email already filled out. For now, that's all it'll do, but in the next release, I'll add a modal to choose your method of E-mail. Here is the email: [email protected]
.
🔒 Privacy Policy
Added a privacy policy, linked in the footer. Explains what GitHub does, and what I do, in regards with your privacy.
🏠 Main Page
😏 Introduction Animation
On the main page, there is now a typing introduction animation! It has several names for myself (including my online name) and one attribute about me. It cycles through all of them and returns to Nathan Parker
to complete the cycle.
⚛️ Removed Full Logo in Navbar
With the new typing animation, and my name being on the introduction, the navbar logo is now only the icon. The full version of the logo is still in the footer, which makes more sense with the removal of the one in the navbar.
📝 Rewritten Introduction Description
I've rewritten the description; due to the insignificance age provides to the user. It's now more board but still represents me in how I want.
📦 Improved Padding
All card elements, the introduction page, and the navbar seemed close together or too close to the edge and didn't have room to breathe. I've improved padding either from the edge or from other elements by 20-50px, regardless of screen width/height.
🟠 New Link Button Color
Previously, the buttons were blue, but with the amount of orange, it made no sense. It's been changed to orange to match the theme of the website.
🏷️ Improved Tag Readability
Tags had poor color choices before and didn't need extra meaning behind colors. I've changed them to be more easily seen with colors and now bolded text.
📰 Ind. Blog Pages
Fixed on scroll animations not being right.
❌ Removals
💳 Personal Website Project
The "Personal Website" project is removed because it isn't needed and makes no sense when you're on the site.
😄 Author Name of Blog
I've removed my name from blog posts since it's my portfolio and is redundant. It may return if someone writes a blog for the site in the future.
❤️ Thank you!
@sayuriu helped me out a lot with suggesting/pointing out things for this release, especially with pointing out things that could be simplified or spaced out. Thank you!
Improvements - v0.7.0
🟢 Additions
🔒Privacy Policy
The official privacy policy for my website, even though my site itself doesn't collect data, GitHub does. So, there is now a privacy policy; located in the footer of every page.
💱 Conversion to Sass
All .css
files are now made in .sass
first and then compiled to .css
for production. I chose Sass because of its simple syntax and the ability for me to stop repeating myself.
Each .sass
file has a purpose, with the config having the most integration. _config.sass
allows the easy change of things such as:
- Backgrounds
- Text
- Links
- Scroll bars
- Tooltips
- Font
- Tag gradients
- Page layout
- Focus appearance
- Animation on scroll
All these files without the "_" are specific page styles; on the other hand, the others are called modules. Easily imported and eliminating the repation of code therefore, making it smaller.
📈 Improvements
📂 All Pages
- With Sass, all
.sass
files are more straightforward, smaller, and more manageable than the previous.css
files. Changing colors or integrating elements is a breeze with the@import 'module'
. - Added ALTs to all images and fixed not descending order headers.
h3
elements are now paragraph tags. These changes brought up the Lighthouse score to 100% accessibility.
🧡 Main Page
- Made tabbing in the project cards better and fixed the bug with the title still showing, even when the content was over it.
- Fixed the ability to tab out of the mobile navlist and still have it blocking your screen.
📰 All Blog Pages
- Fixed meta author data not being correct.
- Fixed title data not being correct.
- Root folder changed from
blogs-page
->blogs
ordered-list
->unordered-list
- Improved quotation elements and padding.
🌟 Coming Soon
- Tags for blogs
- Tag/Title searching
- Email contact method
- GitHub Sponsors page
- More projects/blogs
Blogs System - v0.6.0
Additions
📂 All Pages
There is now a footer at the end of each webpage. Where you can quickly access these things:
-
NCP.DEV Discord Server:
- Get help, give feedback, and view significant announcements that don't go on GitHub.
-
My YouTube Page:
- A place to view potential videos that I make.
-
My Twitter Page:
- Just in case you need to contact me quickly.
-
My GitHub Page:
- See all upcoming and current projects I'm working on.
-
You can now tab to almost every element. The only exceptions are is the blogs page.
-
NCP logo was poorly named, and was changed to just: ncp-logo from ncp-long-form.
-
On scroll animations are now everywhere.
🌟 Main Page
📃 Blogs Page
See the top picks of my blogs right on the home page. Each blog has previews of important information:
- Blog's Image/Poster
- Blog Title
- Blog Description
- Blog Author and Date
To go to the blogs, all you have to do is hover or click and click 'Read More' to view the whole blog! There is also a button to go to a page to view all blogs ever written.
Here is a list of all new blogs:
- All About Me
- The Computer Science Speedrun (CSS)
🔗 About Me Blog Link
There is now a link to view the whole blog: All About Me, under the intro description. So users can quickly see more instead of scrolling and clicking.
⚙️ Blogs System
With the introduction of blogs, there are now two new types of pages:
- All Blogs (Main Blogs Page)
- Individual Blogs
📄 All Blogs
See every blog I have ever written. This page has the same card functionality (hover or click and click 'Read More'). This page is where you can view any blog since the main page doesn't display every blog. All that's different is that blogs go into categories.
📇 Individual
Each blog is on one index.html, .css, and .js. The theme/layout will update across all blogs; all that changes is the content. Each blog has its image, title, author, date, and content.
🤩 Coming Soon
- Blog Tags and Search Functionality
- Project Search Functionality
- More Blogs/Projects
- GitHub Sponsors Page
Languages Page & 404 Page - v0.5.0
Additions
🌐 Languages Page
Wanted to know what software languages I know? You can now view all of them, with the exact timestamp I started and my knowledge level!
- Timestamps include the following information:
- When viewing without hovering or clicking, you can view a relative timestamp from the exact date I started. You can hover/click to view the date of each language start date.
- Knowledge levels:
- Beginner Level (Level 1): A star with 3 points, with a silver background. Indicating that I've recently started and or don't know the full language.
- Intermediate Level (Level 2): A star with 4 points, with a bronze background. It displays I have extended experience with the language and that I can code quite confidently with it.
- Proficient Level (Level 3): A star with 5 points, with a gold background. It shows that I am able to make things without much difficulty, can teach others about the language, and have made dozens of projects to build up knowledge.
⚠️ 404 Page
The 404 is a page that is the result of an HTTP protocol that fires when the server cannot find the page/file that has been requested by the user.
My 404 page includes:
- HELP link:
- In the navbar, linking to the
README.md -> 404 File/Page Not Found (Online Only)
header. Displays information about the 404 page.
- In the navbar, linking to the
- Return home link:
- Under the 404 | Page Not Found text. Directly clicking it will send you to the root:
https://ncp.dev/
.
- Under the 404 | Page Not Found text. Directly clicking it will send you to the root:
- GitHub Status Website:
- Since my site is run off of GitHub Pages, it's needed to be displayed, just in case Pages goes down, and isn't the user's fault.
- GitHub Status Twitter:
- Another form of the GitHub Status Website.
📜 On Scroll Animations
These on-scroll animations will fire when the element intersects with the user's viewport. They're supposed to be subtle and not jarring to look at. Also, in case of elements are placed in groups, they will have delays to have a staggered effect!
Changes/Fixes
- Card content showing above the navbar.
- White glow with navbar, due to navlist still showing.
- Fixed distribution of the 404 page, not being in the
dist
folder and fixed file directories for it. - Language image's folder being ignored.
Removals
- ❌ Random
console.log
s - ❌ NCP x GitHub, was clunky and a hassle for mobile users.
Projects Page - v0.4.0
Additions
🗂️ Projects Page
- See all of my favorite projects in one place! To view more information, you can click/tap, tab, or hover to see a pop-out of more information!
- Card pop-outs include the following information:
- Project Title
- Project Tags
- Tags show what type of project it is (I.e. a personal project or a school project).
- Each tag has its own gradient and meaning. These include:
- School: USA flag
- Website: Dark/Light mode
- Full Stack: Frontend & Backend
- Front End: A section of full stack
- Personal: My website colors
- Project Description
- Project GitHub Link
Changes/Fixes
🖥️ Desktop
- Keyboards couldn't tab into elements like project cards or mobile navigation (If the window was too small.).
- Scroll bar size increased, as suggested by: @Ninja-Talon, users couldn't grab the scroll bar on multi-monitor setups.
📱 Mobile
- For some reason, mobile users had a
padding-top: 100px
(Maybe because of the navbar, but doesn't seem to affect anything) on the intro page. - Fixed mobile
backdrop-filters
(blurs), you can't put a blur on an element with 0% height. Most of my transitions involve 0% to 100% height, so I had to put elements on 1% and opacity of 0.
Removals
❌ Snackbar
- This snack bar I found was clunky and didn't serve much of a purpose. With that, the fact that the project isn't wide-scale, it's not needed.
Coming Soon!
I still have 2 pages left for this website until completion. Those being: Languages and Contact. I'm also planning on a page for GitHub sponsor members so I can have a place ready for them. It's only the start, and there will be more pages and improvements for this website! I'm expecting to be finished around June or July 2023. School has been affecting releases, and education is more important, so that's why there is a 2-month gap.
Thank you!
I just wanted to say, if you're viewing this, thank you for just looking at my work. As a 15-year-old, seeing people look at my projects is so exciting and pushes me to work harder. You're amazing!
Redesign - v0.3.0
Additions
- 🎇 Redesigned intro page!:
- The reason for this is my inspiration from other sites' simplicity and ease of use. The wall of text explaining about me will not be lost! I'm planning to make a blog page that shows information about me and other projects.
Changes
- 🆔
About Me
➔Intro
:- Since there is no wall of text showing about me, I opted for new IDs of intro. Due to this fact, the page is more simplified and quick to read.
- 📜 Scroll Bar:
- Slight color changes and hover affects.
- 🖼️ Fixed the
README.md
title picture. - 📚 Reorganized Navbar & Navlist:
- It now reads as:
Intro
➔Projects
➔Languages
➔Contact
- It now reads as:
- 📑 Reorgized files!:
- Added more needed comments in
CSS
andHTML
files.
- Added more needed comments in
- 👾 Switched from spaces ➔ tabs.
Removals
- ❌ Loading Page:
- Due to GitHub pages routing of the requirement of an
index.html
and no editing of the URL, along with the hassle of waiting for the loading page and the redirect, I removed it. I know this removed a creative aspect, but I might find a way to bring it back someday.
- Due to GitHub pages routing of the requirement of an
- ❌ Language Logos:
- Wasn't indented to be with the release and doesn't follow the new ordering of pages.
About Me Page - v0.2.0
Additions
- 🖼️ About me page:
- Background (start of my love for technology, and current stuff about me).
- Goals (my future goals regarding college, career, and others.) .
- Prophecy (my view on my future building upon my future goals).
- 🔧 Added
vite.config.js
, so you can now compile the project. - 📦 NCP Package:
- A async recursive file copy utility, that helps moves files from folders to other destinations. This package helped me move files out of folders to the root, allowing for a new file structure. (also is the initials of my name haha).
- 📦 del-cli Package
- A utility that deletes files in any destination. This package also helped with changing the file structure and deleting the
src
folder in the gh-pages branch.
- A utility that deletes files in any destination. This package also helped with changing the file structure and deleting the
- 📦 replace-in-files Package:
- A utility that finds text in files and replaces it with new text. It allowed me to change the destination location to a file after building with Vite.
Fixes
- ❌ Deleted the
dist
folder, because that has it's own branch gh-pages [#2]. - ❌ Deleted
index.html
(routed toloading.html
) because of slow loading times, and hassle to maintain. - 🆔 Changed
loading.html
➔index.html
because of GitHub requires a index.html file. With that, the loading page URL is now just:https://ncp.dev/
. - 🗃️ Changed file structure in gh-pages:
- Instead of being nested in folders, the html files are now served on root, making a cleaner URL. I.e.
https://ncp.dev/src/loading-page/loading.index
➔https://ncp.dev/
. Though on main it's still in folders. (for origination purposes).
- Instead of being nested in folders, the html files are now served on root, making a cleaner URL. I.e.
Thank you!
👤 @TRYTIG: Pointing out the dist
folder didn't need to be included.
📦 NPM Packages: NCP, del-cli, and replace-in-files: for helping with changing my file structure, for the better.
Getting Started! - v0.1.0-beta
You've might've noticed that there was a gap between commits, and that's because I've been planning this website! There's a lot of more features and solid foundation to run on.
Introduced:
- 🕶️ Dark Mode (As of right now the only mode)
- 🔁 Loading Animations
- 📁 Updated File Structure
- 🖼️ Favicon Upgrade!
- 🗺️ Remade Navigation System (Navbar Desktop & Navlist Mobile)
- 📱 Mobile Combability (All or Almost all brands, including tablets & phones)
- 💻 Browser Support (IE (Mobile & Desktop, Safari (Mobile & Desktop), Opera (Mobile & Desktop), Firefox (Mobile & Desktop, Chrome (Mobile & Desktop) NOT ALL VERISONS SUPPORTED!
- 📹 Social Media Meta Tags (Twitter, Facebook, Discord, LinkedIn, and more) Still In Development
Huge Thanks To!:
FaviconIt! (Ease of importing/using Favicons)
OpenGraph.xyz! (Meta Tags for Discord, LinkedIn, Facebook, Twitter, and more)
Coreuter Stack Overflow (Used code to fix height issues on iOS Chrome & Safari!)
Web Dev Tutorials YouTube (Smooth Anchor Tag Scrolling for my Navbar & Navlist!)