SaeedFargah.irپورتفولیوی سعید فرگاه
A bilingual editorial portfolio for an automotive designer, pairing large-format visual storytelling with a private, fail-closed Design Studio entry.یک پورتفولیوی دوزبانه برای طراح خودرو که روایت تصویری بزرگ‌مقیاس را با ورودی امن و خصوصی استودیوی طراحی ترکیب می‌کند.
- Yearسال
- 20262026
- Roleنقش
- Product / Next.js developmentمحصول / توسعه Next.js
- Scopeمحدوده
- Next.js · TypeScript · RTLNext.js · TypeScript · RTL
- Statusوضعیت
- Liveآنلاین
The project, in contextپروژه از نزدیک
I designed and developed Saeed Fargah's bilingual portfolio to give automotive and industrial work room to be understood. The Next.js website combines selected concepts, a career timeline, a detailed Golden Falcon presentation, architectural work and a Design Studio preview. Large imagery leads the experience, while restrained typography, responsive layouts and consistent Persian and English routes keep the story readable.پورتفولیوی سعید فرگاه را برای دیدن اثر و فهمیدن زمینه آن ساختم. عکس بزرگ باید با توضیح وضعیت پروژه و سابقه طراح همراه باشد. این سایت دوزبانه با Next.js، TypeScript و Tailwind، آثار منتخب، مسیر حرفه‌ای، شاهین طلایی، فعالیت‌های معماری و معرفی استودیوی طراحی را در یک روایت تصویری منظم کنار هم قرار می‌دهد.
A visual portfolio with enough contextتصویر باید فرصت دیده‌شدن داشته باشد
The source material spans automotive concepts, vehicle-body studies, marine design and architectural systems. Presenting it as a uniform grid would flatten the differences between projects. I needed a hierarchy that gave the form and proportions of each work enough space, while making the designer's background and the relationship between disciplines easy to follow.
آثار این پورتفولیو از کانسپت خودرو تا طراحی شناور و سیستم‌های معماری امتداد دارند. کارت‌های هم‌اندازه، تفاوت موضوع و مقیاس را کم‌رنگ می‌کردند. هر اثر باید دیده می‌شد و نسبتش با مسیر طراح روشن می‌ماند. ظاهر نمایشی سایت هم نباید خواندن توضیح و پیدا کردن تماس را دشوار می‌کرد؛ تصویر مرکز توجه است، اما تنها اطلاعات صفحه نیست.
The Persian and English experiences also needed to feel equally intentional. A dark cinematic interface can quickly become difficult on a phone if titles, captions and overlays are designed only for desktop. Project claims needed careful wording as well: a concept render, a physical build and a manufacturing proposal do not describe the same stage of work.
فارسی و انگلیسی باید هر دو حس طراحی‌شدن داشته باشند. جهت خواندن، کنترل‌ها، فونت و طول عنوان‌ها در دو زبان متفاوت‌اند. در موبایل هم ظاهر سینمایی نباید به متن ریز و قاب نامناسب تبدیل شود. وضعیت آثار نیز اهمیت دارد: کانسپت، مطالعه مهندسی و ساخت فیزیکی یک معنی ندارند و متن نباید این مرحله‌ها را جای هم بنشاند.
One editorial journey across disciplinesروایتی منظم از آثار و مسیر طراح
I built a dark editorial system with gold accents, generous images and concise captions. The page begins with the designer and selected work, then moves through the professional timeline, Golden Falcon, Fargah Design and the studio. These sections create a sequence without forcing the audience to read a long biography before seeing a project.
زبان بصری را با زمینه تیره، جزئیات طلایی، تصویرهای بزرگ و توضیح کوتاه شکل دادم. مخاطب از طراح و آثار منتخب به مسیر حرفه‌ای، شاهین طلایی، فرگاه دیزاین و استودیو می‌رسد. ترتیب بخش‌ها، ارتباط حوزه‌ها را روشن می‌کند. توضیح و تصویر هر پروژه نیز در قاب مشترک قرار دارند تا نگاه بین اثر و اطلاعاتش رفت‌وبرگشت طبیعی داشته باشد.
The implementation uses reusable React sections and language-specific routes. Persian changes direction and type, not just copy. Motion adds emphasis through section reveals and project-panel transitions, with reduced-motion handling where those interactions are implemented. Metadata, person schema, language alternates and the sitemap establish the site's identity, while the studio's generation capability remains an explicitly controlled preview.
بخش‌های مشترک React و مسیرهای مستقل زبان، نظم سایت را حفظ می‌کنند. فارسی با فونت، جهت و چینش خودش نمایش داده می‌شود. موشنِ بخش‌ها و قاب پروژه‌ها در تعامل‌های مرتبط، ترجیح کاهش حرکت کاربر را لحاظ می‌کند. اطلاعات صفحه، معرفی ساختاریافته شخص و ارتباط زبان‌ها هویت سایت را روشن‌تر می‌کنند. تولید تصویر استودیو نیز به فعال‌سازی جداگانه وابسته است.
What I builtآنچه طراحی و پیاده‌سازی کردم
The parts that make this project useful in day-to-day work.بخش‌هایی که این پروژه را در استفاده روزمره کاربردی می‌کنند.
Selected-work presentationنمایش آثار منتخب
The showcase gives Golden Falcon, Aventador SF and Dragon Concept distinct visual panels. Focus and hover states add emphasis while the project's title, year, status and short explanation stay connected to the image. This makes the work legible without reducing it to a thumbnail.
آثار منتخب مثل شاهین طلایی، اونتادور SF و کانسپت دراگون در قاب‌های مستقل معرفی می‌شوند. عنوان، سال، وضعیت و توضیح کوتاه همراه تصویر قرار دارند و حالت تمرکز یا اشاره، اثر انتخاب‌شده را برجسته می‌کند. مخاطب با یک تصویر کوچک روبه‌رو نیست؛ فرم، تناسبات و زمینه اثر فرصت دیده‌شدن دارند.
A readable professional timelineمسیر حرفه‌ای قابل مرور
A timeline connects earlier vehicle concepts, physical development and later cross-disciplinary work. It provides background after the visual introduction and gives the portfolio a narrative structure rather than leaving visitors to infer chronology from image filenames.
بخش مسیر حرفه‌ای، تجربه‌های طراحی و ادامه فعالیت در حوزه‌های دیگر را با ترتیب مشخص نمایش می‌دهد. این اطلاعات پس از معرفی تصویری می‌آیند تا مخاطب، هم اثر را بشناسد و هم زمینه آن را. سابقه به فهرستی از نام‌ها محدود نمی‌شود و قرار نیست ترتیب پروژه‌ها از نام فایل عکس حدس زده شود.
A deeper Golden Falcon sectionروایت جزئی‌تر شاهین طلایی
The Golden Falcon section includes a technical concept view, an exterior study and an interior presentation. Captions distinguish the angle and intention of each image so the section explains the proposal beyond one promotional render.
برای شاهین طلایی، یک تصویر تبلیغاتی را کافی ندانستم. نمای فنیِ کانسپت، مطالعه فرم بیرونی و فضای داخلی در بخش اختصاصی معرفی می‌شوند. توضیح هر قاب می‌گوید چه جنبه‌ای را می‌بینیم. این ساختار به مخاطب کمک می‌کند پیشنهاد طراحی را بهتر بفهمد، بی‌آنکه تصویر کانسپت به‌عنوان محصول نهایی معرفی شود.
A link to architectural workارتباط با فعالیت‌های معماری
A dedicated Fargah Design section shows how the designer's work extends into modular facade systems and built-project references. The link to the company website offers a separate route for visitors whose interest is architecture rather than automotive design.
بخش فرگاه دیزاین، ارتباط فعالیت طراح با سیستم‌های نما و نمونه‌های معماری را توضیح می‌دهد. این بخش، هویت صنعتی و طراحی سایت را حفظ می‌کند و در عین حال مسیر جداگانه‌ای برای مخاطب معماری دارد. لینک وب‌سایت مجموعه اجازه می‌دهد بررسی محصول و پروژه اجراشده در جای مناسب خودش ادامه پیدا کند.
Persian and English as full layoutsدو زبان با چینش مستقل
Language-aware routes, navigation and type choices give Persian a real RTL layout and English a clear LTR reading flow. Canonical and alternate-language metadata connect those versions without relying solely on a client-side text replacement.
ناوبری و مسیرهای زبان، فارسی را با راست‌به‌چپ واقعی و انگلیسی را با جریان خواندن خودش ارائه می‌کنند. انتخاب فونت و جای عناصر هم متناسب با زبان است. ارتباط نسخه‌ها در اطلاعات صفحه مشخص شده تا دوزبانه‌بودن فقط به تعویض متن داخل مرورگر محدود نماند و هر نسخه آدرس روشن داشته باشد.
Responsive imagery and motionقاب‌بندی و حرکت در اندازه‌های مختلف
Desktop compositions and compact layouts use different spacing and image treatment. Motion guides attention through project and section transitions, and implemented reduced-motion controls offer a quieter alternative. Contact remains available through direct email and the designer's public professional channels.
چینش دسکتاپ و نمایش فشرده، فاصله و قاب تصویر یکسان ندارند. در اندازه‌های کوچک، متن و دکمه باید همچنان خوانا و قابل استفاده باشند. موشن به تغییر توجه میان بخش‌ها کمک می‌کند و کنترل کاهش حرکت در تعامل‌های پیاده‌شده، تجربه آرام‌تری فراهم می‌سازد. مسیر تماس مستقیم و کانال‌های حرفه‌ای نیز در پایان روایت در دسترس‌اند.
A closer lookنگاهی به بخش‌های پروژه
Open any image to inspect the interface. Captures link back to the public page they show.هر تصویر را باز کنید و جزئیات رابط را ببینید. کپچرها به همان صفحه عمومی پروژه لینک دارند.
No captures in this view yet. Choose all views.برای این نمایش کپچری ثبت نشده؛ همه تصاویر را ببینید.
Product visual presentationنمایش تصویری محصول
A visual product presentation; the labelled screenshots above document the public interface.ویدئوی معرفی بصری محصول؛ کپچرهای برچسب‌دار بالا رابط عمومی را نشان می‌دهند.
From structure to releaseمسیر طراحی و اجرا
Curate the materialانتخاب و دسته‌بندی محتوای اصلی
I organised the supplied project material into selected work, career context and detailed studies. Each image needed a role in the story, and each project needed wording that reflected its actual status.
ابتدا محتوای پروژه‌ها را به آثار منتخب، سابقه و مطالعه‌های جزئی‌تر دسته‌بندی کردم. برای هر تصویر، نقش مشخصی در روایت در نظر گرفتم؛ برای هر اثر نیز توضیحی که موضوع و مرحله آن را روشن کند. این تصمیم، مانع تبدیل صفحه به مجموعه‌ای از عکس‌های بدون ارتباط شد.
Build the visual rhythmساخت ریتم تصویری صفحات
I established the dark palette, gold details, large-format panels and reusable section patterns, then connected those patterns to the bilingual content. The section sequence lets imagery and explanation share the page without competing continuously.
بعد پالت تیره، جزئیات طلایی، قاب‌های بزرگ و الگوهای مشترک بخش‌ها را ساختم و به محتوای دوزبانه وصل کردم. ریتم صفحه میان تصویر و توضیح جابه‌جا می‌شود؛ بعضی بخش‌ها روی فرم تمرکز دارند و بعضی، زمینه را روشن می‌کنند. یک شکل ثابت برای همه موضوع‌ها تحمیل نشده است.
Carry the design into the productتبدیل طراحی به محصول قابل استفاده
The implementation brought route-based language handling, metadata, responsive sections and controlled studio availability into the same project. The studio remains a preview with explicit enablement, so the public portfolio can stand on its own.
در مرحله توسعه، مسیر زبان، اطلاعات صفحه، بخش‌های واکنش‌گرا و وضعیت استودیو را در یک محصول کنار هم آوردم. پورتفولیو باید مستقل از فعال‌بودن ابزار تولید تصویر قابل استفاده بماند. معرفی استودیو در صفحه وجود دارد، اما دسترسی به قابلیت رندر به تنظیمات و فعال‌سازی جداگانه وابسته است.
Delivery and current scopeخروجی و وضعیت پروژه
- A bilingual Next.js, React and TypeScript portfolio with independent Persian and English routes.پورتفولیوی دوزبانه با Next.js، React و TypeScript و مسیرهای مستقل فارسی و انگلیسی.
- Selected work, a professional timeline and a multi-view Golden Falcon presentation.آثار منتخب، مسیر حرفه‌ای و معرفی چندوجهی پروژه شاهین طلایی.
- Reusable visual sections, responsive layouts and project-oriented motion.بخش‌های بصری قابل استفاده مجدد، چینش واکنش‌گرا و موشن متناسب با نمایش آثار.
- Person metadata, language alternates, sitemap and direct contact paths.اطلاعات هویتی صفحه، ارتباط نسخه‌های زبانی، نقشه سایت و مسیر تماس مستقیم.
- A Design Studio preview with separately controlled image-generation availability.معرفی استودیوی طراحی با وضعیت جداگانه و کنترل‌شده برای فعال‌سازی تولید تصویر.
Questions about this projectپرسش‌های رایج درباره پروژه
Did you create the automotive designs shown here?آیا طراحی خودروهای نمایش‌داده‌شده هم کار من است؟
The automotive, marine and architectural works are Saeed Fargah's portfolio material. My contribution is the website's product design, interface, visual presentation, bilingual implementation and web development. The case study keeps those responsibilities distinct.
آثار خودرو، شناور و معماری، محتوای پورتفولیوی سعید فرگاه هستند. سهم من طراحی محصول وب، رابط، نحوه ارائه تصویری، پیاده‌سازی دوزبانه و توسعه سایت است. در این نمونه کار، مسئولیت طراحی سایت از مالکیت و طراحی آثار نمایش‌داده‌شده جدا و روشن بیان می‌شود.
Why build it with Next.js?چرا این پروژه با Next.js ساخته شد؟
The portfolio has reusable visual sections, route-specific language metadata and a separate studio interface. Next.js and TypeScript provided a coherent structure for those needs, with React components keeping the visual system consistent as the content changes.
پروژه به بخش‌های تصویری مشترک، اطلاعات مستقل هر زبان و رابط جداگانه استودیو نیاز داشت. Next.js و TypeScript ساختار مناسبی برای این نیازها فراهم کردند. اجزای React هم کمک می‌کنند هنگام تغییر محتوا، الگوی نمایش و رفتار بخش‌ها هماهنگ باقی بماند.
Is the Design Studio an unrestricted public generator?آیا استودیو یک ابزار عمومی و همیشه فعال برای تولید تصویر است؟
No. The project presents the studio as a preview, and generation depends on an enable setting and a server-side provider key. The website does not imply that rendering is available to every visitor at all times.
خیر. استودیو در این پروژه به‌صورت پیش‌نمایش معرفی می‌شود و قابلیت تولید تصویر به فعال‌سازی و تنظیمات سرویس روی سرور وابسته است. وجود صفحه استودیو به معنی دسترسی آزاد و همیشگی همه بازدیدکنندگان به رندر نیست.
Have a similar project in mind?برای پروژه‌ای مشابه صحبت کنیم؟
Tell me what you need to build and where the current experience falls short.بگویید چه محصولی می‌خواهید بسازید و تجربه فعلی در کدام بخش نیاز به تغییر دارد.