Skip to content

Commit 959d086

Browse files
jstolpejstolpe
committed
coding a portfolio website with html, css, javascript, and jquery
1 parent 3643856 commit 959d086

15 files changed

Lines changed: 1284 additions & 0 deletions

‎portfolio_website/contact.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Your Name - Contact
6+
</title>
7+
8+
<!-- meta stuff -->
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
11+
12+
<!-- css stuff -->
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
14+
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
15+
<link href='https://fonts.googleapis.com/css?family=Roboto Slab' rel='stylesheet' type='text/css'>
16+
<link href="portfolio_css.css" rel="stylesheet" type="text/css">
17+
<link rel="icon" href="images/favicon.ico" />
18+
19+
<!-- javascript stuff -->
20+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
21+
<script src="portfolio_js.js" type="text/javascript"></script>
22+
</head>
23+
<body>
24+
<div class="main-container">
25+
<div>
26+
<div class="sidebar-container">
27+
<!-- loaded html from snippets/sidebar.html -->
28+
</div>
29+
<div class="content-container">
30+
<div class="content-container-inner">
31+
<div class="content-title">
32+
CONTACT
33+
</div>
34+
<div class="info-circle-container">
35+
<span class="fab fa-youtube">
36+
37+
</span>
38+
Subscribe on
39+
<a target="_blank" href="https://www.youtube.com/user/justinstolpe">
40+
YouTube
41+
</a>
42+
</div>
43+
<div class="info-circle-container">
44+
<span class="fab fa-linkedin">
45+
46+
</span>
47+
Connect on
48+
<a target="_blank" href="https://www.linkedin.com/in/justin-stolpe-3bb05426">
49+
LinkedIn
50+
</a>
51+
</div>
52+
<div class="info-circle-container">
53+
<span class="fab fa-github">
54+
55+
</span>
56+
Me on
57+
<a target="_blank" href="https://github.com/jstolpe">
58+
GitHub
59+
</a>
60+
</div>
61+
<div class="info-circle-container">
62+
<span class="fab fa-instagram">
63+
64+
</span>
65+
Follow Me on
66+
<a target="_blank" href="https://www.instagram.com/justinstolpe/">
67+
Instagram
68+
</a>
69+
</div>
70+
<div class="info-circle-container">
71+
<span class="fab fa-twitter">
72+
73+
</span>
74+
Follow Me on
75+
<a target="_blank" href="https://twitter.com/justin_stolpe">
76+
Twitter
77+
</a>
78+
</div>
79+
<div class="info-circle-container">
80+
<span class="fab fa-facebook">
81+
82+
</span>
83+
Page on
84+
<a target="_blank" href="https://www.facebook.com/justin.stolpe">
85+
Facebook
86+
</a>
87+
</div>
88+
<div class="info-circle-container">
89+
<span class="fab fa-reddit-alien">
90+
91+
</span>
92+
Check me out on
93+
<a target="_blank" href="https://www.reddit.com/user/jstolpe/">
94+
Reddit
95+
</a>
96+
</div>
97+
<div class="info-circle-container">
98+
<span class="fab fa-twitch">
99+
100+
</span>
101+
Follow on
102+
<a target="_blank" href="https://www.twitch.tv/jstolpe">
103+
Twitch
104+
</a>
105+
</div>
106+
<div class="info-circle-container">
107+
<span class="fab fa-tiktok">
108+
109+
</span>
110+
Follow on
111+
<a target="_blank" href="https://www.tiktok.com/@justinstolpe">
112+
TikTok
113+
</a>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
</body>
120+
</html>

‎portfolio_website/education.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Your Name - Education
6+
</title>
7+
8+
<!-- meta stuff -->
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
11+
12+
<!-- css stuff -->
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
14+
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
15+
<link href='https://fonts.googleapis.com/css?family=Roboto Slab' rel='stylesheet' type='text/css'>
16+
<link href="portfolio_css.css" rel="stylesheet" type="text/css">
17+
<link rel="icon" href="images/favicon.ico" />
18+
19+
<!-- javascript stuff -->
20+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
21+
<script src="portfolio_js.js" type="text/javascript"></script>
22+
</head>
23+
<body>
24+
<div class="main-container">
25+
<div>
26+
<div class="sidebar-container">
27+
<!-- loaded html from snippets/sidebar.html -->
28+
</div>
29+
<div class="content-container">
30+
<div class="content-container-inner">
31+
<div class="content-title">
32+
EDUCATION
33+
</div>
34+
<div class="highlight-section">
35+
<div class="highlight-section-inner">
36+
<div class="highlight-section-icon hover-360">
37+
<a href="#" target="_blank">
38+
<img src="images/education_icon.jpg" />
39+
</a>
40+
</div>
41+
<div class="highlight-section-content">
42+
<div class="highlight-section-content-inner">
43+
<div class="highlight-section-title">
44+
Educational Institution Name
45+
</div>
46+
<div class="highlight-section-sub-title">
47+
Year Start - Year Graduated
48+
</div>
49+
<div class="highlight-section-sub-title">
50+
<a target="_blank" href="#">
51+
website.com
52+
</a>
53+
</div>
54+
<div class="highlight-section-text">
55+
A few sentances about what you studied while you attended. List any extracurricular activities you were a part of along with your major/minor and the degrees you received.
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="highlight-section-separator">
62+
63+
</div>
64+
<div class="highlight-section">
65+
<div class="highlight-section-inner">
66+
<div class="highlight-section-icon hover-360">
67+
<a href="#" target="_blank">
68+
<img src="images/education_icon.jpg" />
69+
</a>
70+
</div>
71+
<div class="highlight-section-content">
72+
<div class="highlight-section-content-inner">
73+
<div class="highlight-section-title">
74+
Educational Institution Name
75+
</div>
76+
<div class="highlight-section-sub-title">
77+
Year Start - Year Graduated
78+
</div>
79+
<div class="highlight-section-sub-title">
80+
<a target="_blank" href="#">
81+
website.com
82+
</a>
83+
</div>
84+
<div class="highlight-section-text">
85+
A few sentances about what you studied while you attended. List any extracurricular activities you were a part of along with your major/minor and the degrees you received.
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="highlight-section-separator">
92+
93+
</div>
94+
<div class="highlight-section">
95+
<div class="highlight-section-inner">
96+
<div class="highlight-section-icon hover-360">
97+
<a href="#" target="_blank">
98+
<img src="images/education_icon.jpg" />
99+
</a>
100+
</div>
101+
<div class="highlight-section-content">
102+
<div class="highlight-section-content-inner">
103+
<div class="highlight-section-title">
104+
Educational Institution Name
105+
</div>
106+
<div class="highlight-section-sub-title">
107+
Year Start - Year Graduated
108+
</div>
109+
<div class="highlight-section-sub-title">
110+
<a target="_blank" href="#">
111+
website.com
112+
</a>
113+
</div>
114+
<div class="highlight-section-text">
115+
A few sentances about what you studied while you attended. List any extracurricular activities you were a part of along with your major/minor and the degrees you received.
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
</body>
126+
</html>

