Making this website and my future plans for it

Originally published: 5 January 2024

Last updated: 8 January 2024

Why I made this site and what I plan to do with it

The Ongoing Journey of My Personal Dev Website

For a while now I’ve wanted to create a personal website to share my work, document my learning as a software engineer, and have a platform to write about my coding projects.

After thinking through different options, I finally decided to just dive in and start building it using Next.js and Vercel.

While the site is still a work in progress, I’m excited to share more about the experience so far and where I hope to take it next. There’s always room for improvement but overall I’m really happy with how things are shaping up.

Motivations Behind the Project

I had a few key motivations that prompted me to finally build this site:

• I wanted a central place to showcase my work - both professional projects and personal coding experiments. Something more custom and flexible than a canned template.
• I was looking for a way to better track and share what I’m learning. Writing blog posts about development concepts helps reinforce them for me.
• I wanted to get more hands-on with modern web technologies like React, serverless functions, and JAMstack workflows.
• I thought having a personal site would be a nice addition to my portfolio as I continue growing my software engineering skills.

So in summary, having an online presence with a custom domain felt like an important next step for me professionally while also providing a good learning opportunity.

Choosing the Right Tech Stack

After deciding to move forward with the project, I evaluated different options for the technologies to build it with.

A few key criteria I considered were:

• Fast performance with a focus on speedy page loads
• Static site generation for simplicity and scalability
• Powerful developer experience and component model
• Minimal total dependencies
• Easy deployment and hosting

With those priorities in mind, I settled on using Next.js for the React framework along with Vercel for hosting and serverless functions.

Next.js really fits the bill with its flexible pages model, built-in support for SSG and SSR, and easy deployment. And Vercel has been a breeze to use with its zero-config setup.

I was using modular CSS sheets, the standard with Next.js and React, but I wanted to trial a shift over to Tailwind CSS And Firebase for a simple database to store things like blog post view counts.

Overall I’m really happy with the stack and it’s been fast and productive to work with. The simplicity has made the ongoing development smooth.

Developing the Site Page-by-Page

Once I had the core foundations in place, I began developing the site page-by-page and component-by-component.

I took an incremental approach focused on getting one piece working end-to-end before moving on to build up additional pages and features.

Some of the main steps along the way included:

• Setting up the initial Next.js scaffolding and config.
• Building out a clean responsive layout with shared header and footer.
• Adding the home page with basic content.
• Creating the /posts route to display a list of blog posts.
• Implementing dynamic routes for individual blog posts.
• Integrating Markdown for authoring blog content.
• Developing reusable UI components like buttons, meta tags, etc.
• Experimenting with API routes to fetch data.
• Deploying early and often using Vercel.

I find that methodical approach of gradually constructing different parts of the site to be really helpful. It allows me to maintain focus and gain confidence that each piece works before moving on.

The site definitely still needs more content and functionality built out. But the core structure is shaping up nicely.

Ongoing Roadmap of Enhancements

Even though the initial phases of development are going well, there’s still a long roadmap of enhancements I’m excited to add:

• Get the favicon working! For some reason it’s not loading now which is driving me crazy.
• Integrate analytics to get insight into traffic and engagement. Google Analytics or SimpleAnalytics are good options.
• Improve SEO with better page titles, meta descriptions, etc. This will help people find my content. Consider using Next/SEO
• Add a “Likes” feature for blog posts so readers can easily show appreciation.
• Build a backend to allow blog comments - could be interesting to enable discussions.
• Create a theme selector so visitors can customize the look and feel.
• Experiment with alternative CSS solutions like Tailwind which can optimize styling.
• Explore deploying to other platforms like Cloudflare Pages for performance gains.
• Implement tags and search functionality to help people find content.
• Consider changing to Astro.js instead of Next.js to see if speeds up the app (but more difficult to code).

So many great possibilities! My goal is to chip away at the roadmap piece by piece in my free time.

Key Takeaways So Far

While I’m still learning, this experience creating my own site from scratch has already taught me a tremendous amount:

• How enjoyable and empowering it is to build your own corner of the web.
• The importance of fast performance - optimizing images, code splitting, compression etc.
• Tricks for structuring CSS cleanly using methodologies like BEM.
• How component-focused frameworks like React promote reusability.
• The massive benefits of leveraging static generation and incremental builds.
• Techniques for managing responsive layouts that adapt across devices.
• Strategies for deploying early and iterating quickly.

I’m extremely grateful for all these lessons and more on my web development journey so far.

And perhaps most importantly - the reminder that the work is never truly finished. There are always new features to build, performance gains to be made, and improvements to be explored. The incremental progress is what makes it such a fulfilling process.

Website Development Roadmap

1. sureshkhirwadkar.dev Site Launch

• Site development mostly finished
• Domain registered and hosting set up
• Initial content and pages created
• Basic SEO optimizations

2. Transition to Tailwind CSS

• Research and plan for the migration
• Implement Tailwind CSS styles
• Refine and test the new design
• Ensure responsiveness and compatibility

3. Contact Element

• Add email icon for contact

4. Template for Sale

• Create a reusable website template
• Document and package the template
• Set up a sales platform (e.g., Gumroad, Etsy, etc.)
• Promote the template to potential buyers

5. Code Refactoring with Astro

• Research and learn about Astro framework
• Refactor website code to use Astro
• Compare performance and developer experience

6. Content Delivery Network (CDN) Testing

• Research and select CDNs for testing
• Trial basic CDNs (vercel vs cloudflare vs netlify)
• Trial premium CDNs (Vercel, Cloudflare Argo, KeyCDN, Fastly)
• Analyze and compare CDN performance
• Optimize CDN settings for improved website speed

Looking Ahead

I’m excited to keep enhancing my site in the weeks and months to come. I have some great ideas listed in the roadmap that I’ll continue working through.

But more than any single feature, what I’m most looking forward to is developing my abilities as a web builder. Learning new skills, solving interesting problems, and getting better each day.

Building this site from the ground up has already expanded my knowledge so much. And this is only the beginning. The next level is within reach if I keep pushing myself to learn.

I don’t know exactly where things will lead with my personal site. But the journey of creating it has been incredibly rewarding so far. I can’t wait to see how much more capable I’ll become along the way.

The web is an endless canvas of possibilities. I’m grateful I get to bring my own little corner of it to life.

Share This Page

Twitter

Facebook

Email

Back To Blog