Bob Bakken
Portfolio & React 09.06.2025 08:21
How I Built My First Portfolio Website in React
A deep dive into the challenges and lessons I faced while building my very first portfolio using React and Tailwind CSS. From routing to deployment – here’s how I made it work.
Like many developers starting out, I wanted a space to showcase my projects and skills — something more than just a plain resume. I had heard a lot about React’s component-based structure and Tailwind CSS’s utility-first approach, so I thought: why not use both to create my portfolio? It was my first real-world project outside of tutorials, and it quickly turned into a powerful learning experience.
I began by setting up the project using Create React App. It gave me a working React setup in seconds. I then integrated Tailwind CSS into the build. The first small victory came when I successfully applied my first Tailwind class and saw the result live in the browser.
From there, I divided the site into components: a header with navigation, an „About Me” section, a projects section, a contact form, and a footer. Each component lived in its own file, which helped me organize the code and focus on one thing at a time.
Styling with Tailwind CSS was a learning curve. At first, all the utility classes felt overwhelming, but as I got used to them, I loved how quickly I could experiment and iterate visually — without touching a separate CSS file. Building reusable elements like cards, buttons, and layout sections became easier with Tailwind’s responsiveness and consistency.
For navigation, I added React Router. It let me create separate routes for the pages without reloading the site. I had to learn to replace all <a> tags with <Link> components to avoid full page reloads, which was a common early mistake. Once the routing worked, the app really started to feel like a real website.
Finally came the deployment. I chose GitHub Pages for hosting, which was free and reliable. I added a homepage field in package.json, installed gh-pages, and with a couple of commands, I had the whole thing deployed live. The most frustrating issue was forgetting to set the base path for routing, which caused 404 errors — a great lesson in reading deployment docs carefully.
Along the way, I faced challenges like prop drilling, breaking components, and layout bugs. But each obstacle taught me something new. I learned how to use conditional rendering, how to structure folders better, and how to debug using browser dev tools.
Looking back, I’m really proud of what I built. It wasn’t perfect, but it was mine — and I understood every line of it. That’s the beauty of building your own portfolio: it’s both a personal and technical achievement.
In the next version, I plan to add a working contact form, integrate a CMS to manage project content, and maybe even implement dark mode using Tailwind’s built-in dark utilities. But for now, it’s live, and I can share it with others.
If you’re thinking of building your own portfolio in React, my advice is simple: start now. You’ll break things. You’ll fix them. And you’ll learn more in the process than you ever could from reading or watching videos alone.
Thanks for reading!
Michella Velle
GameDev Unity 2D 09.06.2025 08:21
GameDev 101: From Zero to Simple 2D Game in Unity
Want to create a game but don’t know where to start? I documented my journey building a basic 2D platformer using Unity and C#. Simple, fun, and addictive.
Building a game has always seemed like something reserved for professionals — people working in large teams, using complex tools, with years of experience. But as someone passionate about development, I wanted to challenge that notion. So I set out to build my first simple game — a 2D platformer — using Unity and C#. I wasn’t aiming for anything revolutionary. I just wanted to create something fun, playable, and finished.
Choosing Unity
There are several game engines out there, but Unity stood out for one major reason: it’s beginner-friendly. Unity has a huge community, a ton of tutorials, and uses C# — a language I was already somewhat familiar with. After installing Unity Hub and creating a new 2D project, I was staring at a blank canvas. That moment was both intimidating and exciting.
Building the First Scene
The first step was understanding Unity’s workflow. In Unity, a “Scene” is basically your game level, and it’s built out of “GameObjects” — things like your player, enemies, or platforms. I added a simple background, some platforms using sprite assets from the Unity Asset Store, and placed a character sprite that would become the player.
I had no idea what I was doing at first. But within a couple of hours (and some trial-and-error), I had my player standing on a platform in the scene.
Adding Movement
To bring the player to life, I needed movement. I attached a Rigidbody2D and a BoxCollider2D to the player object, and wrote a short C# script to allow for horizontal movement and jumping.
It worked! My character could now move and jump. That single moment — seeing a sprite move under my control — felt like magic.
Game Mechanics: Enemies and Collectibles
Next, I added basic enemies. They didn’t do much — just patrolled back and forth — but if the player collided with them, it would reduce health. I also added collectible coins and a simple score system. With a bit of UI work, I displayed the score on the screen and created a game-over condition.
The hardest part wasn’t the logic — it was balancing simplicity with polish. I kept reminding myself that done is better than perfect.
User Interface and Polish
I created a start screen, a game-over screen, and added sound effects. The Unity UI system took time to get used to, but it was flexible. I implemented health bars, added particle effects when collecting coins, and even used a free music track to create atmosphere.
Deployment
Exporting the game for Windows was surprisingly easy. I built it with just a few clicks and sent it to friends for feedback. Watching them play something I made from scratch — and actually enjoy it — was incredibly rewarding.
What I Learned
-
Start small. My first idea was too big — scaling down helped me finish something.
-
YouTube is your best friend. Tutorials on player movement, UI, and sound were a lifesaver.
-
Unity’s component system is powerful. Once you get used to it, it makes development quick.
-
Game dev is fun. There’s something uniquely satisfying about making something you can play.
This project wasn’t just about learning Unity. It taught me how to plan a game, solve problems, iterate quickly, and finish what I start. If you’ve ever dreamed about making a game — do it. Start small, stay curious, and most importantly: have fun.
Natasha Aasen
JavaScript (ES2025) 07.05.2002
What’s New in JavaScript (ES2025)
Explore the latest ECMAScript features, syntax improvements, and the future of JavaScript. Will these changes impact your daily workflow or maybe lifestyle?
JavaScript has come a long way from its humble beginnings as a simple scripting language for browsers. With each new ECMAScript release, it becomes more elegant, more powerful, and — surprisingly — more enjoyable to write. ES2025 (expected finalization in mid-2025) introduces several promising features that are designed not only to make our code cleaner, but also to make our lives as developers a little bit easier.
1. Pipeline Operator |> (Stage 3)
One of the most anticipated additions, the pipeline operator simplifies function chaining by allowing you to write code in a more readable, linear style.
Before:
After:
This mimics the UNIX-style pipeline, and can significantly improve readability when chaining multiple functions.
2. Array Grouping: groupBy() and groupByToMap()
No more manually creating groupings using reduce. These new methods allow arrays to be grouped based on custom keys with one-liners.
If you need a Map instead of a plain object:
3. Explicit Resource Management: using and Disposable
Inspired by other languages (like Python’s with or C#’s using), ES2025 introduces a standard way to handle resource cleanup.
Once the block ends, db is automatically disposed of. It’s great for dealing with file handles, DB connections, or custom resources with lifecycle logic.
4. Function Decorators (Stage 3)
Decorators will finally be standardized! This means cleaner syntax for injecting behavior into classes and methods.
It brings powerful metaprogramming patterns to vanilla JS — a game changer for libraries and frameworks.
5. Pattern Matching (Stage 3)
Pattern matching gives us a switch alternative that’s safer and far more expressive.
This makes complex conditionals more declarative and reduces the need for deeply nested logic.
How This Impacts Daily Development
Cleaner syntax = easier to read and maintain.
More declarative logic = fewer bugs in business logic and edge cases.
More built-in tools = less need for utility libraries like Lodash in common scenarios.
Improved performance and structure = especially with grouping and resource management.
But most importantly, these features help shift JavaScript toward being a modern, expressive language that scales — from scripts to full enterprise apps.
Should You Adopt Early?
If you’re building in a modern toolchain (like Babel, SWC, or TypeScript with experimental flags), you can start experimenting today. Many of these features are already polyfilled or transpile-ready.
But don’t rush blindly into adoption. Understand the specs, follow Stage 3/4 progress, and use what fits your workflow.
Final Thoughts
ES2025 is not just a collection of shiny new toys. It’s a thoughtful step forward for JavaScript as a language. It enhances the way we express logic, manage resources, and build maintainable code — which ultimately affects not just our apps, but our daily developer experience.
Whether you’re a frontend dev, a Node.js backend builder, or somewhere in between, these features are worth watching closely.
Isabelle Holmgren
Note System 27.11.2018
How I Organize My Coding Notes and Daily Learning
Struggling to manage your learning? I share my setup for writing and organizing coding notes using Obsidian, Notion, and GitHub gists.
Learning to code is a marathon, not a sprint. New languages, frameworks, commands, workflows — it’s easy to feel overwhelmed. After years of trying sticky notes, random Google Docs, and messy screenshots, I finally built a personal system that works. This post breaks down exactly how I organize my coding notes using Obsidian, Notion, and GitHub Gists, depending on the purpose.
🧠 Why You Need a Note System as a Developer
Before diving into the tools, here’s the truth:
✍️ The more you code, the more you forget.
That’s not because you’re bad at remembering — it’s because programming involves dozens of syntaxes, concepts, and edge cases. A reliable note-taking system is like a second brain that grows with your experience.
🔹 Obsidian – My Daily, Local „Second Brain”
Obsidian is a markdown-based note-taking app that stores files locally. I use it for:
Quick commands and code snippets (
git,docker,npm, etc.)Personal cheatsheets
Notes from YouTube courses or tutorials
Highlighted insights from books or articles
Graph-based linking between concepts
Example:
I keep everything in folders by topic (Frontend, Backend, DevOps) and tag things like #troubleshooting, #reference, or #daily.
🔹 Notion – Structured Learning & Planning
Notion is perfect for bigger-picture tracking. I use it for:
Course tracking (Udemy, Frontend Masters, etc.)
Project timelines
A table of articles to read
Roadmaps like “Learn TypeScript in 30 days”
Linking resources from YouTube, blogs, or Twitter
It’s more visual and ideal for organizing study plans or collaborative wikis.
🔹 GitHub Gists – Public Snippets & Sharing
When I find or write a snippet that others might benefit from — or that I’ll reuse across projects — I publish it as a GitHub Gist.
Examples:
JS debounce function
Regex for email validation
VS Code settings sync
Terminal aliases and
.bashrcconfigs
It’s version-controlled, easy to embed, and accessible from anywhere.
🗂 How I Use All Three Together
| Use Case | Tool |
|---|---|
| Daily coding notes | Obsidian |
| Learning roadmap | Notion |
| Public code snippets | GitHub Gist |
| Personal cheatsheets | Obsidian |
| Course summary & notes | Notion |
| Sharing tips with others | Gist |
This multi-tool system means I don’t overload any single app. It stays clean, purpose-driven, and scalable.
✅ Tips for Staying Consistent
Set a note review day weekly to clean or link things
Create a quick template for new notes (Date, Topic, Tags)
Use emojis to visually categorize notes (💡 idea, 🛠 fix, 🔗 reference)
Backup regularly (especially Obsidian if it’s local)
Final Thoughts
You don’t need a perfect system — you need a system that you’ll actually use. My combination of Obsidian, Notion, and Gists has helped me retain more, find things faster, and stay motivated to learn daily.
It’s not about hoarding information — it’s about building a knowledge base that works with your brain, not against it.