-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (125 loc) · 5.59 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<!-- This is the beginning of the header -->
<!-- The head is a container that contains data.
Here, you have sets of data that describe and give
information about other data.
-->
<head>
<meta charset="UTF-8">
<meta name="description" content="My name is Dawit Tekeste, I am a computer science major at Virginia Commonwealth University, I concentrate in software engineering, but I have also worked in data science and web development">
<meta name="author" content="Dawit Tekeste">
<meta name="keywords" content="Computer Science, Data Science, Web development">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My name is Dawit Tekeste</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/64e4f7e722.js" crossorigin="anonymous"></script>
</head>
<!--
In the body, we define the contents of a website,
in other words, it contains the main contents of the website.
-->
<body>
<!-- Start of the classes -->
<!--
Div Classes are used to select specific elements in the website to
describe their presentation.
-->
<div class="top">
<nav class="nav">
<div class="container">
<div class="name">
<a href="#">Dawit Tekeste</a> <!-- Define a link to another page. -->
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#">Contact</a></li>
<li class="nav-item">
<a class="nav-link" href="files/sample.pdf" target="blank"><b><i class="fa fa-file-pdf-o"></i> Resume</b></a>
</li>
</ul>
</div>
<!-- (span tag) - Marks a section in a text -->
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
</div>
<section class="home">
<div class="me">
<img id="profilepic" src="img/avatar.jpg" width="250">
<h1 class="specialText">Dawit Tekeste</h1>
<h1>Computer Science Student at VCU</h1>
<a href="#about">Enter Portfolio</a>
</div>
</section>
<div id="about">
<!-- just to make scrolling effect possible -->
<h2 class="myH2">About Me</h2>
<div class="myself">
<h2 style="text-align: center;font-size: 36px; text-decoration: underline;">B.S. Computer Science at VCU</h2>
<div style="display:inline-block;vertical-align:top;">
<img src="img/avatar.jpg" alt="img"/>
</div>
<div class="aboutText" style="display:inline-block; width: 75%;">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, ipsum aperiam. Optio quidem neque architecto quaerat doloribus nobis necessitatibus, voluptates laborum recusandae officia aliquam exercitationem repellendus maxime nihil quos sunt ipsam. Necessitatibus magnam cumque impedit nulla iure sequi expedita! Cum earum consequatur autem similique tenetur odio laborum quia vero maiores.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi earum sunt hic, deleniti quos reprehenderit necessitatibus, enim atque fugiat fugit nobis deserunt, laudantium eius natus laboriosam vel iure. Provident, obcaecati.
</p>
</div>
</div>
</div>
<!-- Project section on the website -->
<div id="projects">
<h2 class="myH2">Relative Files/Links</h2>
<div class="files">
<a class="button" href="#">Resume <i class="fa fa-file-pdf-o"></i></a>
<a class="button" href="#">Thesis/Recomendation</a>
<a class="button" href="#">Linked<i class="fa fa-linkedin" aria-hidden="true"></i></a>
<div class="row2">
<a class="button" href="#">Project 1</a>
<a class="button" href="#">Project 2</a>
<a class="button" href="#">Project 3</a>
</div>
</div>
</div>
<div id="skills">
<h1>My Skills</h1>
<!-- This part will be handled by php -->
<div class="progress-bars">
<div class="progress-bar">
<p class="prog-title">html</p>
<span class="html"></span>
</div>
</div>
</div>
<div id="experience">
<h1>Experience</h1>
<!-- This part will be handled by php since it will be dynamic -->
</div>
<!-- Jquery needed -->
<!-- Add dynamic capabilities like dropdowns, etc-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<!-- Function used to shrink nav bar removing paddings and adding black background -->
<script>
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
</script>
</body>
</html>