WebFolio/process.html at main · rajpratham1/WebFolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Process | WebFolio</title>
<meta name="description" content="Delivery process and stage wise execution.">

    <meta name="author" content="WebFolio Studio">
  <meta name="keywords" content="web development, website design, android app development, ios app interface, portfolio website, seo-friendly website, responsive design, WebFolio">
<meta name="robots" content="index, follow">

  <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">
<link rel="canonical" href="https://rajpratham1.github.io/my-portfolio/process.html">

  <meta property="og:site_name" content="WebFolio">
  <meta property="og:title" content="Process | WebFolio">
  <meta property="og:description" content="Delivery process and stage wise execution.">
  <meta property="og:url" content="https://rajpratham1.github.io/my-portfolio/process.html">
  <meta property="og:image" content="https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@webfolio">
    <meta name="twitter:creator" content="@webfolio">
<meta name="twitter:title" content="Process | WebFolio">
  <meta name="twitter:description" content="Delivery process and stage wise execution.">
  <meta name="twitter:image" content="https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg">

  <!-- Analytics: replace G-XXXXXXXXXX with your real GA4 Measurement ID -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>
  <meta name="theme-color" content="#0a1020">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "WebFolio Studio",
    "url": "https://rajpratham1.github.io/my-portfolio",
    "email": "shrivastavapratham40@gmail.com",
    "telephone": "+91-6200892887",
    "logo": "https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg"
  }
  </script>
  <link rel="icon" type="image/svg+xml" href="assets/logo/webfolio-mark.svg">
  <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=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="theme-process">
  <a class="skip-link" href="#main">Skip to content</a>
  <header class="site-header">
    <div class="container nav-wrap">
      <a class="brand" href="index.html">Web<span>Folio</span></a>
      <button type="button" class="nav-toggle" aria-label="Open menu">Menu</button>
      <nav class="nav-links" aria-label="Primary">
        <a data-nav href="index.html">Home</a>
        <a data-nav href="about.html">About</a>
        <a data-nav href="services.html">Services</a>
        <a data-nav href="work.html">Work</a>
        <a data-nav href="dedication.html">Dedication</a>
        <a data-nav href="contact.html">Contact</a>
<a data-nav href="hire.html" class="cta">Start Project</a>
      </nav>
      </div>
  </header>

  <main id="main" class="page-shell">
    <section class="hero container">
      <div class="hero-grid">
        <article class="panel hero-copy reveal">
          <p class="kicker">How We Work</p>
          <h1>A transparent process from kickoff to launch.</h1>
          <p>The process page sets clear expectations so clients always know what stage the project is in and what comes next.</p>
          <div class="metrics">
            <div class="metric"><b data-count="5" data-suffix=" stages">0</b><span>Delivery model</span></div>
            <div class="metric"><b data-count="2" data-suffix=" demos">0</b><span>Review checkpoints</span></div>
            <div class="metric"><b data-count="1" data-suffix=" owner">0</b><span>Single accountability</span></div>
      </div>
        </article>
        <aside class="panel hero-art reveal" aria-hidden="true">
          <div class="blob one"></div>
          <div class="blob two"></div>
          <div class="blob three"></div>
          <div class="hero-tag">Predictable workflow drives faster delivery.</div>
        </aside>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Focused Outcomes</h2>
      <div class="grid-3">
        <article class="card"><strong>Discovery</strong><p>Collect goals, references, content inventory, and constraints.</p></article>
<article class="card"><strong>Prototype</strong><p>Lock structure, interaction style, and key visual language.</p></article>
<article class="card"><strong>Release</strong><p>Deploy with documentation and post-launch fixes path.</p></article>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Stage Breakdown</h2>
<div class="timeline">
  <div class="step"><strong>01 Briefing</strong><p>Business objective and audience profile.</p></div>
  <div class="step"><strong>02 Architecture</strong><p>Page map and conversion flow.</p></div>
  <div class="step"><strong>03 UI Build</strong><p>Components, animation, and responsiveness.</p></div>
  <div class="step"><strong>04 QA</strong><p>Cross-device checks and bug hardening.</p></div>
  <div class="step"><strong>05 Launch</strong><p>Publish and monitor engagement.</p></div>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Delivery Guarantees</h2>
      <div class="grid-3">
        <article class="card"><strong>Transparent Timeline</strong><p>You always know current stage, next milestone, and expected delivery date.</p></article>
        <article class="card"><strong>Revision Discipline</strong><p>Feedback is handled in structured rounds to keep speed and quality balanced.</p></article>
        <article class="card"><strong>Post-Launch Maintenance</strong><p>We provide optional maintenance for updates, fixes, and continuous improvements.</p></article>
      </div>
      <div class="primary-cta-bar">
        <p>Need a clear roadmap for your website or app idea?</p>
        <a class="cta" href="hire.html">Book a Build Slot</a>
      </div>
    </section>
  </main>

      <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <h3>WebFolio Studio</h3>
        <p>Purpose-built websites, Android apps, desktop experiences, and iOS-ready UI systems with reliable delivery.</p>
        <small>Copyright <span id="year"></span> WebFolio</small>
      </div>
      <div class="footer-links">
        <a data-nav href="index.html">Home</a>
        <a data-nav href="about.html">About</a>
        <a data-nav href="services.html">Services</a>
        <a data-nav href="work.html">Work</a>
        <a data-nav href="dedication.html">Dedication</a>
        <a data-nav href="process.html">Process</a>
        <a data-nav href="showcase.html">Showcase</a>
        <a data-nav href="testimonials.html">Testimonials</a>
        <a data-nav href="pricing.html">Pricing</a>
        <a data-nav href="faq.html">FAQ</a>
        <a data-nav href="tools.html">Free Tools</a>
        <a data-nav href="performance.html">Performance</a>
        <a data-nav href="release-checklist.html">Release Checklist</a>
        <a data-nav href="contact.html">Contact</a>
        <a data-nav href="hire.html">Hire</a>
        <a data-nav href="privacy.html">Privacy</a>
        <a data-nav href="changelog.html">Changelog</a>
        <a data-nav href="terms.html">Terms</a>
      </div>
    </div>
  </footer>

  <script src="assets/js/main.js"></script>
</body>
</html>