portfolio/404.html at main · rahulkaushal04/portfolio · 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
<!DOCTYPE html>
<!--
  404.html
  Custom error page for rahulkaushal04.github.io/portfolio/

  Shown whenever someone hits a URL that doesn't exist under this site.
  GitHub Pages automatically serves this file for unmatched routes, so
  no server config is needed.

  Keep this page self-contained. It should never depend on a JS bundle
  or any resource that might itself 404. Inline the critical styles so
  the page looks right even if main.css somehow fails to load.
-->
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--
    Tell crawlers not to index this error page. "follow" is fine though,
    so any links on the page (like the home button) can still be followed.
  -->
  <meta name="robots" content="noindex, follow">

  <title>404 - Page Not Found | Rahul Kaushal</title>
  <meta name="description" content="Oops! The page you're looking for doesn't exist.">

  <!--
    Paths are written relative to the repo root (/portfolio/...) because
    this site lives at a subpath on GitHub Pages, not a bare domain.
  -->
  <link rel="icon" href="/portfolio/assets/images/favicon.ico" sizes="any">
  <link rel="stylesheet" href="/portfolio/assets/css/main.css">

  <style>
    /*
      Everything below is scoped to .error-page so there's no risk of
      leaking styles if this page ever gets embedded or reused somewhere.
    */

    /* Centers all content vertically and horizontally on the full viewport */
    .error-page {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--sp-6);
      gap: var(--sp-6);
    }

    /* The big emoji up top, just for personality. Floats up and down on loop. */
    .error-page__illustration {
      font-size: 8rem;
      line-height: 1;
      user-select: none;
      animation: float 3s ease-in-out infinite;
    }

    /*
      The "404" text uses a gradient fill. The trick here is to clip the
      background to the text shape using background-clip, then make the
      actual text color transparent so the gradient shows through.
    */
    .error-page__code {
      font-family: var(--ff-heading);
      font-size: var(--fs-5xl);
      font-weight: var(--fw-extrabold);
      background: linear-gradient(135deg, var(--clr-accent), var(--clr-success));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
    }

    /* Main heading, nothing fancy */
    .error-page__title {
      font-size: var(--fs-2xl);
      font-weight: var(--fw-bold);
      color: var(--clr-text-primary);
      margin: 0;
    }

    /* Supporting copy below the heading, capped in width so it doesn't stretch too wide */
    .error-page__message {
      font-size: var(--fs-md);
      color: var(--clr-text-secondary);
      max-width: 480px;
    }

    /* A bit of breathing room above the CTA button */
    .error-page__home-btn {
      margin-top: var(--sp-4);
    }

    /* Simple up-down float used on the illustration emoji */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-16px); }
    }
  </style>
</head>

<body>
  <main class="error-page">

    <!--
      Decorative illustration, purely visual. aria-hidden keeps it out of
      the accessibility tree so screen readers skip it entirely.
    -->
    <div class="error-page__illustration" aria-hidden="true">📡</div>

    <!-- The error code itself, rendered as a styled span rather than a heading -->
    <span class="error-page__code">404</span>

    <h1 class="error-page__title">Looks like you're lost</h1>

    <p class="error-page__message">
      The page you're looking for has wandered off the grid.
      Maybe it was never here, or maybe it's hiding. Either way, let's get you back.
    </p>

    <!--
      Absolute URL so this works regardless of what path the 404 is triggered from.
    -->
    <a href="https://rahulkaushal04.github.io/portfolio/" class="btn btn-primary error-page__home-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        <polyline points="9 22 9 12 15 12 15 22"></polyline>
      </svg>
      Take Me Home
    </a>

  </main>
</body>
</html>