WebFolio/showcase.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Showcase | WebFolio</title>
<meta name="description" content="Project showcase and visual results.">

    <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/showcase.html">

  <meta property="og:site_name" content="WebFolio">
  <meta property="og:title" content="Showcase | WebFolio">
  <meta property="og:description" content="Project showcase and visual results.">
  <meta property="og:url" content="https://rajpratham1.github.io/my-portfolio/showcase.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="Showcase | WebFolio">
  <meta name="twitter:description" content="Project showcase and visual results.">
  <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-showcase">
  <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">Selected Showcase</p>
          <h1>Case snapshots built for clarity and trust.</h1>
          <p>This section gives visitors proof of execution, showing visual quality and practical outcomes without overwhelming them.</p>
          <div class="metrics">
            <div class="metric"><b data-count="9" data-suffix=" featured">0</b><span>Showcase entries</span></div>
            <div class="metric"><b data-count="3" data-suffix=" sectors">0</b><span>Industry range</span></div>
            <div class="metric"><b data-count="100" data-suffix="%">0</b><span>Custom layouts</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">Strong portfolios tell a focused story.</div>
        </aside>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Focused Outcomes</h2>
      <div class="grid-3">
        <article class="card"><strong>Healthcare UI</strong><p>Clear information hierarchy for sensitive decision flows.</p></article>
<article class="card"><strong>Security Portal</strong><p>Trust-first visual language with performance-focused build.</p></article>
<article class="card"><strong>Business Landing</strong><p>High-impact hero and concise conversion-driven copy blocks.</p></article>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Visual Evidence</h2>
<div class="gallery">
  <figure><img src="s1.jpg" alt="Showcase item one" width="1080" height="2412" loading="lazy" decoding="async"><figcaption>Readable dashboard style blocks and balanced contrast.</figcaption></figure>
  <figure><img src="s3.png" alt="Showcase item two" width="1080" height="2412" loading="lazy" decoding="async"><figcaption>Identity-driven sections with controlled animation depth.</figcaption></figure>
      </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>