DEV Community: Heghine

My Portfolio Development Roadmap for Freelance Web Development

Heghine — Thu, 14 May 2026 22:19:32 +0000

Source

GitHub: https://github.com/ZeroaNinea

Introduction

One of the most important lessons I've learned is that potential clients want to see real examples of your work.

Knowing many technologies is valuable because it allows you to apply to a wider range of projects and work with different technical stacks.

At the same time, technologies alone are not enough.

Most clients are not developers. They usually do not understand the technical details of software development and are primarily interested in whether you can solve their business problem.

That is why portfolio projects are so important.

A strong portfolio provides concrete evidence that you can build real products such as business websites, SaaS applications, e-commerce stores, and complex web applications.

In practice, both factors matter:

Technical knowledge helps you qualify for more opportunities.
Portfolio projects demonstrate that you can deliver real results.

My goal is to build projects that showcase both technical breadth and practical business value.

Projects I Have Already Built

I already have built several projects for my portfolio, you can see them in my profile README.md on GitHub.

Animated draggable modal component in React with a rainbow button;
Reusable Command Palette component with color customization component in Angular;
Real-Time Chat Application similar to Discord (Angular + Angular Material + Node.js + Redis + Socket.io);
Site Portfolio (Angular + Angular Material + custom SVG animations + Three.js);
Real Estate Agency website in Vue.js (currently using mocked data, with a backend planned).

But they are still not enough. I have accomplished only the half of my initial plan. I still need more reusable components and full-fledged projects.

Modal Window in React

It is a draggable modal window in React. I used Tailwind and Vite as additional technologies.

Rainbow Button

When the user opens the page they first see a button with a rainbow gradient that infinitely moves to the left. The button increases its scale on hover, and plays a ripple effect when clicked.

I have created a separate component for the ripple button, so it's reusable. The button is completely customizable, and it was intended to use it with Tailwind.

Modal Window

After the click the application opens the modal window. The user can drag it using the icon with arrows, and close it by clicking on the cross icon or on the background overlay.

The modal window appears and disappears with animations, and on subsequent clicks on the button, the window appears in the same place where it was the previous time.

Command Palette Component in Angular

It is command palette component where the user can choose custom commands that it should execute. There is also a color palette customization component in this project that allows the user to control the colors of the website. I did not use Angular Material for this project, so all components here are implemented customly with SCSS.

The demonstration starts with a page with:

"Open Command Palette" button;
"View on GitHub" button;
A short text with usage guide;
And a Color Theme Setup component that allows the user to manipulate with all the colors on the website reactively.

"Open Command Palette" Button

When the user clicks on this button, it plays a ripple effect, and opens the CommandPalette component.

The user can select commands with Up and Down Arrow keys, and execute them with the Enter key.

All commands are custom functions that user should have to create earlier. When the user inputs something, it filters the commands.

The user can close it my clicking on the overlay or entering a command.

"View on GitHub" Button

When the user hovers on the "View on GitHub" button, it changes its background-color and becomes lighter.

When the user clicks on the "View on GitHub" button, the application plays a ripple effects, and redirects them to the source code of this project on GitHub.

Color Setup

Here the user can input a color in hex format or pick the colors with the browser color picker.

Real-Time Chat Application

I have built this project in Angular and Node.js. I used Angular Material for the frontend. I store sessions in a Redis database, and provide real-time interactions in Socket.io.

Currently the backend of this project does not work because of problems with my MongoDB clusters. But I am still working on it. Recently I added a dark mode.

I also have issues that Tenor stopped being supported by Google, so I should switch to GIPHY.

This project allows users:

to create accounts, and manipulate with their account data;
to create chat rooms and channels;
to add friends and create private chat rooms with their friends;
to pick emojis;
to pick GIFs and add or remove them from favorites;
to create custom roles for public chat rooms with different permissions.

Site Portfolio

I have build this website in Angular and Angular Material. I used CSS animations, custom SVG animations and Three.js for visual effects in this project.

This project contains five sections that have individual color palettes. They have fade in and fade out effects controlled by single animation service called in the AppComponent.

There is also an animated sticky header at the top of the screen.

Home: Orange Light

This section has animated triangles on the background of three colors: blue, green and pink.

There is a "Hi, I'm Heghine." text as a title, and "Full-stack web developer." text as a subtitle. The subtitle animates with fade in bottom effect when the page reloads.

