loading...
Cover image for My New Personal Website!

My New Personal Website!

sergix profile image Peyton McGinnis ・1 min read

Code hosted on GitHub


It's finally done!

After about a week-and-a-half of design and development, my personal portfolio site has been completed.

Currently, it only shows off a few designs and a couple websites I've worked on, but I really enjoyed building it and maybe starting a new personal blog.

Stack

The site was built with -

Gridsome static site generator
Tailwind for styling
Netlify for hosting
Figma for UI prototyping

For those of you who don't know, Gridsome is an awesome static site generator for Vue. If you're interested in making a personal site and love Vue, it's the way to go!

All the blog posts are written in plain markdown and pulled in via the Gridsome filesystem plugin and the GraphQL layer Gridsome provides.

Landing page screenshot

Future features

I'm looking to add -

Web monetization
Fathom analytics
Comment system (might roll my own via Netlify Functions and AWS)

...and hopefully some other interesting features in the future!

Thanks for reading! God bless!


Contact me at hello@sergix.dev.

Posted on May 31 by:

sergix profile

Peyton McGinnis

@sergix

A pseudonormal programmer.

Discussion

markdown guide
 

Nice website, btw add height of 100vh and overflow-x auto yo the body

 

The body already has a min-height of 100vh, but I was planning to add overflow-x: hidden to the body. Why auto?

 

oh My mistake, it was overflow: hidden

 

zoom your website in at 500%, I cannot see the total page because there is no vertical scroll bar displayed.

 

Hm, interesting. Thanks for the heads up!

 

How did you come up with your company name?

 

I barely remember why, but back when I was a kid I always used it as my Steam and XBOX gamertag. I think I just spliced two words together randomly and was like "that sounds cool 🤷‍♂️." 😂 It's just always stuck with me.

 
 
 
 
 

Thanks so much! Anything you notice that could be improved?? I'm still looking for any UX issues.