PersonalDevWebsite/index.html at main · Kurogue/PersonalDevWebsite · 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- Website Title -->
    <title>Evan's Profile Page</title>

    <!-- 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=Noto+Sans&display=swap" rel="stylesheet">
      <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=Arvo:wght@700&display=swap" rel="stylesheet">
      <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=Ubuntu:wght@700&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS link tag -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Bootstrap Icons link tag -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

    <!-- Custom styles (these can extend the default Bootstrap styles) -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <!-- This is for the navbar to highlight when above each corresponding section -->
    <body class="scroll-top"
        data-bs-spy="scroll"
        data-bs-target=".navbar"
        data-bs-offset="100">

    <!-- Navbar code from boostrap with custom links -->
    <header>
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
        <div class="container-fluid">
            <!-- This is the home button for the navbar and it uses the boostrap house icon. When clicked it brings the user back to the top of the back utilizing a # in the anchor tag -->
            <a class="navbar-brand" href="#">
                <i class="bi bi-house-door"></i>
            </a>
            <!-- This is for the navbar hamburg button -->
            <button class="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">
                <!-- List of items for the navbar. Each navbar item will take the user ot each corresponding section of the website using the id's of each section and anchor tags -->
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#mission-target">Mission</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills-target">Skills</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#inspiration-target">Inspiration</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact-target">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    </header>

  <!-- Hero section -->
    <section id="hero-section">
        <!-- The background image is set in the CSS file -->
        <div class="heroImg">
            <!-- small spacing tag to add spacing for the navbar and the top of the profile picture -->
            <div class="spacing"></div>
            <!-- The profile picture is set in the CSS file and the overlay has my name and a catchphrase -->
            <div class="profilePic"></div>
            <div class="overlay">
                <h1>Evan Senior</h1>
                <h2>Playing Games and Writing Code</h2>
            </div>
        </div>
    </section>

	<!-- Mission/Meet-me section -->
    <section id="mission-section">
        <!-- The target is for the navbar so when it is selected it is taken to the title of the section instead of the covering the title of the section, more information in the CSS file -->
        <div id="mission-target"></div>
        <div class="container">
            <div class="row text-center mt-3 mb-3">
                <!-- Section Title uses bootstrap spacing in the div one line above-->
                <h1>My Mission</h1>
            </div>
            <div class="row">
                <!-- This uses the boostrap display settings for when being viewed on smaller screens to have it in a column and when on bigger screens to have them in 2 columns -->
                <div class="col-12 col-md-6 my-auto">
                    <img src="img/Programming.png" class="mission-img" alt="A computer with code on it.">
                </div>
                <div class="col-12 col-md-6 my-auto">
                    <p>My mission for this course is to learn and understand the use of HTML5 as well as CS. I want to learn enough to become proficient in it without having to rely on the internet right away; if I become stuck on a problem, I would like to try and figure it out myself first. This will also help me become better with the Linux desktop environments since many of them depend on some form of CSS or HTML5. The lifetime goal is to work as a computer scientist on an artificial intelligence for the exploration of space sending it to different planets for colonization before humans arrive. This would greatly reduce the hazards of humans first settling on a planet without the immediate access of human resources while an A.I. could perform human tasks without the need of human dependencies.</p>
                </div>
            </div>
        </div>
    </section>

  <!-- Skills section -->
    <section id="skills-section">
        <!-- Same as the mission target -->
        <div id="skills-target"></div>
        <div class="container">
            <div class="row text-center mt-3 mb-3">
                <!-- Section Title -->
                <h1>Skills</h1>
            </div>
            <!-- The same as the Mission section using the bootstrap display settings and will make one row when on larger displays and collapse to smaller ones when the screen size shrinks correspondingly. This section contains some personal skills that I have aquired you can copy and paste adding to the list, the whole encolsed div with the col -->
            <div class="row text-center skill-items g-5">
                <div class="col-12 col-md-6 col-lg-3">
                    <img class="skill-img" src="img/HTML.png" alt="HMTL 5 Logo">
                    <p>Using HTML 5 to create and structure websites from scratch.</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <img class="skill-img" src="img/CSS.png" alt="CSS Logo">
                    <p>Applying CSS to style and create websites visually while appealing to all users.</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <img class="skill-img" src="img/Java.png" alt="Java Logo">
                    <p>Using Java to structure and write code for many personal coding projects.</p>
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <img class="skill-img" src="img/C++.png" alt="C++ Logo">
                    <p>Using C++ for more complicated projects and using objcet oriented programming to make the structure of the program easier to read and use.</p>
                </div>
            </div>
        </div>
    </section>

  <!-- Inspiration Section -->
  <section id="inspiration-section">
    <div id="inspiration-target"></div>
    <section class="container text-center" id="partners-section">
        <!-- Section Title -->
            <h1 class="mb-3">Inspiration</h1>
            <!-- Copied and pasted boostraps carousel code and modified the headings to be a little smaller and added the images listed. This section contains inspirational quotes from real figures. Code can be easily modified to add onto the carousel with any number of items -->
            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="img/Fowler.jpg" class="d-block w-100" alt="One of our farmer partners">
                        <div class="carousel-caption">
                            <h5>“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”</h5>
                            <p>Martin Fowler</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="img/Linus.jpg" class="d-block w-100" alt="A member grinding beans">
                        <div class="carousel-caption">
                            <h5>“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”</h5>
                            <p>Linus Torvalds</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="img/Leo.jpg" class="d-block w-100" alt="A member grinding beans">
                        <div class="carousel-caption">
                            <h5>"As a well-spent day brings happy sleep, so a life well spent brings happy death."</h5>
                            <p>Leonardo da Vinci</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

        </section>
    </section>

  <!-- Contact Section -->
    <section id="contact-section">
        <div id="contact-target"></div>
        <div class="container">
            <div class="row text-center mt-5 mb-3">
                <!-- Section Title -->
                <h1>Contact</h1>
            </div>
            <div class="row text-center mb-4">
                <div class="col-12 col-md-4">
                    <!-- This is an anchor tag that contains the icon of choice from the bootstrap library. The anchor allows for when the icon is clicked it will take the user to that website or section depending on the href-->
                    <a href="https://github.com/Kurogue">
                        <i class="bi bi-github icon-c"></i>
                    </a>
                </div>
                <div class="col-12 col-md-4">
                    <a href="#contact-target">
                        <i class="bi bi-linkedin icon-c"></i>
                    </a>
                </div>
                <div class="col-12 col-md-4">
                    <a href="#contact-target">
                        <i class="bi bi-envelope icon-c"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

  <!-- Footer section -->
    <section id="footer-section">
        <div class="container text-light bg-dark footer">
            <!-- Footer with my name and the copy right symbol. Utilizes the bootstrap rows to vertically and horizontally center it -->
            <div class="row text-center my-auto">
                <h5>&copy Evan Senior 2022</h5>
            </div>
        </div>
    </section>

    <!-- Bootstrap Javascript script tag -->
	<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>
  </body>
</html>