From 4bb4765aac2b032382f060639089cd79ae8ca57f Mon Sep 17 00:00:00 2001 From: Ali Date: Tue, 3 Feb 2026 16:26:25 +0330 Subject: [PATCH 1/2] Refine portfolio content and sections --- index.html | 262 +++++++++++++++++++++++++++++++++++ styles.css | 393 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 655 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..38836d4 --- /dev/null +++ b/index.html @@ -0,0 +1,262 @@ + + + + + + Salamis | Portfolio + + + + + + +
+ + +
+
+

Portfolio for

+

Salamis

+

+ Crafting calm, modern digital experiences for ambitious teams. From concept to launch, + I help brands look polished, feel intuitive, and convert visitors into customers. +

+
+ + +
+
+
+ 12+ + End-to-end launches +
+
+ 98% + Client satisfaction +
+
+ 24h + Typical response time +
+
+
+
+
+ + Available for new projects +
+

Quick details

+
    +
  • Role: Product Designer & Developer
    • +
  • Location: Tehran, Iran
    • +
  • Email: you@email.com
    • +
  • Phone: +98 900 000 0000
    • +
  • Website: salamis.ir
    • +
+

+ Replace placeholders with your real details to publish your portfolio. +

+
+
+
+ +
+
+
+

About me

+

+ I’m a multidisciplinary designer who blends strategy, visual craft, and clean + implementation. I help teams build thoughtful products, refine their identity, and + communicate clearly with their audience. +

+
+
+ 8+ years + Design & product experience +
+
+ 30+ projects + Delivered worldwide +
+
+ 4x awards + Recognition for design quality +
+
+
+
+
+

My mission

+

Craft meaningful digital experiences that feel effortless and human.

+
+
+

My approach

+

Listen deeply, design with intention, and ship with clarity and care.

+
+
+

My values

+

Collaboration, honesty, and pushing for quality in every detail.

+
+
+
+ +
+
+

Services

+

A clear overview of what you deliver for startups, founders, and growing teams.

+
+
+
+

Brand & identity

+

Logos, visual systems, and guidelines that make your brand instantly recognizable.

+ Strategy • Visuals • Voice +
+
+

Product design

+

UX research, flows, UI, and prototyping for web & mobile experiences.

+ Research • UX • UI +
+
+

Web build

+

Clean, responsive websites that are fast, accessible, and easy to maintain.

+ HTML • CSS • CMS +
+
+
+ +
+
+

Featured projects

+

Highlight your best work. Each card can link to a case study or live product.

+
+
+
+
Branding
+

Modern identity refresh

+

+ Reimagined the visual language for a growing startup—clean, confident, and + consistent across touchpoints. +

+ View case study → +
+
+
Product Design
+

Mobile finance dashboard

+

+ Designed an intuitive dashboard that helps users understand spending and reach + savings goals faster. +

+ View case study → +
+
+
Web Experience
+

Portfolio platform

+

+ Built a polished, responsive site that communicates expertise and drives leads. +

+ View case study → +
+
+
+ +
+
+

Skills & tools

+

List the strengths and software that support your craft.

+
+
+
+

Design

+

UX Research, UI Design, Interaction Design, Design Systems

+
+
+

Development

+

HTML, CSS, JavaScript, React, Webflow

+
+
+

Collaboration

+

Workshops, Stakeholder Alignment, Product Strategy

+
+
+

Tools

+

Figma, Adobe CC, Notion, Jira, Google Analytics

+
+
+
+ +
+
+

How I work

+

A transparent process so you always know what’s happening next.

+
+
+
+ 01 +

Discovery

+

Understand the goals, users, and competitive landscape.

+
+
+ 02 +

Design

+

Create visuals and prototypes that solve real problems.

+
+
+ 03 +

Deliver

+

Launch polished assets with handoff support and care.

+
+
+
+ +
+
+

Let’s build something together

+

+ Ready to start a project or need a quote? Share a few details and I’ll respond + quickly. +

