The latest articles on DEV Community by JudeTejada (@judetejada). https://dev.to/judetejada https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F265127%2F7ccb2b00-6d6f-4bd7-b23f-67588fb320f8.jpg https://dev.to/judetejada en JudeTejada Wed, 12 May 2021 03:43:52 +0000 https://dev.to/judetejada/how-i-built-my-blog-4j0 https://dev.to/judetejada/how-i-built-my-blog-4j0 <p>Post Originally at my <a href="https://judetejada.vercel.app/blog/how-i-built-my-blog">website</a> </p> <p>I decided to revamp my portfolio as there were a lot of things that I wanted to add on such as sub-pages and even dynamically generated pages, while my previous portfolio still gets the job done I figure out it's now the right time to further revamp my portfolio.</p> <p>When I'm working on a project I like to structure out my process into workflows that help me get an organized roadmap of achieving the project till the end result.</p> <h2> Research </h2> <p>The first process is to do research, this includes finding inspirations from other people's portfolios and setting the right theme to fit my portfolio website, I also created a mood-board in which I could use as my reference when I'm building out a portfolio. Creating a unique concept takes time and so following what's already been used would help us on focusing on the important matters and will save us time.</p> <h2> Design </h2> <p>One big mistake that I had while building out my portfolio as I didn't sketch out nor created a wireframe of what my actual website would look like. I straight up got myself into coding and that's where things had gone awry, there were a lot of times that I iterated a particular section and a lot of inconsistencies with my colors, font sizes but either way, it turned out pretty well and I had learned a lesson</p> <blockquote> <p>Always start with wireframing your website as it helps you get a clear sense of the idea of what you're trying to build and you won't get end up with multiple revisions which could potentially waste so much of your time.</p> </blockquote> <h2> Coding the website </h2> <p>This is the most exciting part of revamping my portfolio and it's when I get to choose what tools, technologies that I would plan to use. I had chosen to use Tailwind, Next.js, and MDX. I've been using Next.js in my previous project and I had grown to absolutely enjoy it, it's my go framework for building a project, I use to design my project from scratch with CSS but this time I decided to use Tailwind and explore with it, One of the things that I like about Tailwind is that it doesn't lock you in their design system and instead it lets you be the one to create for yourself.</p> <h2> Conclusion </h2> <p>After a couple of days building out my portfolio website I had learned a couple of things and also explore new technologies. I'll continue to improve my website as I think there is still a couple of improvements, especially with MDX since I could use JSX component inside of markdown.</p>