AWS-builder-challenge-2/index.html at main · vixthewiz/AWS-builder-challenge-2 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VixTheWiz</title>
    <link rel="stylesheet" href="styles5.css">
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <main>
        <section class="hero">
            <img src="profile.png" alt="Your Name" class="profile-photo">
            <h1>VixTheWiz</h1>
            <p class="tagline">Cloud Builder & AWS Enthusiast</p>
            <a href="https://builder.aws.com/community/@vixthewiz" target="_blank" class="aws-link">AWS Builder Center Profile 🚀</a>
        </section>

        <section class="fun-facts">
            <h3>Fun Facts About Me</h3>
            <div class="facts-grid">
                <div class="fact-card">
                    <h4>🚀 Challenge In Progress</h4>
                    <p>Currently working on <a href="https://builder.aws.com/content/31C2WxIDSQive7q2Dv5xNFCmYJj/aws-builder-challenge-2-build-a-website-on-the-cloud?trk=86c76c09-e8f4-4138-badc-604ce7bc5d77&sc_channel=el" target="_blank">AWS Builder Challenge #2: Build a website on the cloud!</a></p>
                </div>
                <div class="fact-card">
                    <h4>🎯 Learning Goal</h4>
                    <p>Building my skills one AWS service at a time - S3, CloudFront, and beyond!</p>
                </div>
                <div class="fact-card">
                    <h4>💡 Fun Project</h4>
                    <p>This website is hosted on Amazon S3 with CloudFront for global delivery!</p>
                </div>
            </div>
        </section>

        <section class="aws-journey">
            <h3>AWS Builder Challenge #2</h3>
            <p>I'm currently working on the "Build a website on the cloud" challenge, learning to deploy websites using AWS S3 and CloudFront. This site is part of my challenge progress!</p>
            <a href="https://builder.aws.com/content/31C2WxIDSQive7q2Dv5xNFCmYJj/aws-builder-challenge-2-build-a-website-on-the-cloud?trk=86c76c09-e8f4-4138-badc-604ce7bc5d77&sc_channel=el" target="_blank" class="cta-button">View Challenge Details</a>
        </section>

        <!-- CONTACT FORM SECTION - Added for user contact functionality -->
        <section class="contact-form">
    <h3>Get In Touch</h3>
    <p>Have a question or want to connect? Send me a message!</p>
    <!-- Form message container for success/error messages -->
    <div id="form-message" class="form-message" style="display: none;"></div>
    <form class="contact-form-container">
        <!-- Contact form input fields -->
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" name="message" rows="5" required></textarea>
        </div>
        <!-- Contact form submit button -->
        <button type="submit" class="contact-submit-btn">Send Message</button>
    </form>
</section>
<!-- END CONTACT FORM SECTION -->
    </main>
    <script>
    // Contact form handler - Sends form data to AWS Lambda
    const LAMBDA_URL = "https://d3vwpcadquayibunggbgr44hgq0czamb.lambda-url.us-east-1.on.aws/"

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('.contact-form-container');

        form.addEventListener('submit', async function(e) {
            e.preventDefault();

            const submitBtn = form.querySelector('.contact-submit-btn');
            const messageDiv = document.getElementById('form-message');

            // Show loading state
            submitBtn.textContent = 'Sending...';
            submitBtn.disabled = true;
            messageDiv.style.display = 'none';

            // Get form data
            const formData = {
                name: form.name.value,
                email: form.email.value,
                message: form.message.value
            };

            try {
                const response = await fetch(LAMBDA_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    showMessage('Message sent successfully! Thank you for reaching out.', 'success');
                    form.reset();
                } else {
                    showMessage('Failed to send message. Please try again.', 'error');
                }
            } catch (error) {
                showMessage('Network error. Please check your connection and try again.', 'error');
            }

            // Reset button
            submitBtn.textContent = 'Send Message';
            submitBtn.disabled = false;
        });
    });

    function showMessage(text, type) {
        const messageDiv = document.getElementById('form-message');
        messageDiv.textContent = text;
        messageDiv.className = `form-message ${type}`;
        messageDiv.style.display = 'block';

        // Auto-hide after 10 seconds
        setTimeout(() => {
            messageDiv.style.display = 'none';
        }, 10000);
    }
</script>
<footer>
        <p>&copy; 2025 Victoria @VixTheWiz. Built with ❤️ on AWS</p>
    </footer>
</body>
</html>