<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Pouya Shahri</title>
    <description>The latest articles on DEV Community by Pouya Shahri (@pouyashahri).</description>
    <link>https://dev.to/pouyashahri</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4092582%2F93ebdf23-d02d-4844-b19c-802905161cc2.jpg</url>
      <title>DEV Community: Pouya Shahri</title>
      <link>https://dev.to/pouyashahri</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pouyashahri"/>
    <language>en</language>
    <item>
      <title>Inside PouyaOS: Designing an Interactive Portfolio as an Operating System</title>
      <dc:creator>Pouya Shahri</dc:creator>
      <pubDate>Mon, 24 Aug 2026 17:00:13 +0000</pubDate>
      <link>https://dev.to/pouyashahri/inside-pouyaos-designing-an-interactive-portfolio-as-an-operating-system-574j</link>
      <guid>https://dev.to/pouyashahri/inside-pouyaos-designing-an-interactive-portfolio-as-an-operating-system-574j</guid>
      <description>&lt;p&gt;A portfolio usually has a straightforward job: introduce the person, present selected work, explain relevant skills, and provide a way to get in touch.&lt;/p&gt;

&lt;p&gt;PouyaOS started from a different design question.&lt;/p&gt;

&lt;p&gt;What if the portfolio itself could become part of the work?&lt;/p&gt;

&lt;p&gt;I did not want to place the same biography, project cards, skills, music, articles, and contact information inside a more decorative layout and call it experimental. I wanted the interface to demonstrate the same kind of systems thinking, front-end work, creative direction, and multidisciplinary structure that the portfolio was supposed to represent.&lt;/p&gt;

&lt;p&gt;That decision eventually became &lt;strong&gt;PouyaOS&lt;/strong&gt;: a web-based portfolio built around the interaction language of an operating system.&lt;/p&gt;

&lt;p&gt;But the desktop interface is only the visible part of it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxm2v7fqf5zf84w8xfqbm.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxm2v7fqf5zf84w8xfqbm.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Designing an environment instead of a sequence of pages
&lt;/h2&gt;

&lt;p&gt;Traditional portfolio websites are usually linear.&lt;/p&gt;

&lt;p&gt;You scroll from an introduction to a biography, then through projects, skills, perhaps some writing, and finally a contact section.&lt;/p&gt;

&lt;p&gt;That structure is effective. It is also extremely familiar.&lt;/p&gt;

&lt;p&gt;My work does not sit comfortably inside one category. I work across digital systems, front-end development, experience design, publishing, music, and creative production. I wanted the structure of the portfolio to acknowledge that complexity rather than compress everything into one long page.&lt;/p&gt;

&lt;p&gt;An operating-system metaphor gave me a different way to think about the information.&lt;/p&gt;

&lt;p&gt;Projects could exist as objects that users open and explore. Different forms of content could have different environments. Navigation could feel closer to interacting with software than browsing a conventional portfolio.&lt;/p&gt;

&lt;p&gt;The important distinction, though, was that the operating-system idea could not stop at visual references.&lt;/p&gt;

&lt;p&gt;Windows, applications, files, navigation, and system states are immediately recognizable visual concepts. They can make a website look like an operating system very quickly.&lt;/p&gt;

&lt;p&gt;That was not enough for PouyaOS.&lt;/p&gt;

&lt;p&gt;The metaphor needed to affect the &lt;strong&gt;structure and behavior&lt;/strong&gt; of the portfolio, not merely its styling.&lt;/p&gt;

&lt;h2&gt;
  
  
  The interface had to carry some of the proof
&lt;/h2&gt;

&lt;p&gt;One of the reasons I chose a technically demanding format was that I did not want the site to simply tell visitors that I could build complex interfaces.&lt;/p&gt;

&lt;p&gt;I wanted part of that evidence to exist in the experience itself.&lt;/p&gt;

&lt;p&gt;PouyaOS uses React and TypeScript, but the framework names are not what make the project interesting to me. What matters is what the interface asks those technologies to coordinate.&lt;/p&gt;