There is a down arrow icon at the bottom of the HeroComponent. If the user clicks on it, it smoothly scrolls down to the "About" section.

About: Blue Dark

Each paragraph of the about section and the entire section animates with a fade in right animation, when the user scrolls to the component.

There is a "Building interactive apps with style" text with typewriter effect there. The effect activates with an intersection observer too.

There are six orbiting parallelepipeds with pulsing blue shadow effect on the left side of the component. When the user hovers on them, they move further apart and the background shadow turns pink. There is also a button with a car icon that appears at the center of parallelepipeds only when the user hovers on them.

If the user clicks on the car button, the application scrolls down to the car section that appears only on click. That section displays a 3D model of BMW M3 GTS.

Tech Stack: Green Light

The "Tech Stack" section has animated cyber lines effect on its background. It is divided by tabs. There are six of them:

Fronted,
Backend,
Full-stack,
Real-time
DevOps,
and Testing & Quality.

Each tab contains related major technologies that I know. Each technology icon is placed inside a technology element. Each technology element is a Drag & Drop Angular Material component. The user can drag and drop them, only in a framework of one tab.

If the use clicks on a technology element it expands, and shows a shot explanation of that specific technology. The user can close it by clicking on the same button again, or on different a different button. If the user clicks on a different button, the new one opens, and the old one closes.

The tab buttons are located at the left part of the component under the title. There is also a cross icon button at the left side of the title.

If the user clicks on the cross icon button, it changes its icon from cross to three vertical dots, and closes tab buttons. The user can open them again by clicking on the three vertical dots icon button again.

Projects: Pink Dark

Currently there are only two projects in this section, but I plan to add my other projects here soon.

Real-Time Chat App;
UI Elements.

I have built custom unique card elements to for the projects.

Each card contains, a title, two 3D cube elements rotating in the same place, a pulsing background shadow effect, and a drifting plane element with a screenshot of that project.

When the user hovers on a card, the cubes increase their scale, a pink like appears at the bottom of the title, and the background shadow becomes pink.

When the user clicks on a card, the application plays a ripple effect, and redirects them to the project.

Contacts: Yellow Light

The "Contacts" section also should be updated. It only has two circular ripple buttons:

GitHub;
Gmail.

I already have a lot of contacts, and I want to add them too.

Real Estate Agency Website

This is a real estate agency project in Vue.js and Bootstrap. It's intended to have an admin panel with CURD functionality for properties. But currently I am mocking the data.

Currently, it only has two pages — "Home" and "Listings."

The home page has following components:

Header,
Hero,
Featured Properties,
Why Choose Us,
What Our Clients Say,
Footer.

The header is a burger sticky header similar to the one in my portfolio site.

I got the photos from this website: https://static.photos/

I have also created two directives v-reveal and v-ripple.

Hero

The "Hero" section contains a title: "\"Find Your Dream Home\"; a subtitle: \"Browse properties in your area\"; a search form; and a background with property image and an overlay animated with a transparent black gradient."

Featured Properties

This section has custom cards, when the user hovers on them they zoom their image. All buttons on this website have a ripple effect.

The "View All Properties" redirects to the "Listings" page, but the "View Details" button does not redirect anywhere yet. However, I will start creating a page for a single property soon.

Each card is animated with v-reveal directive. When the user scrolls to one of them it appears with a fade in effect.

Why Choose Us & What Our Clients Say

Both of these sections contain elements that move up cast a shadow on hover.

Footer

The footer has a title and subtitle: "\"Find Your Perfect Home Today\" and \"Browse our listings or get in touch with our team for personalized help.\" And it has two ripple buttons: \"Brows Properties\" and \"Contact Us.\" And a blue to purple gradient on the background."

And the second "Listings" page contains the following content:

Header,
Hero,
Filter,
Listings,
Pagination,
Footer.

The header and the footer are the same as in the "Home" page.

Header, Hero and Filters

The filters work reactively and the "Hero" has the same animation as the "Hero" section on the "Home" page.

Listings & Pagination

These are the same cards as in the FeaturedProperties component.

My Portfolio Goals

My goal is to build a portfolio that demonstrates my ability to create different types of websites and web applications that businesses commonly need.

