# Renato Dulog > Renato Dulog is a full-stack web developer based in Cebu, Philippines, building with React, Next.js, TypeScript and Node.js. Currently a web developer at WebriQ and open to freelance projects. - Role: Full-Stack Web Developer - Location: Cebu, Philippines - Employer: WebriQ - Education: Certificate in Computer Technology, University of San Carlos (Passerelles Numériques Philippines scholar) - Stack: React, Next.js, TypeScript, Node.js, Tailwind CSS, Sanity - Available for: freelance web development projects - Website: https://renato-dulog.is-a.dev - Profile: https://www.linkedin.com/in/renato-dulog/ - Profile: https://github.com/renskiedulog - Profile: https://facebook.com/renato.dulog --- # Blog posts --- # My Thoughts On AI in 2026 > It is now september of the year 2026 and the world turned out a bit hectic and the thoughts on AI are still mixed even after 4 years since its introduction. I'm here to share my thoughts about it specific to my field. - URL: https://renato-dulog.is-a.dev/blog/my-thoughts-on-ai-in-2026 - Author: Renato Dulog - Published: 2026-08-31 - Updated: 2026-08-31 - Categories: Technology, Artificial Intelligence, Learning And Development, Rant --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners It's been a while since I posted a blog due to my hectic career and ongoing personal projects, as well as life. I just wanna share my thoughts on AI in this current day and my speculations towards the state of the future. --- ## Disclaimer Let's start off with this common yet powerful thing. All of things written here are product of my mind that hasn't eaten dinner and had terrible sleep schedule. Point is, all of these are just my opinions, anything related or even contradict or outright argues someone else's claim are not of my control. Read, understand and accept things at your own discretion. --- ### Pace It's a short word, however nothing describes my thought as much as this word. The **_Pace_** of the industry has been very very fast, abnormally so. I understand the efficiency it brings and the productivity it can offer. However for people starting on this industry, they are met with suddenly high bars which wasn't even defined 2-3 years ago. The competition in the workforce is also steadily growing since a lot of layoffs are happening left and right. So graduates who are looking for entry level work are suddenly competing for limited slots, and sometimes even with veterans on the field desperate for work. I never really got to understand before when they say "IT is very fast paced" and things like "What you learn today might be obsolete tomorrow". Now I am painfully aware of that, on the worst way possible. --- ### Opportunities I may have seemingly been very biased on the things above so i'll redeem myself here. It's not to say that AI brings bad things, it's a natural course of life when drastic change causes massive shifts and with it brings fortune and misfortune. Let's talk about opportunities. The industry as you know was well gatekept before as it has a high standards and values technical skill more than a bunch of papers. But now that bridged is gapped, while we still need the logic layer, the requirements are greatly lowered, people can _create_ if they have ideas, they can build as long as they know their foundations. What used to be something to be built by a 5 man team can be accomplished by 1 person lying on his bed watching their favorite kdrama. These sudden changes make it easy to accept those that lack the skills but are willing to follow the change, as much as I hate to admit it, AI is powerful enough to turn a decent human into an artist capable of building useful products. I've also seen a lot of my communities online showcasing their works with AI and sometimes their groundbreaking ways to solve a certain problem I've never even realized it could be approached that way before. It's certainly great that people are creating more, doing more, fixing more, me included. --- ### Skill Ceiling As humans we are limited by the amount of things we can comprehend, retain, and connect the dots. I've always been in terms with that reality, and with that said AI supplements that gap. While there are still arguments whether you are a true developer/programmer if you use AI, I noticed it's slowly been accepted into society. It's not going anywhere, it's not gonna suddenly go away too, I think they have come to terms with that, and others are also beginning to adapt to the new changes this technology brings. Needless to say AI is powerful. From data gathering to analysis, logic, and building, it does not lack anything so much that I would go as far as to say it can definitely replace me. But fret not, if you treat it as a tool, you can still be called the carpenter, and you can still say you built the house. Point is, as powerful as it may be, it still needs the guidance of the ones who understand the things that are needed to be done, how it's done, and what the final output is. AI can definitely upskill those who takes the chance to learn with it, and use it to their advantage. The way we learn has always been evolving so there's no reason for this path **_with AI_** to be a wrong one. --- ### My Thoughts So Far To sum it up, AI is definitely a green flag for society if handled well, politics, geopolitics etc aside. It has potential, it can help people, it can move us a step forward. Both as a society and an individual. Thing is, I've always been optimistic on things so I can't say I thought of a lot of things going wrong with it. But my opinions are definitely well thought, I can guarantee that. With my experience working with it, doing my work with it, learning from it, and building with it, I would say it helped me lift a lot of weight off my shoulders. I look forward to the day where people create things with it that benefits us as a society, discover more, cure more, fix more. --- # Is AI Killing Our Critical Thinking Skills? > AI is everywhere now, it's also to the point where it handles both our daily and complex tasks, people are bound to rely on it. It is undeniable that it helps us greatly everyday, but are we sure to say that we "utilized" the tech and not "rely" on it? - URL: https://renato-dulog.is-a.dev/blog/is-ai-killing-our-critical-thinking-skills - Author: Renato Dulog - Published: 2026-02-10 - Updated: 2026-02-14 - Categories: Technology, Artificial Intelligence, AI Assisted --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners It is not an understatement to say that **Critical Thinking** has brought us to this modern world, and yes gave us AI. But ironically, it's slowly fading into the background. As to why will be explained here on this blog. --- ### The Rise Of Mental Automation Every major technology shift has changed how humans think. - Calculators reduced the need for manual arithmetic and - GPS weakened our sense of navigation - Search engines changed memory into “look it up later” AI takes this one step further. It doesn’t just store information. It _processes_ it for us. When a machine can instantly generate an answer, the brain starts asking: **Why struggle through thinking when I can just prompt?** --- ### Convenience vs. Cognitive Muscle The brain is kind of a muscle where: - Use it regularly, it strengthens - Avoid it too often, it weakens **Learning** is storing information, **Critical Thinking** would be making use of those and evaluating, sometimes connecting things on a grand scale. During this process _synapses_ are created which are fundamental to learning and retention as well as understanding. Now I am not the science guy so I do hope you can research this on your own. Because AI makes tasks faster and more convenient, people may engage less in deep critical thinking and research, which could weaken the mental habits and cognitive skills built through effortful practice. --- ### The Illusion of Knowing One of the strangest things about AI is how _confident_ it sounds. Even when it’s wrong, it speaks smoothly, clearly, and with authority. That creates a new kind of trap: **Feeling informed without actually understanding.** When we read an AI-generated explanation, it can feel like we “get it,” but often we’ve only absorbed the surface. True understanding usually comes from effort: - struggling with a concept - asking questions - making mistakes - connecting ideas ourselves AI removes much of that friction. And sometimes, friction is where learning happens. We are led to believe that reading a few things and memorizing them is considered "learning" when the reality is it is much more complex than that. In reality, learning requires effort. It requires mental engagement. It requires us to sit with uncertainty long enough to form our own understanding. And this is where AI becomes a double-edged sword. When answers are always one prompt away, we may slowly stop practicing the act of thinking deeply. Instead of wrestling with ideas, we skim through conclusions. Instead of building reasoning, we consume results. Over time, this can create a habit of passive thinking. We begin to rely on AI not just for assistance, but for direction. And while it may feel productive, it can quietly reduce the moments where critical thinking is actually developed. --- Now I am not against the existence of AI, even some parts of this blog is AI assisted, which is comical considering what this blog is all about. As I am new to blog writing and communication in general, what I am doing is utilizing it's existence to help other people also understand the implications of it and the importance of Critical Thinking. Back to the topic, how do we actually know if we are learning the right way? Having the right blend on all this? The answer is not rejecting AI completely, but recognizing what learning actually looks like. Real learning is not just arriving at an answer quickly. It is being able to explain _why_ that answer makes sense. It is being able to apply it in a different situation. It is being able to question it, criticize it, and even defend it. ### How To Effectively Use AI and Critical Thinking At The Same Time #### **Think First, Prompt Second** Establish a rough details on what your current understanding on the matter before having to prompt, that way it's easier for you to understand or question the results when it's slightly or largely different from your own understanding. #### **Ask “Why?” Not Just “What?”** Underrated way to learn things, stopping at the question "What" isn't enough of an information, you have to dig deep and create more branches on the topic before you can conclude that you have learned it. Don't stop until you can confidently explain the topic on your own to a 5 year old kid asking simple or stupid questions. #### **Use AI as a Critic, Not a Substitute** AI can be used as a secondary opinion when you are unsure of your own understanding, debating with it will also help you get more and fresh ideas that contradict or support your own understanding. Depending on how this goes, you either walk away with a solid understanding or a reinforced of the former one. #### **Verify Information Independently** Information can also be subjective, sometimes changing constantly, and AI might not be updated with these changes. Double check what you consume, cross check references and question the legitimacy of the data. Gatekeep your mind, do not let it be soiled by unreliable data with no solid #### **Avoid Over-Reliance on Instant Convenience** You don't have to let AI do everything, you can divide the work, or even let it create the basic idea and you do the hard part. Over reliance will rust your ability to think and attention span, convenience has always been a killer to growth, don't let it be this way. #### **Use AI to Expand Curiosity, Not End It** Concept's does not end after the question "What", learn everything you can from it, ask all the questions needed, AI is free which makes it basically possible to ask infinite amount of questions. Utilize this and you'll be able to learn everything in a jiffy. #### Apply What You Learn Well, obviously if it's something that can be applied then why not? The difference between learning by concept and learning by hand is enormous. Oftentimes the best result is both the body and mind learning at the same time. So apply everything you've learnned. --- I know we all get lazy, but learning is a superpower we got stripped off of by our own laziness and inability to fight the addiction of convenience. Let's not forget that learning is perpetual and it can bring you unimaginable benefits in life. Using AI shouldn't feel like a compromise. --- # What It Feels Like To Have ADHD As A Programmer > I’ve been a programmer long enough to know one thing: having ADHD changes the way I write code. It’s not good or bad, it’s just different. Some days, it feels like a superpower. Other days, it feels like I'm at constant war with my thoughts while wasting time scrolling endless content. - URL: https://renato-dulog.is-a.dev/blog/what-it-feels-like-to-have-adhd-as-a-programmer - Author: Renato Dulog - Published: 2025-10-04 - Updated: 2026-02-10 - Categories: Learning And Development, Programming --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. Take note that I do not explicitly say I have ADHD as I am undiagnosed. But then again on an outsiders perspective I might as well have it. And it wasn't even news for me when I learned about it, it simply felt like everything made sense. My journey to programming with such personality was short of a mixed experience. ### What Is ADHD? > ADHD (Attention-Deficit/Hyperactivity Disorder) is a neurodevelopmental condition that affects how a person regulates attention, impulses, and activity levels. It can show up in different ways—some people struggle with distractibility, others with restlessness, and many experience both. Common symptoms include difficulty focusing, forgetfulness, impulsivity, and challenges with organization. At the same time, people with ADHD can also experience periods of intense concentration, known as hyperfocus, especially when deeply interested in something. ADHD isn’t a lack of intelligence or ability—it’s simply a different way the brain processes and prioritizes information. - ChatGPT ### The Rush of Starting Something New There’s nothing more exciting than a fresh problem. I open my editor, and my brain is buzzing. Suddenly, I have 10 ideas at once: - “What if I optimize this function?” - “Wait, that bug from last week—I bet it’s related.” - “Actually… should I rewrite this entire file?” It’s thrilling. My brain isn’t walking through problems, it’s sprinting, leaping, connecting dots that aren’t even on the same page. My brain constantly seeks new things, and in result I have countless of project ideas, which usually ends up pending or scrapped, although not in a bad way since most of the curiosity has already been dealt with and there's nothing left to stay on that matter for. ### Inattention vs Hyperfocus Yeah, my middle name might as well be bipolar too. I cannot count how many hours I have wasted scrolling through social media, doing random stuffs, learning random things, watching useless content I know I am only going to be interested for a couple of days, which made my life a living hell. Unfinished tasks, messy room, unproductive days etc. But on the flipside, once I tap into hyperfocus and flow state, everything is just done in a fraction of the time it should have been completed. Though I rarely tap into flow state these days, they are my lifeline specially for tight deadlines. ADHD makes you the type of person that waits until the last day before taking action, but you become a piece of art when you have the right amount of pressure and focus. Sadly even I still don't find the right balance between the two. And I'm still looking for the answers. ### The Emotional Side Nobody Talks About Programming with ADHD isn’t just about focus—it’s emotional whiplash. - **Frustration:** when simple tasks feel like climbing a mountain. - **Shame:** when I miss deadlines because distractions stole my time. - **Anxiety:** when you're being lazy and unable to even have a shred of discipline. - **Joy:** when I hit flow state and build something I’m truly proud of. - **Pride:** knowing that once you get intrigued and interested into something you'll learn about it almost spontaneously. It’s not just code. It’s a rollercoaster of self-talk, doubt, and small victories. ### My Workaround Living with such a complicated brain structure was never easy. What seems to be an easy task is probably a mountain to climb barehanded for us. So I naturally came up with some countermeasures in dealing with it as I continue living with it. - Doing the work's first step instantaneously without thought - Helps in rewiring my lazy thoughts into thinking "since I already did the initial steps, might as well finish it", my greatest example would be soaking my laundry so I can't avoid doing them. - Deliberately changing my algorithm in social medias - A clever way into feeding your brain the right things, if you can't beat distraction then at least make sure it's a healthy one. What I usually do is follow coding channels or something similar so that every time I scroll, at least I learn something new. - Having 2 or more personal projects - Everyone get's bored when you constantly do the same thing every day, so I usually have around 3 things I can do and gradually contribute to, that way I don't feel forced to do it and keeps me entertained and focused. - 1 Minute Rule - Without thinking, directly prepare the necessary things for the work, toss out distractions or move your phone far away from reach and sight. We're not distracted, we're simply holding the wrong things. When it comes to coding it's not an easy profession, having to deal with a lot of things you don't know about or not having a certain clue, or having a massive scope you don't even know how far it stretches, and then there's your ADHD making things worse. But then again it's the joy's of life, pressure precedes growth and living such a chaotic life may not be as bad as you'd think. That's all of it for now, I'm sure there's still a lot of things I can say but at the end of the day, it differs from person to person. Do you also have ADHD or at least have an inkling that you have? --- # How Being A Game Addict Helped Me > I often look back to the times where I used to play without a care in the world. Not only is it the best times, but also played a huge part on where I am today and what I obtained because of it. - URL: https://renato-dulog.is-a.dev/blog/how-being-a-game-addict-helped-me - Author: Renato Dulog - Published: 2025-08-10 - Updated: 2026-01-29 - Categories: Learning And Development, Technology, Gaming --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. There's still this stigma on gaming or gamers where they are seen as wasting their time or having no future, which I had experienced everyday and constantly for the entirety of my childhood and youth. ### The Problem To a certain extent gaming can become an addiction and we've seen that on a lot of people, it also reshapes a lot of parts specially their character specifically temperament. But most of what society seen are the rotten parts of it. I agree that it will become a problem, no refuting that since I've basically experienced that myself. My mom would beg me to go home and help her, I would occasionally crash out and I was the walking description of laziness. Even now there are bad and worse things that gaming had given me that I can't get rid of like a naturally lower attention span and a lack of enjoyment due to high dopamine needs. But we aren't going to talk about that in this blog. Rather than that, we will try to see the best things gaming can give and see it on a better perspective. ### Long Term Benefits People often see and judge the current situation which is why they tend to label gaming as a bad thing. But they couldn't be more wrong because the benefits lie on the long term and it absolutely changed my life. #### English I have specifically written this first since it's often overlooked even though this probably has the biggest effect long term, and it singlehandedly helped me throughout the course of my life. In a world where everything is English, you can't fathom how much it would help someone if they at least grasp this language. Here’s a list of reasons of why English is essential today: - English can be used widely to communicate with people - Technology today uses English as the base language. - Since most of the learning materials are in English, it helps with better understanding thus better and faster learning. English serves as a base for cognitive growth and communication. Specially in a country where speaking English opens a lot of doors for career opportunities. #### Critical Thinking This is also something gaming has been encrypting on a gamers mind, critical thinking is such an asset that most people don't realize. Creativity lies on an active and critical mind, it makes it easy to think outside the box and create unconventional solutions. It it such a coveted skill that takes years to master, and yet gamers are basically getting it unknowingly. > Creativity and Problem Solving skills also lie on this category #### Communication Although not everyone would agree to this, but most of the games promote realtime audio feedbacks and messaging boxes ingame. Yes it can be toxic, but as I said we are focusing on the good side of it. A lot of people became friends through games, people who are socially anxious can communicate freely and joyfully, and people who are trying to learn and communicate are welcomed warmly. It is not a joke when I say that majority of my communication skills are from gaming. I met and conversed with different people and places and it's amazing to experience the game with them. #### Stress Management People who are constantly challenged are calm in a challenging situation. And for gamer's who are exactly like that everyday is probably nothing to be surprised about. I've personally experienced this myself when I often find myself looking for challenges myself, turning simple tasks into challenging ones and I see hard things as worth my full focus rather than as an object of fear and anxiety. I've seen and experienced worst when I was gaming, things like failure and loss, so much that it actually helped me build resistance. Along with the mind that relentlessly says there are ways to do things and achieve them. #### Teamwork A lot of games specially RPG's and MMORPG's have a role based gameplay, not only does this enhance the person's understanding of their worth and use, they can also efficiently bring out the best of their role in any situations. And since majority of the games are online, and mind you they are communicating and working together with people that are basically strangers, yet they still produce results. I myself can testify how a lot of games help me understand my role and sometimes act as a leader, delegate task and communicate. --- That's just not all of it and I am pretty sure there are more benefits out there than what my mind can think of and what I personally experienced. Sure gamers have a lot of gray areas they need to work on, but so does normal people, we all do. That is why this stigma to gamer's being a bum and without a future should not be normalized. After all, gaming is not just an escape. It's a real skill and it shapes how the person thinks thus creating a unique and unforeseeable future. --- # How I Unknowingly Learned Programming > Long before I even knew what programming was, I was already developing the mindset for it—through gaming. Looking back, it's incredible how the smallest choices—tinkering with redstone crafts, creating solutions using automation and many more were shaping the foundation for a skill that would define my future. - URL: https://renato-dulog.is-a.dev/blog/how-i-unknowingly-learned-programming - Author: Renato Dulog - Published: 2025-07-05 - Updated: 2026-02-12 - Categories: Learning And Development, Gaming > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. Computers and specifically gaming has been a core part of my childhood, it has shaped at most the entirety of my life. However, my parent's didn't have much positive thoughts about gaming as it was only a huge waste of time, but for me it wasn't, and only now that I knew, it geared me to the path I am walking on right now. ### Minecraft I began holding a computer since 2009, and I can proudly say I have played a huge variety of games. Late 2014 or so, [Minecraft](https://minecraft-archive.fandom.com/wiki/Minecraft) was the game I played the most, probably out of curiosity as to why most of my peers in the computer shop (pisonet) is playing it. It didn't take long for me to like the game considering how it's the epitome of the word "creativity". Basically it's a world of blocks where YOU can literally build and do anything. ### **Redstone** [Redstone](https://minecraft.fandom.com/wiki/Redstone_Dust) is a material in Minecraft that simulates electrical wiring and logic systems. It allows players to build automated mechanisms like doors, traps, farms, and even functioning computers. Through its components—such as repeaters, comparators, pistons, and pressure plates—Redstone introduces players to the basics of circuitry, timing, and logic control, all within the game's creative environment. You can also watch this youtube video for further explanations: [YouTube video](https://www.youtube.com/watch?v=8DHSSbbAwjA&ab_channel=MC.ivan) _Credits To The Owner_ ### **Redstone Engineer** A Redstone Engineer is a Minecraft player who specializes in building complex systems using Redstone mechanics. These players design everything from simple switches to intricate machines like combination locks, sorting systems, and fully automated farms. It’s a role that requires critical thinking, creativity, and a strong understanding of how Redstone logic behaves—similar to how real-world engineers or programmers approach problem-solving and system design. Basically, it's an imitation of circuitry and engineering inside a game. And when you combine both that and the ability to create anything in the game, you'd be surprised how far and amazing this goes. ### Back To The Story There are a lot that you can do inside the game. Building, slaying enemies, farming, beating the game lore, or even exploring. But building had always been where I found fun, not just the normal type of building where you create houses and whatnot, but complex and awesome machineries. I would incorporate automations on my houses, smelting, defense systems to ward off enemies, and many more. Thanks to the constant practice of logic gates and problem solving in Minecraft, I learned how different inputs could control outcomes—how systems could be built from simple rules. What felt like just trial and error back then was actually training me to think logically, laying the groundwork for how I approach programming today. --- # AI Without Context Is a Nightmare > Do you oftentimes work on someone else's code and immediately realized it's AI generated? Unnecessary amounts of useEffects, painfully obvious comments, and worst of all, a long and overkilled process on some functions. - URL: https://renato-dulog.is-a.dev/blog/ai-without-context-is-a-nightmare - Author: Renato Dulog - Published: 2025-05-25 - Updated: 2026-02-13 - Categories: Rant, Programming, Artificial Intelligence, Learning And Development --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. I completely admit I am relying on AI to do a lot of things for me every day on my career and my side projects in programming. However, there are sides of it to which I don't like and it's exactly what the title says. ### AI Without Context I've seen a lot of codebases brimming with code prompted from AI, and it's already come to a part where I am actually comfortable having them in it. Still, we can't avoid having to encounter something straight out of a horror movie on some cases, so here are things I've seen so far. #### Project Of Wonders It's that project where every file is another world, where everything is just a novelty, equipped with its own ecosystem and only connected by a single line of "export". Debugging is a raid boss, and somehow all your gears of knowledge become irrelevant. #### Functional Disorder Yep, prompted like a psycho, a project where everything is unnecessarily a function, in fact, it's not even semantic since each part is rendered by a separate function. You'd have dig deep to see the actual structure. #### File Conversation It's that code where it literally talks to you. Too many unnecessary comments which takes up almost 50% of the lines on the actual code. It doesn't really help; in fact, it just makes you more confused as to what it actually means, since most of the time even the comment is hard to understand. #### Process Overdrive These are block of codes that simply blows your mind, what should take 10-20 lines of code is now being presented to you in a 100 line with 3 different async functions and to God knows where the fetch API goes or what it actually gets. It's really amazing to see how far and advanced the function goes for something actually simple. #### NPM LIBRARY (LITERALLY) These are those projects that has a package json importing NPM itself, probably due to the infinite amount of prompt, it has now every single thing you can think of as well as the "is-even" and "is-odd" package. It's just so fascinating to see this at least once in your life. --- I'm not mocking people's work, believe me. But sometimes when you encounter these things and have to deal with it, you would actually sit down and think about your life choices. It's just really hard for most of us that actually want full control of the project in order for things to actually be in order. That is why... ### AI Should Have Context I am simply baffled by the act of prompting "this doesn't work", "fix this", "this is not it" on AI. We should keep in mind that AI does not understand your thought process, without context, it's nothing but a pile of data. Here are some things you can actually do to improve the output quality: - Pre-submit context files or code, these are the files related to the problem but not the actual problem. - Add constraints, simply tell it not to do something specific like using a certain NPM package or specifically telling to use an already defined function in your code. - State the problem, a big plus if you can actually tell it the cause of the problem and what you need as an output. - Well written prompt, yep, I hate to say it but it's true, you need to actually explain it everything. - READ THE CODE OUTPUT, for god's sake don't just copy paste it and see if it works, if you already know it wouldn't work and doesn't need to be tested, that would be much better than wasting your time. - Work your way through each prompt, don't expect the problem to be solved on a single prompt. You may think that prompting in this manner would take a lot more time, and you're right. But on the flip side, you would actually start at something, and not take a dozen times of prompt before you get what you want. --- # Why Being 150% Full Stack Is A Better Choice > In today's tech industry along with AI being simply frontend or backend is not enough, a lot of debate going on between frontend and backend, why exactly is it that specializing one isn't enough? - URL: https://renato-dulog.is-a.dev/blog/why-being-150-full-stack-is-a-better-choice - Author: Renato Dulog - Published: 2025-05-21 - Updated: 2026-01-22 - Categories: Productivity, Programming, Learning And Development, Technology --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. In tech circles, being "full stack" is often celebrated as the ultimate developer archetype—someone who can seamlessly move between frontend and backend, connecting the dots from UI to database. But in practice, many self-identified full stack devs are actually 50% frontend and 50% backend—spreading themselves thin in both areas and mastering neither. Let’s flip the script. Instead of being _50% here and 50% there_, what if the better path is to be **100% strong in one domain**, and **50% competent in the other**? That’s not 100% fullstack. That’s **150% fullstack**—and that’s where the real magic happens. ### The Problem with Being Just "Balanced" Aiming to split your focus evenly between frontend and backend sounds noble. It even feels efficient. But in reality, it can lead to mediocrity on both ends: - **You might know how to use React, but can’t make performance-minded UI decisions.** - **You might build an API, but struggle to optimize database queries or handle scale.** The truth is, 50/50 often makes you serviceable, not exceptional. In fast-moving teams, startups, or solo projects, this kind of split knowledge quickly hits a ceiling. ### The 150% Model: Asymmetrical Mastery The 150% fullstack approach embraces **specialization with versatility**: - **Frontend-heavy (100% FE / 50% BE):** You live and breathe UI/UX, design systems, performance optimizations, and accessibility—but you're also capable of spinning up a Node.js API, managing a database, and deploying to a server when needed. - **Backend-heavy (50% FE / 100% BE):** You architect robust APIs, manage infrastructure, and handle distributed systems—but you're also fluent enough in CSS and JavaScript to build functional, usable interfaces that can ship. It’s not about ignoring the other side—it’s about _prioritizing depth while maintaining breadth_. You go deep where it counts, but you’re still capable of shipping solo if needed. ### Why It Works in the Real World Here’s why 150% fullstack developers outperform their 100% peers: #### 1. **You become a bridge, not a bottleneck** Teams often face handoff friction between frontend and backend devs. A 150% fullstack dev can step in to smooth over communication, identify cross-layer bugs, and reduce dependencies—keeping momentum high. #### 2. **You ship faster** Need to tweak a UI and modify the underlying API? You can do both. No waiting for another dev to get unblocked. You reduce friction and time-to-market. #### 3. **You solve more holistic problems** You see the full picture. You understand how a database decision affects UI speed, or how a React pattern impacts backend scalability. That awareness makes your solutions more elegant and future-proof. #### 4. **You thrive in lean teams** In startups or solo projects, 150% fullstack devs are gold. You can prototype end-to-end features, handle deployments, and iterate quickly without relying on large, segmented teams. ### How to Get to 150% Becoming 150% fullstack doesn’t mean grinding 18 hours a day—it means learning strategically. #### If you're frontend-first: - Learn how APIs are designed, not just how to consume them. - Build a toy backend project (Node.js + PostgreSQL, for example). - Learn serverless functions, basic auth, and data modeling. - Understand deployment pipelines (Vercel, Netlify, or Docker + VPS). #### If you're backend-first: - Learn React or a similar modern UI framework. - Study design systems, accessibility, and mobile responsiveness. - Build a frontend project and consume your own API. - Practice translating raw data into good user experiences. And most importantly—_build real things_. Side projects are where these skills solidify. ### Closing Thoughts The days of rigid specialization are fading. The most impactful developers aren’t just good at one thing—they’re _great at one and good at the other_. They’re 150% fullstack. So if you’ve been trying to become a “true fullstack” by spreading yourself evenly across both sides, consider this instead: **go deep where you’re strongest, and go wide where you’re needed.** That’s not just fullstack. That’s high leverage. --- # Underrated Micro Skills You Didn't Know Was Helpful In Programming > When we think about programming skills, we often focus on technical expertise—learning new languages, mastering algorithms, or optimizing performance. But what about the small, often-overlooked skills that can significantly improve a developer’s efficiency, problem-solving, and overall workflow? - URL: https://renato-dulog.is-a.dev/blog/underrated-micro-skills-you-didnt-know-was-helpful-in-programming - Author: Renato Dulog - Published: 2025-03-31 - Updated: 2026-02-10 - Categories: Learning And Development, Programming, Productivity --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. When we think about programming skills, we often focus on technical expertise—learning new languages, mastering algorithms, or optimizing performance. But what about the small, often-overlooked skills that can significantly improve a developer’s efficiency, problem-solving, and overall workflow? ### 1. **Keyboard/Macro Shortcuts** Keyboard is basically the bridge between the computer and your thoughts, if it falls short it can block and slow down your chain of thought, that is why you should actively improve your typing speed to accommodate and test your thoughts much more faster. The more you try things, the faster you get to your desired results. ### 2. **Mental Debugging** Not everyone's brain is wired to think simultaneously, much less just mentally trace things just on top of their heads. Tho mental debugging oftentimes goes unnoticed, it's in all of us. Training this skill requires you to acknowledge it's existence and it's value, being able to understand the flow of the system and where things are coming from and popping out to, is something you would thank yourself for the rest of your programming life. ### 3. **Efficient Googling** If I were to sum up the majority of my programming career, I'd say googling stuff I don't understand would be one of the top 3 things. At this point where anything you can possibly learn about is in the huge database, all you need to do is ask. But then again? How? In what way? There are people who still struggle on getting the answers they want and unsure on how to construct proper sentences on the search bar. Let this also be a part of your learning. ### 4. **Touch Typing** When you are in the Flow State any minor inconvenience could disrupt you and your chain of thoughts, and if you were to peek at your keyboard every single time you type, you're probably going have a lot of fixing to do. Fix that habit and type without having to divert your eyes away from the monitor. ### 5. **Breaking Down Problems Visually** It's easy to get lost not knowing what to do next when you don't have any actual inputs you can track while doing things. Be it kanban, jira or as simple as a task listing in excel or notepad, monitor your progress and path. Although majority of us would skip this process since it's annoying, it does help a lot in it's own ways, both present and the future. ### 6. **Reading Code Like a Book** Although we do this subconsciously, and there's not much to know how to actually be better at this, it's something we fail to acknowledge. Like the title says, it's the ability to skim through and get enough context to know what the codes actually does, understand it's flow and even notice it's flaws or limitations. There are a lot of people who put code as if they're inserting random gears on an engine hoping it would work, don't be like that. Understand and apply proper solutions. ### 7. Tapping Into Flow State And Focus While having many things to do is great, switching between them can ruin your chain of thought, i personally think focus is what makes a good code. Stop trying to do so many things and label it as "learning" then call it a day. Try to actually focus on one thing and intensively learn on it. ### 8. Holistic Thinking Holistic thinking is a crucial part in developing a system specially when it's big, I can almost guarantee this will help in speeding up the process and maintaining your code. Oftentimes, we are so fixated on making something work that we forget it breaks down other parts of the whole, making it a lot more problematic. ### 9. Performance Wise Coding It's extremely important to be very careful in coding complex codes that affects the performance of the system. Like I said, almost every time we are fixated on making it work that we forgot how bad it will affect other things, although for most cases specially when the system isn't big, it won't have that much effect, but it's important to foster a mind that keeps performance in check every step of the way. ### 10. **Writing Clear Commit/Comment Messages** When you're working on a company, you'd most likely if not inevitably work on a team, you can't just selfishly think they would understand the code you're writing, it's foolish to assume that just because it's written nicely. You will find yourself thanking someone else if this happens to you, try to make it a habit as if it's a message for the future one's that will work on the project. --- There are a lot of things that goes unnoticed but are actually helpful in programming, in fact there should be a lot more than what is written here, thumbs up to those who already have the one's listed above. Programming is but an endless walk, not a steep hike. --- # Tips On How to Learn Programming Efficiently Amidst AI Era > Being able to learn and absorb everything is crucial for a programmer, now with the rise of AI and other tools to simplify our job, are we really learning? Or are we just driven by the thought of completing a certain task? Let's tackle the most important skill we can get as a human. - URL: https://renato-dulog.is-a.dev/blog/tips-on-how-to-learn-programming-efficiently-amidst-ai-era - Author: Renato Dulog - Published: 2025-03-23 - Updated: 2026-02-10 - Categories: Programming, Learning And Development, Artificial Intelligence, Technology --- > The contents of this blog are purely based on personal opinions. Any similarities to existing contents are of pure coincidence. Any materials used for the blog belongs to their rightful owners. For the last decade, we relied on so little that we have, online resources, books, forums etc. We went to the pain of seeking the answers to a problem. However, to this day, those things are pretty much a thing of the past. Everything is given as if being spoon-fed. But what is the state of our learning? How does this sudden change affect us? How can we keep up with the fast-paced industry? How can we make sure we are learning the right way? ### Research Not knowing what to learn is poison. It's like solving a maze without drawing the map of the dungeon. Being able to know what you want to learn and prioritize will make it very easy for you to progress and get the things you actually need. Knowing what you are diving yourself into will help you on prepping yourself to the huge amount of stress and effort on the subject you will learn. Being able to learn the rewards and stages of progress will also allow you to be motivated along the way. Do yourself a favor and research. ### Start Small It's human desire to make it big, and as big as possible. But rushing things head-on won't make things "faster" than you actually think it would. Start with the basics, grind your way on every single detail on the fundamentals you need. I've seen so many people making the mistake of adding complexity to their projects, only to end up on a wall big enough for them to lose motivation and eventually stop. Not only does this hinder your growth, but it also affects your momentum and the confidence you have built and what's left of it. Don't rush for the gold, if you train yourself enough to avoid most of the traps, you'll be able to raid a lot of treasure dungeons. ### Avoid Saturation Yes, I get it. The feeling of being able to know it all. The pride the comes along with it. But in reality, shallow understanding on a wide variety of things may just be the worst thing possible. In a very practical industry, mastery is important specially for companies that rely on specialists on some critical decisions on the everyday life of the company. Stop trying to take everything at once, learn one at a time, master it and then you move on to the next one. Multitasking does sound amazing, but it comes with a high price. If you're not a gifted genius with a mind that runs like a bullet train, just focus on a single thing and learn everything you can on it. ### Consistency A hardworking idiot beats a lazy genius, stop looking for the motivation to come, be willing to show up every day and learn, whatever the platform, be it just a single 5-minute YouTube video, or a heated discussion on discord, if it helps then it matters. While there are different ways for people to learn, one thing is for sure, don't stop learning. Being able to consistently accumulate data for your brain will help you on the long term. Foster a mind that relentlessly thirsts for knowledge. ### Be Curious Not Lazy What took people hours and hours of searching and skimming through books and books, are now presented to you in a prompt that takes less than 5 seconds. So, use the time you saved from the trouble of searching through the entire internet to be curious and ask, inquire how things work, why it works that way, and what other methods you can use. It's amazing to see that there are no absolute paths in solving a problem, different styles, complexity and algorithms. Learn from asking non-stop, make it that you end the day without questions lingering in your mind. ### Limit As Little Abstraction As Possible While it's good that there are things that are already built out there waiting to be inserted in our code, and minimizing our effort to do a certain task. It's not helpful in learning how things the way they are. Oftentimes these things are compiled and would be hard to understand. It doesn't benefit your learning if you simply avoid the agony of writing a function and rely on packages built by someone else. Being in full control of your code is also very crucial in handling bugs along the way. Create your own utility functions, understand every problem and create solutions on your own accord. ### Avoid Distractions It's a common problem across all aspects in life, we probably procrastinate almost half the day everyday just to satisfy our hungry brains asking for entertainment. And for some people, coding isn't just as fun. But whatever the case may be, avoid wasting your time and use every bit of it to learn. A busy moron is better than a distracted genius, along with consistency and strong will, any concept is understandable. Make it that distractions become noise not a melody, the more you crave to learn, the harder it is for you stray out of your goal. ### Use AI To Your Advantage AI came down like an armageddon, and it won't be going away for a long time, rather than moping around and questioning life, why not make it a part of you? Certainly, it can be very scary how it can achieve things we normally would take hours and hours of sweat, blood, and pain in the ass (literally). But it could be the very thing that would help you upskill and soar higher. Here are some things you can do with AI to improve your knowledge and skills: - Ask questions, literally, just ask. - Question your understanding, try to apply [feynman method](https://fs.blog/feynman-learning-technique/) while you're at it. - Engage in open ended questions, test your reasoning. - Gamify with AI, learn by making things more challenging (tests, multiple choice, identification, etc.) - Don't end a concept simply by knowing the WHAT, end it by knowing the HOW. Prompting is infinite, don't hesitate. - Ask suggestions, guides, and a roadmap for you to know what's your next move. There should be a lot of techniques out there, try to figure out what works for you the best, and make sure you retain your sanity, still self conscious, re-evaluating yourself if you're being over reliant on the tool. --- # Projects --- # Yolk & Folk > A cartoonish landing site for Yolk & Folk, a fictional neighborhood all-day brunch cafe. Thick borders, hard offset shadows, and wave dividers on top of a fully CMS-driven section system — menu, story, reviews, journal, and visit info all editable from the studio. - URL: https://renato-dulog.is-a.dev/works/yolk-and-folk - Author: Renato Dulog - Category: website - Tech stack: Next JS, Sanity, Typescript, Tailwind CSS, Framer Motion - Live: https://folk-and-yolk.vercel.app - Updated: 2026-08-26 ### **What I Built** Yolk & Folk is a fictional neighborhood brunch cafe — Maple Street, est. 2019, walk-ins only, "brunch worth waking up for." I designed and built the whole site as a portfolio project: home, about, contact, a full menu page, and a journal with real posts, authors, and categories. The cafe isn't real. Nobody's walking in for pancakes. It's a sandbox I built to answer one question: can a loud, cartoonish brand identity survive inside a system that's actually built to be reused and updated, without the personality getting sanded down or the structure getting buried? ### Why I Built It My last two example sites — Atrium Studio and Ridgeline Roofing — both lived in restrained, professional territory: clean type, sober palettes, trust doing the heavy lifting. I wanted the opposite test. A brand where the visual character _is_ the product. Food and hospitality is the honest place to try that — a cafe site sells a feeling before it sells a dish, and getting that feeling wrong is a lot more visible than a corporate layout being slightly off. Most local cafe sites are either a single-page template with a PDF menu bolted on, or a beautiful one-off the owner can never touch again without calling a developer. I wanted to see if a strongly styled identity — thick borders, hard offset shadows, rotated cards, wave dividers, floating blobs — could be broken down into pieces that hold up under reuse instead of just looking good once. ### **How I Did It** I designed the whole thing as mockups first — landing, menu, about, contact, journal, journal post, nav, footer — before writing any code. That forced the identity to settle early: forest green, cream, tomato red, yolk yellow; Fredoka for headings, Nunito Sans for body; 3px borders and hard shadows with no blur, so everything reads hand-cut instead of glossy. From there I broke every screen down into reusable section variants — sixteen new ones across hero, feature, showcase, testimonial, gallery, contact, steps, team, CTA, FAQ, nav, footer, and text sections. Two things I had to build from scratch: a proper menu section (categories, dish rows, prices, dietary tags, an allergy footnote) and a section that pulls in the latest journal posts automatically instead of making someone hand-pick them every week. ### **What Makes It Different** The cartoon styling is heavy on purpose, but hours, address, phone, and the menu are never more than a tap away — the test for every rotated card and floating blob was whether it still let someone find breakfast. And none of it is a one-off: the palette, shadows, and fonts are swappable, so the same sections could carry a completely different brand tomorrow. ### **What I Gained** A third example site that pushes into playful, personality-led branding instead of another restrained business layout. Real practice turning finished visual design into reusable pieces rather than rebuilding every page by hand. Two new section types I'll keep using. And a clearer sense of where a theme's tokens end and the actual design work begins. ### **Key Takeaway** A strong style is only worth building if someone other than me can maintain it. Yolk & Folk pushed the visual language as far as I could take it while keeping every dish, price, hour, and post easy to update — and that constraint made the design better, not smaller. --- # HyperTab > A Chrome extension that replaces the new tab page with a customizable dashboard, with wallpapers, widgets, a YouTube now-playing bar, and a content scraper that tracks sites for updates. - URL: https://renato-dulog.is-a.dev/works/hypertab - Author: Renato Dulog - Category: extension - Tech stack: Typescript, Tailwind CSS, ShadCN - Source: https://github.com/renskiedulog/hypertab - Updated: 2026-06-07 HyperTab is a Chrome extension that replaces the default new tab page with a dashboard built entirely around how you actually browse: - **Customizable layout:** clock, top sites, Google shortcuts, and custom wallpapers. - **YouTube now-playing overlay:** a live bar that shows the current video’s title, progress, and volume from your active YouTube tab. - **Content scraper for updates:** watches chosen sites (like manga and anime pages) using CSS selectors, checks them on a schedule, and notifies you when the DOM changes. ### Why it exists Opening new tabs dozens of times a day felt like wasted real estate. Instead of a static default page, HyperTab turns that muscle-memory action into something useful: surfacing what you care about and quietly handling the manual checks you used to do yourself. The project started from a simple annoyance: repeatedly checking the same manga and anime sites for updates, while also wishing the new tab page looked as good as the aesthetic setups seen in screenshots online. HyperTab is the answer to both. ### How it’s built - **Inside Chrome’s extension model:** It uses service workers, content scripts, and Chrome’s storage APIs, wiring background processes cleanly into the UI instead of behaving like a typical React web app. - **YouTube now-playing overlay:** A content script polls the active YouTube tab for playback state and relays it through the background worker to the dashboard, requiring careful message passing to keep it smooth and responsive. - **Content scraper:** Given a set of CSS selectors, it periodically inspects target pages for DOM changes and fires browser notifications when something new appears. ### What makes it different - **It replaces a habit, not just a page:** HyperTab doesn’t just look nicer; it removes the need to manually check sites, folding that behavior into a place you already open constantly. - **Designed from real daily use:** Every feature exists because it solved a personal, recurring need. If it wouldn’t be used every day, it didn’t ship. - **A true extension, not a webview wrapper:** It leans into Chrome's extension architecture (service workers, content scripts, manifest permissions) rather than simply embedding a website. ### Key takeaway HyperTab is a reminder that the most sustainable projects often start from irritation with your own habits. Building something you genuinely use every day keeps motivation high long after the initial novelty fades, and that's the kind of project worth repeating. --- # Quenique > A queueing and passenger management platform for pumpboat operations, bringing real-time tracking, analytics, and automation to a process that used to run on memory and paper. - URL: https://renato-dulog.is-a.dev/works/quenique - Author: Renato Dulog - Category: web app - Tech stack: Next JS, MongoDB, Tailwind CSS, Typescript, ShadCN, Socket IO, Framer Motion - Source: https://github.com/renskiedulog/capstone - Updated: 2026-06-07 **QueNique** is a queueing and passenger management platform built specifically for pumpboat operations. It centralizes real-time queue tracking, boat scheduling, analytics, and notifications into one system for both staff and passengers. ### What It Does - Live dashboard for queue status and departures - Role-based admin controls for staff - Passenger-facing view for position in queue and departure times - Reporting and analytics for historical operations and patterns ### Why It Exists Pumpboat terminals often rely on: - Word-of-mouth updates - Manual, improvised lines - Memory-based tracking of departures - Little to no historical record when issues arise QueNique replaces this with a structured, reliable system that staff can use daily and passengers can trust for clear information. ### How It Was Built 1. **Mapped the real workflow first** 1. **Designed for two audiences** - Staff: control, visibility, live states, schedules, and reports - Passengers: simple, clear status and timing 1. **Implemented real-time data flows** ### What Makes QueNique Unique - **Workflow-first design**: Every screen maps to a real step in pumpboat queue operations, not a generic booking flow. - **Actionable data**: Daily operations become graphs, statistics, and historical logs that reveal patterns and support better decisions. - **Built for actual users**: Role-based access and focused interfaces give each user only what they need, no clutter. ### Key Takeaway The core lesson from QueNique is that building effective software for real-world operations starts with deeply understanding the process, not the tech stack. Translating a messy, human workflow into a structured, dependable system was the real capstone challenge, and the main achievement of this project. --- # Rivermint Dental > A website for a dental clinic designed around trust and clarity, guiding new patients from their first visit to the page through booking an appointment. - URL: https://renato-dulog.is-a.dev/works/rivermint-dental - Author: Renato Dulog - Category: website - Tech stack: Next JS, Sanity, Tailwind CSS, Typescript - Live: https://rivermint-dental.vercel.app - Updated: 2026-06-07 ### What I Built I designed and built a full website for a dental clinic, focused on welcoming new patients, explaining what to expect, showcasing services in detail, and making it easy (and less intimidating) to book an appointment. ### Why I Built It Clinic and healthcare sites are a different design challenge than typical product or marketing work. The goal isn't visual flash, it's trust. I used this project to practice designing for tone, clarity, and reassurance instead of novelty. ### What Sparked the Project I kept noticing how many local clinic sites feel like an afterthought: outdated, cluttered, and hard to navigate, especially when you're already anxious about seeing a dentist. I wanted to reimagine that experience from the patient's perspective. ### How I Approached It #### 1. Designing for Trust First Every layout and content decision was filtered through a single question: > _Would this help a nervous first-time visitor feel more at ease?_ That principle shaped: - The tone of the copy, calm, direct, and reassuring. - The pacing of information, no walls of text, no jargon. - How services were presented, clear, structured, and non-overwhelming. #### 2. Mapping the Patient Journey I structured the site around the real path someone takes when choosing a clinic: 1. **Homepage** – First impression, quick reassurance, and clear next steps. 1. **New Patient Flow** – What to expect, how to prepare, and how booking works. 1. **Service Pages** – Individual treatments explained in plain language. Each page is designed to answer the next question before the visitor has to ask it. #### 3. Treating Content as Core Design Instead of relying on animations or visual tricks, I treated copy and structure as primary design tools: - Defined what each page needed to say. - Ordered information from most reassuring to most detailed. - Used headings, subcopy, and CTAs to guide visitors without pressure. ### What Makes It Different #### Built Around the Visitor’s Mindset The structure is optimized for someone who might be nervous about booking: - Reduced friction at every step. - Clear expectations about the visit. - Friendly, non-clinical language that still feels professional. #### Clear Information Architecture Services, the new-patient process, and contact details are organized so visitors can: - Find what they need in a couple of clicks. - Avoid digging through deep menus. - Always see a clear path to either learn more or book. #### A Different Design Muscle This project was an exercise in designing for calm and clarity instead of impact: - Prioritizing readability over visual spectacle. - Letting structure and tone do the heavy lifting. - Building a skill set that transfers directly to any client-facing work where trust matters. ### Key Takeaway Building the Rivermint Dental site reinforced that not every project needs to impress with complexity. The best designs often get out of the way and quietly do their job. Designing for trust forced me to slow down, think from the visitor’s seat first, and let clarity lead the work. --- # Loadout > A gaming-focused platform built around discovery, helping players find games and setups that actually fit how they play. - URL: https://renato-dulog.is-a.dev/works/loadout - Author: Renato Dulog - Category: website - Tech stack: Tailwind CSS, Sanity, Typescript, Next JS - Live: https://loadout-ashen.vercel.app - Updated: 2026-06-07 **Loadout** is a gaming-focused web platform built end-to-end with Next.js. It's designed to help players quickly discover games and build setups that actually match how they play. ### Why I Built It I wanted to build a polished, content-rich site from the ground up, one with real depth in its pages and presentation. Gaming was the perfect fit: it's a space I know well, it changes constantly, and it rewards thoughtful design. ### What Sparked the Idea Most gaming and setup sites either drown you in endless listings or hide the useful parts behind clutter and ads. I kept noticing how hard it was to find games or setups that genuinely matched what someone wanted. Loadout is my attempt to fix that with something curated, focused, and easy to navigate. ### How I Built It #### 1. Designing a Flexible UI Architecture Instead of duplicating layouts across pages, I built Loadout around a **reusable, component-driven architecture**. Each page is assembled from modular, configurable React components. This took more upfront design and engineering effort, but it means: - New layouts can be created without new code. - UI can evolve without rewriting core logic. - The platform can scale into new page types and experiences over time. #### 2. Focusing on the “Find Your Games” Flow The heart of Loadout is the **discovery experience**, helping someone land on something worth their time, fast. I focused heavily on: - Guided flows instead of overwhelming filters. - Clear, opinionated recommendations over raw lists. - A structure that keeps players moving toward a good match instead of bouncing. #### 3. Treating Performance as a Feature For a gaming audience, speed and polish aren’t optional. I treated performance as a first-class feature: - Optimized Next.js rendering and asset loading. - Responsive layouts tuned for both desktop and mobile. - A smooth, low-friction experience that feels as fast as it looks. ### What Makes Loadout Different #### Composable by Design Every part of Loadout's interface is built from **composable components**. The site is structured to grow and change without needing a full rebuild or redesign. This lets me: - Reuse components across pages. - Rearrange sections to test new layouts and narratives. - Add new features without major rewrites. #### Built Around Discovery, Not Just Display Loadout isn’t just a static showcase of games or setups. The entire structure is optimized around **helping someone actually find what they’re looking for**, that's the core problem it's designed to solve. #### A Platform, Not a One-Off Page From day one, Loadout was built like a **platform**: - New sections and page types can be added without breaking existing ones. - The component structure is flexible enough to support future features. - It’s designed to scale with more games, more setups, and more editorial content over time. --- # Coinbud > A paired income and expense tracker installable as a PWA — one shared ledger for two people, with every entry attributed to whoever logged it. - URL: https://renato-dulog.is-a.dev/works/coinbud - Author: Renato Dulog - Category: application - Tech stack: Next JS, Supabase, Tailwind CSS, ShadCN - Updated: 2026-06-07 **CoinBud** is a personal-finance Progressive Web App for manually tracking income and expenses, built around a core feature called **Pair Link**. ### What It Is - A manual income and expense tracker. - Works great solo, but is designed for **two people sharing one ledger**. - Every entry is clearly tagged to the person who logged it. ### Why It Exists Most budgeting tools assume a single user, even though money is often shared. Couples and partners end up with: - Separate apps - Separate totals - Recurring disagreements about whose numbers are correct CoinBud aims to remove that friction with **one shared ledger**, attributed entries, and no guesswork. ### How It Was Built **Pair Link by Design** - Data model and sync layer are built around **“shared by default, solo-friendly”**. - Two accounts see and edit the **same ledger in real time**. - Every entry is attributed to the person who created it. **Calm, Trustworthy UI** - Visual tone is **calm, restrained, and bank-like**. - No playful or gamified elements that might undermine trust. **Feels Like a Native App** - Mobile-first, installable **PWA**. - Layout is capped to a phone-like width even on desktop. - Feels like a dedicated app everywhere, not just a website. ### What Makes It Unique - **Shared by Design**: Pair Link isn’t a hack or add-on; it’s the foundation of the app. - **Calm Over Gamified**: No streaks, badges, or mascots, just a clear, steady space for two people to manage money together. - **Real-Time Sync**: Changes appear instantly for both people, so no one is working with stale numbers. ### Key Takeaway Building CoinBud showed that good shared tools can’t just be solo tools with a “share” button. They need to be designed around the **relationship** from the start. Thinking of **two users as one unit**, from the data model up, now shapes how collaborative features are approached in every future project. --- # Recommendation System > A personal recommendation tracker built into the portfolio, integrating Tenrai API for anime, manga, and manhwa data, and TMDB API for movies. Allows browsing, searching, and managing a curated list of recommendations stored in Sanity CMS with a password-protected admin panel. - URL: https://renato-dulog.is-a.dev/works/recommendation-system - Author: Renato Dulog - Category: integration - Tech stack: ShadCN, Typescript, Next JS - Live: https://renato-dulog.is-a.dev/extra/recommendations - Updated: 2026-07-21 ### Overview A personal recommendation tracker built directly into the portfolio. Integrates with Tenrai API for anime, manga, and manhwa data, and TMDB API for movies — letting me curate and share content I genuinely enjoy, backed by real metadata pulled from external sources. ### Browsing Recommendations Users can browse curated picks across four categories — anime, manga, manhwa, and movies. Each entry is pulled live from its respective API, showing cover art, scores, genres, and a synopsis. ![Browsing recommendations page](https://cdn.sanity.io/images/0l8qvi2n/portfolio/207b34a914ac244fc2a9bab1c4e1a71d5301b409-1330x590.png?w=1200) ### Recommendation Management A password-protected admin panel lets me search for titles directly from Tenrai or TMDB and add them to the list. Entries can be marked as favorites to pin them to the top of their category. ![Recommendations Login Panel](https://cdn.sanity.io/images/0l8qvi2n/portfolio/a7820154ec2efc5fb7a21d62a1988f74c528afb4-875x354.png?w=1200) ![Recommendation management admin panel](https://cdn.sanity.io/images/0l8qvi2n/portfolio/618a8a946d66cdb2b4f1a625455b833bd372a943-1268x865.png?w=1200) ### Detail Pages Each recommendation has a dedicated detail page showing full metadata — synopsis, score, genres, characters, and an embedded YouTube trailer when available. ![Recommendation detail page](https://cdn.sanity.io/images/0l8qvi2n/portfolio/b245f5be3f41f890479cf563bf7df6164099fdfa-1267x865.png?w=1200) ### Features - Browse recommendations across anime, manga, manhwa, and movies - Detailed info pages with synopsis, scores, genres, and trailers - Password-protected admin panel for managing the recommendation list - Search and add titles directly from Tenrai or TMDB within the admin panel - Favorite flag to pin top picks to the top of each category ### Integrations Tenrai API — unofficial MyAnimeList REST API used to fetch anime, manga, and manhwa metadata including scores, synopses, cover images, genres, and character data. TMDB API — The Movie Database API used to fetch movie metadata including posters, overviews, ratings, and YouTube trailer links. Sanity CMS — stores all recommendation entries including type, ID, source (Tenrai or TMDB), and the favorite flag. [View Recommendations](https://renato-dulog.is-a.dev/extra/recommendations) --- # SEO Coolkit > A developer-focused SEO auditing platform built on Next.js and server actions. Handles batch operations across multiple URLs, toggleable output fields, and CSV/JSON export. A composable toolbox architecture means new tools plug in without rebuilding anything. - URL: https://renato-dulog.is-a.dev/works/seo-coolkit - Author: Renato Dulog - Category: tool - Tech stack: Next JS, ShadCN, Tailwind CSS, Typescript, Cheerio - Live: http://seo-coolkit.vercel.app/ - Updated: 2026-06-07 ### What I Built A developer-focused SEO auditing platform built as a compilation of composable utilities under one roof. The MVP centers on a multi-URL bulk checker: paste a list of URLs, toggle which fields to inspect (title, meta description, canonical, Open Graph tags, robots, heading structure, status codes), and export the results as CSV or JSON. The architecture is designed as a toolbox — a shared utility layer and central tool registry mean new tools plug in without touching existing code. ### Why I Built It Most SEO tools are expensive, specialized, and inflexible. Each one focuses on a narrow problem, requiring you to juggle three or four subscriptions to cover a full audit workflow. And none of them let you configure exactly what data comes back — you get their output format, their fields, their export structure, whether that fits your workflow or not. A developer doing site maintenance doesn't need a full SaaS platform. They need a fast, customizable way to check 50 URLs at once and get exactly the data they care about. That's what this is. ### What Made Me Start The realization that most SEO checks are just: fetch a URL, parse the HTML, extract specific tags. That's three steps. Cheerio does the parsing in a few lines of server-side code — no headless browser needed for metadata extraction, no CORS issues, no rate limit from a third-party API. The cost of building a tool that does this for 100 URLs is barely higher than building one that does it for one. So the question became: why am I paying for this? ### How I Did It #### The Shared Utility Layer All tools pull from a common set of utility functions: fetchPage fetches the raw HTML server-side, parseMeta extracts title, description, canonical and OG tags, parseRedirects traces redirect chains, parseLinks extracts all anchor elements. These functions are written once and reused across every tool — adding a redirect checker means wiring up parseRedirects to a new page, not re-implementing HTTP fetching. #### The Tool Registry Every tool is registered in a central config file with its name, slug, description, category, and status (free / beta / coming soon). This single file drives both the hub dashboard UI and the routing — adding a new tool is one config entry plus one new page. No hub code changes, no nav updates, no routing changes. #### Server Actions Over API Routes All fetching and HTML parsing happens server-side via Next.js Server Actions, which sidesteps CORS entirely. The client never touches external URLs directly — it passes a list of URLs to the action and receives back structured data. This means the tool works on any URL the server can reach, without any browser extension or proxy setup. ### What Makes It Unique #### Composable by Design The architecture isn't optimized for the current tools — it's optimized for the tenth tool. Every structural decision (registry pattern, shared utilities, route-per-tool) is made to minimize the cost of expansion. The value compounds: the more tools added, the cheaper each new one becomes. #### Toggleable Output Fields Rather than returning a fixed schema for every URL, the bulk checker lets you select exactly which fields matter for your current task. Auditing canonical tags? Toggle that on, ignore the rest. Spot-checking Open Graph images before a campaign? Check those two fields across 80 URLs in one pass and export to CSV. No noise, no scroll. ### Why This Matters to Me SEO Coolkit is a tool I actually use. It came from frustration with existing options and the belief that a developer's own tools should fit their workflow precisely, not the other way around. Building it reinforced a principle I care about: understanding your problem well enough to build the right abstraction the first time. - **Developer tooling mindset**: Built for the person writing the code, not the person buying the subscription - **Architecture thinking**: Registry pattern and shared utilities designed before a single tool was built - **Practical over perfect**: Ships useful tools now, expands cleanly later - **Own your tooling**: Stop paying for things you can build in a weekend ### The Bigger Picture SEO Coolkit is the foundation for something larger. The registry pattern, shared utilities, and route-per-tool architecture are all designed with a future freemium model in mind — free tools for common checks, gated tools for high-value batch operations. The structure already supports it; monetization is a config flag away. But more than that, it's proof of a development philosophy: before you build a feature, build the system that makes features cheap to add. ### Key Takeaway A well-designed shared utility layer is worth more than any individual tool built on top of it. The time spent on the registry pattern and the /lib/seo/ functions is the time that makes every future tool trivial to add. Build the foundation right, and the product becomes a collection of short pages, not a collection of duplicated logic. --- # Nexus Hook > A webhook batching proxy that sits between Sanity CMS and Vercel deployments. Collects rapid-fire content updates and triggers a single Vercel build after a configurable quiet period — saving build minutes, reducing costs, and preventing deployment spam from collaborative editing sessions. - URL: https://renato-dulog.is-a.dev/works/nexus-hook - Author: Renato Dulog - Category: tool - Tech stack: Next JS, Supabase, Tailwind CSS, Typescript - Updated: 2026-07-21 ### What I Built A webhook batching proxy that sits between Sanity CMS and Vercel. Instead of every content save triggering its own deployment, Nexus Hook queues incoming webhooks and waits for a configurable period of silence before firing a single build. The core mechanic: every new webhook resets the timer to full duration, so a build only triggers after editors have genuinely stopped making changes. ### Why I Built It Working with Sanity and Vercel, every content change fires a webhook and kicks off a fresh deployment. In collaborative editing sessions — or when an editor makes a dozen tweaks in quick succession — that means a dozen builds, a dozen deployment minutes burned, and a queue of redundant deployments that all produce the same end result. The fix seemed obvious: batch the webhooks, wait for silence, send one. The hard part was building it in a way that's configurable, multi-user, and actually reliable under real editing patterns. ### What Made Me Start The insight that made this click was the timer reset logic. A naive approach would batch changes over a fixed window — "collect for 5 minutes, then send." But that means a build fires mid-edit if the editor started 5 minutes ago. The right behavior is: start a timer on the first change, reset it on every subsequent change, and only trigger when the timer runs out with no interruptions. That single design decision — reset on arrival, not count from start — is what makes the tool actually useful in real editing sessions instead of just theoretically useful. ### How I Did It #### The Queue and Cron System Incoming webhooks from Sanity hit a public proxy endpoint and get written to a Supabase PostgreSQL queue. A Vercel Cron job runs every 2 minutes, checks all active webhook configs, and for each one calculates the time since the most recent queued item. If that gap exceeds the configured wait time, it fires the target Vercel webhook and deletes the queue entries immediately — no logs kept by design. #### Auth and Multi-User Isolation Supabase Auth handles login, and Row Level Security policies ensure users can only ever see and manage their own webhook configs and queue items. The cron processor runs across all users' configs simultaneously, but each user's data is fully isolated from every other. #### Real-Time Dashboard The dashboard polls the status endpoint every 5 seconds and uses a client-side interval to count down the timer in real time — showing exactly how many changes are queued and how long until the build triggers. A manual "Trigger Now" button lets users bypass the timer and force an immediate build when needed. ### What Makes It Unique #### Privacy-First: No Logs Queue items are deleted immediately after processing. No activity history, no logs, no stored webhook payloads persisted beyond what's needed to trigger the build. This is a deliberate architectural choice, not an omission — Sanity content is sensitive, and a proxy service shouldn't be accumulating a record of editorial activity. #### Configurable Per Webhook Wait time is configurable per webhook, not globally. A high-traffic news site might want a 1-minute window; a slower marketing site might prefer 10. Each webhook config is independent, and editors can adjust it from the dashboard without touching any code or environment variables. ### Why This Matters to Me Nexus Hook was the first project where I owned the entire backend layer — database schema, RLS policies, cron scheduling, API auth middleware, and a real-time UI on top of it. It demonstrated that I can think through systems problems, not just UI problems. - **Real problem**: Solved an actual pain point from my own Sanity + Vercel workflow - **Backend ownership**: Auth, RLS, cron jobs, queue processing — all designed and implemented end-to-end - **Multi-user from day one**: Isolation and RLS baked into the schema, not bolted on later - **Thoughtful defaults**: Privacy-first architecture, no unnecessary data retention ### The Bigger Picture Good developer tooling is invisible when it works. Nexus Hook is the kind of thing you set up once, forget about, and only notice when it saves you from a cascade of unnecessary deploys. That invisibility — reliably doing one thing correctly without demanding attention — is the goal. It also opened a pattern: build the tools your stack is missing rather than waiting for someone else to build them. ### Key Takeaway The best developer tools solve exactly one problem and solve it completely. Nexus Hook doesn't try to be a deployment platform or a webhook manager — it's a batching proxy, and it does that one thing reliably. Scope clarity is what makes small tools actually get built and actually get used. --- # Ridgeline Roofing Co. > A full marketing website for Ridgeline Roofing Co., a licensed roofing contractor based in Hartwell, Vermont. Covers residential and commercial roofing services, trust signals, a free estimate form, and 24/7 emergency callout information. - URL: https://renato-dulog.is-a.dev/works/ridgeline-roofing - Author: Renato Dulog - Category: example site - Tech stack: Next JS, Sanity, Typescript - Live: https://ridgeline-woad.vercel.app/ - Updated: 2026-05-24 ### What I Built Ridgeline Roofing Co. is a fictional roofing contractor website I designed and built as a self-initiated portfolio project. The concept: a licensed Vermont contractor offering residential roof replacement, commercial roofing, repairs, gutter systems, and 24/7 emergency callouts. The site includes a homepage, service catalog, about page, FAQ, trust credentials, and a structured estimate request form. It's not a real business. Ridgeline doesn't exist. No one is going to call the number on the site. The whole thing is a sandbox I built to work through a specific design and engineering problem end-to-end. ### Why I Built It After designing Atrium Studio — a site aimed at warm internal colleagues — I wanted to test myself on the opposite problem: a site for cold strangers who might be in a hurry, possibly in distress, deciding in seconds whether to trust the business. Local service businesses are the textbook case for that kind of design pressure. The website is often the first and only touchpoint before a homeowner makes a call, and a weak site loses the job before it starts. I wanted to see if I could design something that earned trust instantly — through clear service descriptions, visible credentials, real-feeling testimonials, and a friction-free path to requesting an estimate. ### What Made Me Start The roofing industry is trust-heavy and urgency-driven. A homeowner searching for a roofer after a storm doesn't have time to navigate a confusing website — they need a phone number, a service list, and a reason to call. That urgency was a specific, sharp design constraint I wanted to work against. The most interesting wrinkle was that local service sites have to handle two very different user intents at once: planned replacements (researching over days) and emergency callouts (needing help right now). I wanted to see if I could serve both without splitting the site into two confusing experiences. ### How I Did It #### Studying the Problem First Before designing anything, I spent time looking at how actual roofing companies present themselves online — what works, what doesn't, what patterns repeat, where the obvious mistakes show up. Most local trades sites are outdated and unclear, and I wanted to know exactly why that was and what a sharper version would actually look like. #### Designing for Trust and Urgency The navigation includes a persistent top info bar with hours and a 24/7 emergency line — always visible, no hunting. The primary CTA and emergency badge appear on every page. Trust signals like license number, insurance status, and years in business sit near decision points rather than buried in the footer. Every layout decision had to defend itself against one question: would a stressed homeowner understand this in three seconds? #### Content Strategy Five pages, each with a clear job to do: Home converts, Services informs, About builds credibility, FAQ reduces objections, Contact closes. No filler pages, no vague content — every section had to earn its place by serving a specific user need in the buying journey. #### Building Out the CMS The site runs on Sanity, so every piece of content — service descriptions, testimonials, team info, FAQ answers — is editable from the studio interface. I wrote the schemas, built the React components, and wired everything together as if a real owner were going to be the one updating it. ### What Makes It Different #### Dual-Intent Architecture The site handles planned and emergency use cases simultaneously without splitting into two separate experiences. Emergency contact is always one tap away; the estimate form is always in view. The dual-path structure was the most interesting design problem in the project — and the one I learned the most from. #### Local SEO Foundation Location, service area, and credentials are embedded structurally, not just in body copy. The site is built to rank for local queries — proper metadata, structured data markup, clear service area signals throughout. Even on a dummy project, I wanted the SEO work to be real, because that's a craft I wanted reps on. #### Production-Grade Without a Real Client Like Atrium, Ridgeline was built as if it were going to ship to a real owner tomorrow. Fully editable CMS, considered information architecture, real attention to small details — the kind of work I want to be doing when a real local business does come along. ### What I Gained - A second portfolio piece that pressure-tests my design and engineering against a completely different industry and audience - Hands-on practice designing for trust and urgency — two of the hardest qualities to engineer into a website - Real reps on local SEO fundamentals: metadata, structured data, service area signals - A clearer sense of how content strategy and information architecture have to bend to the audience's mental state, not just their demographic - Proof to myself that I can hold the same level of craft across very different brands and use cases ### The Bigger Picture Ridgeline sits alongside Atrium as a second proof point — same craft, very different audience. One was designed for warm colleagues; this one for cold, possibly stressed strangers. Together they're how I'm learning what travels across project types and what has to be reinvented each time. The broader goal: small and medium businesses deserve well-built websites, not whatever a page builder produces in an afternoon. A contractor site can be fast, trustworthy, and professionally designed without a massive budget — and Ridgeline is me practicing that, so I'm ready when the real version of this project comes along. ### Key Takeaway Local service businesses win on trust and speed of response, and a website is one of the few places those can be engineered intentionally. Building Ridgeline reinforced something I already half-knew: understanding the customer's mental state matters more than any particular technical choice. The technology serves the business outcome; the business outcome serves real people in a hurry. A homeowner with a leaking roof at midnight needs one thing: a number to call and a reason to trust it. Designing for that — even as a fictional exercise — is the kind of constraint that sharpens everything else. --- # Atrium Studio > An internal design studio website for Atrium Studio — Halcyon's in-house creative team covering brand, product, motion, and research. Built to centralize design intake and showcase the studio's capabilities to internal Halcyon product teams. - URL: https://renato-dulog.is-a.dev/works/atrium-studio - Author: Renato Dulog - Category: example site - Tech stack: Next JS, Sanity, Typescript - Live: https://atrium-azure.vercel.app/ - Updated: 2026-05-24 ### What I Built Atrium Studio is a fictional internal design agency website I designed and built as a self-initiated portfolio project. The concept: an in-house creative team at a made-up company called Halcyon, serving 14 designers across 6 disciplines. The site includes a homepage, work archive, team grid, FAQ section, and a structured design brief intake form — everything a real internal agency would need to operate. It's not a real client. Halcyon doesn't exist. Atrium doesn't exist. The whole thing is a sandbox I built to test a specific design and engineering problem end-to-end. ### Why I Built It I wanted a project that would force me to design for a specific, unusual audience — internal colleagues rather than external prospects. Most agency websites I'd studied were optimized for cold conversion: heavy on positioning copy, vague value propositions, marketing polish. I wanted to see what happened if I stripped all that out and designed for an audience that already works at the company and just needs to understand what the studio does and how to start an engagement. The fictional framing gave me room to make sharper decisions than I could on a real project, where stakeholder opinions and brand constraints often soften the edges. ### What Made Me Start I wanted to take on the full scope of building a polished, production-grade site for a brand and audience I'd never worked with before — design, content, engineering, CMS, the whole thing — without the safety net of a real client telling me what to do. Self-direction was the point. Every decision had to be mine, and every decision had to be defensible. The "internal agency" constraint was the most interesting design problem I could give myself with the time I had. ### How I Did It #### Defining the Brand and Audience I started by writing the brief I would have wanted if a real internal studio had hired me — who Atrium serves, what kinds of projects they take on, what tone they speak in, how they're different from an external agency. That document then drove every design and copy decision downstream. #### Designing the Page Sections Each page is built from a set of distinct sections — hero, work archive, team grid, FAQ accordion, contact form. I designed each one with the specific content in mind, paying attention to how they'd sit next to each other on the page and how the rhythm of the site would feel as a visitor scrolled through. #### Building Out the CMS The whole site runs on Sanity, so every piece of content — work showcases, team members, FAQ answers, page copy — is editable from the studio interface. I wrote the schemas, built the React components, and wired everything together so the design and the content stay in sync. Even though no one will edit it in practice, I built it as if a real editorial team would. #### Designing for a Fictional Internal Audience The tone, navigation, and content structure were all calibrated as if the audience were colleagues rather than clients. This forced specific decisions: no generic agency speak, no marketing fluff, direct and functional copy. The constraint was the point — and pretending it was real was the only way to find out whether the constraint actually changed the design. ### What Makes It Different #### A Self-Imposed Constraint Designing for a known internal audience is a very different exercise from designing for cold prospects. I wanted to see how much of the "agency website" pattern I'd internalized was actually load-bearing, and how much was just convention I'd absorbed from looking at other sites. #### A Structured Brief Form, Not a Contact Form Even though no one will ever submit it, I designed the intake as a structured design brief — the kind of form a real internal studio would use to triage and scope work. It's a small detail, but it's the kind of decision the fictional framing made possible. #### Production-Grade Without a Real Client A lot of portfolio sites cut corners because no one is paying for them. I wanted Atrium to feel like a real shipped product — fully editable CMS, considered information architecture, real attention to the small details — so I'd know I could deliver at the same level when a real client did show up. ### What I Gained - A concrete portfolio piece that demonstrates design and engineering decisions in context - Practice taking a brand from a blank document all the way to a live, editable site - Practice designing for a specific, constrained audience rather than a generic "user" - A clearer sense of which design conventions actually serve the work and which ones I'd been copying out of habit - Reps on the full Next.js and Sanity production stack from schema design through deployment ### The Bigger Picture Atrium is part of a larger effort to push my own standard for what a self-directed project can look like — closer to a shipped product than a sketch. The longer I work on these, the more I care about the unglamorous parts: the CMS being genuinely usable, the content shape being right for the brand, the design holding up under real editorial changes rather than just on a polished launch screenshot. ### Key Takeaway A dummy project with a sharp self-imposed constraint can teach more than a real project with a vague brief. Pretending Atrium was real forced me to make actual design decisions, defend them to myself, and live with the consequences — which is the closest I can get to real client work without one. --- # MangaSensei > Using mangadex's api service, mangasensei offers the best and updated manga in your page at an optimal speed enough to engross and immerse you in your favorite stories, while also looking clean and aesthetically pleasing, suited for reading. - URL: https://renato-dulog.is-a.dev/works/mangasensei - Author: Renato Dulog - Category: website - Tech stack: Next JS, ShadCN, Typescript, MangaDex - Source: https://github.com/renskiedulog/MangaSenseiPro - Updated: 2026-06-07 ### Overview This is **MangaSenseiPro**, a web application designed to enhance the experience of reading and interacting with manga through intelligent features and structured content delivery. The project reflects my approach to building software that is both user-focused and technically scalable. It serves not only as a functional product but also as a representation of how I design systems, structure data, and solve real-world interaction problems. Rather than being just a manga reader, it is built as a platform — one that prioritizes performance, extensibility, and meaningful user experience. ### Features #### Manga Reading Experience The core of the application provides a clean, distraction-free interface for reading manga. It focuses on usability, fast loading, and smooth navigation across chapters and pages. #### Intelligent Enhancements MangaSenseiPro introduces features aimed at improving comprehension and engagement, making it more than just a passive reading tool. It explores how software can assist users in understanding and interacting with content more effectively. #### Scalable Architecture Built with long-term maintainability in mind, the application uses a modular structure that allows features to evolve without requiring major rewrites. #### Modern Web Stack Developed using modern web technologies, with emphasis on performance, clean architecture, and maintainable code practices. ### Uniqueness What differentiates MangaSenseiPro is its focus on **intentional development and user augmentation**. Instead of simply replicating existing manga readers, the platform emphasizes: - Enhancing understanding rather than just displaying content - Structured systems over quick, ad-hoc implementations - Performance and scalability as first-class concerns - Clean, purposeful design over unnecessary complexity It reflects my belief that software should actively improve how users interact with information, not just present it. ### Additional Features #### Recommendation System A feature that suggests manga based on user behavior, preferences, or reading patterns, aiming to create a more personalized experience. #### Bookmarking A feature where users can save and store their favorite manga and track them. ### Intent The intent of MangaSenseiPro is to: - Explore how software can enhance content consumption experiences - Demonstrate my ability to design and build scalable, real-world applications - Apply structured thinking to both frontend and backend systems - For me to learn more about handling JSON and API. --- # Portfolio > A customizable portfolio using Sanity and Next JS, aiming to create a site to centralize my efforts and dedication on the field, while also documenting my journey. - URL: https://renato-dulog.is-a.dev/works/portfolio - Author: Renato Dulog - Category: website - Tech stack: Next JS, Typescript, Sanity, ShadCN - Live: https://renato-dulog.is-a.dev - Source: https://github.com/renskiedulog/professional-portfolio - Updated: 2026-06-07 ### What I Built A personal developer portfolio that serves as my personal space for showcasing my work, documenting my thinking through technical writing, and establishing my identity as a web developer. Built from scratch using modern web technologies with a focus on clarity, performance, and long-term maintainability. ![portfolio-homepage](https://cdn.sanity.io/images/0l8qvi2n/portfolio/7754fa6e3d4768cb8265a1d3e08c73931b18e4f1-1464x829.png?w=1200) ### Why I Built It I needed a professional online presence that could grow with my career, but existing templates felt limiting. I wanted something that wasn't just a project gallery, but a space that reflects how I think and approach problem-solving and also extend it so I can freely express the ideas and share my creations online. The goal was to create a foundation where people can understand me on a single medium, I also wanted to make sure that whatever I do in my professional career is documented, written and shared. ### What Made Me Start Every developer eventually faces this: _How do I present myself online?_ I was tired of scattered profiles across different platforms. I needed one central place where I controlled the narrative where I could show not just _what_ I've built, but _why_ and _how_ I built it. I wanted to demonstrate technical skills while also proving I can communicate clearly, think structurally, and build for the long term. Most importantly, I wanted to create something that is truly mine, not something bootstrapped, or templated from someone else's effort. ### How I Did It There isn't exactly one single line and process in making this project work, majority of the things I had to prepare are: #### Picking The Right Tech Stack I did try to consider a lot of known stacks, weighed the pros and cons, and I ultimately landed on Next JS and Sanity which was my comfort stack. Bias aside, it's a really great pair when creating sites that gives you the feeling that you're just one click away from changing things and managing it. Coupled with a great architecture, it just makes your life much more easier. #### Thinking Of A Design Although the reason why this project has such a bland UI design is because I am not that capable in creating fancy and flashy designs, I still believe I made the right choice in making everything as simple and soothing to the user's eye. I wanted the project to feel minimalistic, and where users can know everything about me in a single page and scroll. It also reduces the chance of people turning away from the site just seconds on getting in. #### Deciding What Features To Put This has gotta be the most gruesome part of the development, thinking. It's not easy having to pick what things you put inside a website, why it should be there, how it would help, and why it would matter in the first place. Although, at the end of the day, I took the easy route and just built whatever came into mind little by little. Still, the initial part of the projects were a bit delayed because I was trying to manage the scope and limitations of each feature I can think and how it pairs up well with my architecture. I am not going to dwell on the implementation part as each humans have different ways to code, construct, and build the same feature. At the end of the day, the code is just a medium of their thought process. That's just most of what I did on the early stages of the project, because even now this project is ongoing, and will still be. Forever. ### What Makes It Unique #### Intentional Minimalism Unlike portfolios with flashy animations and heavy frameworks, mine prioritizes **clarity over complexity**. Every element serves a purpose. The design is deliberately restrained to let the content and work speak for itself. #### Content Architecture That Scales The site isn't just a static showcase, it's built to grow. Adding new projects or blog posts doesn't require restructuring; the system accommodates expansion naturally. ![portfolio-studio](https://cdn.sanity.io/images/0l8qvi2n/portfolio/b42ad4a7cc035499d0c59e2b7bbdd05b952d10f9-345x402.png?w=1200) #### Technical Philosophy on Display The site itself demonstrates my development approach: - **Performance-first**: Fast load times, optimized assets, minimal JavaScript - **Maintainable code**: Clean structure, well-commented, uses modern CSS features - **No over-engineering**: Vanilla technologies where they suffice, no unnecessary dependencies #### Blog as Thinking Documentation Most portfolios show finished work. Mine also shows the _thinking process_—how I approach problems, learn new concepts, and make technical decisions. This demonstrates communication skills and depth of understanding beyond code. ![portfolio-blogs](https://cdn.sanity.io/images/0l8qvi2n/portfolio/bf83187c0eb2fd9568f7c7d7130bc1ee8b263403-1027x910.png?w=1200) ### Why This Matters to Me This portfolio represents more than technical skills, it's proof of: - **Long-term thinking**: Built to last years, not months - **Clear communication**: Explaining complex work simply - **Professional growth**: A living document of my evolution as a developer - **Intentional craft**: Every decision made purposefully, not by default - **Playful creativity**: Not every great idea is a professional one, build what you think is fun to build. - **Feynman Practice**: You understand what you can explain easily. So structure your thoughts and deliver the words well. - **A Continuous Story**: My journey, well written. ### The Bigger Picture This isn't just a portfolio, it's my professional home on the internet. A place where I control the narrative, demonstrate capabilities, and document growth. As I tackle more complex projects and refine my thinking, this site evolves with me. It's a testament to the idea that **how you present your work matters as much as the work itself**. ### Key Takeaway Building this portfolio taught me that the best projects are the ones that serve multiple purposes. This site isn't just a showcase—it's a learning platform, a professional statement, and evidence of how I approach software development. If someone wants to know what kind of developer I am, this site answers that question better than any resume could.