DEV Community: Ngawang Tenzin

How I Built a Retro Terminal Panel in React

Ngawang Tenzin — Sat, 06 Sep 2025 06:31:32 +0000

After sharing my portfolio project on DEV, a fellow community member commented asking how I built the retro terminal panel. So, I decided to break down the logic and share the details here!

The goal was to show a series of commands and outputs, just like a real terminal, and animate them. I also wanted a blinking cursor and a “reset” effect after all lines are shown.

The State
I used React’s useState to keep track of the lines currently displayed in the terminal:

const [terminalLines, setTerminalLines] = useState([] as string[]);

The Commands
I defined the commands and outputs as an array:

const terminalCommands = [
  '> whoami',
  'ngawang_tenzin',
  '> cat skills.txt',
  'React.js | Node.js | Python | TypeScript',
  '> ls projects/',
  'barma-sorig-web-app/ | quiz-mobile-app/ | portfolio-website/',
  '> status',
  'AVAILABLE FOR HIRE',
  '> echo "Let\'s build something amazing!"',
  "Let's build something amazing!"
];

The Animation Logic
I used useEffect to set up an interval that adds one line at a time to the terminal. Here’s the core logic:

useEffect(() => {
  let terminalInterval: ReturnType<typeof setInterval> | undefined;
  let lineIndex = 0;
  if (isRetroMode) {
    terminalInterval = setInterval(() => {
      if (lineIndex < terminalCommands.length && terminalCommands[lineIndex]) {
        setTerminalLines(prev => {
          const newLines = prev.slice();
          newLines.push(terminalCommands[lineIndex]);
          return newLines;
        });
        lineIndex++;
      } else {
        setTimeout(() => {
          setTerminalLines([]);
          lineIndex = 0;
        }, 3000);
      }
    }, 800);
  } else {
    setTerminalLines([]);
  }
  return () => {
    if (terminalInterval) clearInterval(terminalInterval);
  };
}, [isRetroMode]);

Every 800ms, a new line is added.
When all lines are shown, it waits 3 seconds, then resets the terminal.

The Styling
I used CSS to get the neon green text, dark background, and blinking cursor. Here’s a snippet:

