I hope everyone's been staying safe and healthy during this pandemic! I'm trying to focus on learning as much as I can. Being a junior developer, I've been focused on coding daily and creating functional projects to add to my portfolio. In this post, I wanted to share a few things I've worked on (and why I chose the technologies I did):
Bootstrap Portfolio
I rebuilt my portfolio in June to a new design using Bootstrap. I cut my coding time in half by switching to a framework (even with changes to the color palette and typography), and the new site is much more responsive and accessible. I included a sidebar for navigation on large screens and a card-grid layout for displaying projects:
Previous design (HTML & CSS only)-
Github
I cringe a little bit when looking back on old projects (performance was terrible in my old portfolio), but it truly is a necessary part of growing as a developer. I fully intend on revamping this portfolio again in the future, but for now I'm pleased with the design and content.
Wordpress Blog with Elementor
One of my favorite things to do is spend time outdoors with my family. I wanted to create a personal blog to display a large amount of content. I decided to use Wordpress for this because:
I lacked experience with a CMS and wanted to create a site as if it were for a real client. Wordpress powers a lot of websites and I wanted to gain real experience using the platform.
I wanted to create a blog fast and spend less time on coding because I had a lot of content I wanted to use right away
Though I'm happy with how quickly I was able to get my blog up and running, I felt I had to write a lot of custom CSS and may have been better served using Bootstrap. I may rebuild the site in the future with a different tech stack (Javascript and the Wordpress API? Gatsby?). I did enjoy the features that could easily be added using plugins - such as the custom Google Map that was added to the category page 'Trips'. I was even able to customize the login page and admin dashboard.
React Blog with Tailwind and Sanity
I saw a really great technical blog recently that I wanted to replicate and customize. Instead of using Jekyll, I created mine with React and Tailwind (I love Tailwind!) and deployed the site using Github and Netlify. I also found a great tutorial on Youtube that featured exactly what I was looking for:
Build a Portfolio Site with React and Sanity
Now, I wasn't planning to build a portfolio site, but this tutorial would also show me how to integrate with Sanity.io (more CMS experience!).
I'm pretty happy for now with the end result and even managed to upload my first post. My goal in creating a technical blog like this is to improve my documentation (for the sake of better understanding the technologies I use). I'm hoping what I can post may be helpful to those new to web development as well.
Moving forward, it seems that some of the functionality I'd like to add would be more easily accomplished with Gatsby. I'd like to be able to generate an XML file for use in RSS feeds and for my posts there to be automatically added here on dev.to.
Front End Projects with Tailwind
I've been working a lot with Tailwind this year. One thing that I enjoy about using a framework like this is that it forces me to be more conscious of my html tags (using <main>, <section>, or <article> instead of <div>). Of course that's always possible with Bootstrap as well, but I also enjoy the method of writing these styles within my markdown (and the css files are TINY).
Here are a few of the other pages I've made with Tailwind:
Photography Portfolio - Visit Site
Tailwind Blog - Visit Site
My first Tailwind site
Thank you for reading this! If you have any input for me about my projects or want to share some of what you've done yourself, please feel free to do so 😊
Top comments (0)