&lt;p&gt;The experience has applications and application state. The desktop needs window-based behavior. Different types of information need to appear consistently across multiple parts of the system. Navigation has to remain understandable inside an unconventional interface. Desktop and mobile need different interaction patterns without becoming two unrelated portfolios.&lt;/p&gt;

&lt;p&gt;The design challenge was therefore not:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How many operating-system features can I simulate inside a browser?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It was:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Which parts of the operating-system model actually improve the way someone can explore my work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That distinction influenced almost every design decision that followed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi7tpl802vfnnfb7lu1q5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fi7tpl802vfnnfb7lu1q5.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The desktop is a design language, not a costume
&lt;/h2&gt;

&lt;p&gt;On larger screens, PouyaOS uses the interaction language of a desktop operating system.&lt;/p&gt;

&lt;p&gt;That gives the interface a vocabulary that most users already understand: applications can be opened, information can occupy different windows or states, and the environment can be explored non-linearly.&lt;/p&gt;

&lt;p&gt;The advantage is not only visual familiarity.&lt;/p&gt;

&lt;p&gt;A desktop metaphor makes it possible to express relationships spatially.&lt;/p&gt;

&lt;p&gt;A project does not have to behave exactly like a biography. Music does not need to be reduced to another project card. Media can have a different role from written content. Different pieces of the portfolio can remain part of one environment while still having different interaction patterns.&lt;/p&gt;

&lt;p&gt;This is where I think many OS-inspired interfaces can become superficial.&lt;/p&gt;

&lt;p&gt;If every icon ultimately opens another conventional content panel, the operating-system layer may only be decoration around the same underlying website.&lt;/p&gt;

&lt;p&gt;I wanted PouyaOS to use the metaphor more deliberately.&lt;/p&gt;

&lt;p&gt;The question became less about recreating a real operating system and more about deciding which parts of that model belonged in a portfolio.&lt;/p&gt;

&lt;p&gt;A portfolio is still a communication product.&lt;/p&gt;

&lt;p&gt;It should not simulate complexity simply because a real operating system is complex.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mobile needed a different answer
&lt;/h2&gt;

&lt;p&gt;One of the decisions I care most about in PouyaOS is something that becomes obvious only when you move away from desktop.&lt;/p&gt;

&lt;p&gt;I did not want the mobile version to be a compressed version of the desktop interface.&lt;/p&gt;

&lt;p&gt;Overlapping windows and pointer-driven interactions make sense when there is enough screen space and a mouse or trackpad. On a phone, the physical context is completely different.&lt;/p&gt;

&lt;p&gt;Trying to preserve the desktop metaphor literally would have meant shrinking the visual idea while weakening the interaction.&lt;/p&gt;

&lt;p&gt;Instead, I treated mobile as another operating environment.&lt;/p&gt;

&lt;p&gt;The desktop experience uses a desktop-oriented model. The mobile version uses a touch-first, Android-inspired application model where the interaction is better suited to a phone.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fapz2i5rmdlin4hyed42t.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fapz2i5rmdlin4hyed42t.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The important part is that these are not two separate portfolios.&lt;/p&gt;

&lt;p&gt;They are two expressions of the same system.&lt;/p&gt;

&lt;p&gt;That led to one of the principles that shaped the project:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;same information, different interaction model.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For me, this became a more useful definition of responsive design than simply making the same components rearrange themselves at different breakpoints.&lt;/p&gt;

&lt;p&gt;The identity remains consistent.&lt;/p&gt;

&lt;p&gt;The content remains consistent.&lt;/p&gt;

&lt;p&gt;The behavior is allowed to change.&lt;/p&gt;

&lt;h2&gt;
  
  
  The visible interface was only one layer
&lt;/h2&gt;

&lt;p&gt;As the project grew, I ran into a problem that had little to do with draggable windows or visual design.&lt;/p&gt;

&lt;p&gt;The same information needed to exist in many places.&lt;/p&gt;

