Skip to content

Refine portfolio copy and add Services & Process sections #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ForgetFullness wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Refine portfolio copy and add Services & Process sections #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bb4765
Refine portfolio content and sections
ForgetFullness Feb 3, 2026
9964b08
Localize portfolio to Persian RTL
ForgetFullness Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 259 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>سالمیس | نمونه‌کار</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="hero">
<nav class="nav">
<div class="logo">Salamis</div>
<div class="nav-links">
<a href="#about">درباره</a>
<a href="#services">خدمات</a>
<a href="#projects">پروژه‌ها</a>
<a href="#skills">مهارت‌ها</a>
<a href="#contact">تماس</a>
</div>
<button class="cta">شروع همکاری</button>
</nav>

<section class="hero-content">
<div class="hero-text">
<p class="eyebrow">نمونه‌کار</p>
<h1>سالمیس</h1>
<p class="subtitle">
طراحی تجربه‌های دیجیتال آرام و حرفه‌ای برای تیم‌های جاه‌طلب. از ایده تا اجرا، کمک
می‌کنم برندها شفاف، زیبا و اثرگذار دیده شوند و مخاطب را به مشتری تبدیل کنند.
</p>
<div class="hero-actions">
<button class="cta">مشاهده پروژه‌های منتخب</button>
<button class="ghost">دانلود رزومه</button>
</div>
<div class="hero-highlights">
<div>
<span class="highlight-number">۱۲+</span>
<span class="highlight-label">لانچ کامل</span>
</div>
<div>
<span class="highlight-number">٪۹۸</span>
<span class="highlight-label">رضایت مشتری</span>
</div>
<div>
<span class="highlight-number">۲۴ساعت</span>
<span class="highlight-label">زمان پاسخ‌گویی</span>
</div>
</div>
</div>
<div class="hero-card">
<div class="availability">
<span class="dot"></span>
آماده پذیرش پروژه جدید
</div>
<h2>جزئیات سریع</h2>
<ul>
<li><strong>نقش:</strong> طراح محصول و توسعه‌دهنده وب</li>
<li><strong>موقعیت:</strong> تهران، ایران</li>
<li><strong>ایمیل:</strong> you@email.com</li>
<li><strong>تلفن:</strong> +98 900 000 0000</li>
<li><strong>وب‌سایت:</strong> salamis.ir</li>
</ul>
<p class="card-note">
اطلاعات واقعی خودتان را جایگزین کنید تا سایت آماده انتشار شود.
</p>
</div>
</section>
</header>

<main>
<section id="about" class="section about">
<div>
<h2>درباره من</h2>
<p>
یک طراح چندرشته‌ای هستم که استراتژی، هویت بصری و اجرای تمیز را کنار هم می‌آورم.
به تیم‌ها کمک می‌کنم محصولی فکرشده بسازند، برندشان را تقویت کنند و با مخاطب شفاف
ارتباط بگیرند.
</p>
<div class="stats">
<div>
<strong>۸+ سال</strong>
<span>تجربه طراحی و محصول</span>
</div>
<div>
<strong>۳۰+ پروژه</strong>
<span>تحویل به تیم‌های بین‌المللی</span>
</div>
<div>
<strong>۴× جایزه</strong>
<span>تقدیر از کیفیت طراحی</span>
</div>
</div>
</div>
<div class="about-grid">
<div class="about-card">
<h3>ماموریت من</h3>
<p>ساخت تجربه‌های دیجیتال انسانی که ساده و قابل‌اعتماد باشند.</p>
</div>
<div class="about-card">
<h3>رویکرد من</h3>
<p>شنیدن دقیق، طراحی هدفمند و تحویل دقیق با وضوح بالا.</p>
</div>
<div class="about-card">
<h3>ارزش‌ها</h3>
<p>همکاری، صداقت و تمرکز بر کیفیت در تمام جزئیات.</p>
</div>
</div>
</section>

<section id="services" class="section services">
<div class="section-heading">
<h2>خدمات</h2>
<p>خلاصه‌ای شفاف از خروجی‌هایی که برای استارتاپ‌ها و تیم‌های در حال رشد ارائه می‌شود.</p>
</div>
<div class="service-grid">
<article class="service-card">
<h3>برند و هویت بصری</h3>
<p>لوگو، سیستم بصری و گایدلاین برای ساخت برندی ماندگار و قابل‌شناسایی.</p>
<span class="service-meta">استراتژی • طراحی • لحن</span>
</article>
<article class="service-card">
<h3>طراحی محصول</h3>
<p>ریسرچ UX، فلوها، طراحی UI و پروتوتایپ برای وب و موبایل.</p>
<span class="service-meta">ریسرچ • UX • UI</span>
</article>
<article class="service-card">
<h3>ساخت وب‌سایت</h3>
<p>وب‌سایت‌های سریع، ریسپانسیو و قابل‌مدیریت با اجرای تمیز.</p>
<span class="service-meta">HTML • CSS • CMS</span>
</article>
</div>
</section>

