Web Development

Personal Portfolio

josephlyman.dev

  • Next.js
  • TailwindCSS
  • Contentful
  • GitHub
  • Git
Render of the portfolio website on a MacBook, iPad, and iPhone screen.

Introduction

Hey! Welcome! This is a writeup for my own personal portfolio. I started working on this site in 2021 as a way to gain experience building websites with React.js and to also showcase other projects I've worked on. My portfolio received a fresh coat of paint in 2025 after I decided my original implementation needed some improvement. So here's everything you need to know!

Getting Started

When I first began my journey into developing a website for myself, I knew I wanted to start working with React. I also just started hearing about this cool new framework called Tailwind CSS, a flexible, class-oriented CSS framework that developers seem to love. I decided to give that a try too.
I didn't want to deal with any back-end services, so I chose Next.js as my react framework of choice. This allows me to create a serverless website, and since my portfolio won't be doing anything more than serving static data, this was the best choice. I elected to use Contentful as my CDN, which gives me an easy way to create new projects and write-ups, without having to edit my source files every time I need to make a change.

Designing the Site

Figma is my design and prototyping software of choice. I've used it for several projects and I'm feeling very comfortable with the application. In fact, I'm finding myself using Figma more often than the Adobe creative suite for non-web/mockup related designs!

Homepage

First impressions matter, and they matter dramatically more on websites. Users who can't find a reason to stay, won't. I wanted to portray a beautiful design and relevant information right away, so the "Hero" of my website tells you exactly what I do. I also added a few call-to-action buttons to give visitors options: Contact me, or see my projects.
Sharing additional details about myself was also important, so that, and links to my GitHub, LinkedIn, and Resume were displayed next.
Now, arguably the most important part of my portfolio is showcasing the projects I've worked on. Each project tile has some information about it: A cover photo, the kind of project it is, what it's called, and who it was for. Clicking on a project will take you to a page dedicated to that specific project with more information.
And last but not least, a place for visitors to leave a message in case they want to reach out to me.

Projects

Clicking on a project takes you to another screen showing a detailed writeup. The top header showcases the same gradient as the tile from the homepage, along with the project type, name, and tags. I narrowed the content width of these pages to stay within the recommended 50-75 characters per line (CPL) for better readability.

Conclusion

Overall, my portfolio is pretty straightforward and not too complicated. I wanted to take the time to design something beautiful and effective... and I think I did just that. If you have enjoyed reviewing my portfolio, send me a message and let me know what you liked! Thanks for being here!