humanfryo/ai-developer-ux-designer
Update README.md
Create enhanced-styles.css
Create case-study-collective-roots.html
Update README.md
Create enhanced.html
Update script.js
Update style.css
Update index.html
remove it - Follow Up Deployment
Update index.html
Update index.html
Update style.css
Create script.js
Here's the enhanced code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Goran Babarogic - Product UX Designer with 15+ years of experience"> <title>Goran Babarogic - Product UX Designer | Portfolio</title> <!-- Preconnect to external resources --> <link rel="preconnect" href="https://cdn.tailwindcss.com"> <link rel="preconnect" href="https://cdnjs.cloudflare.com"> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Framer Motion --> <script type="module"> import { motion, AnimatePresence, useScroll, useTransform, useSpring, useReducedMotion } from 'https://cdn.skypack.dev/framer-motion@11'; window.motion = motion; window.AnimatePresence = AnimatePresence; window.useScroll = useScroll; window.useTransform = useTransform; window.useSpring = useSpring; window.useReducedMotion = useReducedMotion; </script> <style> /* Critical CSS for above-the-fold content */ :root { --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); --spring-smooth: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Smooth scrolling for users who haven't disabled motion */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Performance optimizations */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Focus styles for accessibility */ *:focus { outline: 2px solid #6366f1; outline-offset: 2px; } *:focus:not(:focus-visible) { outline: none; } /* Skip to content link */ .skip-link { position: absolute; top: -40px; left: 0; background: #6366f1; color: white; padding: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } /* Loading state - minimal skeleton */ .skeleton { background: linear-gradient(90deg, rgba(229, 231, 235, 0) 0%, rgba(229, 231, 235, 0.5) 50%, rgba(229, 231, 235, 0) 100% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Dark mode transitions */ body { transition: background-color 0.3s var(--transition-smooth), color 0.3s var(--transition-smooth); } /* Subtle hover effects */ .hover-lift { transition: transform 0.2s var(--transition-smooth), box-shadow 0.2s var(--transition-smooth); will-change: transform; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Button interactions */ .btn { position: relative; overflow: hidden; transition: all 0.2s var(--transition-smooth); } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:active::after { width: 300px; height: 300px; } /* Improved dark mode toggle */ .dark-mode-toggle { position: relative; width: 40px; height: 40px; border-radius: 50%; transition: transform 0.3s var(--spring-smooth); } .dark-mode-toggle:hover { transform: scale(1.1); } .dark-mode-toggle:active { transform: scale(0.95); } /* Progress indicator */ .progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transform-origin: left; z-index: 50; transition: transform 0.3s var(--transition-smooth); } /* Intersection Observer animations */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Stagger children animations */ .stagger-container > * { opacity: 0; transform: translateY(20px); transition: opacity 0.4s var(--transition-smooth), transform 0.4s var(--transition-smooth); } .stagger-container.visible > * { opacity: 1; transform: translateY(0); } .stagger-container.visible > *:nth-child(1) { transition-delay: 0.1s; } .stagger-container.visible > *:nth-child(2) { transition-delay: 0.2s; } .stagger-container.visible > *:nth-child(3) { transition-delay: 0.3s; } .stagger-container.visible > *:nth-child(4) { transition-delay: 0.4s; } .stagger-container.visible > *:nth-child(5) { transition-delay: 0.5s; } .stagger-container.visible > *:nth-child(6) { transition-delay: 0.6s; } .stagger-container.visible > *:nth-child(7) { transition-delay: 0.7s; } .stagger-container.visible > *:nth-child(8) { transition-delay: 0.8s; } /* Mobile menu */ .mobile-menu { transform: translateX(100%); transition: transform 0.3s var(--transition-smooth); } .mobile-menu.open { transform: translateX(0); } /* Reduced motion styles */ @media (prefers-reduced-motion: reduce) { .fade-up, .stagger-container > * { opacity: 1; transform: none; transition: none; } .hover-lift:hover { transform: none; } .dark-mode-toggle:hover { transform: none; } } /* Print styles */ @media print { .no-print { display: none !important; } body { color: black; background: white; } } </style> </head> <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200"> <!-- Skip to content link for screen readers --> <a href="#main" class="skip-link">Skip to content</a> <!-- Progress bar --> <div class="progress-bar" id="progressBar" style="transform: scaleX(0)"></div> <!-- Header --> <header class="container mx-auto px-4 py-8 relative z-10" role="banner"> <nav class="flex justify-between items-center" role="navigation" aria-label="Main navigation"> <div class="text-2xl font-bold dark:text-white"> <a href="/" aria-label="Athos Dark - Home">ATHOS DARK</a> </div> <div class="flex items-center space-x-6"> <ul class="hidden md:flex space-x-8 list-none"> <li><a href="#work" class="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Work</a></li> <li><a href="#about" class="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">About</a></li> <li><a href="#blog" class="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Blog</a></li> <li><a href="#contact" class="hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Contact</a></li> </ul> <button id="darkModeToggle" class="dark-mode-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 no-print" aria-label="Toggle dark mode" role="switch" aria-checked="false" > <i class="fas fa-moon dark:hidden" aria-hidden="true"></i> <i class="fas fa-sun hidden dark:inline" aria-hidden="true"></i> </button> <button id="mobileMenuToggle" class="md:hidden no-print" aria-label="Toggle mobile menu" aria-expanded="false" aria-controls="mobileMenu" > <i class="fas fa-bars text-2xl" aria-hidden="true"></i> </button> </div> </nav> <!-- Mobile menu --> <nav id="mobileMenu" class="mobile-menu fixed top-0 right-0 w-64 h-full bg-white dark:bg-gray-800 shadow-lg z-50 p-6 md:hidden" role="navigation" aria-label="Mobile navigation" > <button id="closeMobileMenu" class="absolute top-4 right-4 text-2xl" aria-label="Close mobile menu" > <i class="fas fa-times" aria-hidden="true"></i> </button> <ul class="mt-12 space-y-4 list-none"> <li><a href="#work" class="block py-2 text-lg">Work</a></li> <li><a href="#about" class="block py-2 text-lg">About</a></li> <li><a href="#blog" class="block py-2 text-lg">Blog</a></li> <li><a href="#contact" class="block py-2 text-lg">Contact</a></li> </ul> </nav> </header> <main id="main"> <!-- Hero Section --> <section class="container mx-auto px-4 py-16 md:py-24" aria-labelledby="hero-heading"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-12 md:mb-0"> <div class="flex items-center mb-6 fade-up"> <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> <img src="https://framerusercontent.com/images/vq9vnuJruUyplvTmweJBT00k1I.jpg" alt="Goran Babarogic" class="w-full h-full object-cover" loading="eager" width="48" height="48" > </div> <div> <h2 class="text-xl font-semibold">Goran Babarogic</h2> <p class="text-gray-500 dark:text-gray-400">Product UX Designer</p> </div> <span class="ml-4 px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs rounded-full flex items-center"> <i class="fas fa-check-circle mr-1" aria-hidden="true"></i> <span>Verified Expert</span> </span> </div> <h1 id="hero-heading" class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight fade-up"> Designed for <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-purple-600">Designers</span> to showcase their work </h1> <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 fade-up"> Helping startups and brands to craft expressive and engaging solutions for their software needs. </p> <div class="flex flex-wrap gap-4 fade-up"> <a href="#" class="btn px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg hover-lift inline-block" aria-label="Remix this template" > Remix Template </a> <a href="#" class="btn px-6 py-3 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg hover-lift inline-block" aria-label="Get Athos Plus version" > Get Athos Plus </a> </div> </div> <div class="md:w-1/2 fade-up"> <div class="relative"> <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-lg"></div> <img src="https://framerusercontent.com/images/3dpALmvrIR88qPmbDlYoTyJSig.png" alt="Design showcase featuring modern UI designs" class="relative rounded-2xl shadow-2xl hover-lift w-full" loading="eager" width="600" height="400" > </div> </div> </div> </section> <!-- Tools Section --> <section class="bg-gray-50 dark:bg-gray-800 py-16" id="tools" aria-labelledby="tools-heading"> <div class="container mx-auto px-4"> <h2 id="tools-heading" class="text-3xl font-bold text-center mb-12 fade-up">Tools I Recommend</h2> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 stagger-container" role="list"> <!-- Tool Cards --> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Spline - 3D design tool" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/bz3s18zhqFtdyPbZIARlijrrw.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Spline</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Place to design and collaborate in 3D</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Figma - Design tool" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Pxfjp142gBOSoN5QAIirhUygA.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Figma</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Design tool for creating and collaborating</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Framer - Website builder" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Gp9f5xlIaLvbm57XPbt97G7O8M.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Framer</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Where teams design and publish stunning sites</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Lovable - AI development tool" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/5GAHfuLF3hLl6xiFJ5g7XfUlDDg.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Lovable</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Build software products, using only a chat interface</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Relume - Figma library" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/d8F2mKwloCaOe9ppv1eCSnDUo.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Relume</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Access the world's largest library of Figma</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Webflow - Visual development platform" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/HmBMlHkeEZXQBLyDiqXgKUV3Oo.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Webflow</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Take control of HTML, CSS, and JavaScript in a visual canvas</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Hotjar - Analytics tool" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/iEln9brI2xn8w0yZKYggB1XW3dw.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Hotjar</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Behaviour analytical tool to track users</p> </a> <a href="#" class="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift block" role="listitem" aria-label="Notion - Project management" > <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/3QOYS4bjvDd58cuOs2V3nR1sys.png" alt="" class="w-10 h-10 mr-3" loading="lazy" width="40" height="40" > <h3 class="font-semibold">Notion</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Wiki, docs and projects management system</p> </a> </div> </div> </section> <!-- Projects Section --> <section class="py-16 container mx-auto px-4" id="work" aria-labelledby="projects-heading"> <h2 id="projects-heading" class="text-3xl font-bold text-center mb-12 fade-up">Featured Projects</h2> <div class="grid md:grid-cols-2 gap-8" role="list"> <!-- Project cards --> <article class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift fade-up" role="listitem" > <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/82V0lDZt5IN8w9i1157kfT8pSU.jpg" alt="Subscription management platform interface design" class="w-full h-64 object-cover transition-transform duration-300 hover:scale-105" loading="lazy" width="600" height="256" > </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Modernizing a Subscription Management Platform</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> With user-centered approach, the goals was to create an intuitive interface for effortless financial management while incorporating gamification. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div> <p class="text-sm text-gray-500 dark:text-gray-400">Engagement</p> <p class="text-xl font-semibold"> <span class="counter" data-target="12">12</span> min </p> </div> <div> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold">4.5★</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors group" aria-label="View subscription platform case study" > View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform" aria-hidden="true"></i> </a> </div> </article> <article class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift fade-up" role="listitem" > <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/8ZlsEfjDITR5nOu3Yn61F22cbg.jpg" alt="E-commerce website redesign showcase" class="w-full h-64 object-cover transition-transform duration-300 hover:scale-105" loading="lazy" width="600" height="256" > </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Revamping an E-Commerce Website</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Focus was to create a user-friendly interface that simplified the process of accessing premium operational web scraping proxies. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div> <p class="text-sm text-gray-500 dark:text-gray-400">Usability</p> <p class="text-xl font-semibold"> <span class="counter" data-target="85">85</span>% </p> </div> <div> <p class="text-sm text-gray-500 dark:text-gray-400">User Retention</p> <p class="text-xl font-semibold"> <span class="counter" data-target="70">70</span>% </p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors group" aria-label="View e-commerce case study" > View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-1 transition-transform" aria-hidden="true"></i> </a> </div> </article> <article class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift fade-up" role="listitem" > <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/Y1hHthCTPz6YNLIhonp2E5s5WU.jpg" alt="Mobile health tracking app interface" class="w-full h-64 object-cover transition-transform duration-300 hover:scale-105" loading="lazy" width="600" height="256" > </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Developing a Mobile Health Tracking App</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Leading Bitcoin Data and Stats site. Live price action, monitor on-chain data, and track key economic indicators. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div> <p class="text - Follow Up Deployment
here's the code build this site : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Athos Dark: Template with Dark Mode for UX Designer</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Framer Motion --> <script src="https://unpkg.com/framer-motion@11.0.3/dist/framer-motion.js"></script> <style> /* Loading Screen Styles */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a; display: flex; align-items: center; justify-content: center; z-index: 9999; } .loader { width: 60px; height: 60px; border: 3px solid #333; border-top-color: #6366f1; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Parallax Background */ .parallax-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .parallax-layer { position: absolute; width: 110%; height: 110%; background-size: cover; background-position: center; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; } /* Smooth Scroll */ html { scroll-behavior: smooth; } /* Dark mode toggle animation */ .dark-mode-toggle { transition: all 0.3s ease; } .dark-mode-toggle:hover { transform: rotate(180deg); } /* Enhanced hover effects */ .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glow effect */ .glow { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Cursor follower */ .cursor-follower { width: 20px; height: 20px; border: 2px solid #6366f1; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transition: all 0.1s ease; transform: translate(-50%, -50%); } /* Progress indicator */ .progress-indicator { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); z-index: 9997; transition: width 0.3s ease; } </style> </head> <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300"> <!-- Loading Screen --> <div class="loading-screen" id="loadingScreen"> <div class="loader"></div> </div> <!-- Progress Indicator --> <div class="progress-indicator" id="progressIndicator"></div> <!-- Cursor Follower --> <div class="cursor-follower" id="cursorFollower"></div> <!-- Parallax Background --> <div class="parallax-bg"> <div class="parallax-layer" data-speed="0.5"></div> <div class="parallax-layer" data-speed="0.8"></div> </div> <!-- Header --> <header class="container mx-auto px-4 py-8 relative z-10" id="header"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold dark:text-white logo">ATHOS DARK</div> <div class="flex items-center space-x-6"> <nav class="hidden md:flex space-x-8"> <a href="#work" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Work</a> <a href="#about" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">About</a> <a href="#blog" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Blog</a> <a href="#contact" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Contact</a> </nav> <button id="darkModeToggle" class="dark-mode-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700"> <i class="fas fa-moon dark:hidden"></i> <i class="fas fa-sun hidden dark:inline"></i> </button> <button class="md:hidden menu-toggle"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> </header> <!-- Hero Section --> <section class="container mx-auto px-4 py-16 md:py-24 hero-section"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-12 md:mb-0"> <div class="flex items-center mb-6 hero-badge"> <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> <img src="https://framerusercontent.com/images/vq9vnuJruUyplvTmweJBT00k1I.jpg" alt="Goran Babarogic" class="w-full h-full object-cover"> </div> <div> <h2 class="text-xl font-semibold">Goran Babarogic</h2> <p class="text-gray-500 dark:text-gray-400">Product UX Designer</p> </div> <span class="ml-4 px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs rounded-full flex items-center"> <i class="fas fa-check-circle mr-1"></i> Verified Expert </span> </div> <h1 class="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> Designed for <span class="gradient-text">Designers</span> to showcase their work </h1> <p class="hero-description text-xl text-gray-600 dark:text-gray-300 mb-8"> Helping startups and brands to craft expressive and engaging solutions for their software needs. </p> <div class="flex flex-wrap gap-4 hero-buttons"> <a href="#" class="btn-primary px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all hover:scale-105 hover:shadow-lg"> Remix Template </a> <a href="#" class="btn-secondary px-6 py-3 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all hover:scale-105"> Get Athos Plus </a> </div> </div> <div class="md:w-1/2 hero-image"> <div class="relative"> <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-lg animate-pulse"></div> <img src="https://framerusercontent.com/images/3dpALmvrIR88qPmbDlYoTyJSig.png" alt="Design Showcase" class="relative rounded-2xl shadow-2xl hover-lift"> </div> </div> </div> </section> <!-- Tools Section --> <section class="bg-gray-50 dark:bg-gray-800 py-16" id="tools"> <div class="container mx-auto px-4"> <h2 class="section-title text-3xl font-bold text-center mb-12">Tools I Recommend</h2> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 tools-grid"> <!-- Tool Cards will be animated with stagger effect --> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/bz3s18zhqFtdyPbZIARlijrrw.png" alt="Spline" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Spline</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Place to design and collaborate in 3D</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Pxfjp142gBOSoN5QAIirhUygA.png" alt="Figma" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Figma</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Design tool for creating and collaborating</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Gp9f5xlIaLvbm57XPbt97G7O8M.png" alt="Framer" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Framer</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Where teams design and publish stunning sites</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/5GAHfuLF3hLl6xiFJ5g7XfUlDDg.png" alt="Lovable" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Lovable</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Build software products, using only a chat interface</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/d8F2mKwloCaOe9ppv1eCSnDUo.png" alt="Relume" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Relume</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Access the world's largest library of Figma</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/HmBMlHkeEZXQBLyDiqXgKUV3Oo.png" alt="Webflow" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Webflow</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Take control of HTML, CSS, and JavaScript in a visual canvas</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/iEln9brI2xn8w0yZKYggB1XW3dw.png" alt="Hotjar" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Hotjar</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Behaviour analytical tool to track users</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/3QOYS4bjvDd58cuOs2V3nR1sys.png" alt="Notion" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Notion</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Wiki, docs and projects management system</p> </a> </div> </div> </section> <!-- Projects Section --> <section class="py-16 container mx-auto px-4" id="work"> <h2 class="section-title text-3xl font-bold text-center mb-12">Featured Projects</h2> <div class="grid md:grid-cols-2 gap-8 projects-grid"> <!-- Project cards with enhanced animations --> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/82V0lDZt5IN8w9i1157kfT8pSU.jpg" alt="Subscription Management Platform" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110" loading="lazy"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Modernizing a Subscription Management Platform</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> With user-centered approach, the goals was to create an intuitive interface for effortless financial management while incorporating gamification. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Engagement</p> <p class="text-xl font-semibold counter" data-target="12">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold">4.5*</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/8ZlsEfjDITR5nOu3Yn61F22cbg.jpg" alt="E-Commerce Website" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Revamping an E-Commerce Website</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Focus was to create a user-friendly interface that simplified the process of accessing premium operational web scraping proxies. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Usability</p> <p class="text-xl font-semibold counter" data-target="85">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Retention</p> <p class="text-xl font-semibold counter" data-target="70">0</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/Y1hHthCTPz6YNLIhonp2E5s5WU.jpg" alt="Mobile Health Tracking App" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Developing a Mobile Health Tracking App</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Leading Bitcoin Data and Stats site. Live price action, monitor on-chain data, and track key economic indicators. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Conversion Rate</p> <p class="text-xl font-semibold counter" data-target="12">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold">4.8*</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/UlzZi7Dd7txMrOquJLbf9wyEiig.jpg" alt="Corporate Intranet" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Optimizing a Corporate Intranet</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> An innovative app and approach for taking advantage of unused internet from people's devices. It differs from others because of its simplicity, functions, and ways to earn extra money. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Conversion Rate</p> <p class="text-xl font-semibold counter" data-target="20">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold counter" data-target="95">0</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> Coming Soon <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> </div> </section> <!-- About Section --> <section class="py-16 bg-gray-50 dark:bg-gray-800" id="about"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-12 md:mb-0 about-content"> <h2 class="text-3xl font-bold mb-8 fade-up">Web designer and expert in</h2> <p class="text-4xl md:text-5xl font-bold mb-8 gradient-text fade-up">UX/UI Design</p> <h3 class="text-2xl mb-4 fade-up">with over</h3> <p class="text-4xl md:text-5xl font-bold mb-8 fade-up">15 years</p> <p class="text-xl mb-8 fade-up">of industry experience.</p> <h3 class="text-2xl mb-4 fade-up">Expertise extends to</h3> <p class="text-4xl md:text-5xl font-bold mb-8 gradient-text fade-up">Framer Development</p> <p class="text-xl mb-8 fade-up">enabling him to create both aesthetically pleasing and easily implementable.</p> <h3 class="text-2xl mb-4 fade-up">Currently works as</h3> <p class="text-4xl md:text-5xl font-bold fade-up">Product Designer</p> <p class="text-xl mt-8 fade-up">at FLYR Hospitality</p> </div> <div class="md:w-1/2 md:pl-12"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 testimonials-grid"> <!-- Testimonials with stagger animation --> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/sQyyAhcgUbXckfoqQWM3dTteTA.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"He consistently exceeds our expectations"</p> </div> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/fATWoAolell4ae2UFdw2TeBM28.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"I recommend Goran whole-heartedly"</p> </div> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/rbcCSj5wo7EivYt5qpyuab4GMg.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"Loved to work with Goran!"</p> </div> </div> <div class="skills-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <h3 class="text-xl font-bold mb-4">Skills</h3> <div class="flex flex-wrap gap-2"> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">UX Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">UI Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Product Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Consulting</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Design Systems</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Front-End Development</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Workshops</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Design Sprint</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Interaction Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">User Testing</span> <span class=" - Follow Up Deployment
here's the code build this site : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Athos Dark: Template with Dark Mode for UX Designer</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Framer Motion --> <script src="https://unpkg.com/framer-motion@11.0.3/dist/framer-motion.js"></script> <style> /* Loading Screen Styles */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a; display: flex; align-items: center; justify-content: center; z-index: 9999; } .loader { width: 60px; height: 60px; border: 3px solid #333; border-top-color: #6366f1; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Parallax Background */ .parallax-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .parallax-layer { position: absolute; width: 110%; height: 110%; background-size: cover; background-position: center; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; } /* Smooth Scroll */ html { scroll-behavior: smooth; } /* Dark mode toggle animation */ .dark-mode-toggle { transition: all 0.3s ease; } .dark-mode-toggle:hover { transform: rotate(180deg); } /* Enhanced hover effects */ .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glow effect */ .glow { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Cursor follower */ .cursor-follower { width: 20px; height: 20px; border: 2px solid #6366f1; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transition: all 0.1s ease; transform: translate(-50%, -50%); } /* Progress indicator */ .progress-indicator { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6); z-index: 9997; transition: width 0.3s ease; } </style> </head> <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300"> <!-- Loading Screen --> <div class="loading-screen" id="loadingScreen"> <div class="loader"></div> </div> <!-- Progress Indicator --> <div class="progress-indicator" id="progressIndicator"></div> <!-- Cursor Follower --> <div class="cursor-follower" id="cursorFollower"></div> <!-- Parallax Background --> <div class="parallax-bg"> <div class="parallax-layer" data-speed="0.5"></div> <div class="parallax-layer" data-speed="0.8"></div> </div> <!-- Header --> <header class="container mx-auto px-4 py-8 relative z-10" id="header"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold dark:text-white logo">ATHOS DARK</div> <div class="flex items-center space-x-6"> <nav class="hidden md:flex space-x-8"> <a href="#work" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Work</a> <a href="#about" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">About</a> <a href="#blog" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Blog</a> <a href="#contact" class="nav-link hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors">Contact</a> </nav> <button id="darkModeToggle" class="dark-mode-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700"> <i class="fas fa-moon dark:hidden"></i> <i class="fas fa-sun hidden dark:inline"></i> </button> <button class="md:hidden menu-toggle"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> </header> <!-- Hero Section --> <section class="container mx-auto px-4 py-16 md:py-24 hero-section"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-12 md:mb-0"> <div class="flex items-center mb-6 hero-badge"> <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> <img src="https://framerusercontent.com/images/vq9vnuJruUyplvTmweJBT00k1I.jpg" alt="Goran Babarogic" class="w-full h-full object-cover"> </div> <div> <h2 class="text-xl font-semibold">Goran Babarogic</h2> <p class="text-gray-500 dark:text-gray-400">Product UX Designer</p> </div> <span class="ml-4 px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs rounded-full flex items-center"> <i class="fas fa-check-circle mr-1"></i> Verified Expert </span> </div> <h1 class="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> Designed for <span class="gradient-text">Designers</span> to showcase their work </h1> <p class="hero-description text-xl text-gray-600 dark:text-gray-300 mb-8"> Helping startups and brands to craft expressive and engaging solutions for their software needs. </p> <div class="flex flex-wrap gap-4 hero-buttons"> <a href="#" class="btn-primary px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all hover:scale-105 hover:shadow-lg"> Remix Template </a> <a href="#" class="btn-secondary px-6 py-3 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all hover:scale-105"> Get Athos Plus </a> </div> </div> <div class="md:w-1/2 hero-image"> <div class="relative"> <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-lg animate-pulse"></div> <img src="https://framerusercontent.com/images/3dpALmvrIR88qPmbDlYoTyJSig.png" alt="Design Showcase" class="relative rounded-2xl shadow-2xl hover-lift"> </div> </div> </div> </section> <!-- Tools Section --> <section class="bg-gray-50 dark:bg-gray-800 py-16" id="tools"> <div class="container mx-auto px-4"> <h2 class="section-title text-3xl font-bold text-center mb-12">Tools I Recommend</h2> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 tools-grid"> <!-- Tool Cards will be animated with stagger effect --> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/bz3s18zhqFtdyPbZIARlijrrw.png" alt="Spline" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Spline</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Place to design and collaborate in 3D</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Pxfjp142gBOSoN5QAIirhUygA.png" alt="Figma" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Figma</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Design tool for creating and collaborating</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/Gp9f5xlIaLvbm57XPbt97G7O8M.png" alt="Framer" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Framer</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Where teams design and publish stunning sites</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/5GAHfuLF3hLl6xiFJ5g7XfUlDDg.png" alt="Lovable" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Lovable</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Build software products, using only a chat interface</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/d8F2mKwloCaOe9ppv1eCSnDUo.png" alt="Relume" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Relume</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Access the world's largest library of Figma</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/HmBMlHkeEZXQBLyDiqXgKUV3Oo.png" alt="Webflow" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Webflow</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Take control of HTML, CSS, and JavaScript in a visual canvas</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/iEln9brI2xn8w0yZKYggB1XW3dw.png" alt="Hotjar" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Hotjar</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Behaviour analytical tool to track users</p> </a> <a href="#" class="tool-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/3QOYS4bjvDd58cuOs2V3nR1sys.png" alt="Notion" class="w-10 h-10 mr-3"> <h3 class="font-semibold">Notion</h3> </div> <p class="text-gray-600 dark:text-gray-300 text-sm">Wiki, docs and projects management system</p> </a> </div> </div> </section> <!-- Projects Section --> <section class="py-16 container mx-auto px-4" id="work"> <h2 class="section-title text-3xl font-bold text-center mb-12">Featured Projects</h2> <div class="grid md:grid-cols-2 gap-8 projects-grid"> <!-- Project cards with enhanced animations --> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/82V0lDZt5IN8w9i1157kfT8pSU.jpg" alt="Subscription Management Platform" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110" loading="lazy"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Modernizing a Subscription Management Platform</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> With user-centered approach, the goals was to create an intuitive interface for effortless financial management while incorporating gamification. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Engagement</p> <p class="text-xl font-semibold counter" data-target="12">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold">4.5*</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/8ZlsEfjDITR5nOu3Yn61F22cbg.jpg" alt="E-Commerce Website" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Revamping an E-Commerce Website</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Focus was to create a user-friendly interface that simplified the process of accessing premium operational web scraping proxies. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Usability</p> <p class="text-xl font-semibold counter" data-target="85">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Retention</p> <p class="text-xl font-semibold counter" data-target="70">0</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/Y1hHthCTPz6YNLIhonp2E5s5WU.jpg" alt="Mobile Health Tracking App" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Developing a Mobile Health Tracking App</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> Leading Bitcoin Data and Stats site. Live price action, monitor on-chain data, and track key economic indicators. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Conversion Rate</p> <p class="text-xl font-semibold counter" data-target="12">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold">4.8*</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> View case study <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> <div class="project-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover-lift"> <div class="overflow-hidden"> <img src="https://framerusercontent.com/images/UlzZi7Dd7txMrOquJLbf9wyEiig.jpg" alt="Corporate Intranet" class="project-image w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-2">Optimizing a Corporate Intranet</h3> <p class="text-gray-600 dark:text-gray-300 mb-4"> An innovative app and approach for taking advantage of unused internet from people's devices. It differs from others because of its simplicity, functions, and ways to earn extra money. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">Conversion Rate</p> <p class="text-xl font-semibold counter" data-target="20">0</p> </div> <div class="stat-item"> <p class="text-sm text-gray-500 dark:text-gray-400">User Satisfaction</p> <p class="text-xl font-semibold counter" data-target="95">0</p> </div> </div> <a href="#" class="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-all group"> Coming Soon <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform"></i> </a> </div> </div> </div> </section> <!-- About Section --> <section class="py-16 bg-gray-50 dark:bg-gray-800" id="about"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-12 md:mb-0 about-content"> <h2 class="text-3xl font-bold mb-8 fade-up">Web designer and expert in</h2> <p class="text-4xl md:text-5xl font-bold mb-8 gradient-text fade-up">UX/UI Design</p> <h3 class="text-2xl mb-4 fade-up">with over</h3> <p class="text-4xl md:text-5xl font-bold mb-8 fade-up">15 years</p> <p class="text-xl mb-8 fade-up">of industry experience.</p> <h3 class="text-2xl mb-4 fade-up">Expertise extends to</h3> <p class="text-4xl md:text-5xl font-bold mb-8 gradient-text fade-up">Framer Development</p> <p class="text-xl mb-8 fade-up">enabling him to create both aesthetically pleasing and easily implementable.</p> <h3 class="text-2xl mb-4 fade-up">Currently works as</h3> <p class="text-4xl md:text-5xl font-bold fade-up">Product Designer</p> <p class="text-xl mt-8 fade-up">at FLYR Hospitality</p> </div> <div class="md:w-1/2 md:pl-12"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 testimonials-grid"> <!-- Testimonials with stagger animation --> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/sQyyAhcgUbXckfoqQWM3dTteTA.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"He consistently exceeds our expectations"</p> </div> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/fATWoAolell4ae2UFdw2TeBM28.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"I recommend Goran whole-heartedly"</p> </div> <div class="testimonial-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <div class="flex items-center mb-4"> <img src="https://framerusercontent.com/images/rbcCSj5wo7EivYt5qpyuab4GMg.png" alt="Client" class="w-10 h-10 rounded-full mr-3" loading="lazy"> <div> <p class="font-semibold">Client Name</p> <p class="text-sm text-gray-500 dark:text-gray-400">Company</p> </div> </div> <p class="italic">"Loved to work with Goran!"</p> </div> </div> <div class="skills-card bg-white dark:bg-gray-700 p-6 rounded-xl shadow-md hover-lift"> <h3 class="text-xl font-bold mb-4">Skills</h3> <div class="flex flex-wrap gap-2"> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">UX Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">UI Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Product Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Consulting</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Design Systems</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Front-End Development</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Workshops</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Design Sprint</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">Interaction Design</span> <span class="skill-tag px-3 py-1 bg-gray-100 dark:bg-gray-600 rounded-full text-sm">User Testing</span> <span class=" - Follow Up Deployment
Make sure that this section loads smoothly. It seems to stutter when scrolling through the page - Follow Up Deployment
Make sure that this section loads smoothly. It seems to stutter when scrolling through the page - Follow Up Deployment
This section stutters to load can you fix it. It usually happens when I'm scrolling down the page - Follow Up Deployment
This section doesnt load properly there is stutter when i scroll down to this section - Follow Up Deployment
undefined - Follow Up Deployment
undefined - Initial Deployment
initial commit