WebTech-Final-Project/about.html at main · jacobgimpel/WebTech-Final-Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Project</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/Assets/css/site.css">
</head>

<body class="bg-rose-200 min-h-screen">

<header class="sticky top-0 z-50 bg-rose-600 text-gray-200 shadow-md">
    <div class="max-w-6xl mx-auto flex items-center justify-between p-6">
        <h1 class="text-xl font-bold">Jacob Gimpel</h1>

        <nav class="flex gap-3">
            <a href="index.html" class="px-3 py-1 bg-rose-500 hover:bg-rose-400 rounded text-sm">Home</a>
            <a href="resume.html" class="px-3 py-1 bg-rose-500 hover:bg-rose-400 rounded text-sm">Resume</a>
            <a href="projects.html" class="px-3 py-1 bg-rose-500 hover:bg-rose-400 rounded text-sm">Projects</a>
            <a href="contact.html" class="px-3 py-1 bg-rose-500 hover:bg-rose-400 rounded text-sm">Contact</a>
            <a href="about.html" class="px-3 py-1 bg-rose-500 hover:bg-rose-400 rounded text-sm">About</a>
        </nav>

    </div>
</header>


<main class="max-w-6xl mx-auto p-6 flex flex-col md:flex-row gap-6">

    <article class="md:w-1/2 flex items-center border border-black p-6 bg-rose-500">
        <div>
            <h2 class="text-3xl font-bold mb-4">About</h2>
            <p class="text-lg leading-relaxed">
                I'm a student currently completing the Certificate IV in Programming at NMTafe Perth. On this site, you will find examples of my work done throughout my studies at TAFE, including work in HTML, CSS, JavaScript, Python, and C#.
            </p>
        </div>
    </article>

    <div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
        <div class="grid grid-cols-2 gap-2">
            <div>
                <img class="object-cover object-center h-40 w-60 rounded-lg md:h-60 md:w-60"
                     src="Assets/images/phase-1.png" alt="Phase 1">
            </div>
            <div>
                <img class="object-cover object-center h-40 w-60 rounded-lg md:h-60 md:w-60"
                     src="Assets/images/phase-2.png" alt="Phase 2">
            </div>
            <div>
                <img class="object-cover object-center h-40 w-60 rounded-lg md:h-60 md:w-60"
                     src="Assets/images/phase-3.png" alt="Phase 3">
            </div>
            <div>
                <img class="object-cover object-center h-40 w-60 rounded-lg md:h-60 md:w-60"
                     src="Assets/images/phase-4.png" alt="Phase 4">
            </div>
        </div>
    </div>
</main>

<footer class="bg-rose-600 text-white w-full fixed bottom-0 p-4">
    <div class="max-w-5xl mx-auto">
        <span>&copy; Jacob Gimpel</span>
    </div>
</footer>

</body>
</html>