I want potential clients to see concrete examples of my work and quickly understand that I can build solutions for wide range of use cases.

The main types of projects I want to include in my portfolio are:

Business websites — such as estate agency website with listings, filtering, and search functionality.
Landing pages — modern marketing pages destined to present products and services clearly and effectively.
SaaS applications — full-stack software products with authentication, dashboards, and scalable backend architecture.
E-commerce websites — online stories built either with custom technologies or platforms such as Shopify.

In addition to complete applications, I also enjoy creating reusable UI components and more technically complex projects, such as real-time applications.

By building projects in these categories, I aim to demonstrate both technical versatility and the ability to solve practical business problems.

My long-term goal is to work directly with clients as a freelance web developer and eventually create my own software products.

Long-Term Vision

My immediate goal is to start working directly with clients as a freelance web developer.

I want to build websites and web applications that help businesses solve real problems while continuing to expand my technical skills and professional experience.

In the long term, I plan to use the knowledge and experience I gain from client work to create my own software products.

For me, portfolio projects are more than practice exercises. They are steps toward financial independence, professional growth, and the ability to build software that provides real value to others.

Creating a Command Palette Component in Angular (Part 2)

Heghine — Sun, 26 Apr 2026 22:43:23 +0000

Command Palette

Sources:

GitHub: https://github.com/ZeroaNinea/Command-Palette-Angular
GitHub Pages: https://zeroaninea.github.io/Command-Palette-Angular/

In this part, I implement the actual CommandPalette component and connect it to the dynamic theming system from Part 1. The result is a reusable, keyboard-driven UI component that can execute custom commands.

Command Model and Examples

Each command is an object that combines metadata (label, keywords) with behavior (handler). This allows the palette to remain generic while executing arbitrary logic.

There is a simple list of commands in the app.ts file: two alerts and commands that change the colors of palettes.

I'm planning to create more UI elements in the future, and I will add them as commands in the CommandPalette.

  commands: Command[] = [
    // id: string;
    // label: string;
    // keywords?: string[];
    // shortcut?: string;
    // payload?: unknown;
    // handler?: (payload?: unknown) => void;
    {
      id: 'alert-1',
      label: 'Alert 1',
      keywords: ['alert', '1'],
      shortcut: 'a1',
      handler: () => alert('Alert 1'),
    },
    {
      id: 'alert-2',
      label: 'Alert 2',
      keywords: ['alert', '2'],
      shortcut: 'a2',
      handler: () => alert('Alert 2'),
    },
    {
      id: 'primary-red',
      label: 'Set Primary to Red',
      handler: () => this.primary.set('#ff4d4f'),
    },
    {
      id: 'primary-blue',
      label: 'Set Primary to Blue',
      handler: () => this.primary.set('#4FC3F7'),
    },
    {
      id: 'reset',
      label: 'Reset Colors',
      handler: () => {
        this.primary.set('#4FC3F7');
        this.secondary.set('#2196F3');
        this.tertiary.set('#086CBC');
      },
    },
  ];

Importing the `CommandPalette` Component

The commands' list is passed to the CommandPalette component as the commands array.

  <app-command-palette
    [style.--cp-bg]="neutralPalette().bg"
    [style.--cp-surface]="neutralPalette().surface"
    [style.--cp-border]="neutralVariantPalette().border"
    [style.--cp-text]="neutralVariantPalette()['100']"
    [style.--cp-accent]="primaryPalette().accent"
    [style.--cp-hover]="neutralPalette().hover"
    [isOpen]="isOpen()"
    [commands]="commands"
    (isOpenChange)="isOpen.set($event)"
    (commandSelected)="onCommand($event)"
  ></app-command-palette>

The CommandPalette component also emits isOpenChange and commandSelected events. Accordingly:

The isOpenChange event is fired when the user changes the state of the CommandPalette component from shown to hidden, and back. The isOpenChange event is used to notify the parent when the palette should close (e.g., after selecting a command or clicking outside).
And the commandSelected event works when the user selects a command. It emits an entire element of the command from the commands array, and passes the required .payload to the command handler if it exists.

  onCommand(cmd: Command) {
    this.commandSelected.emit(cmd);
    cmd.handler?.(cmd.payload);
    this.isOpenChange.emit(false);
  }

  close() {
    this.isOpenChange.emit(false);
  }

