---
title: John Doe - Web Developer
---

## Contact Information

- **Phone**: (123) 456-7890
- **Email**: johndoe@email.com
- **LinkedIn**: linkedin.com/in/johndoe
- **GitHub**: github.com/johndoe

## Summary

Innovative and deadline-driven Web Developer with 5+ years of experience in designing and developing user-centered digital/print applications from initial concept to final, polished deliverable.

## Experience

### Senior Web Developer - XYZ Corp, San Francisco, CA (Jan 2020 - Present)

- Lead a team of 5 developers to create high-quality web applications.
- Collaborated with designers to create user-friendly interfaces.
- Implemented responsive design to improve user experience on mobile devices.

### Web Developer - ABC Inc, New York, NY (Jun 2016 - Dec 2019)

- Developed and maintained the front end of several web applications.
- Utilized modern JavaScript frameworks (React, Vue.js) to improve functionality.
- Worked closely with the back-end team to ensure seamless integration.

## Education

### Bachelor of Science in Computer Science

University of California, Berkeley, CA (2012 - 2016)

- Graduated with Honors.
- Completed coursework in Web Development, Data Structures, and Algorithms.

## Skills

- **Languages**: HTML, CSS, JavaScript, TypeScript, SQL
- **Frameworks/Libraries**: React, Vue.js, Node.js, Express.js
- **Tools**: Git, Docker, AWS, Jenkins
- **Soft Skills**: Team Leadership, Project Management, Problem Solving

## Certifications

- Certified Web Developer - Web Development Institute (2017)
- AWS Certified Solutions Architect – Associate (2019)

## Projects

### Portfolio Website (github.com/johndoe/portfolio)

- A personal portfolio website to showcase my web development projects.
- Technologies used: React, Node.js, AWS.

### E-commerce Platform (github.com/johndoe/ecommerce)

- An online marketplace for selling products and services.
- Implemented a secure payment system with Stripe API.
- Technologies used: Vue.js, Express.js, MongoDB.

## References

Available upon request.

---
title: How to deploy this site
date: 2024-01-27T14:52:59.290Z
tags:
  - meta
  - tutorial
  - vercel
  - tinacms
---

There are a few ways to deploy sites that use TinaCMS. However, the most efficient way from my experience is to deploy the site to Vercel and let enable the Tina.io cloud integration.

Here's the quick and dirty way to get this done.

Note: you'll need a Github account, a Vercel account, and a TinaCMS account.

* Pro-tip: you can create both your Vercel and TinaCMS accounts using your Github credentials. Should save some time

Once all your accounts are set up and you have your repo pushed to your Github, do the following:

