Introduction

As a web developer, I understand the importance of having a strong online presence. That's why I decided to re-design and code my portfolio website using Next.js, Markdown, and greenCSS. In this blog post, I'll share my experience of the re-design process and how I leveraged these technologies to create a modern, responsive, and visually appealing website. The primary goal is to achieve the highest performance, with a focus on Sustainable Web Development, Sustainable Web Design and Accessibility.

severin glaser score Severin Glaser Lighthouse Scores

severin glaser sustainable web development Severin Glaser Sustainable Results

Design Process

Before I started coding, I spent some time planning the design of my website. I decided on a color scheme, selected fonts, and determined the layout of each page. I sketched out my ideas on paper and used design tools like Figma and Adobe XD to create wireframes and mockups. Once I was happy with the design, I started coding using Next.js.

Next.js Setup

Setting up Next.js was a breeze thanks to the Next.js CLI. I used it to create a new project and started coding each page of my website as a separate React component. Next.js made it easy to link between pages and add dynamic data using props.

Markdown Content

I used Markdown to write the content for my website. It's a simple markup language that allowed me to include formatted text, images, and links without having to write HTML. I added a Markdown parser to my Next.js project and was able to easily include the content in my React components.

greenCSS Styling

greenCSS is a lightweight CSS library that I used to style my website. It includes a variety of pre-built components and styles that I was able to customize to match my design. I imported greenCSS into my Next.js project using a CSS loader and was able to easily apply styles to my React components.

severin glaser mockup typography

Deployment

Once I was happy with my website, I used Next.js to deploy it to Vercel. This service provided hosting, SSL certificates, and other features to make my website accessible to the world.

Conclusion

Re-designing and coding my portfolio website using Next.js, Markdown, and greenCSS was a rewarding experience. The process was straightforward and the end result was a modern, responsive, and visually appealing website. I hope this blog post has inspired you to consider using these technologies for your own website projects. The old website can still be accessed via glaser old.

Stacks

Building a modern website requires a solid understanding of design principles, programming languages, and web development frameworks. In this section, I'll share my experience using Figma, Next.js, greenCSS, and Markdown to build a website that is both visually appealing and functionally efficient.

Figma: Figma is a popular design tool that allows you to create wireframes and prototypes for your website. I used Figma to plan the design of my website, including the layout, color scheme, and typography. Figma allowed me to collaborate with my team members and iterate on designs quickly and efficiently.
Next.js: Next.js is a powerful React framework that allows you to build server-side rendered applications. I used Next.js to build the core of my website, including the routing, page components, and dynamic data. Next.js also makes it easy to deploy your website to a variety of platforms, including Vercel and Netlify.
greenCSS: greenCSS is a lightweight CSS library that provides a variety of pre-built components and styles that you can use to style your website. I used greenCSS to apply styles to my React components, including buttons, forms, and typography. greenCSS is highly customizable and allowed me to create a unique look and feel for my website.
Markdown: Markdown is a lightweight markup language that allowed me to easily write content for my website without having to write HTML. I used Markdown to create blog posts, project descriptions, and other text-based content on my website. Markdown is highly readable and easy to write, making it a great choice for creating content quickly and efficiently.

severin glaser mockup grid

General Conclusion

Building a modern website requires a solid understanding of design principles, programming languages, and web development frameworks. In my experience, Figma, Next.js, greenCSS, and Markdown are all essential tools for creating a website that is both visually appealing and functionally efficient. By using these tools, I was able to create a website that met my sustainable goals and exceeded my expectations. I hope that my experience, and the way of providing sustainable web development, will inspire you to try these tools for your own website projects.

If you want to access the old version of my website, which was created with vanilla JavaScript, HTML5 and CSS3, check: glaser old.

My Portfolio Website Re-Design