Command Filtering and Keyboard Navigation

Not all commands are visible at the same time. If the user inputs something into the command palette, it filters visible commands. There are two properties that used for command filtering inside the CommandPalette component that participate in the filtering logic: query and filtered.

  @Input() commands: Command[] = [];
  @Input() isOpen: boolean = false;

  @Output() commandSelected = new EventEmitter<Command>();
  @Output() isOpenChange = new EventEmitter<boolean>();

  @ViewChild('searchInput') input!: ElementRef<HTMLInputElement>;

  query = '';
  filtered: Command[] = [];
  activeIndex = 0;

query: contains the value that user inputs into the component input.
filtered: it's the array of filtered commands.

The visibleCommands getter returns the filtered array if the user did not input queries. Otherwise, it will return the commands array received from the parent component.

  get visibleCommands(): Command[] {
    if (!this.query) return this.commands;
    return this.filtered;
  }

The filter filters commands by their label and keyboards.

  filter() {
    const q = this.query.toLowerCase();

    this.filtered = this.commands.filter(
      (cmd) =>
        cmd.label.toLowerCase().includes(q) ||
        cmd.keywords?.some((k) => k.toLowerCase().includes(q)),
    );

    this.activeIndex = 0;
  }

The filter method is bound to the input event, and it triggers only when the user inputs something.

@if (isOpen) {
  <div (click)="close()" class="overlay">
    <div (click)="$event.stopPropagation()" class="palette">
      <input
        #searchInput
        class="search"
        placeholder="Type a command..."
        [(ngModel)]="query"
        (input)="filter()"
        (keydown)="onKeydown($event)"
      />
      <div class="list">
        @for (command of visibleCommands; track $index; let i = $index) {
          <div class="item" [class.active]="i === activeIndex" (click)="onCommand(command)">
            {{ command.label }}
          </div>
        }
      </div>
    </div>
  </div>
}

There is also an onKeydown method that is bound to the keydown event. It works when the user focuses on the input and uses any key. But its logic only uses the ArrowDown, ArrowUp, Enter and Escape keys.

  onKeydown(e: KeyboardEvent) {
    const list = this.visibleCommands;

    if (!list.length) return;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex + 1) % list.length;
    }

    if (e.key === 'ArrowUp') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex - 1 + list.length) % list.length;
    }

    if (e.key === 'Enter') {
      e.preventDefault();
      this.onCommand(list[this.activeIndex]);
    }

    if (e.key === 'Escape') {
      this.close();
    }

    setTimeout(() => {
      const el = document.querySelector('.item.active');
      el?.scrollIntoView({ block: 'nearest' });
    });
  }

The class .active is assigned to the element that has the same index in the visibleCommands array as the value of the activeIndex method.

When the user presses the ArrowDown or ArrowUp keys, the code decrements and increments the activeIndex, but it cannot be less than 0 and more than the length of the visibleCommands array.

The Enter key executes the function and closes the CommandPalette component. And the Escape key just closes it.

Then after iterating the conditional operations the application scrolls to the new active element.

`ngOnChanges`

The ngOnChanges lifecycle hook is used to react to changes in input properties. In this case, it listens for changes to the isOpen input.

When the command palette is opened, its internal state is reset:

the search query is cleared,
the filtered commands list is reset,
the active index is set to the first item.

This ensures that every time the palette opens, it starts in a clean and predictable state instead of preserving the previous search.

`ngAfterViewChecked`

The ngAfterViewChecked lifecycle hook runs after Angular updates the component’s view.

It is used here to automatically focus the input field when the command palette is opened.

This allows the user to start typing immediately without needing to click on the input manually.

Afterword

In this part, I implemented the core logic of the command palette: command definition, filtering, and keyboard navigation. The component is fully functional and can execute custom commands while remaining reusable and independent from specific business logic.

One of the key ideas behind this implementation is treating commands as objects that combine metadata (label, keywords, shortcut) with behavior (handler). This allows the component to stay generic while supporting a wide range of use cases.

The command palette is also integrated with the dynamic theming system created in the previous part, which makes it easy to adapt its appearance without changing the component itself.

There are still many possible improvements:

grouping commands by category,
adding icons,
highlighting matched search text,
improving accessibility and keyboard support.

I plan to continue expanding this project and use the command palette as a central interaction system for future UI components.