&lt;p&gt;A project title might appear inside the operating-system interface, on a public project page, in metadata, in structured data, and in discovery systems.&lt;/p&gt;

&lt;p&gt;A biography might appear inside an application but also need a stable public URL.&lt;/p&gt;

&lt;p&gt;Music can exist as part of the interactive experience while still needing its own public record.&lt;/p&gt;

&lt;p&gt;If every surface owns a separate copy of that information, the portfolio becomes difficult to maintain very quickly.&lt;/p&gt;

&lt;p&gt;So the content model became part of the architecture.&lt;/p&gt;

&lt;p&gt;Conceptually, the system looks more like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                    Shared Content
                          │
            ┌─────────────┼─────────────┐
            │             │             │
      Desktop OS      Mobile OS    Public Pages
            │             │             │
            └─────────────┼─────────────┘
                          │
              Metadata / Structured Data
                          │
                 Search &amp;amp; Discovery
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The interface is therefore a presentation of the information rather than the only place where that information exists.&lt;/p&gt;

&lt;p&gt;That difference matters more than it may appear.&lt;/p&gt;

&lt;p&gt;It means PouyaOS can remain visually experimental without forcing every other system to understand the portfolio through application state.&lt;/p&gt;

&lt;h2&gt;
  
  
  The portfolio also needed to exist outside the OS
&lt;/h2&gt;

&lt;p&gt;An interactive application can be understandable to the person using it while still being a weak public reference.&lt;/p&gt;

&lt;p&gt;A visitor may know that clicking an application opens a project.&lt;/p&gt;

&lt;p&gt;Someone arriving from a search engine, a shared link, an article, or a media reference needs something more stable.&lt;/p&gt;

&lt;p&gt;That is why important information in PouyaOS also has conventional public destinations.&lt;/p&gt;

&lt;p&gt;The interactive experience and the public web layer have different jobs.&lt;/p&gt;

&lt;p&gt;The OS answers:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What does it feel like to explore this portfolio?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The public page answers:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What exactly is this project, person, article, or release, and where is its stable URL?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;PouyaOS uses canonical pages, semantic content, metadata, structured data, internal links, and sitemap outputs so that important information does not exist only behind an interaction.&lt;/p&gt;

&lt;p&gt;None of that guarantees a search ranking.&lt;/p&gt;

&lt;p&gt;That is not the point.&lt;/p&gt;

&lt;p&gt;The goal is to preserve clarity while keeping the experimental interface intact.&lt;/p&gt;

&lt;p&gt;For me, this became one of the most important design tensions in the whole system:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;exploration and reference need to coexist.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Publishing is part of the product
&lt;/h2&gt;

&lt;p&gt;Another part of PouyaOS that is mostly invisible from a screenshot is the publishing layer.&lt;/p&gt;

&lt;p&gt;A personal site is rarely finished when it launches.&lt;/p&gt;

&lt;p&gt;Projects change. Articles are added. Music releases appear. Images are replaced. Biography language evolves. Metadata needs updates.&lt;/p&gt;

&lt;p&gt;That becomes especially important when the same information can appear across multiple surfaces.&lt;/p&gt;

&lt;p&gt;I did not want maintaining the portfolio to depend on remembering every place where a fact had been copied.&lt;/p&gt;

&lt;p&gt;The publishing model was therefore designed around structured records that could be reused by the experiences depending on them.&lt;/p&gt;

&lt;p&gt;That changes the role of the portfolio.&lt;/p&gt;

&lt;p&gt;It stops being only a launch artifact and becomes something that has to remain coherent while the person behind it keeps producing new work.&lt;/p&gt;

&lt;p&gt;This mattered particularly for PouyaOS because the system was designed to represent multiple disciplines rather than one static set of development projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  The hardest part was keeping the ideas from fighting each other
&lt;/h2&gt;

&lt;p&gt;There was no single feature that made PouyaOS difficult.&lt;/p&gt;

&lt;p&gt;The difficult part was making several different requirements coexist.&lt;/p&gt;

&lt;p&gt;The interface needed personality without becoming confusing.&lt;/p&gt;

