Converting Aspy.dev to Solid.js
I've been meaning to update my main site, aspy.dev to some React for quite a while as it was starting to become a huge pain to manage it.
You can actually view the old code here and you will probably agree its a massive dumpster fire.
Either way, I brought it up in a discord server with a lot of developers on it, and I was recommended Solid.js. it was actually incredibly easy, to my surprise. Furthermore, the modularity of everything made developing and updating elements used across the entire site super easy. For example, the navigation bar now has its own file that I just import everywhere I want to use it!
import './navbar.scss';
export default function NavBar() {
return (
<div className='navBar'>
<a href='https://aspy.dev'>Home</a>
<a href='https://aspy.dev/about'>About Me</a>
<a href='https://aspy.dev/projects'>Projects</a>
<a href='https://aspy.dev/contact'>Contact</a>
<a href='https://blog.aspy.dev'>Blog</a>
</div>
);
}
Shown above is the code for the navbar, which I can just import anywhere across the rest of the project usingimport NavBar from '(path relative to file)/navbar.jsx'
and inserting a <NavBar/>
element
Overall, it makes development much easier being able to just define elements used across the rest of the site in one place, one of the big things is that it will change everywhere if you change it in the module.
However, there are still a few issues that need ironing out. mainly, the embed GIF doesn't load as of writing, and the background image doesn't always change.
I do plan to rewrite this blog using Solid.js at some point because the docsify layout is a bit clunky for a blog.