Creating a Command Palette Component in Angular (Part 1)

Heghine — Tue, 21 Apr 2026 22:17:18 +0000

Dynamic Palette Generation

Sources:

GitHub: https://github.com/ZeroaNinea/Command-Palette-Angular
GitHub Pages: https://zeroaninea.github.io/Command-Palette-Angular/

This is the first part of a series where I build a reusable and customizable command palette in Angular.

Since the component needs to support different themes, I started by creating a dynamic color palette generator. It takes a set of base colors and produces consistent palettes for primary, secondary, tertiary, neutral, and error roles.

Palette Generation

I've created a palette generation utility in the project's src/app/shared/utils/palette.util.ts directory. It uses the chroma-js library, and exports a single function createPalette that takes one parameter the base color of a string type, then it returns an object of Palette type.

The function generates a scale of 10 colors (from 50 to 900), similar to common design systems. These are then mapped to semantic roles like background, surface, text, and accent.

Here is the example of the code:

import chroma from 'chroma-js';
import { Palette } from '../../../types/palette.alias';

export function createPalette(base: string): Palette {
  const scale = chroma
    .scale([chroma(base).brighten(3), base, chroma(base).darken(3)])
    .mode('lab')
    .colors(10);

  return {
    50: scale[0],
    100: scale[1],
    200: scale[2],
    300: scale[3],
    400: scale[4],
    500: scale[5],
    600: scale[6],
    700: scale[7],
    800: scale[8],
    900: scale[9],

    // Semantic roles.
    bg: scale[0],
    surface: scale[8],
    surfaceAlt: scale[7],
    border: scale[6],
    text: chroma.contrast(scale[0], '#fff') > 4.5 ? '#fff' : '#000',
    textMuted: scale[3],
    accent: scale[4],
    accentHover: scale[3],
    accentActive: scale[2],

    // State colors.
    hover: chroma(base).brighten(0.5).hex(),
    active: chroma(base).darken(0.5).hex(),
    focus: chroma(base).saturate(1).hex(),

    // Base
    base: base,
  };
}

Updating the Palettes Reactively

And then in the, in the root of the project, in the app.ts file. I passed six base colors to the createPalette function as default values. I used signals and the computed function to reactively update the palettes later, when the user inputs new colors.

Here's how palettes are computed reactively using Angular signals:

import { Component, computed, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { createPalette } from './shared/utils/palette.util';

import { Palette } from '../types/palette.alias';

import { CommandPalette } from './command-palette/command-palette';
import { ColorInput } from './color-input/color-input';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, CommandPalette, ColorInput],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  protected readonly title = signal('Command-Palette-Angular');

  primary = signal('#4FC3F7');
  secondary = signal('#2196F3');
  tertiary = signal('#086CBC');
  neutral = signal('#929CA6');
  neutralVariant = signal('#6E8E9D');
  error = signal('#E01B24');

  primaryPalette = computed<Palette>(() => createPalette(this.primary()));
  secondaryPalette = computed<Palette>(() => createPalette(this.secondary()));
  tertiaryPalette = computed<Palette>(() => createPalette(this.tertiary()));
  neutralPalette = computed<Palette>(() => createPalette(this.neutral()));
  neutralVariantPalette = computed<Palette>(() => createPalette(this.neutralVariant()));
  errorPalette = computed<Palette>(() => createPalette(this.error()));
}

After that I added the ColorInput component that reactively updates the chosen colors and emits them back to the root of the project.

The ColorInput component contains four elements positioned absolutely, label, .text-overlay, .ripple and .color-picker-overlay:

label: it's the label of the input element it raises up when user hovers or focuses on the input.
.text-overlay: overlays the text of the input when it is lowered, and disappears on focus or hover, when the label raises up.
.ripple: provides a ripple effect.
.color-picker-overlay: overlays the color picker input, but it has a pointer-events: none, it's only used for changing the color of the input on hover.

It also has two inputs .color-text and .color-picker.

The .color-text is needed to input colors as a text.
And the .color-picker uses the default browser color picker to input colors with a visual interface.

They are both working and there is no big difference which of them to use. They are both emitting the chosen color back to the App component.