‎portfolio_website/experience.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Your Name - Experience
6+
</title>
7+
8+
<!-- meta stuff -->
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
11+
12+
<!-- css stuff -->
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
14+
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
15+
<link href='https://fonts.googleapis.com/css?family=Roboto Slab' rel='stylesheet' type='text/css'>
16+
<link href="portfolio_css.css" rel="stylesheet" type="text/css">
17+
<link rel="icon" href="images/favicon.ico" />
18+
19+
<!-- javascript stuff -->
20+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
21+
<script src="portfolio_js.js" type="text/javascript"></script>
22+
</head>
23+
<body>
24+
<div class="main-container">
25+
<div>
26+
<div class="sidebar-container">
27+
<!-- loaded html from snippets/sidebar.html -->
28+
</div>
29+
<div class="content-container">
30+
<div class="content-container-inner">
31+
<div class="content-title">
32+
EXPERIENCE
33+
</div>
34+
<div class="highlight-section">
35+
<div class="highlight-section-inner">
36+
<div class="highlight-section-icon hover-360">
37+
<a href="#" target="_blank">
38+
<img src="images/experience_icon.png" />
39+
</a>
40+
</div>
41+
<div class="highlight-section-content">
42+
<div class="highlight-section-content-inner">
43+
<div class="highlight-section-title">
44+
Comapany Name
45+
</div>
46+
<div class="highlight-section-sub-title">
47+
Year Started - Year Ended
48+
</div>
49+
<div class="highlight-section-sub-title">
50+
<a target="_blank" href="#">
51+
website.com
52+
</a>
53+
</div>
54+
<div class="highlight-section-text">
55+
A few sentances about what your role was and what your responsibilities were while working for the company.
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="highlight-section-separator">
62+
63+
</div>
64+
<div class="highlight-section">
65+
<div class="highlight-section-inner">
66+
<div class="highlight-section-icon hover-360">
67+
<a href="#" target="_blank">
68+
<img src="images/experience_icon.png" />
69+
</a>
70+
</div>
71+
<div class="highlight-section-content">
72+
<div class="highlight-section-content-inner">
73+
<div class="highlight-section-title">
74+
Comapany Name
75+
</div>
76+
<div class="highlight-section-sub-title">
77+
Year Started - Year Ended
78+
</div>
79+
<div class="highlight-section-sub-title">
80+
<a target="_blank" href="#">
81+
website.com
82+
</a>
83+
</div>
84+
<div class="highlight-section-text">
85+
A few sentances about what your role was and what your responsibilities were while working for the company.
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="highlight-section-separator">
92+
93+
</div>
94+
<div class="highlight-section">
95+
<div class="highlight-section-inner">
96+
<div class="highlight-section-icon hover-360">
97+
<a href="#" target="_blank">
98+
<img src="images/experience_icon.png" />
99+
</a>
100+
</div>
101+
<div class="highlight-section-content">
102+
<div class="highlight-section-content-inner">
103+
<div class="highlight-section-title">
104+
Comapany Name
105+
</div>
106+
<div class="highlight-section-sub-title">
107+
Year Started - Year Ended
108+
</div>
109+
<div class="highlight-section-sub-title">
110+
<a target="_blank" href="#">
111+
website.com
112+
</a>
113+
</div>
114+
<div class="highlight-section-text">
115+
A few sentances about what your role was and what your responsibilities were while working for the company.
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
</body>
126+
</html>

‎portfolio_website/images/education_icon.jpg‎

15.6 KB
Loading

‎portfolio_website/images/education_icon.png‎

38.4 KB
Loading

‎portfolio_website/images/experience_icon.png‎

28.7 KB
Loading

‎portfolio_website/images/favicon.ico‎

4.19 KB
Binary file not shown.

‎portfolio_website/images/portfolio_icon.png‎

2.8 KB
Loading

‎portfolio_website/images/profile_picture.jpg‎

10.8 KB
Loading

‎portfolio_website/images/youtube_icon.png‎

10.7 KB
Loading

0 commit comments

Comments
 (0)