Creating a portfolio website with React
I have been learning React.JS most recently as part of my studies, and I am quite enjoying using it so far. For the most part, it feels instinctive and logical, and opens a huge range of possibilities in terms of developing different websites.
I have even started to explore React Native, designed for developing mobile applications, and with the use of Expo and following the very clear React Native documentation, begun practicing adding different features that I can see on my very own mobile. I’ll practice that a little more and save the story for a future blog post.
For now, I have decided to test my familiarity with React by putting together a first version of an incredibly useful website for any budding web developer, my own portfolio website.
Here’s how the home page looks for now:
I have been using parts of the following resources to develop this so far, and should credit them as such, but as I rework and refactor this initial draft I will continue to add more and more of my own unique stamp on the site itself and code contained within:
- Create-React-App to get started with the core React file structure
- UI Gradients — I have used ‘Visions of Grandeur’ and ‘Cool Blues’
- Avatar Maker — this is a free site which allowed me to create a cute avatar that adds a lot to my home page design
- Google Fonts — I used the ‘Roboto’ font throughout
- React MDL for quick design purposes (e.g. for links, cards, navigation bars, sidebars etc.), though I have also added my own CSS where I preferred this. Importing boilerplate components actually reminded me of my first forays into React Native.
- The React documentation as a whole
- A range of Youtube tutorials on React, most notably the Create React App portfolio playlist by Paul Hanna that gave me a lot of the how to and inspiration, as well as React tutorials by the Net Ninja and Free Code Camp (all recommended).
- Practice React labs and challenges on the Learn.co platform, FreeCodeCamp and Treehouse.
Getting started, of course, entailed deploying the following four lines of code in the terminal:
> npx create-react-app my-portfolio-website> cd my-portfolio npx create-react-app my-portfolio-website> atom . > npm start
I most recently learnt how to use React Router to create a multipage application and was surprised to discover how straightforward it was. I learnt that the routing can be abstracted into a separate JavasScript file, an idea I liked to clean up the code in the core App component. The relevant code can be found below:
const Main = () => (
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/curriculumvitae" component={CurriculumVitae} />
<Route path="/contact" component={Contact} />
</Switch>)export default Main;
I needed to remember to wrap my App component in BrowserRouter (imported from React Router), in my index.js file for this to work:
import { BrowserRouter } from 'react-router-dom';ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'));
The navigation bar on the portfolio site takes the user to different routes and ‘pages’ using React Router. In the case of the About link, this navigates to ‘/about’ and displays the page as below:
This simply entails rendering a specialised About component in addition to the navigation bar. The About component looks like this:
import React, { Component } from 'react';class About extends Component {
render() {
return (
<div className="about-page">
<div className="page-heading">
<h1>About Me</h1>
</div>
<p>I am a Full Stack Web Developer specialising in <span className="specialisation">React.JS</span> and <span className="specialisation">Ruby on Rails</span>. Additionally, I have experience with <span className="specialisation">vanilla Javascript</span>, <span className="specialisation">jQuery</span>, <span className="specialisation">HTML</span> and <span className="specialisation">CSS</span> and <span className="specialisation">React Native</span>.
</p>
<p>Having worked internationally across South Asia, East Africa and the Former Soviet Union, and in the humanitarian
and international development sectors for several years, I am experienced in working remotely and with teams with diverse backgrounds and contributions.</p>
<p>Working in emergencies and in contexts with limited or developing infrastructure I have worked under pressure and resourcefully when necessary.</p>
<p>Projects I designed, managed and monitored have ranged in length and size, from several months to several years, and from several thousand pounds to several million.</p>
<p>In additional to my technical skills, I am experienced in financial management, project management, proposal and report writing, and people management.
</p>
<p>I speak native English, advanced Spanish and German, and am also always trying to learn the Russian language.
</p>
<p>Countries worked in:</p>
<div className="image-container-flags">
<img src="http://img.freeflagicons.com/thumb/round_icon/nepal/nepal_640.png" />
<img src="http://img.freeflagicons.com/thumb/round_icon/bangladesh/bangladesh_640.png" />
<img src="http://img.freeflagicons.com/thumb/round_icon/united_kingdom/united_kingdom_640.png" />
<img src="http://img.freeflagicons.com/thumb/round_icon/germany/germany_640.png" />
<img src="http://img.freeflagicons.com/thumb/round_icon/colombia/colombia_640.png"/>
</div></div>
)
}}export default About;
A projects component displays the project page. As I add more projects to the site, I can add a filter function to search by language or any other category.
As shown above, on my projects page, I created references to existing and upcoming projects, as a form of encouragement to realise ideas and to finish and host existing projects. This includes a vanilla JavaScript project I have been working on recently, called Social Scrapbook:
The code for this project is A LOT, despite its relative simplicity as an app, given it is written purposefully in vanilla JavaScript only (no jQuery or React). I spent a good amount of time on the User Interface (and will continue to develop it further), with my favourite aspect so far being a small and simple CSS animation that is almost an easter egg of the app. That being, if you navigate to the top right hand corner of the page where the icon for the site is found, it will vibrate in response to the mouse hovering over the image. This comes from the following little nugget of code:
#scrapbook_logo:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Both the portfolio page and the projects linked on the projects page remain works in progress. I will keep working on them and adding new personal touches. Even when they are ‘finished’, I will come back to them and make changes as I feel necessary and as my skills grow and I am able to develop new features. For now, I have focused on structure and UI design. I am OK with that.
