A personal portfolio website, made with Next and Contentlayer.
The purpose of this project is to build a personal portfolio for myself as well as try out new libraries to help assist on building it - a combination of building and learning as I go.
To run this project locally, install the necessary dependencies using NPM:
$ npm install
Afterward, run the project in dev mode:
$ npm run dev
Here are the libraries I used to build this portfolio. Outside basic React with JavaScript, everything used here is a new learning experience for me.
- Next.js 14.2.3 using App router
- Typescript
- Tailwind CSS
- Framer Motion Animation Library
- shadcn/ui
- Lucide-Icons
- Lottie React
- Contentlayer.dev
Individual project pages are created dynamically from markdown files. The usage of Contentlayer allowed fetching of markdown content as data directly into each page.
All that is needed is to create the Contentlayer config file, edit the Next + Typescript config file, define the content schema (in this case, a schema for projects) and that's it. Afterwards, it is simply a matter of importing that data directly into my project files as needed.
Project Schema:
| field | type | notes |
|---|---|---|
| title | string | |
| content | string | Small description of the project |
| link | string | GitHub repo link |
| site | string | Live site link |
| src | string | location of image src |
| alt | string | alt name for image src |
| skills | string[] | list of skills utilized for the project |
As long as all of the fields are fulfilled when creating a new markdown project file, any new markdown files in the projectItems directory will automatically be imported so there are no code configuration to do to add it into the project list.
My process for developing the portfolio can be easily summed up as 3 steps:
- Research
- Prototype
- Development
- The Future
In order to create a portfolio, I wanted some inspiration on what some modern portfolios looked like, especially one with a focus on development like mine.
For this stage in development, I went and researched designs on these 2 sites:
Doing this research allowed me to gain some insight as to how to design my portfolio and taken the right steps on creating it.
After the research stage, I decided to make a rough prototype of my site using Figma design tools. Nothing too deep on the prototype, just a simple markup for what I wanted my portfolio to potentially look like, the layout, colors, etc.
Once I had an idea of what I wanted my project to look like, I went on and gather the tools I needed in order to create the design I wanted. At the same time, I also wanted to try out various libraries that I came across in my development journey, which is the secondary purpose of this project.
This is not a one-and-done project, as I plan on updating the site and content sometime in the future when necessary. This may include:
- Adding more projects
- Bug fixes
- UI improvements
- Figma for prototyping
- Coolers to help generate a color palette for my portfolio
- Site Inspire for research
- Dribble for research
- Radix UI Documentation to edit shadcn components
- Skill Icons for SVG icons
- Background Texture by Simon Fairhurst