IC Studio Portfolio

Pregled Projekta Project Overview Projektübersicht

IC Studio je osobna portfolio web stranica dizajnirana za prikaz projekata web razvoja i UI/UX dizajna. Cilj je bio kreirati čistu, elegantnu i vrlo performantnu web stranicu koja odražava dizajnersku filozofiju "Estetika & Funkcija. Minimalizam s Dušom." IC Studio is a personal portfolio website designed to showcase web development and UI/UX design projects. The goal was to create a clean, elegant, and highly performant website that reflects the design philosophy of "Aesthetics & Function. Minimalism with Soul." IC Studio ist eine persönliche Portfolio-Website, die Webentwicklungs- und UI/UX-Designprojekte präsentiert. Ziel war es, eine saubere, elegante und hochperformante Website zu erstellen, die die Designphilosophie "Ästhetik & Funktion. Minimalismus mit Seele" widerspiegelt.

Web stranica služi kao digitalna vizitka za freelance rad, ističući tehničke vještine, dizajnersku osjetljivost i završene projekte na zanimljiv i pristupačan način. The website serves as a digital business card for freelance work, highlighting technical skills, design sensibility, and completed projects in an engaging and user-friendly manner. Die Website dient als digitale Visitenkarte für freiberufliche Arbeit und hebt technische Fähigkeiten, Designsensibilität und abgeschlossene Projekte auf ansprechende und benutzerfreundliche Weise hervor.

Tehnološki Stack Technology Stack Technologie-Stack

Ključne Značajke Key Features Hauptmerkmale

1. Glatko Korisničko Iskustvo 1. Smooth User Experience 1. Reibungslose Benutzererfahrung

Integrirana Lenis smooth scrolling biblioteka za kreiranje fluidnih, prirodnih prijelaza stranica. Sve interakcije osjećaju se namjerne i izglancane, od hover efekata do animacija aktiviranih scrollom koristeći Intersection Observer API. Integrated Lenis smooth scrolling library to create fluid, natural page transitions. All interactions feel intentional and polished, from hover effects to scroll-triggered animations using Intersection Observer API. Integrierte Lenis Smooth-Scrolling-Bibliothek, um flüssige, natürliche Seitenübergänge zu erstellen. Alle Interaktionen fühlen sich absichtlich und poliert an, von Hover-Effekten bis zu scroll-ausgelösten Animationen mit der Intersection Observer API.

2. Responzivni Dizajn 2. Responsive Design 2. Responsives Design

Mobile-first pristup s breakpointima na 480px, 768px, 968px i 1024px. Layout se gra dodatno prilagođava od malih mobilnih ekrana do velikih desktop zaslona, s posebnom pažnjom na touch tar gets (minimum 44px) i mobilnu navigaciju. Mobile-first approach with breakpoints at 480px, 768px, 968px, and 1024px. The layout gracefully adapts from small mobile screens to large desktop displays, with special attention to touch targets (minimum 44px) and mobile navigation. Mobile-First-Ansatz mit Breakpoints bei 480px, 768px, 968px und 1024px. Das Layout passt sich elegant von kleinen mobilen Bildschirmen bis zu großen Desktop-Displays an, mit besonderer Aufmerksamkeit auf Touch-Ziele (mindestens 44px) und mobile Navigation.

3. Optimizacija Performansi 3. Performance Optimization 3. Leistungsoptimierung

Sve slike konvertirane u WebP format s lazy loadingom. Kritični assets su preloadani, skripte su deferirane, a CSS animacije koriste GPU akceleraciju. Preloader osigurava percipiranu performansu dok se assets učitavaju u pozadini. All images converted to WebP format with lazy loading. Critical assets are preloaded, scripts are deferred, and CSS animations use GPU acceleration. The preloader ensures perceived performance while assets load in the background. Alle Bilder wurden in das WebP-Format mit Lazy Loading konvertiert. Kritische Assets werden vorgeladen, Skripte werden zurückgestellt und CSS-Animationen verwenden GPU-Beschleunigung. Der Preloader gewährleistet wahrgenommene Leistung, während Assets im Hintergrund geladen werden.

