Crafting My Personal Website: A Journey Through Web Development

Welcome to my personal website! I'm Keen Buliag, a passionate full-stack web developer, and I'm thrilled to share the journey behind the creation of this site. This project was an incredible learning experience that spanned five days, from initial wireframing to the final touches on animations and media queries. It was part of UpLift's Code Camp Full-stack web development bootcamp, where I had the opportunity to hone my skills and bring this website to life. Let me walk you through the process.

Day 1: Wireframing the Blueprint

The first step in any web development project is planning, and for me, that meant wireframing. I sketched out the layout of the website, deciding on the structure and placement of elements such as the navigation bar, home section, about section, skills, projects, blog, and contact form. This blueprint served as a guide for the subsequent stages of development, ensuring a coherent and organized approach.

Day 2: Building the HTML Foundation

With the wireframe in hand, I moved on to crafting the HTML structure. This involved creating the basic layout and incorporating semantic HTML elements to ensure the content is well-structured and accessible. The key sections – home, about, skills, projects, blog, and contact – were all laid out, providing a solid foundation for the site.

Day 3: Styling with CSS

Next, it was time to breathe life into the HTML skeleton with CSS. I focused on making the website visually appealing while maintaining a clean and modern design. I chose a color scheme that reflects my personal brand and applied styles to ensure consistency across different sections. Additionally, I incorporated responsive design principles to ensure the site looks great on both desktop and mobile devices.

Day 4: Adding Animations for a Dynamic Experience

Animations can greatly enhance the user experience by making a website more engaging and interactive. I implemented CSS animations to add subtle yet effective transitions and effects throughout the site. From the sliding text in the home section to the hover effects on the profile photo and skill icons, these animations help create a dynamic and enjoyable browsing experience.

Day 5: Media Queries and Final Touches

The final step was to ensure the website is fully responsive and works seamlessly across all devices. I used media queries to adjust the layout and styles for different screen sizes, ensuring the site is user-friendly on smartphones, tablets, and desktops. This stage also involved rigorous testing and tweaking to fix any bugs and refine the overall design.

Conclusion

This project was an invaluable experience that allowed me to apply and expand my web development skills. From wireframing to coding and implementing animations, each step was a learning opportunity. I'm proud of the final product and excited to share it with you.

Feel free to explore my website, learn more about my skills and projects, and get in touch if you'd like to collaborate. Thank you for joining me on this journey!

Follow me on GitHub: github.com/ikeendoit

Connect with me on LinkedIn: linkedin.com/in/engrbuliag