inknsharps / react_portfolio

A responsive, overly pastel web portfolio built with React and Tailwind CSS, and bundled with Snowpack.

React Portfolio

Description

A web portfolio built using React, Tailwind CSS, client side routing using React Router and bundled with Snowpack. Features include:

• Home, About, Projects and Contact pages
• Full responsiveness using CSS grid
• A randomly generated, animation background built using React components, Tailwind CSS utility classes and CSS animations.

A deployed version is linked here.

Installation

To install and test this portfolio locally:

1. Make sure you have Node.js installed on your local machine.
2. Clone or download this repository, then navigate to the local folder in your CLI, run the following to install all dependencies:

    npm install

3. Once the dependencies are installed, you can run the following to start a development server:

    npm start

Additional Configuration

Projects Configuration

Each project in the projects page of this web portfolio is an object, and are in a projects array, mapped over and added through a function in src/Project/ProjectContainer/ProjectContainer.jsx. You can substitute or add entries to the array with your own. Each property of the object must be a string.

// src/Project/ProjectContainer/ProjectContainer.jsx

import React from "react";
import ProjectCard from "../ProjectCard/ProjectCard";
import "./ProjectContainer.css";

const ProjectContainer = () => {
    const projects = [
        {
            projectName: "",        // Name
            projectDesc: "",        // Description
            alignImage: "",         // "left" or "right" to move the image of the project to be left or right aligned
            imageSrc: "",           // Image link
            githubLink: "",         // Github link
            deployLink: ""          // Deployed link
        },
        ...
    ]
    ...
};
...

PurgeCSS Safelist Configuration

Tailwind CSS includes a PurgeCSS version that works specifically with it. Since PurgeCSS only works when the utility classes are explictly stated, any dynamically created classes with concatenation or template literals will not be read (read more about this here). A workaround is to make a safelist and pass it into the PurgeCSS configuration. There is some class concatenation in this project, so we have to explicitly tell PurgeCSS to include certain classes. The safelist.js file contains some arrays of utility class names that get passed into the tailwind.config.js file.

// tailwind.config.js

const { colors, coordinates: { top, bottom, left, right }, dimensions: { height, width }, animations } = require("./safelist");

module.exports = {
    purge: {
        content: [
            "./src/**/*.{js,jsx,ts,tsx}",
            "./public/index.html"
        ],
        options: {
            safelist: [ ...colors, ...top, ...bottom, ...left, ...right, ...height, ...width, ...animations ]
        }
    },
...
}

Production Build

Run npm build if you want to build a production/optimized version of the application that is ready for deployment. Note that the application will not load without some live server or dev server running if you're trying to view it, so stick to the development version unless you want to deploy the application.

Images

Issues and Suggestions

Feel free to open up a discussion on this repo's issues if you have any questions or concerns.