Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
Do you ever notice how those 'mini-projects' you said would only take half an hour always seem to develop into 4 hours of work? I enjoyed making this little site though as it's essentially the header and hero for a new agency site that's been kicking around my head. My old agency prototype page is overdue for a revision and more content.
Being able to create your own SVG's is a good skill to have as a web developer. I did a little research into a few free softwares that do this and settled on Inkscape. I know I should eventually learn Photoshop and actually began installing Illustrator for this but was so miffed that Adobe Creative Cloud began installing itself without my consent when I asked to download Illustrator I just cancelled the whole thing. Inkscape served me perfectly well and I was delighted by the whole experience, including how much support there is out there for it.
Inkscape
There are a lot of open source and free tools out there for web developers and designers but I think the completeness of this tool not to mention how much their competitors charge really had me considering donating to their project. It's incredible how powerful this lightweight and free tool is. From their website:
Whether you are an illustrator, designer, web designer or just someone who needs to create some vector imagery, Inkscape is for you!
I was imagining a certain look to my new informal agency website, which I've lovingly mock-titled 'Collaborative Projects Co.' after a 1970's New York art collective I admire. The particular inspiration for the website I want to make came from the brutalist tradition embraced by Travis Scott's website. (I'm actually not the hugest Travis Scott fan in the world but I've loved his web design.)
Travis Scott's 90s-chic website is a classic example of Brutalism in web design
My original idea for this mini-site was to just appropriate the Create React App loadout including the slowly-spinning React icon and simply replace it with my own homemade spinning logo.
Steps to Make Your First SVG
My SVG idea was simple. The company name in a circle, spinning slowly like the React icon in CRA. I had never opened Inkscape before so everything was totally new. I decided to look up a tutorial.
I followed a Davies Media Design tutorial titled "How to Wrap Your Text in a Circle in Inkscape" (link here) and was able to quickly create the image I wanted.
The difficult part came later. Apparently Inkscape has its own SVG format, so I had to make sure to save it as a standard SVG. But after doing so I still couldn't see anything rendered after bringing the svg into my CRA app so, just as importantly, I had to group the items in the SVG together, convert the text to a path, then remove the circle object I used as a template to wrap the circle around.
Lastly, I had to remove the whitespace around the document for which I used this Stack Exchange discussion (link). It's amazing how technical image manipulation is- it's certainly every bit as challenging as coding itself.
A PNG of the final product
After importing the SVG I needed to manually change the fill color to white within the SVG file. Another great reason to use SVGs is that you can customize them from your editor.
The website
For the actual site, I wanted a cool slideshow in the background so I outright stole the code from the react-slideshow-image npm package right down to the example images. The developer, Femi Oladeji has a great little package out there. This is the second time I've implemented it. I removed the slide captions and forced the height of the images to be 100vh to better fit into the viewer's screen.
The invisible header with my new spinning SVG was then affixed to the top of the screen with the position: fixed CSS rule. I'm happy with the result.
Travis Scott's web designer might even be proud. 5/5 stars. Would code again.
Top comments (2)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.