omega-design

byKuldeep Singh

PROJECT: TIJARAT STUDIO — Full Stack Portfolio Platform REFERENCE SITE: https://novasite-oly.webflow.io/ GOAL: Recreate the SAME premium design quality, layout system, animation feel, spacing rhythm, and visual hierarchy as the reference site. Output must look like a high-end 50k INR agency website. ---------------------------------- PHASE 1 — STRICT DESIGN ANALYSIS Before coding, deeply analyze the reference site and extract EXACT values: - Typography: font families, sizes (H1–H4, body, buttons), weights, line-heights - Colors: all hex values (backgrounds, text, accents, borders, hover states) - Spacing: container widths, section padding, margins, grid gaps - Layout: flex/grid usage, section structure, navbar & footer system - Breakpoints: mobile, tablet, desktop - Animations: - scroll reveal type (fade/slide/scale) - easing curves - durations (ms) - hover transitions IMPORTANT: Do NOT approximate. Match values as closely as possible. After analysis output: "Analysis complete. Building 50k project." ---------------------------------- PHASE 2 — FILE STRUCTURE tijarat-studio/ index.html, about.html, services.html, portfolio.html, pricing.html, contact.html, thank-you.html assets/css/ variables.css, reset.css, typography.css, layout.css, components.css, animations.css, responsive.css assets/js/ main.js, navbar.js, animations.js, scroll-reveal.js, form-handler.js ---------------------------------- PHASE 3 — CORE RULES - Store ALL values in variables.css (no hardcoding) - Use BEM naming convention - Semantic HTML only - ARIA labels for accessibility - Vanilla JS only (NO jQuery) - No inline CSS or JS - CDN allowed: Google Fonts + FontAwesome only - Zero images → use gradients, SVG, icons ---------------------------------- PHASE 4 — BRAND CONTENT Replace all branding with: TIJARAT STUDIO Hero Text: "We build professional portfolios for every career. From creative freelancers to corporate executives, TIJARAT STUDIO turns your work into a stunning digital presence." Work Process: 01 Discover and Consult 02 Design and Build 03 Launch and Support Services: - Creative Portfolios - Corporate Portfolios - Technical Portfolios - Academic Portfolios Portfolio: Text-only cards with gradient backgrounds: - Project Category - Client Type - Plan Used (₹) Testimonials: Heading: "Client Love" Text: "Your testimonial here after we build your portfolio." Sub: "Your Name, Your Profession" (NO fake names) Pricing: - Standard ₹500 - Premium ₹700 - Enterprise ₹1000 (Keep same layout as reference cards) Contact Form Fields: - Full Name (required) - Category dropdown - Plan dropdown - Message textarea - Submit → redirect to thank-you.html Footer: TIJARAT STUDIO Founder: ARSALAAN AHMED Phone: +91 74477792259 Email: arsalaanahmedwork@gmail.com ---------------------------------- PHASE 5 — PAGES index.html → full landing page about.html → brand story + founder services.html → detailed services portfolio.html → 6 cards + JS filter pricing.html → pricing + FAQ accordion contact.html → 2-column layout thank-you.html → confirmation page ---------------------------------- PHASE 6 — JS FEATURES navbar.js: - sticky navbar - blur on scroll - active links - hamburger menu scroll-reveal.js: - IntersectionObserver - fade-up animation - stagger children animations.js: - replicate hover effects from reference form-handler.js: - validation - inline errors - disable on submit - redirect main.js: - initialize all modules ---------------------------------- PHASE 7 — RESPONSIVE Mobile (<768px): - single column - hamburger nav - font scaling (clamp) Tablet (768–1023px): - adjusted grids Desktop (1024+): - full layout Touch devices: - disable hover effects ---------------------------------- ABSOLUTE REQUIREMENTS - Match reference site visually as close as possible - Maintain same animation feel and smoothness - Maintain spacing consistency across sections - All pages fully interlinked - Clean production-ready code ---------------------------------- DELIVERY ORDER 1. Design analysis 2. variables.css 3. HTML files 4. CSS files 5. JS files 6. Final checklist