-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (139 loc) · 6.85 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
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <!-- link used to connect the website boxicons.com to the HTML -->
<link rel="stylesheet" href="./zassets/style.css">
<title>J Hill's Portfolio</title>
</head>
<body>
<header>
<div id="header">
<h1><a href="./index.html" class="logo HillsBG">J Hill</a></h1>
<nav class="navbar">
<a href="./index.html" style="--i:1;" class="active">Home</a>
<a href="./navLinks/About/about.html" style="--i:2;">About</a>
<a href="./navLinks/Projects/projects.html" style="--i:4;">Projects</a>
<a href="./navLinks/Contact/contact.html" style="--i:5;">Contact</a>
</nav>
</div>
</header>
<main>
<section class="home">
<div class="home-content">
<p class="head3">Hello, my name is</p>
<h1>Joshua Hill</h1>
<div id="imA">
<p class="head3">I'm a <span class="multiple-text"></span></p>
</div>
<p id="homep">
After getting a good understanding of frontend web development, I made this webpage to display what I know when using vanilla HTML, CSS, and JavaScript throughout my 3 years of learning web development.
<span>This portfolio is in development, revamping the site and converting it to use React.</span>
</p>
</div>
<div class="social-media">
<a target="_blank" href="https://www.linkedin.com/in/joshuahillaz0d/" style="--i:7;"><i class='bx bxl-linkedin'></i></a>
<a target="_blank" href="https://github.com/JoshHill1" style="--i:8;"><i class='bx bxl-github'></i></a>
<a target="_blank" href="https://www.instagram.com/josh_hil1/" style="--i:9;"><i class='bx bxl-instagram-alt'></i></a>
</div>
</section>
<div class="curve">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<section id="projects">
<div id="slideRight">
<div id="projectH2SlideIn">
<h2>PROJECTS <span class="projH2Outline">PROJECTS</span> PROJECTS <span class="projH2Outline">PROJECTS</span></h2>
</div>
<div id="projectH2SlideOut">
<h2>PROJECTS <span class="projH2Outline">PROJECTS</span> PROJECTS <span class="projH2Outline">PROJECTS</span></h2>
</div>
<div id="slideLeft">
<div id="projectH2SlideIn1">
<h2><span class="projH2Outline">PROJECTS</span> PROJECTS <span class="projH2Outline">PROJECTS</span> PROJECTS</h2>
</div>
<div id="projectH2SlideOut1">
<h2><span class="projH2Outline">PROJECTS</span> PROJECTS <span class="projH2Outline">PROJECTS</span> PROJECTS</h2>
</div>
</div>
</div>
<div id="cardsGrid">
<div class="card">
<div class="titleLinksAndPic">
<a href="https://peterjanasz.github.io/Recipe-Finder-App/" target="_blank">
<img src="./zassets/Images/Projects/FoodMakerApp.png" alt="">
</a>
<div class="titleAndLinks">
<h3>Food Maker App</h3>
<a href="https://peterjanasz.github.io/Recipe-Finder-App/" target="_blank">Deployed Site</a>
<a href="https://github.com/JoshHill1/Recipe-Finder-App" target="_blank">GitHub Repo</a>
</div>
</div>
<p>This is the first project that was built with me and my group of three other people. The project was to create a well put together, responsive website that has an API implamented to get recipes.</p>
</div>
<div class="card">
<div class="titleLinksAndPic">
<a href="https://github.com/JoshHill1/PASS_Project" target="_blank">
<img src="./zassets/Images/Projects/PlainAndSimpleFINAL.png" alt="Plain And Simple vector artwork">
</a>
<div class="titleAndLinks">
<h3>Plain And Simple</h3>
<a href="./navLinks/Projects/projects.html">Artwork Process</a>
</div>
</div>
<p>This not so plain nor simple vector art was something that I wanted to try for a long time. It helped me with skills on learning the pen tool in Adobe Illustrator.</p>
</div>
<div class="card">
<div class="titleLinksAndPic">
<a href="https://github.com/JoshHill1/JapanBlog" target="_blank">
<img src="./zassets/Images/Projects/JJapanBlog.png" alt="">
</a>
<div class="titleAndLinks">
<h3>Japan Blog</h3>
<a href="https://joshhill1.github.io/JapanBlog/" target="_blank">Deployed Site</a>
<a href="https://github.com/JoshHill1/JapanBlog" target="_blank">GitHub Repo</a>
</div>
</div>
<p>This is a personal blog that I made. My purpose for this website is to show and tell what my family trip to Japan was like in a fun and creative way.</p>
</div>
</div>
<!-- JAVASCRIPT CODE FILE LOCATION -->
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script> <!-- Link used to use battboldt's JS file called typed.js -->
<script src="./zassets/script.js"></script>
</main>
<div class="spacer layer1"></div>
<footer>
<div id="footerContent">
<div class="flexFooterCol">
<div id="abProjGap">
<div class="footerPDescription">
<p>Want to learn more about me as a person? Check out my About page!</p>
<a href="./navLinks/About/about.html">About</a>
</div>
<div class="footerPDescription">
<p>Want to see my work process on projects I've done? Chech out my Projects page!</p>
<a href="./navLinks/Projects/projects.html">Projects</a>
</div>
</div>
<div id="footerContact">
<p style="font-size: 40px; font-weight: 900; width: 500px; text-align: center;">Contact:</p>
<div id="contactFooterColInfo">
<div id="flexFooterContactLinks">
<li><a href="https://www.linkedin.com/in/joshuahillaz0d/" target="_blank">LinkedIn</a></li>
<li><a href="https://github.com/JoshHill1" target="_blank">GitHub</a></li>
<li><a href="https://www.instagram.com/josh_hil1/" target="_blank">Instagram</a></li>
<li><a href="./navLinks/Contact/contact.html" target="_blank">LinkTree</a></li>
</div>
<p id="footerContactEmail">jjhi11240@gmail.com</p>
</div>
</div>
</div>
</div>
<p id="Copy">©2024 Joshua Hill</p>
</footer>
<script src="./script.js"></script>
</body>
</html>