+ + Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city + or on your next road trip. +
+ Learn More +
+ + Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation + and off-road adventures. +
+ Learn More +
+ + Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury + rental and arrive in style. +
+ Learn More ++ Upload your audio to Pod with a single click. We’ll then distribute your podcast to Spotify, + Apple Podcasts, Google Podcasts, Pocket Casts and more! +
+Welcome to my website!
+ + See how Kevin created this over on YT + + + \ No newline at end of file diff --git a/projects/random/alt-animated-typing/style.css b/projects/random/alt-animated-typing/style.css new file mode 100644 index 0000000..f61670b --- /dev/null +++ b/projects/random/alt-animated-typing/style.css @@ -0,0 +1,153 @@ +:root { + --bg-color: hsl(49 37% 94%); + --typewriterSpeed: 6s; + /* this is a pure HTML/CSS approach. If you want it to + be more dynamic then you would need JavaScript to grab + the H1 calculate its size and then have it update this + variable + + You would need to use querySelector to grab the :root + and put it in a variable, then use that variable (say r) + and do r.style.setProperty('--typewriterCharacters', h1.length) + assuming you've grabbed the h1 + */ + --typewriterCharacters: 24; +} + +body { + margin: 0; + font-family: "Source Sans Pro", sans-serif; + min-height: 100vh; + display: grid; + place-content: center; + text-align: center; + background: var(--bg-color); +} + +h1 { + /* for increasing and decreasing the font size depending on + device size */ + font-size: clamp(1rem, 3vw + 1rem, 4rem); + position: relative; + /* MUST BE A MONOSPACE FONT or the idea collapses per Kevin */ + font-family: "Source Code Pro", monospace; + /* position: relative; */ + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.subtitle { + color: hsl(0 0% 0% / 0.7); + font-size: 2rem; + font-weight: 400; + /* Below makes the subtitle appear to fade onto the page */ + opacity: 0; + transform: translateY(3rem); + animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 0.5s) forwards; +} + +h1::before, +h1::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +h1::before { + /* a mask font color, needs to be the same color as the page + or container background color */ + background-color: var(--bg-color); + /* the number of steps is equal to the number of characters + that the h1 is. However in CSS you can see length of h1 so + you need to do this manually. */ + animation: typewriting var(--typewriterSpeed) + steps(var(--typewriterCharacters)) 1s forwards; +} + +h1::after { + /* em so it can respond to font size change */ + width: 0.125em; + background: black; + /* the number of steps is equal to the number of characters + that the h1 is. However in CSS you can see length of h1 so + you need to do this manually. */ + animation: typewriting var(--typewriterSpeed) + steps(var(--typewriterCharacters)) 1s forwards, + blink 500ms steps(var(--typewriterCharacters)) infinite; +} + +@keyframes typewriting { + to { + left: 100%; + } +} + +@keyframes blink { + to { + background: transparent; + } +} + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* +h1::before { + background: var(--bg-color); + -webkit-animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards; + animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards; +} + +h1::after { + width: 0.125em; + background: black; + -webkit-animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite; + animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite; +} + +.subtitle { + color: rgba(0, 0, 0, 0.7); + font-size: 2rem; + font-weight: 400; + opacity: 0; + transform: translateY(3rem); + -webkit-animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards; + animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards; +} + +@-webkit-keyframes typewriter { + to { + left: 100%; + } +} + +@-webkit-keyframes blink { + to { + background: transparent; + } +} +@-webkit-keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} +*/ +#yt-link { + position: absolute; + bottom: 2em; + width: 100%; + color: rgba(0, 0, 0, 0.7); +} +#yt-link:hover, +#yt-link:focus { + color: teal; +} diff --git a/projects/random/animated-gradient-border/index.html b/projects/random/animated-gradient-border/index.html new file mode 100644 index 0000000..c0bddbe --- /dev/null +++ b/projects/random/animated-gradient-border/index.html @@ -0,0 +1,122 @@ + + + + + + + +From a youtube short video, link to be added later.
+Code from https://fireship.io/lessons/three-responsive-css-grid-layouts/ + change based on comment that + simplifies the css down to one rule, but puts some of the info into the html to mark each div with variables + for the animiation delay (--i) and the name of the box's grid space (--g)
+
+ Explore the universe of tomorrow.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+
+ Explore the universe of tomorrow.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+
+ Explore the universe of tomorrow.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+
+ Explore the universe of tomorrow.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci + repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas + expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati, + deserunt optio possimus atque qui!
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor + illum impedit + nisi. Eaque sequi necessitatibus voluptatum porro.
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam? + Obcaecati + magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id + culpa minima + officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad + voluptas + praesentium animi velit quae dicta?
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.
+Apologies, nothing to see here. Maybe try the main page
diff --git a/src/_data/webprojects.json b/src/_data/webprojects.json index a5b0672..d3f8af4 100644 --- a/src/_data/webprojects.json +++ b/src/_data/webprojects.json @@ -11,6 +11,28 @@ "title": "Newbie", "cssClass": "frontEndMentorChallenges", "challenges": [ + { + "title": "Pod Request Access Landing Page", + "url": "/FrontendMentor/newbie/pod-request-access-landing-page/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/FrontendMentor/newbie/pod-request-access-landing-page/screenshots/mobile.png", + "screenshotAltText": "Pod Request Landing Page Challenge from FrontendMentor" + }, + { + "title": "3 Column Preview Card Component", + "url": "/FrontendMentor/newbie/3-column-preview-card-component/", + "description": "", + "techUsed": [ + "html5", + "css3" + ], + "screenshotURL": "/FrontendMentor/newbie/3-column-preview-card-component/screenshots/desktop.png", + "screenshotAltText": "3 Column Preview Card Component Challenge from FrontendMentor" + }, { "title": "Order Summary Card Component", "url": "/FrontendMentor/newbie/order-summary-component/", diff --git a/src/css/style.css b/src/css/style.css index 756dace..33ce748 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,13 +1,15 @@ @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"); -/* +/* @import "@fontsource/black-ops-one/index.css"; +@import "@fontsource/source-sans-pro"; + */ +/* * Hi, thank you for checking out my CSS. Layout is currently Rev 2. * Plan is to do more interesting ones as I feel more comfortable doing things. * * For instance was thinking of swapping to a 3 column affair, with the title running * vertically in the first column. Second column is the projects, third the blurb * -* I'd like to add some animations and transitions, and a light and dark theme. */ :root { @@ -126,8 +128,8 @@ body { .card__content { z-index: 10; background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); + backdrop-filter: blur(100px); align-self: end; margin: 0.5rem; /*.5rem 2rem;*/ padding: 0.5rem;
+ 
+ 
+ 
+ 
+ 
+ 