stephmace-portfolio/index.html at main · stephmace/stephmace-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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>★·.·´¯`·.·★ Steph's Homepage ★·.·´¯`·.·★</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Starfield background -->
    <div class="starfield" id="starfield"></div>

    <!-- Marquee banner -->
    <div class="marquee-container">
        <marquee behavior="scroll" direction="left" scrollamount="5">
            ★ ★ ★ Welcome to my corner of the internet! ★ ★ ★ You are visitor #<span id="marquee-count">???</span>! ★ ★ ★ Best viewed in Netscape Navigator ★ ★ ★ Sign my guestbook! ★ ★ ★
        </marquee>
    </div>

    <div class="container">
        <!-- Header -->
        <header>
            <h1 class="rainbow-text">✨ Steph ✨</h1>
            <p class="subtitle">Manager, Commercial Partnerships at <span class="shopify-green">Shopify</span></p>
            <div class="under-construction">
                <span class="blink">🚧 UNDER CONSTRUCTION 🚧</span>
            </div>
        </header>

        <!-- About Me Section -->
        <section class="retro-box">
            <h2>📝 About Me</h2>
            <div class="section-content">
                <img src="https://web.archive.org/web/20091027065803im_/http://geocities.com/SiliconValley/Haven/1899/anim_icon.gif" alt="computer" class="retro-gif">
                <p>
                    Hey there, web surfer! 🏄‍♀️ Welcome to my personal homepage on the World Wide Web!
                    I'm Steph, and I'm stoked you found your way here. I work at Shopify helping build
                    awesome commercial partnerships. When I'm not crushing it at work, you can find me
                    being a busy mom, spinning on my Peloton, or diving into a good book!
                </p>
                <p class="blink">Thanks for stopping by! 💖</p>
            </div>
        </section>

        <!-- Work Section -->
        <section class="retro-box lime-border">
            <h2>💼 My Work at Shopify</h2>
            <div class="section-content">
                <p>
                    I'm part of the <strong>Commercial Partnerships</strong> team at Shopify! 🛒
                </p>
                <ul class="retro-list">
                    <li>🤝 Building strategic partnerships</li>
                    <li>📈 Driving commercial growth</li>
                    <li>🌟 Making commerce better for everyone</li>
                    <li>💚 Proud member of the Shopify family</li>
                </ul>
                <div class="shopify-badge">
                    <span>Powered by</span>
                    <span class="shopify-green big-text">Shopify</span>
                </div>
            </div>
        </section>

        <!-- Hobbies Section -->
        <section class="retro-box yellow-border">
            <h2>🎮 My Hobbies</h2>
            <div class="hobbies-grid">
                <div class="hobby-card">
                    <div class="hobby-icon">🚴</div>
                    <h3>Peloton</h3>
                    <p>Crushing those PRs and chasing that leaderboard! #PelotonMom</p>
                </div>
                <div class="hobby-card">
                    <div class="hobby-icon">👩‍👧‍👦</div>
                    <h3>Being a Mom</h3>
                    <p>The most rewarding (and chaotic) adventure of my life!</p>
                </div>
                <div class="hobby-card">
                    <div class="hobby-icon">📚</div>
                    <h3>Reading</h3>
                    <p>Always have a book (or three) going at once!</p>
                </div>
                <div class="hobby-card">
                    <div class="hobby-icon">🧠</div>
                    <h3>Learning</h3>
                    <p>Forever curious, always growing. Knowledge is power!</p>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section class="retro-box cyan-border">
            <h2>📧 Contact Me</h2>
            <div class="section-content contact-section">
                <p>Want to chat? Drop me a line!</p>
                <div class="contact-links">
                    <a href="mailto:steph.mace@shopify.com" class="retro-button">
                        ✉️ Email Me!
                    </a>
                </div>
                <div class="guestbook">
                    <p class="blink">🖊️ Sign my guestbook! 🖊️</p>
                </div>
            </div>
        </section>

        <!-- Visitor Counter -->
        <div class="visitor-counter">
            <div class="counter-box">
                <p>You are visitor number:</p>
                <div class="counter-display" id="visitor-count">000000</div>
                <p class="counter-since">Since December 2025</p>
            </div>
        </div>

        <!-- Footer -->
        <footer>
            <div class="footer-gifs">
                <img src="https://web.archive.org/web/20091027065803im_/http://geocities.com/SiliconValley/Haven/1899/emailani.gif" alt="email" class="footer-gif">
                <img src="https://web.archive.org/web/20090829052202im_/http://hk.geocities.com/nickydragonash/netscape.gif" alt="netscape" class="footer-gif">
            </div>
            <p>Made with 💖 and lots of ☕</p>
            <p class="copyright">© 2025 Steph's Homepage | Best viewed at 800x600</p>
            <div class="webrings">
                <span>[ </span>
                <a href="#">← Prev</a>
                <span> | </span>
                <a href="#">GeoCities WebRing</a>
                <span> | </span>
                <a href="#">Next →</a>
                <span> ]</span>
            </div>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>