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.
Top comments (0)