Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
30

Create a Markdown Portfolio with Next.js

from noahbuscher.com [alt+shift+b] in technology

So you've set out to create a new portfolio for yourself. You start gathering inspiration from platforms like Godly and Minimal Gallery, draw some rectangles in Figma, and open your text editor. You pause. There's thousands of ways to build your website, how do you decide which to go with? You want your website to be beautiful for the users, but you also want to be able to quickly add new posts and case studies. You decide you want to have a dynamic website (good choice!), but the dozens of CMS options weigh on you. Do you pick headless or full-stack? What if you just make a theme? So many choices. I was faced with the same dilemma a few months ago. I finally had the motivation to create a new personal website, but wasn't sure where to start. I decided to keep things simple, I'd write it with a library I knew very well: React. That only solved half of the equation, however. When it came time to decide how to power the dynamic content on the site, I knew I wanted it to be free, easy to use, and open source. A static site powered by Next.js and markdown was the obvious choice. View the source on GitHub. To get started on creating your portfolio, run the following commands. I'm using pnpm, but feel free to use yarn or npm! pnpm dlx create-next-app@latest --typescript cd into your new project and run the following commands to install the necessary packages and bootstrap Tailwind: pnpm install dayjs pnpm install gray-matter react-markdown tailwindcss postcss autoprefixer -D pnpm dlx tailwindcss init -p That's a lot of packages. Let's break them down... gray-matter will be used to parse "front-matter" from our markdown files (we'll read more about this later!) react-markdown is a React component to render markdown content tailwindcss postcss autoprefixer are requirements for installing Tailwind for Next.js Phew! Let's continue our setup by finishing the Tailwind install... Add the following to the module.exports in the generated tailwind.config.js file: content:...
7th Mar 2023

Stay updated

Get a weekly newsletter with the top 5 articles worth reading every week.

More from noahbuscher.com

Radio Install in a Porsche Boxster

The 987.2 Porsche Boxster is one of the best values in the used sports car market today. There is so much to love about the vehicle, but the OEM headunit is not one of them. It's very dated, clunky, and doesn't support CarPlay (!), so one of the first things I did after picking up my car was purchase and install a new headunit. I selected the Sony XAV-AX1000 headunit because: It's one of the only aftermarket headunits with a physical volume knob The matte black plastic finish very closely matches my Porsche's interior I didn't need wireless CarPlay It's relatively cheap I also picked up this dash kit from Crutchfield as well to have the install look as factory as possible. I will say that the fit is very tight (it's a friction fit) so triple check wiring before sliding this into the dash. If you do happen to get the kit stuck with the headunit in it, I've had luck freeing it with the help of a metal putty knife. My 987.2 has the Sound Package Plus (SPP), which is the middle tier between the basic speakers and the Bose speakers (which are much more difficult to connect). The connector I needed as a result was the Metra 70-9003 harness. The connector may come with a fuse tap, but I opted to just use a separately purcahsed unit that fit well in the fuse box without needing to drill any holes. Note that the Metra 70-9003 harness may not work with the base package. Other supplies needed: Electrical tape Assorted t-taps Assorted spade connectors Low-profile fuse tap Metra 70-1787 harness (seperate from the Metra 70-9003 harness, this is just a donor for the RCA cables) Stranded red wire (used to connect power from fuse tap to headunit) Banana plug adapter for connecing SiriusXM Tools needed: Heat gun/heat shrink Screwdriver set Soldering iron/solder Wire strippers Scissors Also of note that my Porsche did not come equipped with steering wheel controls. If you vehicle does have steering wheel controls, you may need to purchase extra materials in order to get those to work, if so desired. The first thing I did was assemble the headunit inside of the dash kit and set it aside on my desk. The screws that come with the dash kit don't work great but seem to be able to self-tap into the headunit. Just sure you screw them in flush, otherwise the unit won't fit in the vehicle. Next, it's time to wire the Metra harness. You can view Crutchfield's wiring diagram here. Next, you can splice the donor RCA cables from the 70-1787 harness with the speaker wires in the 70-9003 harness. Using your wire strippers, remove the outer layer of shielding from the RCA cables, exposing the positive wire and the stranded negative wire. Twist the stranded wire together and put the heat shrink tube over the cable. Solder the positive wire to the 70-9003 harness positive wire and solder the negative wire to the 70-9003 negative wire for the same speaker. Wrap each connection tightly with electrical tape, slide the heat shrink over the connections, and use your heat gun to set. Repeat this for the three other pairs of speakers. Moving on to the install, removal of the headunit in the 987.2 is straightfoward, only requiring the removal of a few screws. This YouTube video explains it well. I reccommend disconnecting your battery first if possible, as you should do whenever working with your car's electrical system. Be delicate as the OEM headunit is still valuable and you may want to swap it back before selling your vehicle. You can now remove the trim around the fuse compartment and tap the fuse; I used C6 as it turns on and off with the ignition. Crimp a length of the stranded red wire to the tapped fuse connector and snake it through to the headunit area. I had the wire rest on the trim below the steering wheel and it hasn't caused any issues. Re-attach the fusebox surrounding trim and use a spade connector to attach the fuse tap wire to the power input for the headunit. I wrapped the connection with electrical tape to prevent shorts. At this point you may want to tap the parking lights in order to control automatic dimming of the headunit. I did not do that during my install, so you'll need to look at a diagram to see what color to look out for. I will note, however, that you are able to easily manually dim the display in the settings. Now, plug the RCA connectors into the respective pre-amp outputs on the headunit to connect the speakers. When you disconnected the original factory headunit, there was a twelve-pin blue connector. The pink wire with the red stripe powers the vehicle's amplifier (under passenger seat in SPP-equipped vehicles). I used the "Remote Out" wire in the new headunit to power both the amp as well as the powered AM/FM radio antenna. Use t-taps to connect both the red and white striped wire and the powered antenna wire (thicker, solid blue wire in the main harness). At this point you can also connect the SiriusXM adapter if your vehicle is equipped. Finally, after you've checked all of your connections you can (carefully!) slide your headunit into place, reconnect the battery, and test it out! If you are noticing a fair amount of feedback, you can optionally add an inline ground loop isolator between the pre-amp output and your harness to reduce some of the interference. Enjoy your new radio and feel free to email me and I can try and answer any questions you may have. Please note I am not an expert at this and am not responsible for the safety of yourself or and damage to your vehicle, the headunit, etc.

28th Jun 2023 • 31 votes

More in technology

FLIP Fluid on Flip Dots

[Hardware] Electromechanical Fluid Simulation

4 days ago • 1 votes
Is This A Joke? In The Auth Header? (F5 BIG-IP UnAuth Heap-Overflow to RCE CVE-2026-94127)

Well, well, well, well, well, well, well, well, well, well, well, well, well, well, well. We're back. Sorry. We've been watching the onslaught of vulnerabilities flood the internet. Every man, dog, and their grandmas (apparently?) are now using LLMs to find and reproduce vulnerabilities - it’

5 days ago • 1 votes
The Reason You Prohibit Things

You want less of them. That’s the reason. You may find that it’s too hard to stop people from doing the thing, literally blood, sweat, and tears trying to prosecute people, but that’s a different thing.

5 days ago
Solitaire Alone Together

Solitaire Alone Together I made a new game. It's called Solitaire Alone Together. It's Windows 98 solitaire, but you can play with everyone else on the internet. Read the full post on my blog! Here's a raw link, if you need it: https://eieio.games/blog/solitaire-alone-together

a week ago • 1 votes
📚 BoredReading

You seem to be enjoying this.

Join free to unlock everything.

Create free account

Already have an account? Sign in