-
Notifications
You must be signed in to change notification settings - Fork 0
/
joffreTemplate2.html
115 lines (106 loc) · 5.63 KB
/
joffreTemplate2.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
<!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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" />
<link rel="stylesheet" href="css/“joffreTemplate2.css">
<title>Portfolio Template</title>
</head>
<body>
<header id="header">
<h1>Joffre du Preez</h1>
<p id="personalOccupation">McMaster | Electrical Engineering Student</p>
<div id="socialLinks">
<a href="https://ca.linkedin.com/">
<i class="fab fa-linkedin fa-2x"></i>
</a>
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-square fa-2x"></i>
</a>
<a href="https://www.instagram.com/">
<i class="fab fa-instagram fa-2x"></i>
</a>
</div>
<nav>
<a href="#about">About Me</a>
<a href="#workExperience">Projects</a>
<a href="#skills">Skills</a>
<a href="#resume">Resume</a>
</nav>
</header>
<div id="container">
<section id="about">
<div class="sectionContainer">
<h2 class="title">About Me</h2>
<p class="basicText">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam aliquid vel vero rerum alias incidunt explicabo officiis ex odit non rem enim atque sit eum ullam laudantium, voluptatum amet, et error voluptatem sapiente totam dolor doloremque provident. Quas, rerum beatae. Sed neque, natus, enim eos, perspiciatis consectetur repellendus ut eius eveniet at ex. Delectus laboriosam natus animi itaque soluta porro tempore ut beatae, mollitia recusandae ab distinctio consequuntur autem magni omnis nam adipisci. Necessitatibus totam explicabo aperiam provident tempore, dolores natus velit quidem dolor expedita sequi! Magnam sapiente provident laboriosam animi hic ab voluptas, ipsa debitis nisi odio incidunt perferendis.</p>
</div>
</section>
<section id="workExperience">
<h2 class="title">Work Experience</h2>
<div id="workExperienceContainer">
<div class="workExperienceBox">
<img class="workExperienceImage" src="images/logo1.png" alt="Logo 1 image">
<p class="workExperienceTitle">Coca Cola - Product Manager</p>
<p class="workExperienceDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id recusandae nihil, voluptas magnam consectetur nisi placeat molestiae fugit consequatur expedita ipsa aliquid rerum eos in ad quasi rem unde veniam.</p>
</div>
<div class="workExperienceBox">
<img class="workExperienceImage" src="images/logo2.png" alt="Logo 2 image">
<p class="workExperienceTitle">Google - Software Developer</p>
<p class="workExperienceDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id recusandae nihil, voluptas magnam consectetur nisi placeat molestiae fugit consequatur expedita ipsa aliquid rerum eos in ad quasi rem unde veniam.</p>
</div>
<div class="workExperienceBox">
<img class="workExperienceImage" src="images/logo3.png" alt="Logo 3 image">
<p class="workExperienceTitle">Amazon - Software Developer</p>
<p class="workExperienceDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id recusandae nihil, voluptas magnam consectetur nisi placeat molestiae fugit consequatur expedita ipsa aliquid rerum eos in ad quasi rem unde veniam.</p>
</div>
</div>
</section>
<section id="skills">
<div class="sectionContainer">
<h2 class="title">Skills</h2>
<div class="skillBox">
<p class="basicText">Skill 1</p>
<div class="skillBar">
<div class="completeSkill1"></div>
</div>
</div>
<div class="skillBox">
<p class="basicText">Skill 2</p>
<div class="skillBar">
<div class="completeSkill2"></div>
</div>
</div>
<div class="skillBox">
<p class="basicText">Skill 3</p>
<div class="skillBar">
<div class="completeSkill3"></div>
</div>
</div>
<div class="skillBox">
<p class="basicText">Skill 4</p>
<div class="skillBar">
<div class="completeSkill4"></div>
</div>
</div>
<div class="skillBox">
<p class="basicText">Skill 5</p>
<div class="skillBar">
<div class="completeSkill5"></div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
<!--
Template:
Name, and description of yourself
Links to linked, instagram, and Facebook
Top 3 personal projects, each with a title, description, start and finish date, image, and languages used and GitHub link
Top 5 skills with a rating out of 5 on your skin level
-->