4. Pristupačnost na Prvom Mjestu 4. Accessibility First 4. Barrierefreiheit an erster Stelle

Semantička HTML struktura s pravilnom hijerarhijom naslova, ARIA labelama, skip-to-content linkovima i podrškom za navigaciju tipkovnicom. Kontrast teksta zadovoljava WCAG AA+ standarde (minimum 4.5:1), a svi interaktivni elementi su pravilno označeni. Semantic HTML structure with proper heading hierarchy, ARIA labels, skip-to-content links, and keyboard navigation support. Text contrast meets WCAG AA+ standards (4.5:1 minimum), and all interactive elements are properly labeled. Semantische HTML-Struktur mit ordnungsgemäßer Überschriftenhierarchie, ARIA-Labels, Skip-to-Content-Links und Unterstützung für Tastaturnavigation. Der Textkontrast erfüllt WCAG AA+ Standards (mindestens 4,5:1), und alle interaktiven Elemente sind ordnungsgemäß gekennzeichnet.

5. Design Sustav 5. Design System 5. Designsystem

Dosljedna uporaba CSS custom properties za boje, tipografiju i razmake. To osigurava održivost i olakšava globalno ažuriranje vizualnog stila. Funkcija clamp() omogućuje fluidnu tipografiju koja se glatko skalira preko svih veličina ekrana. Consistent use of CSS custom properties for colors, typography, and spacing. This ensures maintainability and makes it easy to update the visual style globally. The clamp() function provides fluid typography that scales smoothly across all screen sizes. Konsequente Verwendung von CSS Custom Properties für Farben, Typografie und Abstände. Dies gewährleistet Wartbarkeit und erleichtert die globale Aktualisierung des visuellen Stils. Die clamp()-Funktion bietet fließende Typografie, die sich reibungslos über alle Bildschirmgrößen skaliert.

Dizajnerska Filozofija Design Philosophy Designphilosophie