.terminal-line.command {
  color: #00ff41;
}
.terminal-line.output {
  color: #cccccc;
  margin-left: 1rem;
}
.terminal-cursor {
  color: #00ff41;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

Result
The result is a dynamic, animated terminal panel that brings a retro vibe to my portfolio. It’s all handled with React state and effects, making it easy to customize and integrate with the rest of my site.

[Boost]

Ngawang Tenzin — Fri, 05 Sep 2025 11:00:20 +0000

Ngawang Tenzin

Sep 5 '25

My Portfolio Journey: v0 to v1 – Feedback Welcome!

#beginners #react #typescript #aws

Comments 9

1 min read

My Portfolio Journey: v0 to v1 – Feedback Welcome!

Ngawang Tenzin — Fri, 05 Sep 2025 10:55:53 +0000

Hi DEV Community!
I’m excited to share my personal portfolio project and its evolution from v0 to v1. I’d love your feedback, suggestions, and thoughts to help me improve further!

🔗 Portfolio Links
v0: [https://cbms26.github.io/portfolio-v0/]
v1: [https://cbms26.github.io/portfolio-v1/]

✨ What’s New in v1?
Retro/Professional theme toggle
Scroll indicator with “Reached End” message
Centered, clickable action buttons
Custom retro footer
Retro specs overlay on profile image (with glitter effect!)
Improved UI/UX and responsive design

🛠️ Tech Stack
React (Vite + Typescript) - used for the first time
CSS (custom themes for retro)

💬 Feedback Wanted!
What do you think about the design and user experience?
Any suggestions for new features or improvements?
How’s the performance and accessibility?
Which style would you prefer?

🙏 Thank You!
Your feedback means a lot and will help me grow as a developer.
Drop your comments below or connect with me!

CSS Art: My Home Office Setup

Ngawang Tenzin — Sat, 26 Jul 2025 22:27:11 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

This CSS art piece represents my actual (or somewhat :3) home office setup! Since I haven't worked in a traditional office culture yet, I decided to recreate my personal workspace - the place where I code, learn, and build projects. The interactive door concept came from the idea that behind every developer's door is their personal sanctuary, their command center where magic happens.

Demo

Live Demo

How it works:

Click the door knob to enter my home office
Realistic setup: Gaming chair, dual monitor configuration (portrait + landscape), laptop on cooling stand, speakers, and my beloved lavender plant
Personal touch: Everything positioned exactly like my real workspace
Interactive experience: Smooth door fade-out reveals the complete setup

Journey

This project was both a technical challenge and a personal documentation of my coding space!

Personal Connection

This isn't just CSS art - it's a digital twin of where I actually spend my days learning web development. The dual monitor setup helps me code efficiently, the gaming chair keeps me comfortable during long study sessions, and that little lavender plant makes the space feel more alive.

Why This Setup:

Dual monitors: Portrait monitor for code, landscape for documentation/browser
Gaming chair: Because comfort matters during long coding sessions
Laptop + cooling stand: My trusty development machine
Lavender plant: Adds some life and calm to the workspace (and smells amazing!)
Speakers: For those coding playlists that keep me focused

Technical Highlights:

Pure CSS Art: No images - everything built with CSS shapes, gradients, and clever positioning
Realistic proportions: Spent time getting the monitor sizes and desk dimensions right
Z-index mastery: The chair sits behind everything (z-index: -1) to show the "entering the room" perspective
Interactive door: Smooth transitions make the experience feel natural
5-star chair base: Detailed gaming chair with proper legs using box-shadow technique

CSS Techniques I'm Proud Of:

Complex Chair Design

.chair-base::after {
    content: '';
    width: 3px;
    height: 25px;
    background-color: #333;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow:
        25px 0 0 #333,
        -25px 0 0 #333,
        12px 22px 0 #333,
        -12px 22px 0 #333;
}

Mounting Arm for monitors

.monitor-arm::before {
    content: '';
    width: 250px;
    height: 8px;
    background-color: #666;
    position: absolute;
    top: 30px;
    left: -121px;
}

What I Learned???

How to layer elements with z-index for realistic depth
Creating complex shapes with pseudo-elements
The importance of getting proportions right for believability
How personal touches (like the plant) make technical art more engaging
Advanced positioning techniques for creating perspective

License

This project is open source and available under MIT License.

Tangerine Hub: A Modern Office Intranet with Glassmorphism Design

Ngawang Tenzin — Mon, 21 Jul 2025 04:50:56 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created a modern office intranet homepage that serves as a central hub for employees. The design features a clean, professional layout with a dashboard-style interface that includes company announcements, learning events, performance metrics, and team spotlights. The goal was to build an engaging workspace that helps employees stay connected and productive.

The intranet includes:

Dynamic hero section with live clock and weather widgets
Six-card dashboard grid with essential workplace information
Sidebar with recent activity timeline and team member highlights
Breadcrumb navigation for clear user orientation
Quick action buttons for common tasks
Responsive design that works on all devices

Demo

Live Demo: https://cbms26.github.io/dev-front-end-challenge-office-space-/

Source Code: https://github.com/cbms26/dev-front-end-challenge-office-space-

Journey

This project taught me the importance of balancing information density with visual breathing room. I started with a content-heavy layout but learned that professional enterprise applications need generous white space to maintain readability and user focus.

Key design decisions I'm proud of:

Glassmorphism effects - Used backdrop filters and transparent overlays to create depth while maintaining the clean aesthetic
Container width constraints - Added a max-width of 1400px with centered content to prevent the layout from becoming too wide on large screens
Color strategy - Built the entire design around an orange theme (#ff6b35, #f7931e) that feels energetic yet professional
Responsive grid system - Created a flexible dashboard that gracefully adapts from 3 columns to single column on mobile devices
Navigation breadcrumbs - Implemented clear navigation paths to help users understand their location within the intranet structure

The biggest challenge was finding the right balance between displaying lots of workplace information without overwhelming users. Through iterative spacing improvements, I learned that good design is often about what you don't show as much as what you do.

Technical highlights include CSS Grid for the dashboard layout, flexbox for component alignment, and smooth hover transitions that provide visual feedback without being distracting.

Degrees Don’t Define Understanding

Ngawang Tenzin — Fri, 25 Apr 2025 01:17:02 +0000

My Brief Realization

I finished my Bachelor’s back in 2020. Now, in just a few weeks, I’ll be done with my master’s too.

But honestly? Even with all these qualifications, I still feel like I don't really know what I've learned or how to apply most of it. 'Yes, I did multiple projects, both individual and as team', but my brain's been stuffed with so much sub-information that it's hard to even tell what truly stuck.

Somewhere along the way though, I realized one thing.
What I genuinely enjoyed wasn't tied to any subject or course; it was just coding. Not frontend, backend, game dev, or AI in particular; just the joy of coding itself.
I just wanted to build to understand how things actually work behind the scenes like in apps, systems or software. That curiosity still drives me and that's what made me feel alive.

But here's the part that bugs me now;
Why can't it be simple to just code and learn?
There are like hundreds of languages out there. Every single one has its own weird syntax, its own rules. I get that each one was made for a reason; different needs, different platforms, different eras, and they all have their purpose.
But sometimes, it feels like all that complexity just pushes people away from the core joy of coding. Like, what if there was one universal language?

Maybe one day, when quantum computers finally work as we dream, and the so-called "God equation" gets solved; we will also reach a point where there's one universal coding language. One way to build and create without worrying about all the syntaxes, just pure logic and pure creativity.

Anyways, I don’t have it all figured out yet.
But I know this much: I still want to code. I still want to learn how things work. And maybe that’s enough for now.

Currently, I’m diving into the command line, shell scripting, and Linux systems — just trying to get closer to how things really run behind the scenes.
It’s not flashy, but it feels real. Feels right.