<section id="projects" class="section projects">
<div class="section-heading">
<h2>پروژه‌های منتخب</h2>
<p>نمونه‌های برتر خود را نمایش دهید. هر کارت می‌تواند به کیس‌استادی یا محصول زنده لینک شود.</p>
</div>
<div class="project-grid">
<article class="project-card">
<div class="project-tag">برندینگ</div>
<h3>بازطراحی هویت مدرن</h3>
<p>
بازتعریف زبان بصری برای یک استارتاپ در حال رشد؛ شفاف، حرفه‌ای و یکپارچه در تمام نقاط تماس.
</p>
<a href="#">مشاهده کیس‌استادی ←</a>
</article>
<article class="project-card">
<div class="project-tag">طراحی محصول</div>
<h3>داشبورد مالی موبایل</h3>
<p>
طراحی داشبوردی شهودی که کاربران را در کنترل هزینه‌ها و رسیدن به اهداف پس‌انداز همراهی می‌کند.
</p>
<a href="#">مشاهده کیس‌استادی ←</a>
</article>
<article class="project-card">
<div class="project-tag">تجربه وب</div>
<h3>پلتفرم نمونه‌کار</h3>
<p>
ساخت وب‌سایتی واکنش‌گرا و حرفه‌ای که تخصص را منتقل می‌کند و مشتری جذب می‌کند.
</p>
<a href="#">مشاهده کیس‌استادی ←</a>
</article>
</div>
</section>

<section id="skills" class="section skills">
<div class="section-heading">
<h2>مهارت‌ها و ابزارها</h2>
<p>توانمندی‌ها و نرم‌افزارهایی که پشت کار شما هستند.</p>
</div>
<div class="skills-grid">
<div class="skill-card">
<h3>طراحی</h3>
<p>UX Research، UI Design، Interaction Design، Design Systems</p>
</div>
<div class="skill-card">
<h3>توسعه</h3>
<p>HTML, CSS, JavaScript, React, Webflow</p>
</div>
<div class="skill-card">
<h3>همکاری</h3>
<p>ورکشاپ، هم‌راستاسازی ذی‌نفعان، استراتژی محصول</p>
</div>
<div class="skill-card">
<h3>ابزارها</h3>
<p>Figma, Adobe CC, Notion, Jira, Google Analytics</p>
</div>
</div>
</section>

<section class="section process">
<div class="section-heading">
<h2>فرآیند همکاری</h2>
<p>مسیر شفاف همکاری تا بدانید در هر مرحله چه اتفاقی می‌افتد.</p>
</div>
<div class="process-steps">
<div>
<span class="step-number">۰۱</span>
<h3>شناخت</h3>
<p>درک اهداف، کاربران و فضای رقابتی.</p>
</div>
<div>
<span class="step-number">۰۲</span>
<h3>طراحی</h3>
<p>ساخت تجربه و پروتوتایپ‌هایی که مسئله واقعی را حل کنند.</p>
</div>
<div>
<span class="step-number">۰۳</span>
<h3>تحویل</h3>
<p>راه‌اندازی خروجی‌های حرفه‌ای همراه با پشتیبانی انتقال.</p>
</div>
</div>
</section>

<section id="contact" class="section contact">
<div class="contact-card">
<h2>با هم چیزی بسازیم</h2>
<p>
آماده شروع پروژه هستید یا نیاز به برآورد دارید؟ چند جزئیات ارسال کنید تا سریع پاسخ بدهم.
</p>
<div class="contact-details">
<div>
<span>ایمیل</span>
<strong>you@email.com</strong>
</div>
<div>
<span>تلفن</span>
<strong>+98 900 000 0000</strong>
</div>
<div>
<span>موقعیت</span>
<strong>Tehran, Iran</strong>
</div>
</div>
<button class="cta">ارسال پیام</button>
</div>
</section>
</main>

<footer class="footer">
<div>
<strong>نمونه‌کار سالمیس</strong>
<p>طراحی شده با تم روشن ملایم و رنگ اصلی #1f8c9c.</p>
</div>
<div class="footer-links">
<a href="https://salamis.ir">salamis.ir</a>
<a href="mailto:you@email.com">you@email.com</a>
<a href="#">لینکدین</a>
</div>
</footer>
</body>
</html>
Loading