Weeknotes 26:08

Posted 1 day ago

Week of February 15-21

I had a lot of fun working on a couple of projects this week. I got to try some things that I have been wanting to do and was able to take some time to experiment. I was happy that I went for it with a couple of solutions.

I continued working on the revision of the Wonder of the Word page (which launched today). I also started a new project. I am building a conference website for our Spanish ministry, Aviva Nuestros Corazones. Mujer Verdadera ’26 will take place in Miami in November. I was given a style guide from the ANC design team along with some design assets and access to photos from their last conference in 2023. It was fun to design layouts, take cues from the True Woman ’25 and Mujer Verdadera ’23 sites, and experiment with some different ideas. By the end of the week, the landing page was almost fully formed.

Adventures with clip-paths

Several places on the Revive Our Hearts site, there are curves that transition between sections so there is not a hard edge. I like look of that design element and how it adds a softness to the design. I used it heavily in the Annual Praise Report which had the theme of “The River Flows.” The curves lent itself well to the theme and the design elements created by our design team for the print report. I reused some SVGs that the previous develop had created.

But there were times I would have liked to have created my own. I wanted to learn how to use Bezier curves with the pen tool in Affinity Designer. But I knew it would take some practice and I didn’t have the luxury of the time to learn while working on the praise report.

But recently, I have watched a couple of videos and practiced a bit creating those curves in Affinity Designer. Last week, I wanted to create a clip-path shape for the new Wonder of the Word page. I used the curves from a design mockup to “trace” and place my pen points. My little bit of practice paid off and I was able to create the shape I needed to use as clip-path mask. But I ran into some trouble exporting my SVG. I finally was able to trace the problem to my export settings. My shape was not exporting the full dimensions of what I had created. Finally after a couple of hours of wrestling with it, I had a working clip-path.

.hero-image {
    background-image: url(/static/images/wow/landing/hero-desktop.webp?ec0d9c26cd5f&9dbb2f080e8e);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    clip-path: url(#wow-hero-clip);
    left: 0;
    overflow: clip;
    position: absolute;
    top: 0;
    z-index: 2;
}

The SVG for the clip path is added to the HTML code to reference in the CSS

<svg width="0" height="0" viewBox="0 0 1800 1080" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
    <defs>
        <clipPath id="wow-hero-clip" clipPathUnits="objectBoundingBox">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.999,0 L1,0.987 C0.988,0.985,0.978,0.99,0.96,0.996 C0.915,1,0.891,0.982,0.851,0.973 C0.819,0.965,0.788,0.981,0.757,0.981 C0.719,0.981,0.678,0.954,0.641,0.942 C0.586,0.925,0.561,0.938,0.5,0.949 C0.462,0.956,0.423,0.942,0.385,0.93 C0.315,0.907,0.3,0.928,0.237,0.932 C0.192,0.935,0.184,0.935,0.102,0.909 C0.063,0.896,0.062,0.874,0.011,0.905 C0.008,0.907,0,0.91,0,0.91 L0,0 L0.999,0" fill="black"></path>
        </clipPath>
    </defs>
</svg>

Originally, it we were just going to clip the photo and go into the next section. But Emily, the communication director, and myself felt like it needed a ribbon of color as a transition. Originally, it was going to follow the same clip-path shape. But that seemed boring. So I ended up making the generated element a percentage larger and it gave me a dynamic feel that added to the flow of the design. I love those happy accidents.

I also used curves in the Mujer Verdadera ’26. I had come across a wave generator tool at the end of last year.

You can change all sorts of settings to get the curve you want. I had a lot lower amplitude than the default one shown above. I changed the frequency to 2 or 1.5 to get some gentle ups and down and you can change the phase to move along the x-axis. Then you can copy the code and use that as a clip-path in your CSS. I created a couple of different curves and then created a few for mobile and tablet. I was really excited to what the clip-paths added to my design and allow me to clip sections with background images and clip sections with decorations that looked so much better than a straight edge.

Road Trip

I took a road trip at the end of the week. I traveled up to Murray, Kentucky to visit my son and go to a Murray State basketball game with him on Saturday. I stopped in Nashville on Friday afternoon and had lunch with my daughter. It was nice to spend time with her and her guinea pigs. I got to Murray just before sunset and had dinner with my son and his fiancé at Rudy’s on the Square.

On Saturday, I met my son on campus and we had lunch together. After lunch, he took me over to his studio space to show me several of the things he has been working on for his senior art show. I enjoyed hanging out in the print studios and then we hung out at the student union before heading over to the game.

The first half of the game was very scrappy and Murray State fell behind the worst team in the conference, Evansville, by 11 points. But the Racers kept in there and were able to take a slim one-point lead before halftime. The Racers looked better in the second half. Then went on several short runs but the Purple Aces kept threatening to come back. Finally, the Racers had a good run and the Aces were getting tired. The Racers won 88-75.

We had great seats just behind the visiting team’s bench

I am really glad that I got to go to one last basketball game with my son before he graduates. I had gone to a game with him his freshmen year about the same time of year. This visit reminded me a lot of that one because he took my to the art and design building and showed me some 3D prints he was working on. It was fun to see Ryan and take in the game. We walked but to his dorm after the game and talked a bit before parting. He has a review for his art show at the end of the week so he was working hard through the weekend to get ready.

On Saturday, I took some time to write some thoughts about Murray, Kentucky and my 15 visits there over the past four years.

While I was in Murray, my wife and youngest were making a campus visit to East Tennessee State University. It is the school she is most excited about. And the visit confirmed that this is the place she would like to go after she graduates from Chattanooga State Community College in May.

Fake Spring

I enjoyed the warmer weather at the end of the week. I took a walk on Friday morning in shorts and new walking shoes. But “fake” spring faked me out and I forgot to pack my jacket. And the temperature fell as I traveled north and was in the twenties on Saturday morning with a very brisk wind out of the north. I was able to double layer with long sleeve shirts but would have been much more comfortable in my jacket. I survived and of course I brought the cold weather home with me.

Articles I read

What I watched

Jeff Bridgforth

@jeffbridgforth.com

@kevinpowell.co Nooo!! Cliffhanger. You are so cruel. 🙂

I have enjoyed this peek into your world.

Books I am reading

Walking

  • Thursday – 3.39 miles in 1 hour 3 minutes
  • Friday – 1.53 miles in 27 minutes – I took a short walk on Friday morning before packing and hitting the road for my trip to Kentucky. I enjoyed wearing my shorts and my new walking shoes that I bought Thursday night.

What I played

  • NBA2K25 (Nuggets) – I played my first game of the playoffs. I guess I did not save when I simulated the play-in tournament because I was suppose to play the Lakers but ended up playing the Spurs. It was a tight game but I pulled away in the second half and won by 20 points (I believe that is correct).
  • MLB The Show 23 (Orioles) – I went 5-3 this week. I lost a series to the Rangers. I swept the Yankees in my first home series. And I split the first two games of a series with the A’s.

Comment on this post