J05HI / website

Source Code of My Personal Website

My Personal Website

This is the website that powers marquez.co, built on top of Vue.js and Nuxt.js, and deployed to the cloud via Vercel.

This website is for my blog posts and a place for Who I am. I also run some experiments on this website around web development that allows me to be up to date with the latest technologies.

Features

For a user perspective, this website is simple and fast enough. But, nowadays creating a "simple" website doesn't mean that the development process is also simple. In the following list, you will find the most important features that allow this website to be easy to maintain and scale as well as offering a good User Experience.

• 💻 Typescript
• 🚀 Blazing-fast Static Site Generation
• 🛠 Progressive Web App (PWA)
• 📝 Blog articles on Markdown
• 🌐 Multi-language
• 📊 Google Analytics
• 🤓 SEO Friendly
• 🌅 Lazy Load Images
• 🗂 Sitemap Generation
• 🎨 CSS3 with Tailwind CSS
• ✂️ Unused CSS removal
• 🌒 Dark Mode
• ⚡️ Accelerated Mobile Pages (AMP)
• 🏃 Web Vitals
• 🛡 Content Security Policy (CSP)
• 🐛 Errors monitoring through Sentry
• ⌨️ A Blog Editor powered by Netlify CMS with a custom Github OAuth App and write-access to the Github Repository

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# generate static project
$ yarn generate

Netlify CMS

Development

# start netlify proxy server
$ yarn netlify-cms:dev

Then open http://localhost:3000/admin and start editing.

Production

Some environment variables must be defined in your production evironment (.env.example). The editor can also be reached in the /admin path.