<div class="input-container">
  <label>{{ label }}</label>
  <div class="text-overlay"></div>

  <div class="input">
    <input
      type="text"
      [value]="value"
      (input)="onInput($any($event.target).value)"
      class="color-text"
    />

    <div class="color-picker-wrapper" (click)="createRipple($event)">
      <input
        type="color"
        [value]="value"
        (input)="onInput($any($event.target).value)"
        class="color-picker"
      />
      <span class="ripple"></span>
      <div
        [style.background]="
          'color-mix(in oklab, var(--cp-base) 0%, ' + getColorPickerOverlayColor() + ' 20%)'
        "
        class="color-picker-overlay"
      ></div>
    </div>
  </div>
</div>

The most interesting part is that the .color-picker-overlay's color is calculated dynamically based on contrast. If the base color is dark, a lighter overlay is used, and vice versa. This ensures the hover effect remains visible regardless of the selected color.. It takes the base color, that is actually the value of the input element, and checks how light or dark it is. If it's light then it will make the overlay darker, and if it's dark the overlay will become lighter.

The .ts file of the ColorInput component looks like this:

import { Component, EventEmitter, Input, Output } from '@angular/core';

import chroma from 'chroma-js';

@Component({
  selector: 'app-color-input',
  imports: [],
  templateUrl: './color-input.html',
  styleUrl: './color-input.scss',
})
export class ColorInput {
  @Input() label = '';
  @Input() value = '#4FC3F7';
  @Output() valueChange = new EventEmitter<string>();

  getColorPickerOverlayColor() {
    return chroma.contrast(this.value, '#fff') > 4.5 ? '#fff' : '#000';
  }

  onInput(value: string) {
    this.valueChange.emit(value);
  }

  createRipple(event: MouseEvent) {
    const wrapper = event.currentTarget as HTMLElement;
    const ripple = wrapper.querySelector('.ripple') as HTMLElement;

    const rect = wrapper.getBoundingClientRect();

    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    ripple.classList.remove('active');
    void ripple.offsetWidth;
    ripple.classList.add('active');
  }
}

And finally, I call the ColorInput component in the App component’s template six times, and pass them the CSS variables, the base color and accept the emitted new color.

        <app-color-input
          label="Primary"
          [value]="primary()"
          (valueChange)="primary.set($event)"
          [style.--cp-bg]="neutralPalette().bg"
          [style.--cp-text]="primaryPalette().text"
          [style.--cp-accent]="primaryPalette().accent"
          [style.--cp-border]="primaryPalette().border"
          [style.--cp-surface]="primaryPalette().surface"
          [style.--cp-base]="primaryPalette().base"
          [style.--cp-input-border]="primaryPalette()['300']"
          [style.--cp-input-label]="primaryPalette()['900']"
          [style.--cp-label-muted]="neutralPalette()['600']"
          [style.--cp-input-text]="neutralVariantPalette()['900']"
          [style.--cp-input-ripple]="primaryPalette()['100']"
        ></app-color-input>

Afterword

In the next part, I'll build the actual command palette (similar to VS Code's Ctrl + Shift + P), using this theming system. The goal is to make it fully customizable and reusable. It will allow users to create their own custom commands. They should name them and pass functions that they want to execute when the command it entered.

That component will be completely customizable. That's why I needed to create a color theme setup component first.

I Applied to Dozens of Freelance Developer Jobs on LinkedIn — Here's what Happened

Heghine — Wed, 08 Apr 2026 06:15:25 +0000

This week, my LinkedIn profile appeared 877 times.

I spent the last few days actively applying to freelance developer posts — sending messages, writing emails, and reaching out to people for React, Angular, and full-stack developers.

For long time, I didn't think deeply about the process of getting a job. I thought that building projects and learning new technologies would somehow help me start working as a freelancer.

It wasn't.

So instead of continuing to learn endlessly, I decided to do something different: I started treating LinkedIn like a real opportunity source — and began applying consistently.

What happened next was surprisingly different from what I expected.

What I Actually Did

Instead of just scrolling or learning passively, I started taking action:

Applied to multiple freelance posts every day;
Sent emails and LikedIn DMs;
Shared my work (my Real-Time Chat App and portfolio);
Shared conversations with potential clients.

I don't want to feel "ready." I just started.

What I Learned

1. Most People Don't Reply

This was the first thing I noticed. You can send multiple messages, and get no response at all. At first. it feels like rejection. But it's not.