+
+
+ Email + you@email.com +
+
+ Phone + +98 900 000 0000 +
+
+ Location + Tehran, Iran +
+
+ +
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..32f9aca --- /dev/null +++ b/styles.css @@ -0,0 +1,393 @@ +:root { + color-scheme: light; + --primary: #1f8c9c; + --primary-dark: #156a76; + --background: #f3f6f6; + --surface: #ffffff; + --text: #1f2933; + --muted: #55606a; + --border: #dbe4e9; + --shadow: 0 20px 50px rgba(31, 140, 156, 0.08); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Manrope", sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.6; +} + +a { + color: inherit; + text-decoration: none; +} + +.hero { + padding: 32px 80px 64px; + background: linear-gradient(180deg, #e2f1f3 0%, var(--background) 100%); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; +} + +.logo { + font-weight: 700; + font-size: 1.25rem; + color: var(--primary-dark); +} + +.nav-links { + display: flex; + gap: 24px; + font-weight: 500; + color: var(--muted); +} + +.nav-links a:hover { + color: var(--primary); +} + +.cta { + background: var(--primary); + color: #fff; + border: none; + border-radius: 999px; + padding: 12px 24px; + font-weight: 600; + box-shadow: var(--shadow); + cursor: pointer; +} + +.ghost { + background: transparent; + border: 1px solid var(--border); + color: var(--primary-dark); + border-radius: 999px; + padding: 12px 24px; + font-weight: 600; + cursor: pointer; +} + +.hero-content { + margin-top: 56px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 48px; + align-items: center; +} + +.hero-text h1 { + font-size: clamp(2.5rem, 4vw, 3.5rem); + margin-bottom: 16px; +} + +.eyebrow { + color: var(--primary-dark); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + font-size: 0.8rem; + margin-bottom: 12px; +} + +.subtitle { + color: var(--muted); + margin-bottom: 24px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-bottom: 32px; +} + +.hero-highlights { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 16px; +} + +.highlight-number { + font-size: 1.6rem; + font-weight: 700; + color: var(--primary-dark); + display: block; +} + +.highlight-label { + color: var(--muted); + font-size: 0.9rem; +} + +.hero-card { + background: var(--surface); + border-radius: 24px; + padding: 32px; + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +.availability { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: 999px; + background: rgba(31, 140, 156, 0.1); + color: var(--primary-dark); + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 16px; +} + +.availability .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--primary); +} + +.hero-card h2 { + margin-bottom: 16px; +} + +.hero-card ul { + list-style: none; + display: grid; + gap: 8px; + margin-bottom: 16px; + color: var(--muted); +} + +.card-note { + font-size: 0.85rem; + color: var(--muted); +} + +.section { + padding: 72px 80px; +} + +.section-heading { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 24px; + margin-bottom: 32px; +} + +.section-heading p { + max-width: 360px; + color: var(--muted); +} + +.about { + display: grid; + grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr); + gap: 48px; +} + +.about p { + color: var(--muted); + margin-top: 12px; +} + +.stats { + margin-top: 24px; + display: grid; + gap: 16px; +} + +.stats strong { + display: block; + font-size: 1.1rem; + color: var(--primary-dark); +} + +.stats span { + color: var(--muted); + font-size: 0.9rem; +} + +.about-grid { + display: grid; + gap: 16px; +} + +.about-card, +.project-card, +.skill-card, +.contact-card { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.services { + background: #eef6f7; +} + +.service-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.service-card { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.service-card p { + color: var(--muted); + margin: 12px 0 16px; +} + +.service-meta { + font-size: 0.85rem; + color: var(--primary-dark); + font-weight: 600; +} + +.project-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); +} + +.project-tag { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--primary-dark); + font-weight: 600; + margin-bottom: 12px; +} + +.project-card p { + color: var(--muted); + margin: 12px 0 20px; +} + +.project-card a { + color: var(--primary); + font-weight: 600; +} + +.skills-grid { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.skill-card p { + color: var(--muted); + margin-top: 8px; +} + +.contact { + background: #e6f1f2; +} + +.contact-card { + display: grid; + gap: 20px; + max-width: 720px; + margin: 0 auto; + text-align: center; +} + +.contact-details { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + color: var(--muted); +} + +.contact-details strong { + display: block; + color: var(--text); + margin-top: 6px; +} + +.footer { + padding: 32px 80px; + display: flex; + flex-wrap: wrap; + gap: 24px; + align-items: center; + justify-content: space-between; + color: var(--muted); +} + +.footer-links { + display: flex; + gap: 20px; +} + +.process { + background: #f7faf9; +} + +.process-steps { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.process-steps div { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.step-number { + display: inline-block; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 12px; +} + +@media (max-width: 900px) { + .hero, + .section, + .footer { + padding: 32px 24px; + } + + .nav { + flex-direction: column; + align-items: flex-start; + } + + .nav-links { + flex-wrap: wrap; + } + + .section-heading { + flex-direction: column; + align-items: flex-start; + } + + .about { + grid-template-columns: 1fr; + } +} From 9964b0887a2cd009ba768889c9c4dcc7e174118b Mon Sep 17 00:00:00 2001 From: Ali Date: Sat, 7 Feb 2026 03:35:14 +0330 Subject: [PATCH 2/2] Localize portfolio to Persian RTL --- index.html | 197 ++++++++++++++++++++++++++--------------------------- styles.css | 12 +++- 2 files changed, 108 insertions(+), 101 deletions(-) diff --git a/index.html b/index.html index 38836d4..8f97261 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + - Salamis | Portfolio + سالمیس | نمونه‌کار @@ -17,57 +17,57 @@
-

Portfolio for

-

Salamis

+

نمونه‌کار

+

سالمیس

- Crafting calm, modern digital experiences for ambitious teams. From concept to launch, - I help brands look polished, feel intuitive, and convert visitors into customers. + طراحی تجربه‌های دیجیتال آرام و حرفه‌ای برای تیم‌های جاه‌طلب. از ایده تا اجرا، کمک + می‌کنم برندها شفاف، زیبا و اثرگذار دیده شوند و مخاطب را به مشتری تبدیل کنند.

- - + +
- 12+ - End-to-end launches + ۱۲+ + لانچ کامل
- 98% - Client satisfaction + ٪۹۸ + رضایت مشتری
- 24h - Typical response time + ۲۴ساعت + زمان پاسخ‌گویی
- Available for new projects + آماده پذیرش پروژه جدید
-

Quick details

+

جزئیات سریع

    -
  • Role: Product Designer & Developer
    • -
  • Location: Tehran, Iran
    • -
  • Email: you@email.com
    • -
  • Phone: +98 900 000 0000
    • -
  • Website: salamis.ir
    • +
  • نقش: طراح محصول و توسعه‌دهنده وب
    • +
  • موقعیت: تهران، ایران
    • +
  • ایمیل: you@email.com
    • +
  • تلفن: +98 900 000 0000
    • +
  • وب‌سایت: salamis.ir

- Replace placeholders with your real details to publish your portfolio. + اطلاعات واقعی خودتان را جایگزین کنید تا سایت آماده انتشار شود.

@@ -76,62 +76,62 @@

Quick details

-

About me

+

درباره من

- I’m a multidisciplinary designer who blends strategy, visual craft, and clean - implementation. I help teams build thoughtful products, refine their identity, and - communicate clearly with their audience. + یک طراح چندرشته‌ای هستم که استراتژی، هویت بصری و اجرای تمیز را کنار هم می‌آورم. + به تیم‌ها کمک می‌کنم محصولی فکرشده بسازند، برندشان را تقویت کنند و با مخاطب شفاف + ارتباط بگیرند.

- 8+ years - Design & product experience + ۸+ سال + تجربه طراحی و محصول
- 30+ projects - Delivered worldwide + ۳۰+ پروژه + تحویل به تیم‌های بین‌المللی
- 4x awards - Recognition for design quality + ۴× جایزه + تقدیر از کیفیت طراحی
-

My mission

-

Craft meaningful digital experiences that feel effortless and human.

+

ماموریت من

+

ساخت تجربه‌های دیجیتال انسانی که ساده و قابل‌اعتماد باشند.

-

My approach

-

Listen deeply, design with intention, and ship with clarity and care.

+

رویکرد من

+

شنیدن دقیق، طراحی هدفمند و تحویل دقیق با وضوح بالا.

-

My values

-

Collaboration, honesty, and pushing for quality in every detail.

+

ارزش‌ها

+

همکاری، صداقت و تمرکز بر کیفیت در تمام جزئیات.

-

Services

-

A clear overview of what you deliver for startups, founders, and growing teams.

+

خدمات

+

خلاصه‌ای شفاف از خروجی‌هایی که برای استارتاپ‌ها و تیم‌های در حال رشد ارائه می‌شود.

-

Brand & identity

-

Logos, visual systems, and guidelines that make your brand instantly recognizable.

- Strategy • Visuals • Voice +

برند و هویت بصری

+

لوگو، سیستم بصری و گایدلاین برای ساخت برندی ماندگار و قابل‌شناسایی.

+ استراتژی • طراحی • لحن
-

Product design

-

UX research, flows, UI, and prototyping for web & mobile experiences.

- Research • UX • UI +

طراحی محصول

+

ریسرچ UX، فلوها، طراحی UI و پروتوتایپ برای وب و موبایل.

+ ریسرچ • UX • UI
-

Web build

-

Clean, responsive websites that are fast, accessible, and easy to maintain.

+

ساخت وب‌سایت

+

وب‌سایت‌های سریع، ریسپانسیو و قابل‌مدیریت با اجرای تمیز.

HTML • CSS • CMS
@@ -139,59 +139,57 @@

Web build

-

Featured projects

-

Highlight your best work. Each card can link to a case study or live product.

+

پروژه‌های منتخب

+

نمونه‌های برتر خود را نمایش دهید. هر کارت می‌تواند به کیس‌استادی یا محصول زنده لینک شود.

-
Branding
-

Modern identity refresh

+
برندینگ
+

بازطراحی هویت مدرن

- Reimagined the visual language for a growing startup—clean, confident, and - consistent across touchpoints. + بازتعریف زبان بصری برای یک استارتاپ در حال رشد؛ شفاف، حرفه‌ای و یکپارچه در تمام نقاط تماس.

- View case study → + مشاهده کیس‌استادی ←
-
Product Design
-

Mobile finance dashboard

+
طراحی محصول
+

داشبورد مالی موبایل

- Designed an intuitive dashboard that helps users understand spending and reach - savings goals faster. + طراحی داشبوردی شهودی که کاربران را در کنترل هزینه‌ها و رسیدن به اهداف پس‌انداز همراهی می‌کند.

- View case study → + مشاهده کیس‌استادی ←
-
Web Experience
-

Portfolio platform

+
تجربه وب
+

پلتفرم نمونه‌کار

- Built a polished, responsive site that communicates expertise and drives leads. + ساخت وب‌سایتی واکنش‌گرا و حرفه‌ای که تخصص را منتقل می‌کند و مشتری جذب می‌کند.

- View case study → + مشاهده کیس‌استادی ←
-

Skills & tools

-

List the strengths and software that support your craft.

+

مهارت‌ها و ابزارها

+

توانمندی‌ها و نرم‌افزارهایی که پشت کار شما هستند.

-

Design

-

UX Research, UI Design, Interaction Design, Design Systems

+

طراحی

+

UX Research، UI Design، Interaction Design، Design Systems

-

Development

+

توسعه

HTML, CSS, JavaScript, React, Webflow

-

Collaboration

-

Workshops, Stakeholder Alignment, Product Strategy

+

همکاری

+

ورکشاپ، هم‌راستاسازی ذی‌نفعان، استراتژی محصول

-

Tools

+

ابزارها

Figma, Adobe CC, Notion, Jira, Google Analytics

@@ -199,63 +197,62 @@

Tools

-

How I work

-

A transparent process so you always know what’s happening next.

+

فرآیند همکاری

+

مسیر شفاف همکاری تا بدانید در هر مرحله چه اتفاقی می‌افتد.

- 01 -

Discovery

-

Understand the goals, users, and competitive landscape.

+ ۰۱ +

شناخت

+

درک اهداف، کاربران و فضای رقابتی.

- 02 -

Design

-

Create visuals and prototypes that solve real problems.

+ ۰۲ +

طراحی

+

ساخت تجربه و پروتوتایپ‌هایی که مسئله واقعی را حل کنند.

- 03 -

Deliver

-

Launch polished assets with handoff support and care.

+ ۰۳ +

تحویل

+

راه‌اندازی خروجی‌های حرفه‌ای همراه با پشتیبانی انتقال.

-

Let’s build something together

+

با هم چیزی بسازیم

- Ready to start a project or need a quote? Share a few details and I’ll respond - quickly. + آماده شروع پروژه هستید یا نیاز به برآورد دارید؟ چند جزئیات ارسال کنید تا سریع پاسخ بدهم.

- Email + ایمیل you@email.com
- Phone + تلفن +98 900 000 0000
- Location + موقعیت Tehran, Iran
- +
diff --git a/styles.css b/styles.css index 32f9aca..eada351 100644 --- a/styles.css +++ b/styles.css @@ -17,10 +17,12 @@ } body { - font-family: "Manrope", sans-serif; + font-family: "Vazirmatn", sans-serif; background: var(--background); color: var(--text); line-height: 1.6; + direction: rtl; + text-align: right; } a { @@ -38,6 +40,7 @@ a { align-items: center; justify-content: space-between; gap: 24px; + flex-direction: row-reverse; } .logo { @@ -51,6 +54,7 @@ a { gap: 24px; font-weight: 500; color: var(--muted); + flex-direction: row-reverse; } .nav-links a:hover { @@ -110,6 +114,7 @@ a { flex-wrap: wrap; gap: 12px; margin-bottom: 32px; + justify-content: flex-start; } .hero-highlights { @@ -170,6 +175,10 @@ a { color: var(--muted); } +.hero-card li strong { + margin-left: 4px; +} + .card-note { font-size: 0.85rem; color: var(--muted); @@ -185,6 +194,7 @@ a { justify-content: space-between; gap: 24px; margin-bottom: 32px; + text-align: right; } .section-heading p {