How I put clouds in my portfolio and why?

Akash Ghosh — Mon, 01 Sep 2025 09:00:24 +0000

Well, I made my portfolio and there is one feature I am proud of.

I did not plan on it initially, but there arose the reason. I thought of putting something novel that is unique to my portfolio. I pondered over the thought and then it struck, I could put my name in my portfolio and then when clicked, I could show it's meaning and that's when it hit me that I could put a cloud animation.

I chalked out the basic plan, I needed few transparent cloud images to begin with, looked up the internet, found the best ones in https://pngtree.com/so/cloud. Got 5 cloud images from there.

Now let's discuss the system, what I needed was when clicked on the CTA, I need the clouds to appear from either side and keep on moving horizontally. And I needed the full window to be used for this animation, and the clouds will appear over the existing content.

So three requirements:

Clouds should move from either direction.
Clouds should move from either side of the screen.
The viewport should the the window for the clouds.

This was the viewport stack.

/* Z-Index Structure:
   - Original background: z-index 0 (default)
   - Sky background: z-index 10
   - Component tiles: z-index 20
   - Clouds: z-index 30
   - Navbar: z-index 40 (to stay on top)
*/

Starting with the container this was the container styles.

.cloud-container {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  width: 100%;
  white-space: nowrap;
}

Then the clouds animations, or how it will appear on the screen.

/* Continuous marquee animations for clouds */
@keyframes marqueeLeftToRight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

@keyframes marqueeRightToLeft {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

@keyframes marqueeLeftToRight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

But as it was working it was time to add a few more features.
I had dark/light mode for my website I wanted the clouds background to change with the theme as well, and also add a daytime feature on it. So from dark/light it now has dark/midday/light themes.

The styles for the clouds are as follows.

/* Cloud positions and animations - continuous marquee effect */
.cloud1 {
  top: 0%;
  animation: marqueeRightToLeft 40s linear infinite;
}

.cloud2 {
  top: 15%;
  transform: scale(0.6);
  opacity: 0.9;
  animation: marqueeLeftToRight 45s linear infinite;
}

.cloud3 {
  top: 2%;
  transform: scale(0.8);
  opacity: 0.8;
  animation: marqueeRightToLeft 50s linear infinite;
}

.cloud4 {
  top: 18%;
  transform: scale(0.75);
  opacity: 0.75;
  animation: marqueeLeftToRight 55s linear infinite;
}

.cloud5 {
  top: 20%;
  transform: scale(0.7);
  opacity: 0.8;
  animation: marqueeRightToLeft 60s linear infinite;
}

and the themes

.cloud-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
}

/* Light theme cloud styles */
.light .cloud-img {
  filter: brightness(1.1);
  opacity: 0.7;
}

/* Dark theme cloud styles */
.dark .cloud-img {
  filter: brightness(0.9) hue-rotate(240deg);
  opacity: 0.6;
}

/* Dusk theme cloud styles */
.dusk .cloud-img {
  filter: brightness(0.7) hue-rotate(320deg);
  opacity: 0.6;
}

Now I get it the complexity increases, but it looks so cool.
The color scheme for the backgrounds are as follows.

**Light Theme:**
- Default: Cream (`#fdf5e0`)
- Clouds: Sky Blue (`#87CEEB`)

**Dark Theme:**
- Default: Black (`#000000`)
- Clouds: Dark Navy (`#141852`)

**Dusk Theme:**
- Default: Dark Blue (`#4E5481`)
- Clouds: Light Purple (`#d2c4f4`)

and the features were


#### Individual Cloud Behaviors
- **Cloud 1**: Right-to-left, 40s duration, top position (0%)
- **Cloud 2**: Left-to-right, 45s duration, scaled to 60%, position (15%)
- **Cloud 3**: Right-to-left, 50s duration, scaled to 80%, position (2%)
- **Cloud 4**: Left-to-right, 55s duration, scaled to 75%, position (18%)
- **Cloud 5**: Right-to-left, 60s duration, scaled to 70%, position (20%)

#### Animation Characteristics
- **Continuous Loop**: Clouds move from completely off-screen to completely off-screen
- **No Interruption**: Animation runs perpetually without stopping
- **Varied Timing**: Different speeds create natural, organic movement
- **Layered Depth**: Different scales and positions create 3D depth illusion

Here it was, everything was working perfectly.
Then it struck me, if I found it so cool, why not publish it as a public npm package.

Another planning phase now, I need to identify the files and styles that are important for the cloud animation feature. My initial plan was to display the clouds when the text আকাশ (akash) is clicked, but I cannot export it like that. I needed a cloud on/off button.

This feature adds an interactive sky background with animated clouds to your portfolio. When the user clicks on the Bengali text "আকাশ" (which means "sky"), the background transforms into a beautiful themed sky with clouds floating across the screen in continuous marquee-style movement. The animation is theme-aware and provides visual feedback to guide user interaction.

Made a extraction plan for all the files and keep it as a separate folder inside the project. The directory structure being.

