v2/index.html at main · igl2/v2 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isaiah Lleva</title>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&family=Cambay&family=Mandali&display=swap"
        rel="stylesheet">

    <!-- CSS Stylesheets -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico?v=2" />

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/5db1a0e54b.js" crossorigin="anonymous"></script>

    <!-- Bootstrap Script -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <header>
        <nav class="navbar sticky-top navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img class="nav-logo" src="favicon.ico" alt="logo"></a>
                <button class="custom-toggler navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#skills">Skills</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#projects">Projects</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#hobbies">Hobbies</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="top-container">
            <img class="top-cloud" src="images/cloud.png" alt="cloud-img" />
            <h1 class="title-heading animate__animated animate__flipInX">Hi, I'm Isaiah!</h1>
            <h2 class="title-heading animate__animated animate__flipInX">Aspiring Software Engineer</h2>
            <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img" />
            <img class="mountain-img" src="images/mountain.png" alt="mountain-img" />
        </div>
    </header>
    <main>
        <div class="middle-container">
            <div class="profile" id="about">
                <img class="profile-img" src="images/profile-pic-circle.png" alt="profile-img">
                <h2>Hello.</h2>
                <p class="intro">My name is Isaiah and I'm a recent graduate from the University of West Florida. I
                    graduated with a major
                    in Software Design and Development and a minor in Computer Science. I'm seeking to take my skills
                    into a
                    professional environment where I can grow not just as a developer but as a person. Feel free to
                    check
                    out my resume below!
                </p>
                <a class="btn" href="static/resume.pdf" target="_blank">Resume</a>
            </div>
            <hr>
            <div class="skills" id="skills">
                <h2>Skills and Education</h2>
                <div class="skill-row">
                    <img class="computer-img" src="images/computer.png" alt="computer-img">
                    <h3>Web Development</h3>
                    <p>My technical skills are pretty diverse but what I can tell you is that
                        I'm more proficient in web
                        development as it has become my passion since middle school. Some skills I've worked with
                        include:
                        HTML5, CSS3, JavaScipt, Angular, React, and Node.
                    </p>
                </div>
                <div class="skill-row">
                    <img class="school-img" src="images/school.png" alt="school-img">
                    <h3>University of West Florida</h3>
                    <p>I graduated from the University of West Florida with a B.S. degree in
                        Software Design and
                        Development
                        and a minor in Computer Science.</p>
                </div>
            </div>
            <hr>
            <div class="projects" id="projects">
                <h2>Projects</h2>
                <div class="projects-row">
                    <img class="running-img" src="images/running.png" alt="running-img">
                    <h3>Online Fit Expert</h3>
                    <p>This web application allows users to search for shoes and view/track
                        their workouts. Check out <a class="project-link" href="https://online-fit-expert.web.app/"
                            target="_blank">Online
                            Fit
                            Expert</a>!
                    </p>
                </div>
                <div class="projects-row">
                    <img class="music-notes-img" src="images/music-notes.png" alt="music-notes-img">
                    <h3>Save My Jam</h3>
                    <p>This web application allows users to search the Spotify library,
                        create a playlist, and save it to their personal Spotify account. Check out <a
                            class="project-link" href="https://github.com/igl2/Save-My-Jam" target="_blank">Save My Jam</a>!
                    </p>
                    </p>
                </div>
                <div class="projects-row">
                    <img class="man-img" src="images/man.png" alt="man-img">
                    <h3>Personal Website v1</h3>
                    <p class="project-description">This is the first iteration of my personal website. Check out <a
                            class="project-link" href="https://isaiah-lleva.netlify.app/" target="_blank">my first personal
                            website</a>!</p>
                    </p>
                    </p>
                </div>
            </div>
            <hr>
            <div class="hobbies" id="hobbies">
                <h2>Hobbies</h2>
                <div class="hobbies-row">
                    <img class="sports-img" src="images/sports.png" alt="sports-img">
                    <h3>Sports and Exercise</h3>
                    <p>When I'm not programming, I sure like to get out of my chair and stay
                        active. Whether it's
                        running,
                        working out, or playing sports, I am down to get out there and get my blood flowing. I would
                        consider myself more of a basketball player so if you want to take me on one-on-one, hit me up!
                    </p>
                </div>
            </div>
            <hr>
            <div class="contact-me" id="contact">
                <h2>Get In Touch</h2>
                <h3><strong>Don't be afraid</strong> to reach out!</h3>
                <p class="contact-message">Got any questions for me? Just want to say hi and get to know me more? My
                    inbox
                    is always open so feel
                    free to message me and I'll try to get back to you as soon as I can.</p>
                <a class="btn" href="mailto:isaiahlleva@gmail.com">Contact Me!</a>
            </div>
        </div>
    </main>
    <footer>
        <div class="bottom-container">
            <a class="footer-link" href="https://www.linkedin.com/in/isaiahlleva/" target="_blank"
                aria-label="linkedin-logo"><i class="fa-brands fa-linkedin social-icon"></i></a>
            <a class="footer-link" href="https://github.com/igl2" target="_blank" aria-label="linkedin-logo"><i
                    class="fa-brands fa-github social-icon"></i></a>
            <a class="footer-link" href="https://www.instagram.com/isaiah_lleva/" target="_blank"
                aria-label="linkedin-logo"><i class="fa-brands fa-instagram social-icon"></i></a>
            <p class="copyright">© 2022 Isaiah Lleva</p>
        </div>
    </footer>
    <!-- JavaScript -->
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>