My Portfolio Website
with Next.js & TypeScript

About the project

This project is about my personal portfolio at www.stefworks.ml. The webpage is statically hosted for free on Github pages. Behind the scenes, for each of my projects the site is fetching the README.md from github. The markdown content is sprinkled with a little bit of HTML and renders a user friendlier layout, using custom themed Material UI components.

The site doesnt run on a server. On the contrary it takes advantage of static exporting and seamless page to page navigation provided by Next.js & React.

The Stack:

• Typescript
• Next.js
• React 16.9
• Webpack
• Markdown-to-JSX
• Css-in-JS
• Material-UI

Argumenting the stack

I coded this website in order to have a personal portfolio where I could show details about my projects, and also to do it in a way that displays my current skill's level. My goal was to have a website that loads fast and feels fluid. I also had a few more requirements:

• I needed a link for each of my projects that I could share e.g. in my CV. Aka deep-linking.
• Responsive and User Friendly Design.
• No server costs and hassle.
• I also wanted to evolve my skills on the super popular React framework and to experiment with Typescript.

I chose Next.js as a framework (which kind of wraps around React), because I wanted to combine traits typical to Single Page Applications, like automatic code-splitting, dynamic imports, and page prefetching, and also to be able to export to static files so that I can host it cheap and serve it fast at the same time.

Regarding the UI component library, I chose Material UI because, well it's based on solid and recongnisable design principles, it has great documentstion, supports Typescript development and is pretty easy to use and customise.

Here there should be a "diary" of my process

How to use

Note : npm6 is required to install dependencies properly. Download or clone the repo

git clone https://github.com/stefanosAgelastos/stefanosAgelastos.github.io
cd stefanosAgelastos.github.io

Install it and run:

npm install
npm run dev

Getting Started

These instructions here should be explaining which parts of the code you should change in order to host your own projects in development and production. ALso instructions on how to easily customise the theme. WILL UPDATE SOON.

Available Commands

1. npm run dev - starts the development server with hot reloading enabled

2. npm run build - builds for production ahead of time

3. npm run start - starts the production server

4. npm run export - exports the website as static files

5. npm run serve - serves the static files on localhost (you need serve installed)

6. npm run publish - for pushing code to github pages branch: runs a series of commands, that keep in /out your CNAME and .nojekyl files and pushes /out as a subtree to your master branch

7. npm run fast - runs build & export & publish in a sequence for fast deployment to github pages

Happy Coding!