react-cloud-animation/
├── src/
│   ├── components/
│   │   ├── CloudAnimation.tsx
│   │   └── ThemeToggle.tsx
│   ├── context/
│   │   └── ThemeContext.tsx
│   ├── styles/
│   │   └── animations.css
│   ├── assets/
│   │   ├── cloud1.png
│   │   ├── cloud2.png
│   │   ├── cloud3.png
│   │   ├── cloud4.png
│   │   └── cloud5.png
│   ├── types/
│   │   └── index.ts
│   └── index.ts
├── dist/ (build output)
├── package.json
├── tsconfig.json
├── vite.config.ts
├── README.md
└── CHANGELOG.md

And then the extraction ritual.


#### CloudAnimation.tsx
- **Source**: `src/components/CloudAnimation.tsx`
- **Modifications needed**:
  - Remove portfolio-specific imports
  - Make cloud image paths configurable via props
  - Add prop interface for customization
  - Export component with proper TypeScript types

#### ThemeContext.tsx
- **Source**: `src/context/ThemeContext.tsx`
- **Modifications needed**:
  - Keep core theme logic (time-based, manual override)
  - Remove any portfolio-specific dependencies
  - Ensure localStorage keys are configurable
  - Add proper TypeScript exports

#### ThemeToggle.tsx
- **Source**: `src/components/ThemeToggle.tsx`
- **Modifications needed**:
  - Ensure lucide-react dependency is properly declared
  - Add customizable styling props
  - Remove portfolio-specific styling classes

#### animations.css
- **Source**: Extract from `src/index.css` (lines 71-343)
- **Include**:
  - Cloud container styles (`.cloud-container`, `.cloud-img`)
  - Marquee animations (`@keyframes marqueeLeftToRight`, `@keyframes marqueeRightToLeft`)
  - Cloud positioning classes (`.x1`, `.x2`, `.x3`, `.x4`, `.x5`)
  - Theme-specific cloud filters (`.light .cloud-img`, `.dark .cloud-img`, `.dusk .cloud-img`)
  - Glow animations (`@keyframes subtleGlow`, `@keyframes prominentGlow`)
  - Click indicator animations (`.click-indicator`)
  - Fade animations (`@keyframes fadeIn`, `@keyframes fadeOut`)
  - Z-index structure comments and rules

Now here it was, a new project with the cloud animation ready to be published as a npm package. It was time to test it out and create a preview application for this.

Typed out a few prompts on windsurf and voila, it's up. Another challenge arose, I had two sections on the preview page for the cloud animation and as they were using the same context provider, the theme and cloud animation will all be syncing.

I did not want that, and created a separate provider and controls for the demo section. And now it was perfect.

Ans that's it, that's the story of how I put clouds in my portfolio, it fun throughout the process. I published and put it up everywhere for a little bit promotion and I'm done. I'll keep on contributing to the repo and if anyone has a idea of how to make it better, reach out to me on X.

Checkout the project at cloudanimation,
npm package

Thanks for reading this far and see you again in the next story.

that time when I had to create a npm package that didn't exist.

Akash Ghosh — Thu, 03 Jul 2025 11:22:16 +0000

While working at PhonePe, the first team I was with was the QA team. The backend devs worked from the Pune office and I was from the Bangalore office. They had built a IssueTracker bot on slack, where the QA team would report issues that they found anywhere with the developed features in staging, production and other environments. It was also for user raised issues in the live application.

I had to build the frontend which was to add an entire module called Slack Oncall. The idea was that from the application we could address the resolution to the issue raised and also see stats of how the issues are being raised, how it is being resolved and in which category there would be more issues. There was extensive data visualization in the application which i would address through recharts mostly.

One time they needed a feature for a situation, where one issue is raised for the wrong team and they could pass the issue to a team they seemed fit. With this another problem arose, we needed to keep track of the teams who have looked into this issue. And there were issues which have been passed down to 10+ teams. We needed a way to visualise this and that's how hoplist was conceptualized.

Initially we called it a "hopping list" that would be there with the issue detail, to display which teams had worked on the issue. Hopping as in the issue had hopped from one team to another. I analysed the feature request and figured a horizontal timeline will fit our requirement.

I looked up for horizontal timelines on the npm library, but there was none that fit my requirement, there were mostly vertical timelines with a lot more customization and a lot heavier than necessary. And for the UI I was working with a horizontal timeline would be the best.
I tried a few other npm libraries but everything would break in the UI and there was far more parameters than i needed.

Then I thought to myself, how hard could it be if I made a horizontal timeline component. I gave it a shot, sat down for 4 hours and made one ith minimal customization, it looked rustic, but it did fit my requirement.

And then I decided to publish it as a npm package, well that didn't happen right away, I slacked off for a few months but I published it and within the first week of publishing it, it had 300+ downloads. That metric really made me happy.

I got some feedback for the line breaking issue and decided to push an update, and now the component only returns a horizontally scrollable timeline.

So yeah my first npm package is live now and it has 128 weekly downloads as of today. Good stuff to make a dev happy.

Try out the package from https://www.npmjs.com/package/hoplist
Check out the demo at https://hoplist.akashghosh.xyz/
Play around in https://codesandbox.io/p/sandbox/mkr354

Also check out the code from https://github.com/akashleo/hoplist.

And that's a wrap, see you in another blog.

DEV Community: Akash Ghosh

How I put clouds in my portfolio and why?

that time when I had to create a npm package that didn't exist.