The source code for this portfolio is available on GitHub.

Getting Started With This Template

Stefan KudlaStefan Kudla | | Cosmic
Cover image for Getting Started With This Template

Overview

First and foremost, this template is a wonderful resource to get familiar with using Cosmic. With the simple functionality of a blog, you will learn how Cosmic serves as a home for all of your content. Once you get going with your setup, I encourage you to write a blog post or two so that you can see Cosmic in action! Here is a Markdown Cheatsheet to get you started.

After familiarizing yourself with the flow of writing blog posts, you will see that your data streamlines through your code, being converted to JSON which you can access in no time. Within this template, markdown is serialized to HTML with remark-html. This allows us to take that markdown that we can conveniently write in the Cosmic dashboard and inject it anywhere we'd like in our code!

Furthermore, once you become comfortable within the Cosmic dashboard, feel free to explore the many ways in which you can create value within your projects! With Cosmic, you are by no means limited to writing blog posts or content. Try different content approaches like writing your components in an object and creating things like menus, category lists, or even entire page layouts. All this information is just a query away.

Basic Setup Within Your Code

There are just a few things I would like to point up for those setting this up to use as their developer portfolio.

  1. Upload your resume to the public folder in the directory, and change the href to match your file name accordingly. In Visual Studio Code, you can search for all instances of "your_resume_here" and replace the pdf.

  2. Update the social links within the SocialIcons component. (src>components>SocialIcons.jsx)

  3. Changing the color palette is as easy as going into (src>styles>globals.css) and replacing the values under the .light and .dark classes. Mind that the .light and .dark classes represent light and dark modes.

Conclusion

This template was built not only to help new users get their feet wet with Cosmic, but also with the end user in mind. We made sure to utilize best practices to ensure that performance and user experience were at top levels. We hope that you enjoy using Cosmic, and if there is anything you are confused about, don't hesitate to reach out here or feel free to join our Slack channel!