Built a new personal portfolio site as I prepare myself to graduate from NYU. This site is a substantial improvement from my previous site which I developed using plain HTML, CSS and JS. The new site was developed using React.
- I built this site with the intention of maintaining it over the course of one to two years. Therefore I leveraged the whole Thinking in React. While there is no backend, I nonetheless created two JSON files to host all the data. Once the design is set up, all I'll need to do is update the JSON files, and I'll essentially have everything rendered how I wanted it to. With my previous site, this task was very cumbersome.
- Another unlikely thing I learnt was perhaps JS map function. In the All Projects section, I had to display a data in two columns per row from a 1D data. I got stuck for a bit in trying to find a way to do this. The solution I came up with was creating a 2D array from the 1D array following:
/*I have an array of objects. I want to map each of those objects in 2 cols per row*/
const data = this.state.data
//data = [data1, data2, data3,.......,data_n-1, data_n]
let rows = []
for(let i=0; i<data.length; i=i+2){
let temp = []
temp.push(data[i])
if(data[i+1] !== undefined){
temp.push(data[i+1])
}
rows.push(temp)
}Now that I had the data in 2D representation, with each sub-array representing a row, I could finally display the All Projects section in the following way:
// rows = [[data1,data2], [data3,data4],...,[data_n-1, data_n]]
{rows.map(row =>(
<Row>
{row.map(col => (
<Col className='more-projects-col' lg={6} md={6} sm={12}>
<Card className='more-projects-cards'>
<a href={col.project_github} target='_blank'><Card.Title>{col.project_name}</Card.Title></a>
<Card.Text>{col.project_desc}</Card.Text>
<div className='more-projects-tags'>
{col.project_stack.map(tag =>(
<span>{tag}</span>
))}
</div>
</Card>
</Col>
))}
</Row>
))}I hope you guys like my new site. Working as a Web Developer at EFL has certainly helped me in beefing up my front-end skills, and this site is a testament to my work there.
The design element of this site was inspired from Raj Shekhar's cleanfolio-minimal. Although I did not stick to the entire design, I went on to incorporate other ideas from other sites. For instance, the All Projects section was inspired from Github's Pinned Repository layout.