<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Samuel Reed's Github Portfolio Page for Web Development" />
<title>Samuel Reed Coding</title>
<link rel="stylesheet" href="/style.scss" />
<script type="module" src="/main.js" defer></script>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#about">{ About }</a></li>
<li><a href="#projects">{ Projects }</a></li>
<li><a href="#contact">{ Contact }</a></li>
</ul>
</nav>
<div id="banner">
<div id="title-wrapper">
<div class="title"><span></span>/src/</div>
<div class="subtitle">Samuel Reed Coding</div>
</div>
<div id="cta-wrapper">
<div>Frontend Development</div>
<a href="#contact" class="button">Contact</a>
</div>
</div>
<main>
<section id="about">
<div class="flex feature-wrapper">
<div class="feature">
<span><span class="feature-title highlight color1">Design without Limits</span></span
><span class="feature-subtitle"
>Let me handle the details, so you can focus on the big picture</span
>
</div>
<div class="icon-grid">
<div>
<img src="/icons/js-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/reactjs-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/firebase-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/mongodb-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
</div>
</div>
</div>
<h2>About Me</h2>
<p class="pop">
<strong
>Freelance Javascript web developer, specialising in building interactive websites and single
page apps with React.js.</strong
>
</p>
<p>
I enjoy learning new frameworks and technologies. Recently, I've been working with
<strong class="highlight color3"
>React, React Router, Next.js, node, Express, Firebase, and MongoDB</strong
>.
</p>
<p>
My motivation has always been the challenge of mastering new skills and technologies. This has given
me a wide variety of experience and knowledge, both in front- and back-end development.
</p>
<p>
I started learning web development by myself in high school, writing plain html in notepad. I've
always loved the challenge of programming, but I left it to get a 'real job'. But after years of
working in the education sector, I'm returning to the field which originally sparked my interest.
</p>
</section>
<!-- Project Buttons -->
<section id="projects">
<h2>Projects</h2>
<div class="projects-wrapper">
<div class="project-sidebar">
<ul>
<li id="social" class="selected project-button">
<img alt="social icon" class="icon-small" src="icons/letter-s-svgrepo-com.svg" />
<span>Social</span>
</li>
<li id="node" class="project-button">
<img alt="node icon" class="icon-small" src="icons/lock-svgrepo-com.svg" />
<span>Auth Server</span>
</li>
<li id="spacex" class="project-button">
<img alt="spacex icon" class="icon-small" src="icons/spacexlogo.png" />
<span>SpaceX</span>
</li>
<li id="rps" class="project-button">
<img alt="rock paper scissors icon" class="icon-small" src="icons/icon-scissors.svg" />
<span>R/P/S</span>
</li>
<li id="store" class="project-button">
<img alt="store icon" class="icon-small" src="icons/cart-svgrepo-com.svg" />
<span>Store</span>
</li>
<li id="calculator" class="project-button">
<img
alt="calculator icon"
src="icons/calculator-svgrepo-com.svg"
class="icon-small"
/><span>Calculator</span>
</li>
<li id="d3" class="project-button">
<img alt="d3 logo" class="icon-small" src="icons/d3-js-svgrepo-com.svg" />
<span>D3.js</span>
</li>
<li id="snake" class="project-button">
<img alt="snake icon" src="icons/snake_icon.ico" class="icon-small" /><span
>Snake!</span
>
</li>
</ul>
</div>
<!-- Project Displays -->
<div id="project-display-panel">
<!-- Codepen -->
<div id="snake-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ Snake! }</h3>
<p>A simple snake clone</p>
<p>
Every programmer needs to build a snake clone. I build this over the course of
an afternoon as my first foray into game programming.
</p>
<p>Try adjusting the game options at the bottom of the page.</p>
<p class="bold">Technologies used: Vanilla HTML and Javascript</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="rNJowZv"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/rNJowZv"> Snake!</a> by Samuel
(<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<div id="calculator-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ Calculator }</h3>
<p>Calculator App built with React Components</p>
<p>
Handles basic arithmetic as well as exponentials. Detects and prevents input
overflows. I originally created this with plain Javascript, then with React
Components, then again with React Hooks.
</p>
<p class="bold">Technologies used: React Components</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="GROjpev"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/GROjpev"> React Calculator</a>
by Samuel (<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>)
on <a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<div id="d3-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ D3.js }</h3>
<p>Data visualisation using D3.js</p>
<p>
Pulls historical temperature data from an API and programmatically creates a
heatmap charting temperature by year. This is one of several D3 projects you can
see on my Codepen account.
</p>
<p class="bold">Technologies used: D3.js, fetch API</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="YzEKwJr"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/YzEKwJr"> Heat Map</a> by Samuel
(<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<!-- Non-Codepen -->
<div id="spacex-display" class="project-display">
<div class="project-info spacexbackground">
<div class="text-bottom">
<h3>{ SpaceX Launches }</h3>
<p>See the launch history of SpaceX</p>
<p class="bold">
Technologies used: GraphQL API, Typescript, React, Styled-Components,
React-Bootstrap
</p>
<p>Click on a card to load more details.</p>
<p>
Visit the app at
<a href="http://rtp-projects.epizy.com/spacex" target="_blank"
>rtp-projects.epizy.com/spacex</a
>
</p>
</div>
</div>
</div>
<div id="node-display" class="project-display">
<div class="project-info nodebackground">
<div class="text-bottom">
<h3>{ Node Authorisation Server }</h3>
<p>A simple Node server which authenticates and authorises using JSON Web Tokens</p>
<p class="bold">
Technologies used: Node & Express, Pug, jsonwebtoken, bcrypt, MongoDB
</p>
<p>
No front-end libraries used, and only a few lines of Javascript are served to
the client. All HTML is generated server-side with Pug.js
</p>
<p>
Visit the app at
<a href="https://jagged-admitted-case.glitch.me" target="_blank"
>jagged-admitted-case.glitch.me</a
>
</p>
<p>Please be patient, Glitch can be slow to start up</p>
</div>
</div>
</div>
<div id="social-display" style="display: block" class="project-display">
<div class="project-info socialbackground">
<div class="text-bottom">
<h3>{ Social }</h3>
<p>A simple social networking website, built using React and Firestore.</p>
<p class="bold">Technologies used: React (with Hooks), React Router, Firestore</p>
<p>
Login using your GMail, or use one of the premade test accounts. Post a message,
and open the chat in the sidebar. This is very much still a work in progress,
but it has been a very useful learning experience.
</p>
<p>
Visit the app at
<a href="https://social-rtp.herokuapp.com/" target="_blank"
>social-rtp.herokuapp.com/</a
>
</p>
<p>Please be patient, Heroku can be slow to start up</p>
</div>
</div>
</div>
<div id="rps-display" class="project-display">
<div class="project-info rpsbackground">
<div id="rps-info" class="text-bottom">
<h3>{ Rock Paper Scissors }</h3>
<p>The classic game, built using React and packaged with Vite</p>
<p class="bold">Technologies used: React, Vite</p>
<p>
A fun project using an idea and assets from frontendmentor.io. It gave me lots
of opportunity to work on CSS animations and making a satisfying user
experience.
</p>
<p>
Visit the app at
<a href="http://rtp-projects.epizy.com/rock-paper-scissors/" target="_blank"
>rtp-projects.epizy.com/rock-paper-scissors</a
>
</p>
</div>
</div>
</div>
<div id="store-display" class="project-display">
<div class="project-info storebackground">
<div id="store-info" class="text-bottom">
<h3>{ Store }</h3>
<p>
A simple e-commerce storefront. Client built with React, backend built with Node
and Stripe
</p>
<p class="bold">Technologies used: React, Node.js, Express, Stripe</p>
<p>
Add some items to your cart, then use card 4242 4242 4242 4242, CVC 424 to
complete a test purchase.
</p>
<p>
Visit the app at
<a href="https://store-rtp314.herokuapp.com/" target="_blank"
>store-rtp314.herokuapp.com/</a
>
</p>
<p>Please be patient, Heroku can be slow to start up</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="flex feature-wrapper">
<div class="feature">
<span class="feature-title highlight color3">Get in touch</span>
<span class="feature-subtitle">Let's make something new</span>
</div>
<div>
<p>
Contact me by email or on LinkedIn. I'll be happy to talk about making your next project
come to life.
</p>
<p class="flex-align">
<img class="icon-small" src="/icons/email-svgrepo-com.svg" alt="email icon" />
<a href="mailto:samuelreed01@gmail.com">samuelreed01@gmail.com</a>
</p>
<p class="flex-align">
<img class="icon-small" src="/icons/linkedin-svgrepo-com.svg" alt="linkedin icon" />
<a href="https://www.linkedin.com/in/samuelreed01/">linkedin.com/in/samuelreed01/</a>
</p>
</div>
</div>
</section>
</main>
<footer>
Site hand coded by Samuel Reed using free-range, organic HTML/CSS/JS. Icons by
<a href="https://www.svgrepo.com/">svgrepo.com</a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Samuel Reed's Github Portfolio Page for Web Development" />
<title>Samuel Reed Coding</title>
<link rel="stylesheet" href="/style.scss" />
<script type="module" src="/main.js" defer></script>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#about">{ About }</a></li>
<li><a href="#projects">{ Projects }</a></li>
<li><a href="#contact">{ Contact }</a></li>
</ul>
</nav>
<div id="banner">
<div id="title-wrapper">
<div class="title"><span></span>/src/</div>
<div class="subtitle">Samuel Reed Coding</div>
</div>
<div id="cta-wrapper">
<div>Frontend Development</div>
<a href="#contact" class="button">Contact</a>
</div>
</div>
<main>
<section id="about">
<div class="flex feature-wrapper">
<div class="feature">
<span><span class="feature-title highlight color1">Design without Limits</span></span
><span class="feature-subtitle"
>Let me handle the details, so you can focus on the big picture</span
>
</div>
<div class="icon-grid">
<div>
<img src="/icons/js-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/reactjs-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/firebase-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
<img src="/icons/mongodb-svgrepo-com.svg" alt="Javascript Icon" class="icon-js" />
</div>
</div>
</div>
<h2>About Me</h2>
<p class="pop">
<strong
>Freelance Javascript web developer, specialising in building interactive websites and single
page apps with React.js.</strong
>
</p>
<p>
I enjoy learning new frameworks and technologies. Recently, I've been working with
<strong class="highlight color3"
>React, React Router, Next.js, node, Express, Firebase, and MongoDB</strong
>.
</p>
<p>
My motivation has always been the challenge of mastering new skills and technologies. This has given
me a wide variety of experience and knowledge, both in front- and back-end development.
</p>
<p>
I started learning web development by myself in high school, writing plain html in notepad. I've
always loved the challenge of programming, but I left it to get a 'real job'. But after years of
working in the education sector, I'm returning to the field which originally sparked my interest.
</p>
</section>
<!-- Project Buttons -->
<section id="projects">
<h2>Projects</h2>
<div class="projects-wrapper">
<div class="project-sidebar">
<ul>
<li id="social" class="selected project-button">
<img alt="social icon" class="icon-small" src="icons/letter-s-svgrepo-com.svg" />
<span>Social</span>
</li>
<li id="node" class="project-button">
<img alt="node icon" class="icon-small" src="icons/lock-svgrepo-com.svg" />
<span>Auth Server</span>
</li>
<li id="spacex" class="project-button">
<img alt="spacex icon" class="icon-small" src="icons/spacexlogo.png" />
<span>SpaceX</span>
</li>
<li id="rps" class="project-button">
<img alt="rock paper scissors icon" class="icon-small" src="icons/icon-scissors.svg" />
<span>R/P/S</span>
</li>
<li id="store" class="project-button">
<img alt="store icon" class="icon-small" src="icons/cart-svgrepo-com.svg" />
<span>Store</span>
</li>
<li id="calculator" class="project-button">
<img
alt="calculator icon"
src="icons/calculator-svgrepo-com.svg"
class="icon-small"
/><span>Calculator</span>
</li>
<li id="d3" class="project-button">
<img alt="d3 logo" class="icon-small" src="icons/d3-js-svgrepo-com.svg" />
<span>D3.js</span>
</li>
<li id="snake" class="project-button">
<img alt="snake icon" src="icons/snake_icon.ico" class="icon-small" /><span
>Snake!</span
>
</li>
</ul>
</div>
<!-- Project Displays -->
<div id="project-display-panel">
<!-- Codepen -->
<div id="snake-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ Snake! }</h3>
<p>A simple snake clone</p>
<p>
Every programmer needs to build a snake clone. I build this over the course of
an afternoon as my first foray into game programming.
</p>
<p>Try adjusting the game options at the bottom of the page.</p>
<p class="bold">Technologies used: Vanilla HTML and Javascript</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="rNJowZv"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/rNJowZv"> Snake!</a> by Samuel
(<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<div id="calculator-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ Calculator }</h3>
<p>Calculator App built with React Components</p>
<p>
Handles basic arithmetic as well as exponentials. Detects and prevents input
overflows. I originally created this with plain Javascript, then with React
Components, then again with React Hooks.
</p>
<p class="bold">Technologies used: React Components</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="GROjpev"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/GROjpev"> React Calculator</a>
by Samuel (<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>)
on <a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<div id="d3-display" class="project-display">
<div class="project-info closable-info">
<div class="text-bottom">
<h3>{ D3.js }</h3>
<p>Data visualisation using D3.js</p>
<p>
Pulls historical temperature data from an API and programmatically creates a
heatmap charting temperature by year. This is one of several D3 projects you can
see on my Codepen account.
</p>
<p class="bold">Technologies used: D3.js, fetch API</p>
<p>Click to close this information and explore the code</p>
</div>
</div>
<p
class="codepen"
data-height="850"
data-theme-id="dark"
data-default-tab="result"
data-slug-hash="YzEKwJr"
data-user="reversethepolarity"
style="
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
margin: 1em 0;
padding: 1em;
"
>
<span
>See the Pen
<a href="https://codepen.io/reversethepolarity/pen/YzEKwJr"> Heat Map</a> by Samuel
(<a href="https://codepen.io/reversethepolarity">@reversethepolarity</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
</div>
<!-- Non-Codepen -->
<div id="spacex-display" class="project-display">
<div class="project-info spacexbackground">
<div class="text-bottom">
<h3>{ SpaceX Launches }</h3>
<p>See the launch history of SpaceX</p>
<p class="bold">
Technologies used: GraphQL API, Typescript, React, Styled-Components,
React-Bootstrap
</p>
<p>Click on a card to load more details.</p>
<p>
Visit the app at
<a href="http://rtp-projects.epizy.com/spacex" target="_blank"
>rtp-projects.epizy.com/spacex</a
>
</p>
</div>
</div>
</div>
<div id="node-display" class="project-display">
<div class="project-info nodebackground">
<div class="text-bottom">
<h3>{ Node Authorisation Server }</h3>
<p>A simple Node server which authenticates and authorises using JSON Web Tokens</p>
<p class="bold">
Technologies used: Node & Express, Pug, jsonwebtoken, bcrypt, MongoDB
</p>
<p>
No front-end libraries used, and only a few lines of Javascript are served to
the client. All HTML is generated server-side with Pug.js
</p>
<p>
Visit the app at
<a href="https://jagged-admitted-case.glitch.me" target="_blank"
>jagged-admitted-case.glitch.me</a
>
</p>
<p>Please be patient, Glitch can be slow to start up</p>
</div>
</div>
</div>
<div id="social-display" style="display: block" class="project-display">
<div class="project-info socialbackground">
<div class="text-bottom">
<h3>{ Social }</h3>
<p>A simple social networking website, built using React and Firestore.</p>
<p class="bold">Technologies used: React (with Hooks), React Router, Firestore</p>
<p>
Login using your GMail, or use one of the premade test accounts. Post a message,
and open the chat in the sidebar. This is very much still a work in progress,
but it has been a very useful learning experience.
</p>
<p>
Visit the app at
<a href="https://social-rtp.herokuapp.com/" target="_blank"
>social-rtp.herokuapp.com/</a
>
</p>
<p>Please be patient, Heroku can be slow to start up</p>
</div>
</div>
</div>
<div id="rps-display" class="project-display">
<div class="project-info rpsbackground">
<div id="rps-info" class="text-bottom">
<h3>{ Rock Paper Scissors }</h3>
<p>The classic game, built using React and packaged with Vite</p>
<p class="bold">Technologies used: React, Vite</p>
<p>
A fun project using an idea and assets from frontendmentor.io. It gave me lots
of opportunity to work on CSS animations and making a satisfying user
experience.
</p>
<p>
Visit the app at
<a href="http://rtp-projects.epizy.com/rock-paper-scissors/" target="_blank"
>rtp-projects.epizy.com/rock-paper-scissors</a
>
</p>
</div>
</div>
</div>
<div id="store-display" class="project-display">
<div class="project-info storebackground">
<div id="store-info" class="text-bottom">
<h3>{ Store }</h3>
<p>
A simple e-commerce storefront. Client built with React, backend built with Node
and Stripe
</p>
<p class="bold">Technologies used: React, Node.js, Express, Stripe</p>
<p>
Add some items to your cart, then use card 4242 4242 4242 4242, CVC 424 to
complete a test purchase.
</p>
<p>
Visit the app at
<a href="https://store-rtp314.herokuapp.com/" target="_blank"
>store-rtp314.herokuapp.com/</a
>
</p>
<p>Please be patient, Heroku can be slow to start up</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="flex feature-wrapper">
<div class="feature">
<span class="feature-title highlight color3">Get in touch</span>
<span class="feature-subtitle">Let's make something new</span>
</div>
<div>
<p>
Contact me by email or on LinkedIn. I'll be happy to talk about making your next project
come to life.
</p>
<p class="flex-align">
<img class="icon-small" src="/icons/email-svgrepo-com.svg" alt="email icon" />
<a href="mailto:samuelreed01@gmail.com">samuelreed01@gmail.com</a>
</p>
<p class="flex-align">
<img class="icon-small" src="/icons/linkedin-svgrepo-com.svg" alt="linkedin icon" />
<a href="https://www.linkedin.com/in/samuelreed01/">linkedin.com/in/samuelreed01/</a>
</p>
</div>
</div>
</section>
</main>
<footer>
Site hand coded by Samuel Reed using free-range, organic HTML/CSS/JS. Icons by
<a href="https://www.svgrepo.com/">svgrepo.com</a>
</footer>
</body>
</html>
{ Social }
A simple social networking website, built using React and Firestore.
Technologies used: React (with Hooks), React Router, Firestore
Login using your GMail, or use one of the premade test accounts. Post a message, and open the chat in the sidebar. This is very much still a work in progress, but it has been a very useful learning experience.
Visit the app at rtp314.github.io/social
Or see the code in the github repository