I just how things work.

People are busy;
Posts get flooded with messages;
Many applications are ignored.

This is normal.

2. Timing Matters More Than I Expected

Applying early makes a big difference.

Posts that are:

Recently published;
Have fewer comments.

Are much more likely to get a response.

If you apply late, you're just one of many.

3. Messaging Matters

At first, I wrote very genetic messages. They didn't work well. What I worked better was being clear and direct:

What I can build;
What I've already built;
How I can help with their project.

People don't want long introductions. They want to understand quickly if you're useful.

4. A Board Tech Stack Helps — But Not in the Way I Expected

One unexpected advantage I had was knowing multiple frameworks. Since I've worked with:

Angular;
React;
React Native;
Next.js;
Vue.js;
Nest.js;
Node.js.

I didn't have to skip many posts.

I could apply to wide range of opportunities:

Frontend;
Full-stack;
Sometimes even backend-focused roles.

But this doesn't mean you need to learn everything. What actually matters is:

Being able to build real things.

The tech stack just gives you more entry points.

Real Conversations Started to Happen

After some time, I started getting responses.

Not many — but enough to notice a pattern.

I had a conversation about a JAMStack role and went through an interview.
I connected with other developers.
Some people told me they might reach out in the future.

Nothing immediate came out of it, but it felt like I was no longer just sending messages into nothing.

Eventually, I started having actual conversations with potential clients.

In one of them, I was asked:

"What are your charges for an app?"

It wasn't surprising — just a bit unexpected how quickly the conversation moved to pricing.

I tried to understand the project first and asked about the scope.

But they asked again.

So I gave a simple range:

basic MVP: around $300–800

They said they would get back to me. And maybe they will, maybe they won't. But that wasn't the important part.

The important part was that the process had changed:

From applying to having real discussions.

Advice If You're Starting

Don't wait until you feel ready;
Apply even if you don't match every requirement;
Build at least one real project;
Keep sending messages, even if most don’t reply.

Consistency matters more than perfection.

Afterword

I'm currently building and sharing my work publicly, including a Real-Time Chat Application and other ongoing projects.

I'm also open to freelance opportunities.

GitHub: https://github.com/ZeroaNinea/
Portfolio: https://heghine-app.netlify.app

I Built a Real-Time Chat App From Scratch — Then Realized That Wasn't Enough

Heghine — Mon, 30 Mar 2026 05:52:48 +0000

Source

GitHub: https://github.com/ZeroaNinea/Real-Time-Chat-App

Why I Built It

I started this project as a simple pet project to help me get a job.

I built a real-time chat application from scratch, solving problems step by step and turning it into something that actually worked.

But after finishing it, I didn't immediately start applying.

Instead, I thought:

"I need to learn more first."

So I spent the next seven months learning frameworks like React, Vue, Next.js, and Nest.js.

Only later did I realize something important:

I could have already started looking for a job.

After that, I spent two more months on LinkedIn and writing posts, but still didn't get results.

That's when it became clear:

Building projects is important.
Learning is important.
But knowing how to present yourself and reach people matters just as much.

The Biggest Challenge: WebSockets and Structure

One of the hardest parts of the project was working with WebSockets using Socket.io.

At the time:

I didn't fully understand how it worked.
I couldn't properly connect users to rooms.
all my Socket.io logic was in one huge file.

It quickly became difficult to manage.

The real issue wasn't just bugs — it was structure.

After refactoring:

I split the logic into smaller parts
separated responsibilities
made the system easier to understand

That was a turning point.

Mistakes I Made

A major mistake was not clearly separating real-time and non-real-time logic.

I relied heavily on WebSockets early on, which led to:

Mixing different types of functionality.
Unclear architecture.

If I were to rebuild it, I would:

Use REST APIs for standard operations.
Use WebSockets only where real-time updates are necessary.
Define clear boundaries from the beginning.

What I'd Improve

There's still a lot I want to improve:

Features

File uploads (images, videos, text files).
Highlighting the current channel.
Customizable themes (including dark mode variants).
Movable UI elements.

UX

Better message display and layout

Architecture

End-to-end encryption.
A separate service for encryption key rotation.

What I Learned

The biggest lesson wasn't technical.

It was this:

Building something real is necessary — but it's not enough on its own.

You also need to:

