Josie Allen Website

Tech Stack: Vercel, Next.js, HTML, Tailwindcss, Visual Studio Code, Git.

Why did I create a website?

Having some sort of portfolio is considered the norm in today's job market. I wanted to showcase some things I work on for future employers. Also friends and family when they ask me what I work on.

How I built this site:

To create the Next.js app I used the this command npx create-next-app@latest . When installed it will ask you the following questions:

What is your project named? josieallen
Would you like to use TypeScript? [ No ] / Yes
Would you like to use ESLint? [ No ]/ Yes
Would you like to use Tailwind CSS? No /[ Yes ]
Would you like to use `src/` directory? No / [ Yes ]
Would you like to use App Router? (recommended) No / [ Yes ]
Would you like to customize the default import alias (@/*)? [ No ]/ Yes
What import alias would you like configured? @/*

I added my responses to my specific project but depending on your preferences you may choose differently. More documentation is at nextjs.org.

After getting the intial site set up. I created a github repository.

Deploying the website on the web.

To deploy this site I used Vercel. After you create your account you can deploy your website by connecting your github repo. Whenever I push to my repo the site will redeploy with my new additions.

Design Theme

My theme is very basic and straight forward. I went with this theme to keep it as simple as possible while also showcasing my projects. [Definitely not my lacking artistic skills.]

Challenges

I used tailwindcss to style this site. I think the trickiest part of the styling was utilizing prose and breaking prose when I did not want to use prose. When I created the dark/light theme button I had to figure out how to make prose invert too. Crazy that there is a prose-invert call.

Using MDX for project pages.

I am dynamically getting all my project pages[MDX files] from a github repo. The front matter is used to make cards for the index page. The rest of the mdx page is the content for each page.

In order to get this to work I used github api. You essentially have to set up a token in github. You can do this by going to Settings > Developer Settings > Personal Access Tokens > Tokens (classic). Then copying that token and putting it in a .env file GITHUB_TOKEN=your_token.

In my /lib folder I have a github.js file that gets the mdx files from the repo.

import axios from 'axios';
import matter from 'gray-matter';

const GITHUB_API_URL = 'https://api.github.com';
const REPO_OWNER = 'josieallen';
const REPO_NAME = 'project_pages';
const BRANCH = 'main'; 
const DIRECTORY = 'posts';
const TOKEN = process.env.GITHUB_TOKEN; //your token

export async function fetchMdxFiles() {
  const url = `${GITHUB_API_URL}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${DIRECTORY}?ref=${BRANCH}`;
  const headers = {
    Authorization: `token ${TOKEN}`,
  };

  try {
    const response = await axios.get(url, { headers });

    if (!Array.isArray(response.data)) {
      throw new Error('Expected response data to be an array');
    }

    const files = response.data.filter(file => file.name.endsWith('.mdx'));

    const mdxFiles = await Promise.all(
      files.map(async file => {
        const fileResponse = await axios.get(file.download_url, { headers });
        const content = fileResponse.data;
        const { data: frontMatter, content: mdxContent  } = matter(content);
        return {
          filename: file.name,
          frontMatter,
          content: mdxContent,
        };
      })
    );

    return mdxFiles;
  } catch (error) {
    console.error('Error fetching MDX files:', error.message);
    throw error;
  }
}

This will be awesome if I ever want to create a new site and all my content is already in a repo. Not directly in the site itself.

You need to install mdx gray-matter axios next-mdx-remote remark-frontmatter

Final Thoughts??

Things I still want to add:

• I want to dynamically get all my images and not just the mdx files from a github repo.
• Add more animations.
• Themed pages for my projects.
• More content. LOTS more content.
• Breadcrumbs for project pages.