Creating my portfolio site
The goal was to create a self-hosted website that can be used as a portfolio to showcase some of my projects. In the past, I hosted through Squarespace, but I wanted more control over the site and also used it to learn more about server setups. The repository for the this website can be found on my GitHub.
Automatic deployment is handled with GitHub actions. This allows new content or changes to be automatically built and deployed when pushing to my main branch. If interested, I use the GitHub workflow below to build and deploy to my server.
- uses: actions/[email protected]
- name: Use Node.js $NaN
uses: actions/setup-[email protected]
- name: Install dependencies & build
npm run build
- name: Install SSH Key
uses: shimataro/ssh-key-[email protected]
- name: Adding Known Hosts
run: ssh-keyscan -H $ >> ~/.ssh/known_hosts
- name: Deploy with rsync
run: rsync -avz ./public/* [email protected]$:/var/www/stauffersimon.com
The site's design was inspired by wired.com and nike.com, which have clean and sophisticated looks. I wanted to create a similar aesthetic for my portfolio, so I used clean fonts and a simple layout. No framework was used, and the CSS was written from scratch. To explore the site's basic layout, I created low-fidelity wireframes for both mobile and desktop versions. This allowed me to experiment with different designs and navigation options before moving to Figma to work out the final details.
In Figma, I focused on creating cohesive spacing and typography to create a clean, professional look. For the body text, I choose Inter. Inter is a font specifically designed for screens with a tall x-height to improve readability. For the headings, I used Roboto to add a little more weight and emphasis. Finally, I used drop caps for each paragraph's first letter to add some interest to the design. My goal was to create a clean, sophisticated portfolio site that showcases my projects and skills professionally. The design achieves this while still being visually interesting and engaging for visitors.
Overall, the process of creating and hosting my own website has been a valuable learning experience. I've gained a deeper understanding of server setups and deployment, and I'm excited to continue developing and improving my site in the future.