-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (106 loc) · 6.01 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
<!DOCTYPE html>
<html>
<head>
<title>Josh Ferriday</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/7eacef5a75.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <header id="header">
<a class="site-logo-link" href="index.html">
<div id="mainlogo" class="logo">
<span class="logo-text">JF</span>
</div>
</a>
<nav>
<button id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul id="nav-bar"class="nav-list" role="navigation">
<li><a href="#portfolio">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header> -->
<main>
<section id="intro-banner">
<div id="banner">
<div id="intro-message">
<h1 id="intro-text">Josh Ferriday</h1>
<span class="tagline">Find me at <a href="https://joshferriday.com">joshferriday.com</a></span>
</div>
</div>
</section>
<!-- <section id="about-services">
<div class="about">
<h2>About</h2>
<br>
<p>I'm on a journey through the world of web development, looking to get started in the industry. Recently, I've been working with React and Redux to build simple web applications.
I'm currently learning about the back-end, using Node and Express.
See my portfolio below for past work, or <a href="mailto:[email protected]">contact me</a> for more information.</p>
</div>
</section>
<section id="portfolio">
<h2>Projects</h2>
<div class="container">
<div class="project-container">
<a href="https://redlistinfo.netlify.app"><h3>Red List Info</h3>
<br>
<div class="project-image">
<img src="./project-info/redlistinfo.png" alt="Red list info screenshot">
</div></a>
<br>
<p>This project is a full-stack app, using Express as a backend and React on the front end. It allows users to get information about
threats and conservation status of species on the IUCN Red List. Users can perform global or regional searches. Species name suggestions are
provided by the Global Biodiversity Information Facility. Styling uses Material-UI, a React framework implementing material design.
<br/><br/>
Check it out at <a href="https://redlistinfor.netlify.app">redlistinfo.netlify.app</a>.
</p>
</div>
<div class="project-container">
<a href="https://reddmini.netlify.app"><h3>Reddit Mini</h3>
<br>
<div class="project-image">
<img src="./project-info/reddmini-screen.png" alt="Reddit Mini screenshot">
</div></a>
<br>
<p>This project was created as part of Codecademy's Full-Stack Engineer course. It's a lightweight client for Reddit.
The web app was built using React and uses Redux for state management. It uses mobile-first responsive design, styled using vanilla CSS.
Development made use of Jest and React Testing Library during testing.</p>
<br/>
<p>See the app <a href="https://reddmini.netlify.app">live</a> or take a look at the repo <a href="https://github.com/jferriday/reddit-client">on GitHub</a>.</p>
</div>
<div class="project-container">
<a href="https://jferriday.github.io/spare-my-food/" ><h3>Spare My Food</h3>
<br>
<div class="project-image">
<img src="./project-info/spare-my-food-screen.png" alt="Spare My Food screenshot" />
</div></a>
<br>
<p>A simple web-based tool to search for nearby food banks, returning items they need and contact details.
The tool makes use of the <a href="https://www.givefood.org.uk/">Give Food</a> API.
</p>
</div>
<div class="project-container">
<a href="https://selecta.netlify.app"><h3>Selecta</h3>
<br>
<div class="project-image">
<img src="./project-info/selecta-screen.png" alt="Selecta screenshot">
</div></a>
<br>
<p>This project was an attempt at rewriting the 'Jamming' app on the Codecademy React course using functional components and hooks
instead of the class components used by the original project. Uses the Spotify API to search for tracks and save a new playlist to a user's
spotify account.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<br>
<address><a href="mailto:[email protected]">[email protected]</a></address>
</section>
</main> -->
<script src="./main.js"></script>
</body>
</html>