Show your work.
Communicate clearly.
Reach the right people.

Otherwise, even a solid project can go unnoticed.

Afterword

This project became more than just a chat app.

It taught me:

How to build real systems.
How to deal with complexity.
And how important visibility is.

If you're learning development, don't just build —
make sure people can actually see what you've built.

Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router

Heghine — Fri, 20 Mar 2026 13:43:58 +0000

Source: https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example

Setting up a modern React project can quickly turn into dependency chaos — especially when combining routing, styling, and internationalization.

In this guide, you'll build a clean, production-ready setup using:

⚛️ React
⚡ Vite
🎨 Tailwind CSS
🌍 i18next
🧭 TanStack Router

⚠️ Warning (Version Compatibility)

Depending on your Vite version, some dependencies may not install cleanly.

If you run into issues:

npm i --force

Or consider using a slightly older version of Vite.

🚀 Step 1 — Create the Project

npm create vite@latest React-Vite-i18next-@tanstack/react-router-Tailwind-Example -- --template react-ts

🎨 Step 2 — Install Tailwind CSS

Install Talwind and its Vite plugin.

npm i tailwindcss @tailwindcss/vite

If installation fails:

npm i --force @tailwindcss/vite

Configure Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind

@import 'tailwindcss';

🧭 Step 3 — Install TanStack Router

npm i @tanstack/react-router @tanstack/router-devtools

🔌 Step 4 — Integrate the Router

Create:

src/router.tsx

Then connect it in main.tsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';
import { AppRouter } from './router.tsx';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AppRouter />
  </StrictMode>,
);

🌍 Step 5 — Add Internationalization (i18next)

Install:

npm i i18next react-i18next

Setup i18n

Create:

src/utils/i18n/index.ts

Add your translation JSON files there.

Then import it once in your app:

import './utils/i18n';

Finally, integrate it inside your components (e.g. App.tsx).

Why This Stack?

This combination is surprisingly powerful:

Vite: instant dev server, fast builds.
Tailwind: no context switching for styling.
TanStack Router: type-safe, modern routing.
i18next: scalable internationalization.

Together, they form a minimal but production-ready architecture.

DEV Community: Heghine

My Portfolio Development Roadmap for Freelance Web Development

Source

Introduction

Projects I Have Already Built

Modal Window in React

Rainbow Button

Modal Window

Command Palette Component in Angular

"Open Command Palette" Button

"View on GitHub" Button

Color Setup

Real-Time Chat Application

Site Portfolio

Home: Orange Light

About: Blue Dark

Tech Stack: Green Light

Projects: Pink Dark

Contacts: Yellow Light

Real Estate Agency Website

Hero

Featured Properties

Why Choose Us & What Our Clients Say

Footer

Header, Hero and Filters

Listings & Pagination

My Portfolio Goals

Long-Term Vision

Creating a Command Palette Component in Angular (Part 2)

Command Palette

Sources:

Command Model and Examples

Importing the CommandPalette Component

Command Filtering and Keyboard Navigation

ngOnChanges

ngAfterViewChecked

Afterword

Creating a Command Palette Component in Angular (Part 1)

Dynamic Palette Generation

Sources:

Palette Generation

Updating the Palettes Reactively

Afterword

I Applied to Dozens of Freelance Developer Jobs on LinkedIn — Here's what Happened

What I Actually Did

What I Learned

1. Most People Don't Reply

2. Timing Matters More Than I Expected

3. Messaging Matters

4. A Board Tech Stack Helps — But Not in the Way I Expected

Real Conversations Started to Happen

Advice If You're Starting

Afterword

I Built a Real-Time Chat App From Scratch — Then Realized That Wasn't Enough

Source

Why I Built It

The Biggest Challenge: WebSockets and Structure

Mistakes I Made

What I'd Improve

Features

UX

Architecture

What I Learned

Afterword

Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router

⚠️ Warning (Version Compatibility)

🚀 Step 1 — Create the Project

🎨 Step 2 — Install Tailwind CSS

Configure Vite

Import Tailwind

🧭 Step 3 — Install TanStack Router

🔌 Step 4 — Integrate the Router

🌍 Step 5 — Add Internationalization (i18next)

Setup i18n

Why This Stack?

Importing the `CommandPalette` Component

`ngOnChanges`

`ngAfterViewChecked`