Navigate to your [Tina Projects page ](https://app.tina.io/projects)and create a new project![](/public/deploy-tina-site-1.png)

Select "Import your site"![](/public/deploy-tina-site-2.png)

Connect to your Github account![](/public/deploy-tina-site-3.png)

Choose the repo you want to use![](/public/deploy-tina-site-4.png)

Input a project name and the URL where the project will be deployed, then click "Create Project". You'll now see the "Project Setup Checklist"![](/public/deploy-tina-site-5.png)

Navigate to your Vercel dashboard and [create a new project]()![](/public/deploy-tina-site-6.png)

Once you've chosen the project, head back to the Tina Project Setup Checklist and copy the  "Client ID"![](/public/deploy-tina-site-7.png)

In your Vercel "Configure Project" settings, add an environment variable named TINA\_CLIENT\_ID and paste the environment variable you copied![](/public/deploy-tina-site-8.png)

Back in Tina, head to the "Tokens" tab and copy the "Content (Readonly)" token![](/public/deploy-tina-site-9.png)

Now repeat step 8, but with the TINA\_TOKEN, and hit deploy.![](/public/deploy-tina-site-10.png)

If you got this far, you should be smart enough to follow the rest of the steps described in the Tina Project Setup Checklist 😄 Good luck and happy blogging!

---
title: Fascinating Facts about CSS
date: 2024-01-02T05:00:00.000Z
---

Cascading Style Sheets (CSS) is an essential technology in web development, responsible for styling and designing web pages. In this blog post, we explore some interesting facts about CSS that highlight its importance and capabilities.

## Fact 1: CSS Was Released in 1996

CSS was first proposed by Håkon Wium Lie on October 10, 1994. The first official specification, CSS1, was released in December 1996. It was a breakthrough in web design, allowing developers to separate content from design.

## Fact 2: CSS Saves a Lot of Work

CSS enables developers to control the layout of multiple web pages all at once. Changes made in one CSS file can affect multiple pages, demonstrating the power and efficiency of CSS in web design.

## Fact 3: CSS3 Brought a Revolution

The introduction of CSS3 marked a significant evolution in the capabilities of CSS, introducing features like rounded corners, shadows, gradients, transitions, and animations. These features allow for more dynamic and visually appealing websites without relying on heavy graphics or JavaScript.

## Fact 4: CSS Has Various Selectors

CSS offers a wide range of selectors for targeting elements. These include basic selectors like class and ID, and advanced selectors like attribute selectors, pseudo-classes, and pseudo-elements, offering a high level of specificity and control.

## Fact 5: CSS Grid and Flexbox for Layouts

CSS Grid and Flexbox are modern CSS features that provide robust and flexible ways to create layouts. Flexbox is designed for one-dimensional layouts, while CSS Grid is perfect for two-dimensional layouts, greatly simplifying complex web design challenges.

## Fact 6: CSS Can Be Animated

CSS animations and transitions provide a way to animate changes to CSS properties. They enable developers to add interactive elements to web pages, enhancing user experience without the need for additional scripting.

## Conclusion

CSS is a powerful tool in the web developer’s arsenal. Its evolution over the years has transformed web design, making it more efficient, accessible, and visually impressive. As web technologies continue to grow, the role of CSS remains pivotal in shaping the future of web design.

Stay tuned for more web development insights!

---
title: Setting Up a New App with Next.js
date: 2024-01-01T05:00:00.000Z
---

Next.js is a powerful React framework that enables server-side rendering and generates static websites for React-based web applications. In this blog post, we'll walk through the process of setting up a new app using Next.js.

## Step 1: Install Node.js

Before you start, make sure you have Node.js installed on your system. Next.js requires Node.js 10.13 or later. You can download it from [Node.js official website](https://nodejs.org/).

## Step 2: Set Up Your Next.js Project

To create a new Next.js app, open your terminal and run the following command:

```bash
npx create-next-app@latest my-next-app
```

Replace `my-next-app` with your desired project name. This command creates a new folder with all the necessary files and directories.

## Step 3: Navigate to Your Project

Change into your new project directory:

```bash
cd my-next-app
```

## Step 4: Start the Development Server

Run the following command to start the development server:

```bash
npm run dev
```

Now, your Next.js app is running on [http://localhost:3000](http://localhost:3000). You can open this URL in your browser to see your new app.

## Step 5: Editing Your First Page

Open the `pages/index.js` file in your text editor. This is the main page of your Next.js app. You can edit this file to modify the homepage. Changes are updated in real-time as you save the file.

## Step 6: Creating New Pages

To add new pages to your app, create a `.js` file under the `pages` directory. For example, creating `about.js` will automatically route to `/about`.

## Step 7: Building for Production

When you’re ready to deploy your Next.js app, you can create an optimized production build with:

```bash
npm run build
```

After the build, you can start the production server with:

```bash
npm start
```

## Conclusion

Setting up a new app with Next.js is straightforward and efficient. It provides a solid foundation for building high-performance React applications with server-side rendering and static site generation capabilities.

For more detailed information, check out the [Next.js Documentation](https://nextjs.org/docs).

---
title: Setting Up a New App with Remix
date: 2023-12-31T05:00:00.000Z
---

Remix is a modern web framework for building better websites faster. In this blog post, we will guide you through the steps to set up a new app using Remix.

## Step 1: Install Node.js

Ensure you have Node.js installed on your system, as Remix requires it. You can download Node.js from the [official website](https://nodejs.org/).

## Step 2: Create Your Remix App

Open your terminal and run the following command to create a new Remix app:

```bash
npx create-remix@latest
```

Follow the prompts to select your desired project settings and deployment options.

## Step 3: Navigate to Your Project

After the setup is complete, navigate to your new project directory:

```bash
cd your-remix-app
```

Replace `your-remix-app` with your project name.

## Step 4: Start the Development Server

To start your Remix development server, run:

```bash
npm run dev
```

This will start your app on [http://localhost:3000](http://localhost:3000), where you can view it in your browser.

## Step 5: Edit Your Application

Your Remix app’s entry point is usually `app/root.tsx`. You can start editing this file to modify your app. The changes will reflect in real-time as you develop.

## Step 6: Adding Routes

To add new pages or routes, create files under the `app/routes` directory. For example, creating `about.tsx` will automatically create a route at `/about`.

## Step 7: Building for Production

When you're ready to deploy, build your Remix app for production with:

```bash
npm run build
```

This command optimizes your app for the best performance in a production environment.

## Conclusion

Remix provides a robust foundation for building dynamic, feature-rich web applications. It leverages modern web standards and offers a smooth developer experience.

For more information, check out the [Remix Documentation](https://remix.run/docs).

Happy coding!

---
title: 'Building a Todo List App with Vite, React, and TypeScript'
date: 2024-01-10T05:00:00.000Z
tags:
  - tutorial
  - react
  - vite
  - typescript
---

In this tutorial, we will walk through the process of creating a simple Todo List application using Vite, React, and TypeScript. This combination offers a fast, modern, and type-safe development experience.

## Step 1: Setting Up the Project

First, we need to create a new project using Vite with React and TypeScript. Open your terminal and run:

```bash
npm create vite@latest my-todo-app --template react-ts
```

Navigate into your project directory:

```bash
cd my-todo-app
```

## Step 2: Understanding the Project Structure

Vite sets up a basic project structure for you. Key folders and files include:

* `src/`: Where your React components and TypeScript files will reside.
* `index.html`: The entry point of your app.
* `vite.config.ts`: Configuration file for Vite.

## Step 3: Creating the Todo List Components

Inside the `src/` directory, create two files: `App.tsx` and `TodoList.tsx`.

### App Component (App.tsx)

```typescript
import React, { useState } from 'react';
import TodoList from './TodoList';

function App() {
  const [todos, setTodos] = useState<string[]>([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
    <input value= { input } onChange = {(e) => setInput(e.target.value)
} />
  < button onClick = { addTodo } > Add Todo < /button>
    < TodoList items = { todos } />
      </div>
  );
}

export default App;
```

### TodoList Component (TodoList.tsx)

```typescript
import React from 'react';

interface TodoListProps {
  items: string[];
}

const TodoList: React.FC<TodoListProps> = ({ items }) => {
  return (
    <ul>
    {
      items.map((item, index) => (
        <li key= { index } > { item } < /li>
      ))
    }
    < /ul>
  );
};

export default TodoList;
```

## Step 4: Running the Application

Start your development server:

```bash
npm run dev
```

Your app will be available at [http://localhost:3000](http://localhost:3000).

## Conclusion

You have now created a basic Todo List application using Vite, React, and TypeScript. This setup provides a fast development server, React for UI, and TypeScript for type safety.

Happy coding!

---
title: Understanding the useEffect Hook in React
date: 2023-12-20T05:00:00.000Z
---

React's `useEffect` hook is a cornerstone of functional component development, allowing side effects in your components. This blog post explains how `useEffect` works and its use cases.

## Introduction to useEffect

The `useEffect` hook lets you perform side effects in function components. Side effects can be data fetching, subscriptions, or manually changing the DOM. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React class lifecycle methods.

## Basic Syntax of useEffect

The basic syntax of `useEffect` is as follows:

```javascript
useEffect(() => {
  // Your code here
}, [dependencies])
```

## Parameters of useEffect

- **Effect Callback**: The function passed to `useEffect`. The logic you want to run as the effect goes here.
- **Dependencies Array**: An array of dependencies that, if changed, will re-trigger the effect. If the array is empty `[]`, the effect runs once after the initial render.

## Use Cases of useEffect

### 1. Running Once on Mount

To mimic `componentDidMount` behavior, use an empty dependency array:

```javascript
useEffect(() => {
  // Code to run on mount
}, [])
```

### 2. Running on Dependency Change

To run an effect when specific variables change, include them in the dependencies array:

```javascript
useEffect(() => {
  // Code to run when dependencies change
}, [dependency1, dependency2])
```

### 3. Cleaning Up

To mimic the `componentWillUnmount` behavior, return a function from your effect:

```javascript
useEffect(() => {
  // Setup
  return () => {
    // Cleanup
  }
}, [dependencies])
```

## Rules of Hooks

- Call hooks at the top level in your component.
- Call hooks only from React function components or custom hooks.

## Conclusion

`useEffect` is a versatile hook for managing side effects in functional components. It replaces several lifecycle methods from class components and provides a unified API for handling side effects.

Stay tuned for more React insights!