Portfolio Frontend

A modern, responsive personal portfolio built with React, TypeScript, and Vite, deployed on Netlify.
This project showcases my skills, experience, and projects with smooth UI interactions and simple yet effective visuals.

Live site: portfolio-adam-frank.netlify.app

---

Features

• Fast build with Vite
• Fully responsive design (mobile, tablet, desktop)
• Modern styling with clean UI
• Project showcase & contact form

---

Tech Stack

• React + TypeScript
• Vite as build tool
• ESLint for basic linting
• Styling: React-Bootstrap
• Deployment: Netlify

---

Getting Started

Prerequisites

• Node.js v16+
• npm or yarn

Installation

# Clone the repo
git clone https://github.com/cfrank3N/portfolio_frontend.git
cd portfolio_frontend

# Install dependencies
npm install
# or
yarn install

Development

npm run dev
# or
yarn dev

Open your browser at http://localhost:5173.

Note that you will have to develop your own api, in whatever language/framework you're most comfortable in, to be able to fetch your pinned repos and send yourself an email, or you could just use an existing api. Either way you have to change which api you call in the fetch statament located in RenderRepositories.tsx file and ContactForm.tsx.

ContactForm.tsx api call:

const response = await fetch(
    "https://portfolioapiadamfrank.azurewebsites.net/api/savemessage", //<-- Change this adress to your own api
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
        },
          body: JSON.stringify({
            sendername: name,
            senderemail: email,
            content: message,
        }),
    }
);

RenderRepositories.tsx api call:

useEffect(() => {
    const fetchRepos = async () => {
      try {
        const response = await fetch(
          "https://portfolioapiadamfrank.azurewebsites.net/api/repos/pinned"); //<--Change this adress to yor own
        const repos: Repository[] = await response.json();
        setRepos(repos);
      } catch (e: any) {
        setError(e);
      }
    };
    fetchRepos();
}, []);

Build for Production

npm run build
# or
yarn build

Preview the production build locally:

npm run preview
# or
yarn preview

---

Deployment

This project is configured for Netlify but can be deployed to any other similar service.

• Build command: npm run build
• Publish directory: dist/

Once pushed to main, Netlify automatically deploys the latest version.

---

Contributing

I will not accept any contributions at the moment.

Linting & Formatting

Run linting with:

npm run lint
# or
yarn lint

---

Acknowledgments

• Vite + React + TS starter
• Netlify for hosting
• Blog posts and stack overflow for inspiration