portfolio/index.html at main · GEOAC/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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>GC Portfolio V1</title>

  <!-- Bootstrap 5.3 CSS (CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Optional: your custom CSS -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <!-- Simple navbar -->
  <nav class="navbar navbar-expand-sm bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#">George Connett</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

    <!-- HERO IMAGE - dark - padding x 5 (wide) -->
     <header>
   <section class="bg-dark text-light mb-5">
    <div class="container align-items-center">
<img src="https://images.gc.eflservices.co.uk/fit-in/1400x1400/e416396e-6187-4f68-aa04-27f2809a547c.jpg"
class="img-fluid" alt="Me behind the statue of Jack Leslie, my great uncle. Next to my cousins and footballer Carlton Cole at Plymouth Argyle FC">
    </div>
        <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary my-3 mx-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Subscribe to my newsletter!
    </button>
  </section>


  </header>

  <!-- Main ABOUT INTRO content -->
  <main id="about" class="row mx-4">
    <h1 class="mb-4">About this website</h1>
    <p class="lead">This is a work in progress web portfolio build using minimal Bootstrap 5.3 and the CDN CSS and JS bundle.</p>
  </main>

  <!-- Section H2 dark - padding x 5 (wide) -->
   <section id="portfolio" class="py-5 px-2 my-5 bg-dark text-light">
    <div class="container">
      <h2 class="mb-4">Portfolio - Section H2 full width dark</h2>
      <p>This is a section with a dark background.</p>
    </div></section>

      <!-- Section H3 - light bg and padding x 5 (wide) -->
   <section class="py-5 my-4 bg-light mx-5">
    <div class="container">
      <h3 class="mb-4">Section H3 full width light</h3>
      <p>This is a section with a light background.</p>
    </div></section>

      <!-- Section H3 - light bg and padding x 5 (wide) -->
   <section class="py-5 my-4 bg-dark text-light mx-5">
    <div class="container">
      <h3 class="mb-4">Section H3 full width light</h3>
      <p>This is a section with a light background.</p>
    </div></section>

      <!-- Section H2 dark - padding x 5 (wide) -->
   <section class="py-5 px-2 my-5 bg-light text-dark">
    <div class="container">
      <h2 class="mb-4">Section H2 full width light</h2>
      <p>This is a section with a dark background.</p>
    </div></section>

          <!-- Section H3 - light bg and padding x 5 (wide) -->
   <section class="py-5 my-4 bg-dark text-light mx-5">
    <div class="container">
      <h3 class="mb-4">Section H3 full width light</h3>
      <p>This is a section with a light background.</p>
    </div></section>

          <!-- Section H3 - light bg and padding x 5 (wide) -->
   <section class="py-5 my-4 bg-light mx-5">
    <div class="container">
      <h3 class="mb-4">Section H3 full width light</h3>
      <p>This is a section with a light background.</p>
    </div></section>

      <!-- SUCCESS GREEN H3 - light bg and padding x 3 (wide) -->
   <section class="py-5 my-4 bg-success text-light">
    <div class="container">
      <h3 class="mb-4">Section H3 full width light</h3>
      <p>This is a section with a light background.</p>
    </div></section>

  <section id="contact" class="container bg-light">
      <div class="row justify-content-center">
        <div class="col-12 text-center my-4">
          <h2 class="display-5">Contact</h2>
          <p class="mt-4">Get in touch with me! If you're interested in my previous projects or would like a copy of my CV, do feel free to get on touch.</p>
        </div>
            <div class="col-12 col-md-10 col-lg-8 mb-4">
                <!-- Add your form here -->
                <form class="row g-3">
                    <div class="col-lg-4">
                        <label for="full-name" class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="full-name">
                    </div>
                    <div class="col-lg-4">
                        <label for="phonenumber" class="form-label">Phone number</label>
                        <input type="number" class="form-control" id="phonenumber">
                    </div>
                    <div class="col-lg-4">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                    <div class="col-12">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" rows="3"></textarea>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
      </div>
    </section>

<!-- Section: footer TOP block -->
  <section id="footerTopContent" class="py-3 mt-5 mx-4 bg-warning text-dark">
    <div class="container d-flex justify-content-between align-items-start">
      <h2 class="mb-4">Wait... You made it this far?!</h2>
    </div>
    <div class="collapse show">
      <div class="container">
        <span>Thanks for visiting my portfolio!</span>
                        <!-- Collapse toggle: hides/shows the content below on click -->
      <button class="btn btn-lg btn-danger btn-block float-end" type="button" data-bs-toggle="collapse" data-bs-target="#footerTopContent" aria-expanded="true" aria-controls="footerTopContent">
        Done!
      </button>
        <p>Why not follow me on <a href="#">Twitter</a>, <a href="#">LinkedIn</a>, or <a href="#">GitHub</a>?</p>

    </div>
    </div>
  </section>

<!-- Extra Footer TOP block -->
  <section id="contact" class="bg-primary py-3">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-6 text-light">
          <h2 class="text-light mb-2">Keep in contact</h2>
          <p class="mb-0">No sign up or spam here though!</p>
        </div>
        <div class="col-12 col-md-6">
          <form class="d-flex justify-content-md-end align-items-center gap-2" role="search" aria-label="Email subscribe form">
            <input class="form-control" type="email" placeholder="Enter your email" aria-label="Email address">
            <button type="submit" class="btn btn-light btn-lg">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer block -->
  <footer class="bg-dark px-5 py-5 pb-5">
    <div class="container small text-light float-start"><a href="#">Github</a></div>
    <div class="float-end text-light">
<span>© 2025 George</span>
    </div>
  </footer>

  <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog margin-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Subscribe</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Join my newsletter for the latest updates on my projects, coding tips, and industry insights delivered straight to your inbox.</p>
                <form class="row g-3">
        <div class="col-lg-6">
            <label for="inputName" class="form-label">Name</label>
            <input type="text" class="form-control" id="inputName">
        </div>
        <div class="col-lg-6">
            <label for="inputEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="inputEmail">
        </div>
        <div class="col-12 mb-4">
            <button type="submit" class="btn btn-primary">
                Sign up!
            </button>
        </div>
    </form>
  </div>
  <!-- Bootstrap JS bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Optional: your custom JS -->
  <script src="js/main.js"></script>
</body>
</html>