&lt;p&gt;The operating-system metaphor needed enough depth to matter without forcing every piece of content to pretend it was part of a real computer.&lt;/p&gt;

&lt;p&gt;Desktop and mobile needed to feel related without behaving identically.&lt;/p&gt;

&lt;p&gt;The publishing model needed structure without making the creative interface rigid.&lt;/p&gt;

&lt;p&gt;Important information needed stable public pages without turning the entire experience back into a conventional portfolio.&lt;/p&gt;

&lt;p&gt;And the technical complexity needed to demonstrate something meaningful rather than exist for its own sake.&lt;/p&gt;

&lt;p&gt;Those requirements pull the project in different directions.&lt;/p&gt;

&lt;p&gt;That is why I eventually started thinking about PouyaOS less as an interface project and more as a systems-design problem.&lt;/p&gt;

&lt;p&gt;A visual feature can usually be solved locally.&lt;/p&gt;

&lt;p&gt;A system has to survive the interaction between features.&lt;/p&gt;

&lt;h2&gt;
  
  
  Visual detail only works when it has a structural reason
&lt;/h2&gt;

&lt;p&gt;I care a lot about the visual side of PouyaOS, but I did not want visual novelty to become the whole argument for the project.&lt;/p&gt;

&lt;p&gt;A creative interface has to earn its complexity.&lt;/p&gt;

&lt;p&gt;The desktop environment makes sense because the portfolio contains different kinds of work that benefit from an application-oriented structure.&lt;/p&gt;

&lt;p&gt;The mobile interface changes because the interaction context changes.&lt;/p&gt;

&lt;p&gt;The publishing architecture exists because the information needs to remain consistent.&lt;/p&gt;

&lt;p&gt;The public reference layer exists because not every visitor enters through the interface.&lt;/p&gt;

&lt;p&gt;The operating-system metaphor is useful only because those decisions connect.&lt;/p&gt;

&lt;p&gt;Without that connection, the design would be an elaborate skin.&lt;/p&gt;

&lt;p&gt;With it, the interface becomes an expression of the architecture underneath it.&lt;/p&gt;

&lt;p&gt;That is the part of PouyaOS I find most interesting.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned from building it
&lt;/h2&gt;

&lt;p&gt;The biggest lesson was not that portfolios should look like operating systems.&lt;/p&gt;

&lt;p&gt;I actually think the opposite.&lt;/p&gt;

&lt;p&gt;If everyone started building OS-style portfolios, it would simply become another template.&lt;/p&gt;

&lt;p&gt;What I took from the project is that the form of a portfolio should reveal something meaningful about the person behind it.&lt;/p&gt;

&lt;p&gt;A minimal portfolio may be the right answer for one developer.&lt;/p&gt;

&lt;p&gt;Another might need something editorial, cinematic, game-like, or data-driven.&lt;/p&gt;

&lt;p&gt;For me, an interactive system made sense because I wanted the portfolio itself to demonstrate how I think about software, interfaces, content, creative systems, and digital identity.&lt;/p&gt;

&lt;p&gt;PouyaOS became the answer to that particular problem.&lt;/p&gt;

&lt;p&gt;It is not just a place where I list the work.&lt;/p&gt;

&lt;p&gt;It is part of the work.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Explore PouyaOS&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://pouyashahri.com/projects/pouyaos/" rel="noopener noreferrer"&gt;Open the PouyaOS project&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you are interested in the deeper reasoning behind the content model, publishing architecture, search layer, and identity system, I have also written a longer breakdown on my site:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://pouyashahri.com/blog/portfolio-as-an-operating-system-pouyaos/" rel="noopener noreferrer"&gt;Portfolio as an Operating System: How I Built PouyaOS as an Interactive Web System&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Editorial disclosure: I used AI-assisted editorial support while developing this article. The project decisions, experience described here, factual details, and final publication are reviewed and approved by me.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>portfolio</category>
      <category>react</category>
    </item>
  </channel>
</rss>
