Design That Moves — Madebyvladonacev Portfolio Overview

"Great design isn't just about first impressions. It's a solution, a feeling, and a flow."

Published by Vladonacev — UI/UX Designer & Frontend Developer.

👋 I'm Vlado Nacev, Senior Web Designer and Developer focused on UX/UI and crafting meaningful digital experiences. 🚀 Let's shape the digital future, one experience at a time. Pixel by pixel.

Welcome to the portfolio of Vlado Nacev, the creative mind behind Madebyvladonacev. This is not just a collection of projects — it's a reflection of how design and code come together to create intuitive, responsive, and brand-driven digital experiences. My mission is simple:

"To design with soul, and build with purpose."

Explore the full portfolio at — www.vladonacev.com

Every pixel matters, no matter the screen size. My portfolio was built with mobile-first principles, ensuring:

• Perfect responsiveness from smartphones to ultrawide desktops
• Optimized layout logic for tablets and touch interfaces
• Consistent UI components across breakpoints

The frontend is powered by Angular, following the latest in component architecture and reactive design patterns.

• Framework: Angular 18
• Animations: GSAP, custom scroll-based triggers
• Design Language: Material Design + Custom UI Tokens
• CSS: Tailwind CSS + SCSS modules
• Typography: Responsive scale, system fonts fallback, variable weights
• Performance: Lazy loading, image optimization, preloading strategies
• SEO: Semantic HTML, open graph tags, meta optimization

"Built with a perfect Lighthouse score in mind."

This is the full directory structure of my custom-built Angular 18 portfolio project. It showcases a modular and scalable approach, optimized for performance, animations, and clean architecture.

vladonacev.com
├── src
│ ├── app
│ │ ├────────────── core
│ │ │ └── animations
│ │ │ ├── gsap
│ │ │ └── animations.ts
│ │ ├────────────── layout
│ │ │ ├── footer
│ │ │ ├── header
│ │ │ ├── hero-section
│ │ │ ├── loading
│ │ │ └── not-found
│ │ ├────────────── pipes
│ │ │ ├── extract-domain
│ │ │ └── safe
│ │ ├────────────── features
│ │ │ ├──────────── components
│ │ │ │ ├── ads
│ │ │ │ ├── back-button
│ │ │ │ ├── contact-box
│ │ │ │ ├── cookie-consent
│ │ │ │ ├── cta-button
│ │ │ │ ├── custom-cursor
│ │ │ │ ├── divider
│ │ │ │ ├── marquee-scroller
│ │ │ │ ├── popup
│ │ │ │ ├── projects
│ │ │ │ ├── qr-code
│ │ │ │ ├── slider
│ │ │ │ ├── social-box
│ │ │ │ ├── spline-background
│ │ │ │ ├── tabs
│ │ │ │ ├── theme-toggle
│ │ │ │ └── video-about
│ │ │ └────────────── pages
│ │ │ ├── about
│ │ │ ├── blog
│ │ │ ├── branding-identity
│ │ │ ├── business-card-design
│ │ │ ├── contact
│ │ │ ├── desserts
│ │ │ ├── dishes
│ │ │ ├── graphic-print-design
│ │ │ ├── home
│ │ │ ├── logo-design
│ │ │ ├── poster-design
│ │ │ ├── restaurant-menu-design
│ │ │ ├── salads
│ │ │ ├── services
│ │ │ ├── web-design
│ │ │ └── work
│ │ ├──────────────── services
│ │ │ ├── animations
│ │ │ ├── audio
│ │ │ ├── cursor
│ │ │ ├── history
│ │ │ ├── json-id
│ │ │ ├── lenis
│ │ │ ├── loader
│ │ │ ├── loading
│ │ │ ├── metadata
│ │ │ ├── navigation
│ │ │ ├── popup-shared
│ │ │ ├── projects
│ │ │ ├── responsive
│ │ │ ├── spline
│ │ │ ├── theme
│ │ │ └── availability
│ │ ├────────────── shared
│ │ │ ├── contents
│ │ │ │ ├── categories
│ │ │ │ └── utils
│ │ │ └───────────── directives
│ │ │ ├── blur-effect
│ │ │ ├── hover-cursor
│ │ │ ├── infinite-scroll
│ │ │ ├── lazy-video
│ │ │ ├── magnetic
│ │ │ ├── text-reveal
│ │ │ └── tooltip
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.routes.ts
├──────────────── assets
│ ├── css
│ │ ├── _mixins.scss
│ │ ├── breakpoints.scss
│ │ ├── dark-mode.scss
│ │ ├── global.scss
│ │ └── reset.scss
├───────────────── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── .htaccess
├── ads.txt
├── global.d.ts
├── index.html
├── interface.ts
├── main.ts
├── robots.txt
├── send_mail.php
├── styles.scss
├── web-vitals-reporter.ts
├── angular.json
├── browserslist
├── deploy_local.sh
├── generate-array.ts
├── generate-path.ts
├── package-lock.json
├── package.json
├── README.md
├── server.ts
├── set-app-version.ts
└── tsconfig.json

• Modular structure for scalability and reuse
• Separation of concerns between layout, features, animations, and services
• GSAP animations in isolated service
• Component-based pages for clear UX
• Custom cookie consent, cursor & overlays
• Fully responsive using Tailwind & breakpoints
• Light & Dark mode support for seamless user experience
• Bilingual setup — Bulgarian 🇧🇬 and English 🇬🇧

💬 "Feel free to explore, get inspired, or fork for your own portfolio project!"

1. Home
Minimalist welcome section, scroll-based GSAP animations, and quick links to work and services. This is where first impressions matter.

2. Services
Each service is presented with clear microcopy, supportive icons, and visual hierarchy.

• Web Design & Development
• UI/UX Consulting
• Branding & Logo
• Graphic & Print

3. Work
A showcase split by categories:

• Web Design
• Logo Design
• Graphic & Print Design
• Restaurant Menu Design
• Poster Design
• Business Card Design
• Branding & Identity

Each project includes high-resolution visuals, quick overview (goals, role, stack), and design breakdowns and features.

4. About
A personal insight into my journey, philosophy, and design process. Includes direct links to social profiles and previous experience.

5. Blog
Articles on design process, UI trends, animation techniques, and branding. It's where I speak directly to fellow designers and devs.

6. Contact
Simple, accessible, and animated form. Integrated dynamic field validation.

• UX First: I begin with strategy and information architecture
• Behavioral Design: Every interaction is thought through user behavior and triggers
• Motion Thinking: GSAP animations enhance, not distract
• Consistency: Systemized spacing, reusable components, scalable grid

"I don't just design screens, I design the feeling between them."

You can reach out or collaborate with me through:

• LinkedIn
• Dribbble
• Behance
• X
• Contra

Or just drop a line through my Contact Page.

My portfolio is a living project — a blend of vision, craft, and iteration. It's where design meets performance and expression meets logic.

"This is not just what I do. It's how I think. It's how I create."

If you're a designer, let's connect. If you're a business, let's collaborate.