Portfolio Rebuilt: From Static Site to Modern Angular Experience
Technologies · Angular 20 · TypeScript · GSAP · ScrollTrigger · SplitType · Tailwind CSS 4 · SCSS · ngx-translate · Spline 3D · Service Worker · JSON-LD · Prerender
"Before, this was a static portfolio — beautiful, but fixed. Today, it's a living digital product."
I'm excited to share that vladonacev.com has been rebuilt from the ground up. What used to be a conventional static website is now a dynamic, modern web application — faster, smarter, and designed to grow with every new project and article.
From static pages to a dynamic experience
The old version served its purpose: it showed my work. But every update meant editing HTML by hand, duplicating content, and limited interaction. The new portfolio is different:
🔹 Single-page application (SPA) — smooth navigation without full page reloads
🔹 Component-based architecture — reusable UI blocks across Home, Work, Services, About, Blog, and Contact
🔹 Centralized content — projects, journal articles, and metadata managed through a unified data layer
🔹 Bilingual by design — full English and Bulgarian support with instant language switching
Built with modern technology
The site is powered by a carefully chosen stack:
🔹 Angular 20 — standalone components, lazy-loaded routes, reactive architecture
🔹 TypeScript — type-safe, maintainable codebase
🔹 GSAP + ScrollTrigger — scroll-driven animations, parallax, page transitions, and text reveals
🔹 SplitType — kinetic typography on hero sections
🔹 Tailwind CSS 4 + SCSS — utility-first styling with custom design tokens and dark mode
🔹 Spline 3D — immersive 3D backgrounds on select pages
🔹 ngx-translate — internationalization for EN / BG
🔹 Service Worker — offline-ready PWA capabilities
Motion & interaction — where design meets code
Static pages don't breathe. The new portfolio does:
🔹 Hero entrance animations adapted for mobile, tablet, and desktop
🔹 Scroll-linked parallax on sections and decorative shapes
🔹 Smooth page transitions between routes
🔹 Infinite marquee text and animated client marks scroller
🔹 Project grid reveal animations and category filter transitions
🔹 Custom cursor with contextual hover states
🔹 Magnetic button effects and blur-on-scroll image treatments
🔹 Subtle audio feedback on key interactions
🔹 Dark / light theme toggle with persistent preference
Blog & content system
The Journal is no longer a list of external links — it's a full editorial experience:
🔹 Dedicated article pages at /blog/:slug
🔹 Rich HTML content with inline images, captions, and structured sections
🔹 FAQ blocks per article for SEO and clarity
🔹 Related work recommendations on every article
🔹 Blog listing with pagination (Load More) and category filtering
🔹 Breadcrumb navigation and dynamic cover imagery
🔹 Custom video player for embedded showcases
SEO, performance & discoverability
A portfolio must be found as easily as it is admired:
🔹 Dynamic meta titles, descriptions, and Open Graph tags per route
🔹 JSON-LD structured data — BlogPosting, FAQ, and project schemas
🔹 Prerender pipeline — static HTML shells for crawlers and social previews
🔹 Bulgarian language prerender with dedicated URL rewrites
🔹 Automated sitemap generation and IndexNow submission
🔹 NgOptimizedImage for responsive, lazy-loaded images
🔹 Web Vitals monitoring for real-world performance tracking
🔹 Cookie consent with analytics integration
Contact & business features
🔹 Reactive contact form with validation and server-side email delivery
🔹 Cal.com scheduling embed for booking consultations
🔹 QR code generator component
🔹 Bot protection on form submissions
Project architecture
Under the hood, the codebase follows a clean, scalable structure:
🔹 features/pages — route-level page components (Home, Work, Blog, Contact, category pages)
🔹 features/components — reusable UI (projects grid, FAQ, breadcrumbs, video player, theme toggle)
🔹 core/layout — header, footer, hero sections, 404
🔹 services — animations, metadata, theme, scroll, projects, JSON-LD, responsive
🔹 shared/directives — magnetic, hover-cursor, blur-effect, lazy-video, infinite-scroll
🔹 scripts/ — SEO route generation, prerender, i18n validation, sitemap
What this means for you
Whether you're a potential client, collaborator, or fellow designer — you now get a portfolio that reflects how I actually work: strategic thinking, attention to detail, and technology used with purpose.
Every scroll, transition, and page is intentional. Every project is one click away. Every article tells a full story.
👉 Explore the new portfolio:
www.vladonacev.com
Madebyvladonacev — Complete brand experiences. From pixels to print. Designing logos, web interfaces, UI products, menus, posters, and more. Always thoughtful, strategic, and visually compelling.
📲 Follow me for more:
· LinkedIn
· Dribbble
· Behance
· Contra
· X (Twitter)
I'm excited to share that vladonacev.com has been rebuilt from the ground up. What used to be a conventional static website is now a dynamic, modern web application — faster, smarter, and designed to grow with every new project and article.
From static pages to a dynamic experience
The old version served its purpose: it showed my work. But every update meant editing HTML by hand, duplicating content, and limited interaction. The new portfolio is different:
🔹 Single-page application (SPA) — smooth navigation without full page reloads
🔹 Component-based architecture — reusable UI blocks across Home, Work, Services, About, Blog, and Contact
🔹 Centralized content — projects, journal articles, and metadata managed through a unified data layer
🔹 Bilingual by design — full English and Bulgarian support with instant language switching
Built with modern technology
The site is powered by a carefully chosen stack:
🔹 Angular 20 — standalone components, lazy-loaded routes, reactive architecture
🔹 TypeScript — type-safe, maintainable codebase
🔹 GSAP + ScrollTrigger — scroll-driven animations, parallax, page transitions, and text reveals
🔹 SplitType — kinetic typography on hero sections
🔹 Tailwind CSS 4 + SCSS — utility-first styling with custom design tokens and dark mode
🔹 Spline 3D — immersive 3D backgrounds on select pages
🔹 ngx-translate — internationalization for EN / BG
🔹 Service Worker — offline-ready PWA capabilities
Motion & interaction — where design meets code
Static pages don't breathe. The new portfolio does:
🔹 Hero entrance animations adapted for mobile, tablet, and desktop
🔹 Scroll-linked parallax on sections and decorative shapes
🔹 Smooth page transitions between routes
🔹 Infinite marquee text and animated client marks scroller
🔹 Project grid reveal animations and category filter transitions
🔹 Custom cursor with contextual hover states
🔹 Magnetic button effects and blur-on-scroll image treatments
🔹 Subtle audio feedback on key interactions
🔹 Dark / light theme toggle with persistent preference
Blog & content system
The Journal is no longer a list of external links — it's a full editorial experience:
🔹 Dedicated article pages at /blog/:slug
🔹 Rich HTML content with inline images, captions, and structured sections
🔹 FAQ blocks per article for SEO and clarity
🔹 Related work recommendations on every article
🔹 Blog listing with pagination (Load More) and category filtering
🔹 Breadcrumb navigation and dynamic cover imagery
🔹 Custom video player for embedded showcases
SEO, performance & discoverability
A portfolio must be found as easily as it is admired:
🔹 Dynamic meta titles, descriptions, and Open Graph tags per route
🔹 JSON-LD structured data — BlogPosting, FAQ, and project schemas
🔹 Prerender pipeline — static HTML shells for crawlers and social previews
🔹 Bulgarian language prerender with dedicated URL rewrites
🔹 Automated sitemap generation and IndexNow submission
🔹 NgOptimizedImage for responsive, lazy-loaded images
🔹 Web Vitals monitoring for real-world performance tracking
🔹 Cookie consent with analytics integration
Contact & business features
🔹 Reactive contact form with validation and server-side email delivery
🔹 Cal.com scheduling embed for booking consultations
🔹 QR code generator component
🔹 Bot protection on form submissions
Project architecture
Under the hood, the codebase follows a clean, scalable structure:
🔹 features/pages — route-level page components (Home, Work, Blog, Contact, category pages)
🔹 features/components — reusable UI (projects grid, FAQ, breadcrumbs, video player, theme toggle)
🔹 core/layout — header, footer, hero sections, 404
🔹 services — animations, metadata, theme, scroll, projects, JSON-LD, responsive
🔹 shared/directives — magnetic, hover-cursor, blur-effect, lazy-video, infinite-scroll
🔹 scripts/ — SEO route generation, prerender, i18n validation, sitemap
What this means for you
Whether you're a potential client, collaborator, or fellow designer — you now get a portfolio that reflects how I actually work: strategic thinking, attention to detail, and technology used with purpose.
Every scroll, transition, and page is intentional. Every project is one click away. Every article tells a full story.
👉 Explore the new portfolio:
www.vladonacev.com
Madebyvladonacev — Complete brand experiences. From pixels to print. Designing logos, web interfaces, UI products, menus, posters, and more. Always thoughtful, strategic, and visually compelling.
📲 Follow me for more:
· Dribbble
· Behance
· Contra
· X (Twitter)




