Enhancements - v0.9.0

📂 All Pages

🗃️ Improved File Structure

• I've now set the vite.config.js root to be the src 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: nathan@ncp.dev.

🔒 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.
• Return home link:
  • Under the 404 | Page Not Found text. Directly clicking it will send you to the root: https://ncp.dev/.
• 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.logs
• ❌ 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
• 📑 Reorgized files!:
  • Added more needed comments in CSS and HTML files.
• 👾 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.
• ❌ 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.
• 📦 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 to loading.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).

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!)