Dizajn prihvaća minimalizam bez hladne ili sterilne atmosfere. Krema pozadina (#F3F0E7) pruža toplinu, dok bronca naglasak (#A27B5C) dodaje suptilnu eleganciju. Izbor tipografije—Playfair Display za naslove i Mulish za glavni tekst—kreira sofisticiranu ali čitljivu hijerarhiju. The design embraces minimalism without being cold or sterile. The cream background (#F3F0E7) provides warmth, while the bronze accent (#A27B5C) adds subtle elegance. Typography choices—Playfair Display for headings and Mulish for body text—create a sophisticated yet readable hierarchy. Das Design umfasst Minimalismus, ohne kalt oder steril zu sein. Der cremefarbene Hintergrund (#F3F0E7) bietet Wärme, während der Bronzeakzent (#A27B5C) subtile Eleganz verleiht. Die Typografie-Auswahl—Playfair Display für Überschriften und Mulish für Fließtext—schafft eine anspruchsvolle und dennoch lesbare Hierarchie.

Bijeli prostor koristi se namjerno kako bi sadržaj mogao dišati. Svaka sekcija ima jasnu vizualnu separaciju, a zig-zag raspored projekata dodaje vizualni interes uz održavanje reda i strukture. White space is used deliberately to let content breathe. Each section has clear visual separation, and the zig-zag project layout adds visual interest while maintaining order and structure. Weißer Raum wird bewusst verwendet, um Inhalten Raum zum Atmen zu geben. Jeder Abschnitt hat eine klare visuelle Trennung, und das Zickzack-Projektlayout fügt visuelles Interesse hinzu, während Ordnung und Struktur beibehalten werden.

Suptilni detalji poput marquee bannera, kolačića-shaped consent bannera i parallax hero slike (samo desktop) dodaju osobnost bez preplavljivanja korisničkog iskustva. Subtle details like the marquee banner, cookie-shaped consent banner, and parallax hero image (desktop only) add personality without overwhelming the user experience. Subtile Details wie das Marquee-Banner, das Cookie-förmige Consent-Banner und das Parallax-Hero-Bild (nur Desktop) verleihen Persönlichkeit, ohne die Benutzererfahrung zu überwältigen.

Rezultati & Utjecaj Results & Impact Ergebnisse & Auswirkungen

Portfolio uspješno prikazuje tehničke vještine i dizajnersku osjetljivost uz održavanje izvrsnih metrika performansi. Očekivani Lighthouse rezultati: Performance 92, Accessibility 96, Best Practices 100, SEO 100. The portfolio successfully showcases technical skills and design sensibility while maintaining excellent performance metrics. Expected Lighthouse scores: Performance 92, Accessibility 96, Best Practices 100, SEO 100. Das Portfolio zeigt erfolgreich technische Fähigkeiten und Designsensibilität bei gleichzeitiger Aufrechterhaltung hervorragender Leistungsmetriken. Erwartete Lighthouse-Werte: Performance 92, Accessibility 96, Best Practices 100, SEO 100.

Čista, profesionalna prezentacija pomogla je uspostavljanju kredibiliteta s potencijalnim klijentima i služi kao praktična demonstracija sposobnosti front-end razvoja. The clean, professional presentation has helped establish credibility with potential clients and serves as a practical demonstration of front-end development capabilities. Die saubere, professionelle Präsentation hat geholfen, Glaubwürdigkeit bei potenziellen Kunden aufzubauen und dient als praktische Demonstration von Front-End-Entwicklungsfähigkeiten.

Stranica je potpuno production-ready s pravilnim meta tagovima, Open Graph podacima, faviconima i responzivnim dizajnom koji besprijekorno funkcionira na svim uređajima i preglednicima. The site is fully production-ready with proper meta tags, Open Graph data, favicons, and a responsive design that works flawlessly across all devices and browsers. Die Website ist vollständig produktionsbereit mit ordnungsgemäßen Meta-Tags, Open Graph-Daten, Favicons und einem responsiven Design, das einwandfrei auf allen Geräten und Browsern funktioniert.

Naučeno Lessons Learned Gelernte Lektionen

1. Mobile-first je ključan: Početi s mobilnim ograničenjima forsira bolje odluke o hijerarhiji sadržaja i dizajnu interakcije. 1. Mobile-first is crucial: Starting with mobile constraints forces better decisions about content hierarchy and interaction design. 1. Mobile-First ist entscheidend: Mit mobilen Einschränkungen zu beginnen erzwingt bessere Entscheidungen über Inhaltshierarchie und Interaktionsdesign.

2. Performanse su bitne: Korisnici očekuju brza vremena učitavanja. WebP slike, lazy loading i deferirane skripte čine značajnu razliku. 2. Performance matters: Users expect fast load times. WebP images, lazy loading, and deferred scripts make a significant difference. 2. Leistung ist wichtig: Benutzer erwarten schnelle Ladezeiten. WebP-Bilder, Lazy Loading und zurückgestellte Skripte machen einen erheblichen Unterschied.

3. Pristupačnost nije opciona: Pravilni semantički HTML, ARIA labele i navigacija tipkovnicom nisu opcioni—oni su esencijalni za profesionalnu web stranicu. 3. Accessibility is non-negotiable: Proper semantic HTML, ARIA labels, and keyboard navigation aren't optional—they're essential for a professional website. 3. Barrierefreiheit ist nicht verhandelbar: Ordnungsgemäßes semantisches HTML, ARIA-Labels und Tastaturnavigation sind nicht optional—sie sind für eine professionelle Website unerlässlich.

4. Jednostavnost se bolje skalira: Čisti dizajn s jakim osnovama lakše je održavati i proširivati nego kompleksna, pre-inžinjerska rješenja. 4. Simplicity scales better: A clean design with strong fundamentals is easier to maintain and extend than complex, over-engineered solutions. 4. Einfachheit skaliert besser: Ein sauberes Design mit starken Grundlagen ist einfacher zu warten und zu erweitern als komplexe, überentwickelte Lösungen.