Merge pull request #33 from natanielf/dev

v1.2.0

Author: natanielf

README.md

@@ -2,13 +2,12 @@
 
 ### Check it out here: [natanielfarzan.com](https://natanielfarzan.com/)
 
-This project started two years ago while I was a freshman in my Computer Information System class. Ever since, I've updated and improved it. I've learned a lot about web design, programming, and [Git version control](https://git-scm.com/) from it and for that I'm thankful.
+This project started three years ago while I was a freshman in my Computer Information System class. Ever since, I've updated and improved it. I've learned a lot about web design and [Git version control](https://git-scm.com/) from it and for that I'm thankful.
 
 ### Inspiration and Attributions
 
 - Ms. Neumann (My CIS and AP CSP teacher)
-- [Adobe Brackets](http://brackets.io/) for making an awesome text editor! Note: Brackets is nearing end of life but it is still a great product.
-- [Space Grotesk Font](https://floriankarsten.github.io/space-grotesk/); also available on [Google Fonts](https://fonts.google.com/specimen/Space+Grotesk)
+- [Space Grotesk](https://floriankarsten.github.io/space-grotesk/) font (also available on [Google Fonts](https://fonts.google.com/specimen/Space+Grotesk))
 - [minal.ml](https://minar.ml/) and his source code available [here](https://github.com/m-i-n-a-r/sparky-portfolio)
 - [normalize.css](https://github.com/necolas/normalize.css) for a few tips on CSS resets
 - [codrops](https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/) for an image description animation in 100% CSS
@@ -18,6 +17,7 @@ This project started two years ago while I was a freshman in my Computer Informa
 ### Features
 
 - Responsive web design
+- Uses modern CSS
 - Theme automatically adjusts to the user's preference (light/dark)
 - Interactive animated background
 

assets/css/style.css

@@ -3,16 +3,17 @@
 :root {
   --clr-brand: hsl(357, 84%, 52%);
   --clr-brand-transparent: hsla(357, 84%, 52%, 0.75);
-  --br: 10px;
+  --brand-border: solid var(--clr-brand);
+  --br: 0.625rem;
   --box-shadow-transition: box-shadow 200ms ease-out;
   --clr-bkgd: hsl(0, 0%, 98%);
   --clr-text: hsl(0, 0%, 0%);
-  --content-bkgd: hsla(0, 0%, 98%, 0.4);
+  --clr-main-bkgd: hsla(0, 0%, 98%, 0.4);
   --box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.3);
   --line: thin solid hsla(0, 0%, 0%, 0.3);
   --clr-bkgd-dark: hsl(0, 0%, 2%);
   --clr-text-dark: hsl(0, 0%, 95%);
-  --content-bkgd-dark: hsla(0, 0%, 4%, 0.4);
+  --clr-main-bkgd-dark: hsla(0, 0%, 4%, 0.4);
   --box-shadow-dark: none;
   --line-dark: thin solid hsla(0, 0%, 100%, 0.3);
 }
@@ -21,7 +22,7 @@
   :root {
     --clr-bkgd: var(--clr-bkgd-dark);
     --clr-text: var(--clr-text-dark);
-    --content-bkgd: var(--content-bkgd-dark);
+    --clr-main-bkgd: var(--clr-main-bkgd-dark);
     --box-shadow: var(--box-shadow-dark);
     --line: var(--line-dark);
   }
@@ -40,7 +41,7 @@
 html {
   line-height: 1.15;
   scroll-behavior: smooth;
-  scroll-padding-top: 5em;
+  scroll-padding-top: 4.5em;
   /* Firefox scrollbar styling */
   scrollbar-width: thin;
   scrollbar-color: var(--clr-brand) var(--clr-bkgd);
@@ -55,13 +56,14 @@ body {
   text-align: center;
 }
 
-.content {
+main {
   max-width: 60em;
-  margin: 0 auto;
-  margin-bottom: 3rem;
-  padding: 1.4rem;
-  background-color: var(--content-bkgd);
-  border: medium solid var(--clr-brand);
+  box-sizing: border-box;
+  margin-inline: auto;
+  margin-block-end: 4rem;
+  padding: 1.5rem;
+  background-color: var(--clr-main-bkgd);
+  border: medium var(--brand-border);
   border-radius: calc(var(--br) * 2);
   -webkit-box-shadow: var(--box-shadow);
   box-shadow: var(--box-shadow);
@@ -78,31 +80,34 @@ section:target > h1 {
   margin: 3rem 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
-  gap: 4em;
+  gap: 5em 4em;
 }
 
 hr {
   height: 0.125em;
   width: 100%;
-  margin: 2em 0;
+  margin-block: 3em;
   background-color: var(--clr-brand);
   border: none;
 }
 
 h1 {
   font-size: 2em;
-  margin: 0.67em 0;
   font-weight: bold;
 }
 
 :is(h2, h3, p) {
   font-weight: lighter;
 }
 
+section > h2 {
+  margin-block: 2rem;
+}
+
 nav {
-  padding: 0.75rem;
+  padding: 0.7rem;
   background-color: var(--clr-bkgd);
-  border: thin solid var(--clr-brand);
+  border: thin var(--brand-border);
   position: -webkit-sticky;
   position: sticky;
   top: 0;
@@ -111,14 +116,14 @@ nav {
   transition: var(--box-shadow-transition);
 }
 
-:is(nav, .footer):is(:hover, :focus-within) {
+:is(nav, footer):is(:hover, :focus-within) {
   -webkit-box-shadow: var(--box-shadow);
   box-shadow: var(--box-shadow);
 }
 
 nav > a {
   display: inline-block;
-  padding: 0.75rem;
+  padding: 0.7rem;
 }
 
 a:is(:link, :visited) {
@@ -137,6 +142,30 @@ a:is(:hover, :focus, :active) {
   text-decoration: none;
 }
 
+.welcome-card {
+  width: 100%;
+  height: auto;
+  margin-block: 3rem;
+  background-color: var(--clr-main-bkgd);
+  display: grid;
+  place-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  gap: 2rem;
+}
+
+.welcome-image {
+  padding: 1rem;
+}
+
+.welcome-card > .welcome-image > img {
+  border-radius: 50%;
+  box-shadow: 0 0 1.5rem 0 hsla(357, 84%, 52%, 0.75);
+}
+
+:is(.welcome-image, .welcome-text, .about-me) {
+  margin-inline: 0.75rem;
+}
+
 img {
   width: 100%;
   height: auto;
@@ -157,7 +186,7 @@ img {
   height: auto;
   overflow: hidden;
   background-color: var(--clr-bkgd);
-  border: thin solid var(--clr-brand);
+  border: thin var(--brand-border);
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
@@ -223,36 +252,33 @@ img {
 iframe {
   width: 100%;
   aspect-ratio: 16 / 9;
+  margin-block: 1rem;
   border: none;
 }
 
-.footer {
+footer {
   width: 100%;
   height: auto;
   display: grid;
   place-items: center;
   background-color: var(--clr-bkgd);
-  border: thin solid var(--clr-brand);
+  border: thin var(--brand-border);
   -webkit-transition: var(--box-shadow-transition);
   transition: var(--box-shadow-transition);
 }
 
-:is(nav, a, img, .view, .mask, .footer, iframe) {
+:is(nav, a, img:not(.logo), div, footer, iframe) {
   border-radius: var(--br);
 }
 
-.logo-container {
-  margin: 0.5rem 0;
+.logos {
+  margin-block: 1rem;
   display: grid;
   grid-template-columns: repeat(2, 2.5rem);
   place-items: center;
   gap: 2rem;
 }
 
-.logo-container > a > img {
-  border-radius: 0;
-}
-
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;