Project #1: Personal Website
- -In November, I felt an urge to put my programming capabilities to the test and start developing. As I delved into other people’s personal projects to look for inspiration and guidance, I felt overwhelmed with where to start. I would get discouraged by how advanced other people were, how many various platforms and languages they knew, and the amount of time many of my peers had already spent. It just felt like it was impossible to catch up - but everyone has to start somewhere. Instead of wallowing, I needed to create something that would encourage me to continue creating. I thought, “Everyone seems to have a personal site where they put their projects, which means that 1) I can create a site, and 2) it’ll look pretty dumb if there are no projects on it, so I’ll be forced to keep going.”
+In November, I felt an urge to put my programming capabilities to the test and start developing. As I delved into other people’s personal projects to look for inspiration and guidance, I felt overwhelmed with where to start. I would get discouraged by how advanced other people were, how many various platforms and languages they knew, and the amount of time many of my peers had already spent. It just felt like it was impossible to catch up - but everyone has to start somewhere. Instead of wallowing, I needed to create something that would encourage me to continue creating. I thought, “Everyone seems to have a personal site where they put their projects, which means that 1) I can create a site, and 2) it’ll look pretty dumb if there are no projects on it, so I’ll be forced to keep going.”
And here’s the final product - welcome to my site! Here’s a little bit about it. I’m hosting the site on Github Pages and used Github’s static site builder, Jekyll, for the general HTML format. I chose Jekyll because it’s meant to be used specifically for blog-style websites. I copied over the default CSS theme, “minima”, into my local folders and made edits from there to personalize the design. I tried to mimic the Apple theme a bit with rounded edges and a simple color scheme.
diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css index 42d62a6..e1f8232 100644 --- a/_site/assets/css/styles.css +++ b/_site/assets/css/styles.css @@ -5,7 +5,7 @@ this tag does not contribute to the style... img { width: 300px; float: left; margin-right: 20px; border-radius: 30px; } /** Reset some basic elements */ -body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 10px; padding: 5px; } +body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 10px; padding: 0px; } /** Basic styling */ body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #f8d2d2; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; flex-direction: column; padding: 20px; } @@ -58,7 +58,7 @@ pre > code { border: 0; padding-right: 0; padding-left: 0; } .post-bubble { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin: auto; padding-top: 10px; background-color: #f4f1f1; border-radius: 30px; } @media screen and (max-width: 1000px) { .post-bubble { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } -.post-thumbnail { max-width: -webkit-calc(800px - (30px * 3)); max-width: calc(800px - (30px * 3)); margin: 20px; padding-top: 10px; background-color: #d8d5d5; border-radius: 30px; } +.post-thumbnail { max-width: -webkit-calc(800px - (30px * 3)); max-width: calc(800px - (30px * 3)); margin: 20px; padding-top: 10px; background-color: #d8d5d5cd; border-radius: 30px; } @media screen and (max-width: 1000px) { .post-thumbnail { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } /** Clearfix */ diff --git a/_site/assets/main.css b/_site/assets/main.css index b418d4f..47231c3 100644 --- a/_site/assets/main.css +++ b/_site/assets/main.css @@ -1,5 +1,5 @@ /** Reset some basic elements */ -body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 10px; padding: 5px; } +body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 10px; padding: 0px; } /** Basic styling */ body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #f8d2d2; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; flex-direction: column; padding: 20px; } @@ -52,7 +52,7 @@ pre > code { border: 0; padding-right: 0; padding-left: 0; } .post-bubble { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin: auto; padding-top: 10px; background-color: #f4f1f1; border-radius: 30px; } @media screen and (max-width: 1000px) { .post-bubble { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } -.post-thumbnail { max-width: -webkit-calc(800px - (30px * 3)); max-width: calc(800px - (30px * 3)); margin: 20px; padding-top: 10px; background-color: #d8d5d5; border-radius: 30px; } +.post-thumbnail { max-width: -webkit-calc(800px - (30px * 3)); max-width: calc(800px - (30px * 3)); margin: 20px; padding-top: 10px; background-color: #d8d5d5cd; border-radius: 30px; } @media screen and (max-width: 1000px) { .post-thumbnail { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } /** Clearfix */ diff --git a/_site/feed.xml b/_site/feed.xml index 3f92de3..bef6778 100644 --- a/_site/feed.xml +++ b/_site/feed.xml @@ -1,9 +1,7 @@ --
+
- - Project #1: Personal Website - +
Below are some write-ups on my personal projects.
+Currently, I'm working on a project to develop some experience in database design.
+Project #1: Personal Website
+Dec 15th, 2023
+In November, I felt an urge to put my programming capabilities to the test and start developing. As I delved into other people’s personal projects to look for inspiration and guidance, I felt overwhelmed with where to start.
+ + +Project 1
-Project 2
-Project 3
-Project 4
+-
+
- - {{ post.title }} - + {% endfor %} - -
Below are some write-ups on my personal projects.
+Currently, I'm working on a project to develop some experience in database design.
+Project 1
-Project 2
-Project 3
-Project 4
\ No newline at end of file +