portfolio/index.html at main · kholla05/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiera Holland | Portfolio</title>
    <link rel="stylesheet" href="style.css">

    <!--Link to google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

    <!--Link to Boxicons-->
    <!-- Basic Icons -->
<link href="https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css" rel="stylesheet">
<!-- Filled Icons -->
<link href="https://cdn.boxicons.com/3.0.8/fonts/filled/boxicons-filled.min.css" rel="stylesheet">
<!-- Brand Icons -->
<link href="https://cdn.boxicons.com/3.0.8/fonts/brands/boxicons-brands.min.css" rel="stylesheet">
</head>
<body>
    <!--Header and Navigation-->
    <header>
        <nav>
            <h1>Kiera Holland</h1>

            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#projects">PROJECTS</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </nav>
    </header>

    <!--Hero Section-->
    <section class="hero">
        <div class="hero-content">
                <img src ="about-me.png" alt="An image of Kiera Holland's about me card">
            <div class="hero-text">
                <h2>Welcome to<br><em>My Portfolio</em></h2>

                <div class="hero-buttons">
                    <a href="https://github.com/kholla05" target="_blank"><button class="btn-primary">VIEW MY WORK</button></a>
                    <a href="#contact"><button class="btn-secondary">SAY HELLO</button></a>
                </div>
            </div>
        </div>

    </section>

    <!--About Me Section-->
    <section class="about-section" id="about">
        <div class="about-me-container">

            <!--Left Column-->
            <div class="content-column">
            <div class="about-text">
                <h2><em>A</em>BOUT ME</h2>
                <p>Hi, I’m Kiera Holland! I’m currently a Senior Computer Science Student at Prairie View A&M University. I love how coding and designing combine my two favorite things-- problem solving and being creative.</p>
                <p>My love for coding began after I found out that my brother was majoring in Computer Science for college. After wanting to see what could be so fun about typing up long pages of code, I gave it a try by taking a computer science course in middle school. Since then, I’ve fallen in love with coding. It showed me how it can turn these lines of code and my hard work into something beautiful.</p>
                <p>Outside of school and coding, I enjoy spending time with family, reading, and freshening up my coding skills. I’m currently open to new opportunities and experiences-- full-time, part-time, internships, collaborations on projects, etc.</p>
            </div>

            <h3>LANGUAGES</h3>
            <div class="skills-container">
                <p class="skills-tags">Java</p>
                <p class="skills-tags">Python</p>
                <p class="skills-tags">C++</p>
                <p class="skills-tags">HTML & CSS</p>
            </div>

            <h3>FRAMEWORKS & TOOLS</h3>
            <div class="skills-container">
                <p class="skills-tags">Figma</p>
                <p class="skills-tags">VS Code</p>
            </div>
            </div>

            <!--Right Column-->
            <div class="image-column">
            <img src="ribbon.png" class="bow-left" alt="Left blue ribbon">
            <img src="ribbon.png" class="bow-right" alt="Right blue ribbon">
            <img src="about-image.jpg" class="profile-image" alt="A selfie of Kiera Holland">
            </div>

        </div> <!-- This outer div groups BOTH columns to trigger the Flexbox horizontal layout -->
</section>


    <!--Projects Section-->
    <section id="projects" class="projects-section">
        <div class="projects-text">
            <h2><em>P</em>ROJECTS</h2>
        </div>
        <div class="projects-container">
            <div class="projects-cards">
                <div class="icon-wrap">
                    <i class="bx bx-people-heart"></i>
                </div>

                <h3>The Date-Abase</h3>
                <p>The Data-Abase is a simple, interactive one-page website that helps users to find different date ideas from A to Z. Each idea is categorized by solo, friends, and/or romantic outings.</p>
                <div class="code-container">
                    <p class="code-tags">HTML</p>
                    <p class="code-tags">CSS</p>
                </div>
                <hr>
                <!--GitHub and Live Demo List-->
                <div class="link-container">
                    <p class="link-tags"><a href="https://github.com/kholla05/The-Date-Abase" target="_blank">GITHUB</a></p>
                    <p class="link-tags"><a href="https://kholla05.github.io/The-Date-Abase/" target="_blank">LIVE DEMO</a></p>
                </div>
            </div>
            <div class="projects-cards">
                <div class="icon-wrap">
                    <i class="bx bx-community"></i>
                </div>

                <h3>Project Coming Soon...</h3>
                <p>Come back soon to see my latest projects!</p>
                <div class="code-container">
                    <p class="code-tags">?</p>
                    <p class="code-tags">?</p>
                </div>
                <hr>
                <!--GitHub and Live Demo List-->
                <div class="link-container">
                    <p class="link-tags"><a href="" target="_blank">GITHUB</a></p>
                    <p class="link-tags"><a href="" target="_blank">LIVE DEMO</a></p>
                </div>
            </div>
            <div class="projects-cards">
                <div class="icon-wrap">
                    <i class="bx bx-community"></i>
                </div>
                <h3>Project Coming Soon...</h3>
                <p>Come back soon to see my latest projects!</p>
                <div class="code-container">
                    <p class="code-tags">?</p>
                    <p class="code-tags">?</p>
                </div>
                <hr>
                <!--GitHub and Live Demo List-->
                <div class="link-container">
                    <p class="link-tags"><a href="" target="_blank">GITHUB</a></p>
                    <p class="link-tags"><a href="" target="_blank">LIVE DEMO</a></p>
                </div>
            </div>
        </div>

    </section>

<!--<div class="contact-text">
                <h2><em>L</em>ET'S <em>C</em>ONNECT</h2>-->

    <!--Contact Section-->
    <section id="contact" class="contact-section">
        <div class="contact-title">
            <h2><em>L</em>ET'S <em>C</em>ONNECT</h2>
        </div>
        <div class="contact-middle">
            <div class="pdf-box">
                <p>Click here to download the digital version of my resume.</p>
                <a href="resume.pdf" download="Kiera_Holland_Resume.pdf" class="pdf-button">DOWNLOAD THE PDF</a>
            </div>
        </div>
        <div class="contact-bottom">
            <div class="contact-details">
                <p class="contact-heading"style="font-weight: bold;" >⚲ FIND ME HERE</p>
                <p class="location">Richmond, TX</p>
                <p class="email"><a href="mailto:kiera.codes@gmail.com">kiera.codes@gmail.com</a></p>
                <!--Maybe link leetcode and hackerrank profile-->

            </div>

            <!--Logos-->

            <div class="connection">
                <p class="connection-heading">CONNECT WITH ME</p>
                <div class="connect-logos-container">
                    <a href="https://app.joinhandshake.com/profiles/zwsjur" target="_blank" class="logo-buttons"><img class="make-white handshake-logo" src="https://cdn.brandfetch.io/domain/joinhandshake.com/w/800/h/159/theme/light/logo?c=1idHgQzteznazC7RRIG" alt="Handshake Logo"></a>
                    <a href="https://github.com/kholla05" target="_blank" class="logo-buttons"><img class= "connect-logos"src="https://cdn.brandfetch.io/domain/github.com/w/800/h/784/theme/light/symbol?c=1idHgQzteznazC7RRIG" alt="GitHub Logo"></a>
                    <a href="https://www.linkedin.com/in/kiera-holland-9a3335291/" target="_blank" class="logo-buttons"><img class="make-white connect-logos" src="https://cdn.brandfetch.io/domain/linkedin.com/w/800/h/683/symbol?c=1idHgQzteznazC7RRIG" alt="LinkedIn Logo"></a>
                </div>
            </div>
        </div>

    </section>

    <footer>Designed and coded by Kiera Holland | 2026</footer>

</body>
</html>