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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
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


