From a6b4a3cdeda22c6d65aae1939c3ff836ecd9acb4 Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 14:13:02 -0800 Subject: [PATCH 1/8] update project data and links --- app/data/projectData.ts | 43 ++++++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/app/data/projectData.ts b/app/data/projectData.ts index b984e75..2c1267e 100644 --- a/app/data/projectData.ts +++ b/app/data/projectData.ts @@ -11,15 +11,18 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Job Journey", websiteLink: "https://job-journey-neon.vercel.app/", - description: "During my job search, I decided to dive into new technologies and frameworks, with a focus on data visualization. I built an application using Chart.js that dynamically displays three interactive charts based on my job application data. The app also includes a form for adding new entries and a fun feature that generates an inspirational quote with each page refresh.", + description: + "During my job search, I decided to dive into new technologies and frameworks, with a focus on data visualization. I built an application using Chart.js that dynamically displays three interactive charts based on my job application data. The app also includes a form for adding new entries and a fun feature that generates an inspirational quote with each page refresh.", tech: "Next.js | Typescript | Chart.js | D3 | Tailwind CSS", imageSrc: "/static/jobs.png", codeLink: "https://github.com/kimmykokonut/job-journey", }, { title: "Team Timework Report", - websiteLink: "https://drive.google.com/file/d/1JfCcRP1TIMii8n3-PCKlVOs0mCYNcQG-/view", - description: "During my internship with Clarity Innovations, I contributed to the development of the Teamwork Time Report, a web app that uses the Teamwork API to generate detailed project time reports. I improved code quality by implementing a linter and refactoring components, added features like task filtering and time allocation visualizations, and optimized the UI using Tailwind CSS. My work also included debugging, collaborating in code reviews, and ensuring the application was fully responsive and aligned with the company\’s design standards.", + websiteLink: + "https://drive.google.com/file/d/1JfCcRP1TIMii8n3-PCKlVOs0mCYNcQG-/view", + description: + "During my internship with Clarity Innovations, I contributed to the development of the Teamwork Time Report, a web app that uses the Teamwork API to generate detailed project time reports. I improved code quality by implementing a linter and refactoring components, added features like task filtering and time allocation visualizations, and optimized the UI using Tailwind CSS. My work also included debugging, collaborating in code reviews, and ensuring the application was fully responsive and aligned with the company’s design standards.", tech: "React | Javascript | Node.js | ESLint | Tailwind CSS | GitLab | TeamWork API", imageSrc: "/static/clarity.png", codeLink: "https://github.com/kimmykokonut/ci-teamwork", @@ -27,7 +30,8 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Myco Matrix", websiteLink: "https://myco.onrender.com/", - description: "Myco Matrix is an application designed to simplify the field trip registration process for foragers. Users can sign up, register for field trips, and access essential resources like packing lists and permits for Pacific Northwest locations. Administrators can easily create, edit, and manage trips, run lotteries to assign spots, and automate communication with participants. Inspired by my volunteer work with the Oregon Mycological Society, this project aims to streamline trip coordination and foster a stronger sense of community among members.", + description: + "Myco Matrix is an application designed to simplify the field trip registration process for foragers. Users can sign up, register for field trips, and access essential resources like packing lists and permits for Pacific Northwest locations. Administrators can easily create, edit, and manage trips, run lotteries to assign spots, and automate communication with participants. Inspired by my volunteer work with the Oregon Mycological Society, this project aims to streamline trip coordination and foster a stronger sense of community among members.", tech: "React | Typescript | Python | Django | Material UI | PostgreSQL", imageSrc: "/static/mycoHome.png", codeLink: "https://github.com/kimmykokonut/Capstone", @@ -35,7 +39,8 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Beyond Tipping", websiteLink: "https://beyondtipping.onrender.com/", - description: "This team project, built in 4 days at Epicodus, showcases Portland-area restaurants that have adopted a no-tipping model, offering flat prices or service fees. The app features a list and interactive map of restaurants. I contributed to building the backend, creating API endpoints, and connecting the React frontend to the Flask API. I also styled the Restaurant List page, added a filter feature, and authored the detailed README documentation.", + description: + "This team project, built in 4 days at Epicodus, showcases Portland-area restaurants that have adopted a no-tipping model, offering flat prices or service fees. The app features a list and interactive map of restaurants. I contributed to building the backend, creating API endpoints, and connecting the React frontend to the Flask API. I also styled the Restaurant List page, added a filter feature, and authored the detailed README documentation.", tech: " React | Typescript | Python | Flask | Tailwind CSS | SQLite", imageSrc: "/static/tipping.png", codeLink: "https://github.com/kimmykokonut/beyondtipping", @@ -43,15 +48,17 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Garden Guardian", websiteLink: "https://garden-client.onrender.com/", - description: "Garden Tracker, inspired by an unfinished team project from Epicodus, is an ambitious gardening app. I restructured the database relationships, transitioned from MySQL to PostgreSQL, and revamped the UI by switching from Preact to React with Typescript, styled using Tailwind. The API allows users to manage garden beds and seeds, create grids, and plant seeds within them. Users can interact with the API through Postman or Swagger, while the UI is a work in progress.", + description: + "Garden Tracker, inspired by an unfinished team project from Epicodus, is an ambitious gardening app. I restructured the database relationships, transitioned from MySQL to PostgreSQL, and revamped the UI by switching from Preact to React with Typescript, styled using Tailwind. The API allows users to manage garden beds and seeds, create grids, and plant seeds within them. Users can interact with the API through Postman or Swagger, while the UI is a work in progress.", tech: "TypeScript | React | Tailwind | Html | CSS | PostgreSQL | C# | ASP.NET", imageSrc: "/static/garden.png", codeLink: "https://github.com/kimmykokonut/Garden-guardian", }, { title: "The Dump Truck", - websiteLink: "https://dumpling-atlas.netlify.app/dumplings", - description: "This project is a Django WebAPI that manages dumpling information, categories, and tags, with PostgreSQL integration and both one-to-many and many-to-many relationships. Users can register, sign in, view dumpling data, and create, edit, or delete their own entries. I set up admin and user accounts, managed permissions, and am in the process of building a React frontend to consume the API. The project also incorporates dotenv for environment variable management.", + websiteLink: "https://github.com/kimmykokonut/dumpling-client", + description: + "This project is a Django WebAPI that manages dumpling information, categories, and tags, with PostgreSQL integration and both one-to-many and many-to-many relationships. Users can register, sign in, view dumpling data, and create, edit, or delete their own entries. I set up admin and user accounts, managed permissions, and am in the process of building a React frontend to consume the API. The project also incorporates dotenv for environment variable management.", tech: "TypeScript | React | Python | Django | CSS | PostgreSQL", imageSrc: "/static/dumplingapi.png", codeLink: "https://github.com/kimmykokonut/dumpling-api", @@ -59,15 +66,17 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Sound Check", websiteLink: "https://sound-check.netlify.app/", - description: "A React application that helps users discover local bands, save favorite artists, and connect with others through a live feed. Users can search for concerts in their area or other cities, follow artists, and see saved shows in their dashboard. As part of a team of five at Epicodus, we built this app in 3.5 days using React, Vite, and Firestore for user authentication and data management. I worked on integrating the JamBase API, building the 'Who\'s Coming' page, and implementing a concert search by city. I also handled the deployment on Netlify.", - tech: "React | JavaScript | Html | CSS | Material UI | JamBase API", + description: + "A React application that helps users discover local bands, save favorite artists, and connect with others through a live feed. Users can search for concerts in their area or other cities, follow artists, and see saved shows in their dashboard. As part of a team of five at Epicodus, we built this app in 3 days using React, Vite, and Firestore for user authentication and data management. I worked on integrating the JamBase API, building the 'Who's Coming' page, and implementing a concert search by city. I also handled the deployment on Netlify.", + tech: "React | JavaScript | Html | CSS | Material UI | API", imageSrc: "/static/soundcheck.png", codeLink: "https://github.com/kimmykokonut/sound-check", }, { - title: "Ice Cream Inventory Tracker", + title: "Inventory Tracker", websiteLink: "https://kimmykokonut.github.io/inventory-tracker-cra-redux/", - description: "An 8 hour solo project for Epicodus to build a React project managing local and shared state with class components, then refactored to functional components and added Redux to manage state, including TDD Jest testing.", + description: + "An 8 hour solo project for Epicodus to build a React project managing local and shared state with class components, then refactored to functional components and added Redux to manage state, including TDD Jest testing.", tech: "React | JavaScript | Html | CSS | Bootstrap | Redux | Jest | npm", imageSrc: "/static/gelato.png", codeLink: "https://github.com/kimmykokonut/inventory-tracker-cra-redux", @@ -75,17 +84,19 @@ export const PROJECT_DATA: projectDataProps[] = [ { title: "Not Wordle", websiteLink: "https://kimmykokonut.github.io/word-puzzle/", - description: "A hangman-style word puzzle with 3 play modes built in 16 hours as a pair project to learn React and Redux.", - tech: "React | JavaScript | Html | CSS | Redux | Giphy API", + description: + "A hangman-style word puzzle with 3 play modes built in 16 hours as a pair project to learn React and Redux.", + tech: "React | JavaScript | Html | CSS | Redux", imageSrc: "/static/puzzle.png", codeLink: "https://github.com/kimmykokonut/word-puzzle", }, { title: "Currency Exchanger", websiteLink: "https://kimmykokonut.github.io/currency-exchanger", - description: "A code review for Epicodus bootcamp where I utilized skills of API calls to allow a user to convert 16 different currencies and receive current currency rate and amount in chosen country's currency.", + description: + "A code review for Epicodus bootcamp where I utilized skills of API calls to allow a user to convert 16 different currencies and receive current currency rate and amount in chosen country's currency.", tech: "JavaScript | HTML | CSS | npm | Bootstrap | API", imageSrc: "/static/currency.png", codeLink: "https://github.com/kimmykokonut/currency-exchanger", }, -]; \ No newline at end of file +]; From 635e9e035fe472b31846127bea5e0043ea37b3ca Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 14:13:26 -0800 Subject: [PATCH 2/8] cleanup css file --- app/globals.css | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/app/globals.css b/app/globals.css index 3a8c031..0d6dd10 100644 --- a/app/globals.css +++ b/app/globals.css @@ -35,19 +35,3 @@ html { .button-link:hover { @apply text-black; } - -/* footer { - text-align: center; - overflow: hidden; - background-color: black; - padding: .25rem; - position: fixed; - bottom: 0; - height: 25px; - width: 100%; - z-index: 1000; -} - -footer a { - text-decoration: none; -} */ \ No newline at end of file From 5ae875769a2570ff52878215f404d363d1d7d9de Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 14:14:26 -0800 Subject: [PATCH 3/8] fix carousel view, remove autoplay, navigation arrows functional --- app/home/page.tsx | 38 ++++++++++++----------- components/Carousel.tsx | 59 +++++++++++++----------------------- components/ProjectCard.tsx | 62 +++++++++++++++++++++++++++----------- next.config.mjs | 4 +-- 4 files changed, 88 insertions(+), 75 deletions(-) diff --git a/app/home/page.tsx b/app/home/page.tsx index dbb3706..a51872b 100644 --- a/app/home/page.tsx +++ b/app/home/page.tsx @@ -1,8 +1,8 @@ "use client"; -import { useEffect, useState } from 'react'; -import { TypeAnimation } from 'react-type-animation'; -import Image from 'next/image'; +import { useEffect, useState } from "react"; +import { TypeAnimation } from "react-type-animation"; +import Image from "next/image"; const Hero = () => { const [isClient, setIsClient] = useState(false); @@ -23,31 +23,33 @@ const Hero = () => { {isClient && ( )}

- GitHub + + GitHub - LinkedIn + href="https://www.linkedin.com/in/robinson-kim/" + className="px-1 py-1 w-full sm:w-fit rounded-full bg-gradient-to-br from-blue-500 via-green-500 to-yellow-500 hover:bg-slate-800 inline-block text-center" + > + + LinkedIn +
@@ -62,6 +64,6 @@ const Hero = () => { - ) -} -export default Hero; \ No newline at end of file + ); +}; +export default Hero; diff --git a/components/Carousel.tsx b/components/Carousel.tsx index aa4eff2..6745fea 100644 --- a/components/Carousel.tsx +++ b/components/Carousel.tsx @@ -1,52 +1,39 @@ "use client"; import { Swiper, SwiperSlide } from "swiper/react"; -import { Autoplay, Navigation } from "swiper/modules"; -import 'swiper/css'; -import 'swiper/css/navigation'; -import { PlayIcon, PauseIcon } from "@heroicons/react/24/outline"; +import { Navigation, Pagination } from "swiper/modules"; +import "swiper/css"; +import "swiper/css/navigation"; +// import { PlayIcon, PauseIcon } from "@heroicons/react/24/outline"; import ProjectCard from "./ProjectCard"; import { PROJECT_DATA } from "@/app/data/projectData"; -import { useState } from "react"; const Carousel: React.FC = () => { - const [isPaused, setIsPaused] = useState(false); - - const handlePause = () => { - setIsPaused(!isPaused); - }; - return (
{ ))} +
+
-
-
-
- -
+ {/*
*/} + {/*
*/} + + {/*
*/}
); }; -export default Carousel; \ No newline at end of file +export default Carousel; diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx index 1cd18f7..78431ea 100644 --- a/components/ProjectCard.tsx +++ b/components/ProjectCard.tsx @@ -1,32 +1,60 @@ import { projectDataProps } from "@/app/data/projectData"; import Image from "next/image"; -const ProjectCard: React.FC = ({ title, websiteLink, description, tech, imageSrc, codeLink }) => { - +const ProjectCard: React.FC = ({ + title, + websiteLink, + description, + tech, + imageSrc, + codeLink, +}) => { return ( -
- -
+
+ + +
+

+ {title} +

+
+

+ {description} +

-
-

{title}

-

{description}

-

{tech}

+

+ {tech} +

+
+ {websiteLink && ( + + Website + + )} + {codeLink && ( + + Source Code + + )}
- -
- {websiteLink && Website} - {codeLink && Source Code}
); }; -export default ProjectCard; \ No newline at end of file +export default ProjectCard; diff --git a/next.config.mjs b/next.config.mjs index 5425640..3b42e79 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,8 +1,8 @@ /** @type {import('next').NextConfig} */ const nextConfig = { //uncomment these 2 before pushing and new build - basePath: "/kimmykokonut.github.io", - output: "export", //enables static exports + // basePath: "/kimmykokonut.github.io", + // output: "export", //enables static exports reactStrictMode: true, }; From f463aae870ac7a377ae9a3e68a167506e2938154 Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 14:28:22 -0800 Subject: [PATCH 4/8] pagination for carousel functional --- components/Carousel.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/Carousel.tsx b/components/Carousel.tsx index 6745fea..2b26358 100644 --- a/components/Carousel.tsx +++ b/components/Carousel.tsx @@ -4,7 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Pagination } from "swiper/modules"; import "swiper/css"; import "swiper/css/navigation"; -// import { PlayIcon, PauseIcon } from "@heroicons/react/24/outline"; +import "swiper/css/pagination"; import ProjectCard from "./ProjectCard"; import { PROJECT_DATA } from "@/app/data/projectData"; @@ -47,10 +47,9 @@ const Carousel: React.FC = () => {
- {/*
*/} - {/*
*/} - - {/*
*/} +
+
+
); From 7c33dff9e63ede98a8f704f8d2af537d5de35573 Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 14:36:46 -0800 Subject: [PATCH 5/8] pagination bullets now visible in dark mode --- app/globals.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/globals.css b/app/globals.css index 0d6dd10..d31b58c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -35,3 +35,11 @@ html { .button-link:hover { @apply text-black; } + +.dark .swiper-pagination-bullet { + @apply bg-gray-100; +} + +.dark .swiper-pagination-bullet-active { + @apply bg-white !important; +} From 0885b2519a1f95cdcdf3bf11760891304f2b0bd6 Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 15:29:33 -0800 Subject: [PATCH 6/8] update project descriptions --- app/data/projectData.ts | 18 +++++++++--------- components/ProjectCard.tsx | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/data/projectData.ts b/app/data/projectData.ts index 2c1267e..4292d3c 100644 --- a/app/data/projectData.ts +++ b/app/data/projectData.ts @@ -12,7 +12,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Job Journey", websiteLink: "https://job-journey-neon.vercel.app/", description: - "During my job search, I decided to dive into new technologies and frameworks, with a focus on data visualization. I built an application using Chart.js that dynamically displays three interactive charts based on my job application data. The app also includes a form for adding new entries and a fun feature that generates an inspirational quote with each page refresh.", + "During my job search, I decided to dive into new technologies and frameworks, with a focus on data visualization. I built an application using Chart.js that dynamically displays three interactive charts based on my job application data. The app also includes a form for adding new entries and a fun feature that generates an inspirational quote with each page refresh. Hosted on Vercel.", tech: "Next.js | Typescript | Chart.js | D3 | Tailwind CSS", imageSrc: "/static/jobs.png", codeLink: "https://github.com/kimmykokonut/job-journey", @@ -31,7 +31,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Myco Matrix", websiteLink: "https://myco.onrender.com/", description: - "Myco Matrix is an application designed to simplify the field trip registration process for foragers. Users can sign up, register for field trips, and access essential resources like packing lists and permits for Pacific Northwest locations. Administrators can easily create, edit, and manage trips, run lotteries to assign spots, and automate communication with participants. Inspired by my volunteer work with the Oregon Mycological Society, this project aims to streamline trip coordination and foster a stronger sense of community among members.", + "A full-stack application developed as a capstone project for Epicodus, completed over 200 hours. This app streamlines the field trip registration process for foragers. Users can sign up, register for trips, and access essential resources like packing lists and permits for Pacific Northwest locations. Administrators can create, edit, and manage trips, run lotteries to assign spots, and automate communication with participants. Inspired by my volunteer work with the Oregon Mycological Society, this project enhances trip coordination and fosters a stronger community among members.", tech: "React | Typescript | Python | Django | Material UI | PostgreSQL", imageSrc: "/static/mycoHome.png", codeLink: "https://github.com/kimmykokonut/Capstone", @@ -40,7 +40,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Beyond Tipping", websiteLink: "https://beyondtipping.onrender.com/", description: - "This team project, built in 4 days at Epicodus, showcases Portland-area restaurants that have adopted a no-tipping model, offering flat prices or service fees. The app features a list and interactive map of restaurants. I contributed to building the backend, creating API endpoints, and connecting the React frontend to the Flask API. I also styled the Restaurant List page, added a filter feature, and authored the detailed README documentation.", + "This team project, built in 4 days at Epicodus, showcases Portland-area restaurants that have adopted a no-tipping model, offering flat prices or service fees. The full-stack app features a list and interactive map of restaurants. I contributed to building the backend, creating API endpoints, connecting the React frontend to the Flask API, and handling the deployment on Render. I also styled the Restaurant List page, added a filter feature, and authored the detailed README documentation.", tech: " React | Typescript | Python | Flask | Tailwind CSS | SQLite", imageSrc: "/static/tipping.png", codeLink: "https://github.com/kimmykokonut/beyondtipping", @@ -49,7 +49,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Garden Guardian", websiteLink: "https://garden-client.onrender.com/", description: - "Garden Tracker, inspired by an unfinished team project from Epicodus, is an ambitious gardening app. I restructured the database relationships, transitioned from MySQL to PostgreSQL, and revamped the UI by switching from Preact to React with Typescript, styled using Tailwind. The API allows users to manage garden beds and seeds, create grids, and plant seeds within them. Users can interact with the API through Postman or Swagger, while the UI is a work in progress.", + "Inspired by an unfinished team project from Epicodus, I restructured the database relationships, transitioned from MySQL to PostgreSQL, and revamped the UI by switching from Preact to React with TypeScript, styled using Tailwind. The API allows users to manage garden beds and seeds, create grids, and plant seeds within them. Users can interact with the API through Postman or Swagger (UI is a work in progress).", tech: "TypeScript | React | Tailwind | Html | CSS | PostgreSQL | C# | ASP.NET", imageSrc: "/static/garden.png", codeLink: "https://github.com/kimmykokonut/Garden-guardian", @@ -58,7 +58,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "The Dump Truck", websiteLink: "https://github.com/kimmykokonut/dumpling-client", description: - "This project is a Django WebAPI that manages dumpling information, categories, and tags, with PostgreSQL integration and both one-to-many and many-to-many relationships. Users can register, sign in, view dumpling data, and create, edit, or delete their own entries. I set up admin and user accounts, managed permissions, and am in the process of building a React frontend to consume the API. The project also incorporates dotenv for environment variable management.", + "My first project built with Django, this WebAPI manages dumpling information, categories, and tags with PostgreSQL integration. Users can register, sign in, view dumpling data, and create, edit, or delete their own entries. I set up admin and user accounts, managed permissions, and am building a React frontend to consume the API. The project also uses dotenv for environment variable management.", tech: "TypeScript | React | Python | Django | CSS | PostgreSQL", imageSrc: "/static/dumplingapi.png", codeLink: "https://github.com/kimmykokonut/dumpling-api", @@ -67,7 +67,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Sound Check", websiteLink: "https://sound-check.netlify.app/", description: - "A React application that helps users discover local bands, save favorite artists, and connect with others through a live feed. Users can search for concerts in their area or other cities, follow artists, and see saved shows in their dashboard. As part of a team of five at Epicodus, we built this app in 3 days using React, Vite, and Firestore for user authentication and data management. I worked on integrating the JamBase API, building the 'Who's Coming' page, and implementing a concert search by city. I also handled the deployment on Netlify.", + "A React app that helps users discover local bands, save favorite artists, and connect with others through a live feed. Users can search for concerts, follow artists, and see saved shows in their dashboard. Built in 3 days by a team of five at Epicodus using React, Vite, and Firestore. I integrated the JamBase API, built the 'Who's Coming' page, implemented concert search by city, and handled deployment on Netlify.", tech: "React | JavaScript | Html | CSS | Material UI | API", imageSrc: "/static/soundcheck.png", codeLink: "https://github.com/kimmykokonut/sound-check", @@ -76,7 +76,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Inventory Tracker", websiteLink: "https://kimmykokonut.github.io/inventory-tracker-cra-redux/", description: - "An 8 hour solo project for Epicodus to build a React project managing local and shared state with class components, then refactored to functional components and added Redux to manage state, including TDD Jest testing.", + "An 8-hour Epicodus project to refactor a React app with Redux and testing. Users can view flavors, add pails, see details, track servings, and sell pints. Initially built with class components, refactored to functional components for better state management.", tech: "React | JavaScript | Html | CSS | Bootstrap | Redux | Jest | npm", imageSrc: "/static/gelato.png", codeLink: "https://github.com/kimmykokonut/inventory-tracker-cra-redux", @@ -85,7 +85,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Not Wordle", websiteLink: "https://kimmykokonut.github.io/word-puzzle/", description: - "A hangman-style word puzzle with 3 play modes built in 16 hours as a pair project to learn React and Redux.", + "A React and Redux application for a hangman-style word guessing game, developed in 16 hours as a pair coding project at Epicodus' bootcamp. Users can choose between easy mode, hard mode, or a two-player version. Players guess letters to reveal a hidden word, with limited attempts. The game provides feedback on each guess, displays correctly and incorrectly guessed letters, and shows remaining guesses. The game ends when the word is guessed or attempts run out.", tech: "React | JavaScript | Html | CSS | Redux", imageSrc: "/static/puzzle.png", codeLink: "https://github.com/kimmykokonut/word-puzzle", @@ -94,7 +94,7 @@ export const PROJECT_DATA: projectDataProps[] = [ title: "Currency Exchanger", websiteLink: "https://kimmykokonut.github.io/currency-exchanger", description: - "A code review for Epicodus bootcamp where I utilized skills of API calls to allow a user to convert 16 different currencies and receive current currency rate and amount in chosen country's currency.", + "A currency exchange application developed for Epicodus bootcamp, built in 8 hours. Users can input a USD amount and convert it to up to 5 different currencies using the Exchange Rate API. The app displays the converted amount and handles errors gracefully, notifying users of any issues with the API or invalid currencies.", tech: "JavaScript | HTML | CSS | npm | Bootstrap | API", imageSrc: "/static/currency.png", codeLink: "https://github.com/kimmykokonut/currency-exchanger", diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx index 78431ea..1ebdd95 100644 --- a/components/ProjectCard.tsx +++ b/components/ProjectCard.tsx @@ -29,7 +29,7 @@ const ProjectCard: React.FC = ({

{title}

-
+

{description}

From a8cb0246afd803be87b55ea2b4a614887e92f16c Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 15:56:25 -0800 Subject: [PATCH 7/8] resolve console errors and resize min screen for mobile mode --- app/contact/page.tsx | 31 ++++++++++++++++++++----------- app/data/tabData.tsx | 28 ++++++++++++++++++---------- app/globals.css | 2 +- components/Carousel.tsx | 8 ++++++-- components/Footer.tsx | 19 ++++++++++++++++--- components/ProjectCard.tsx | 13 +++++++------ 6 files changed, 68 insertions(+), 33 deletions(-) diff --git a/app/contact/page.tsx b/app/contact/page.tsx index bb8a40b..7bd6fb2 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -6,14 +6,19 @@ const Contact = () => { aria-labelledby="contact-heading" className="text-[#121212] dark:text-white" > -
-

Let's connect!

+
+

+ Let's connect! +

-
+
GitHub
-
+
LinkedIn
@@ -21,7 +26,8 @@ const Contact = () => {
+ method="POST" + >
@@ -92,17 +98,20 @@ const Contact = () => { rows={4} placeholder="Where do I begin..." className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" - > - + >

- +
-
- +
+ ); }; -export default Contact; \ No newline at end of file +export default Contact; diff --git a/app/data/tabData.tsx b/app/data/tabData.tsx index c3abab9..14a269e 100644 --- a/app/data/tabData.tsx +++ b/app/data/tabData.tsx @@ -16,17 +16,19 @@ export const TAB_DATA: tabData[] = [
  • Python
  • Node.js
  • React
    • +
  • Next.js
    • +
  • Vue.js
  • ASP.NET
  • Django
  • Flask
  • HTML
  • CSS
    • -
  • Tailwind CSS
    • +
  • Tailwind
  • Material UI
  • Bootstrap
  • Webpack
    • - ) + ), }, { title: "DB & Test", @@ -42,7 +44,7 @@ export const TAB_DATA: tabData[] = [
  • MSTest
  • Cypress
    • - ) + ), }, { title: "Education", @@ -51,17 +53,23 @@ export const TAB_DATA: tabData[] = [
    -
    Certificate: Web & Mobile Development
    +
    + Certificate: Web & Mobile Development +
    Epicodus Full-Stack Bootcamp
    Portland, OR
    -
    B.S. Natural Resources Management & Engineering
    -
    Minor: Spanish 3.7 GPA
    -
    University of Connecticut, Storrs
    +
    + B.S. Natural Resources Management & Engineering +
    +
    Minor: Spanish
    +
    GPA: 3.7/4.0
    +
    University of Connecticut
    +
    Storrs, CT
    - ) - } -] \ No newline at end of file + ), + }, +]; diff --git a/app/globals.css b/app/globals.css index d31b58c..d591ed4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -29,7 +29,7 @@ html { } .button-link { - @apply px-4 py-2 w-full sm:w-fit rounded-full mr-4 bg-gradient-to-br from-blue-500 via-green-500 to-yellow-500 text-white inline-block text-center cursor-pointer; + @apply px-4 py-2 w-full sm:w-fit rounded-full mr-4 bg-gradient-to-br from-blue-500 via-green-600 to-yellow-500 text-white inline-block text-center cursor-pointer; } .button-link:hover { diff --git a/components/Carousel.tsx b/components/Carousel.tsx index 2b26358..a06bb57 100644 --- a/components/Carousel.tsx +++ b/components/Carousel.tsx @@ -29,11 +29,15 @@ const Carousel: React.FC = () => { }} breakpoints={{ 640: { - slidesPerView: 1.5, + slidesPerView: 1.2, spaceBetween: 20, }, + 768: { + slidesPerView: 1.5, + spaceBetween: 25, + }, 1024: { - slidesPerView: 3, + slidesPerView: 2.5, spaceBetween: 30, }, }} diff --git a/components/Footer.tsx b/components/Footer.tsx index 58e9467..2b1825f 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -2,10 +2,23 @@ const Footer = () => { return ( ); }; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx index 1ebdd95..51784f7 100644 --- a/components/ProjectCard.tsx +++ b/components/ProjectCard.tsx @@ -11,21 +11,22 @@ const ProjectCard: React.FC = ({ }) => { return (
    -
    - + -
    +

    {title}

    From 59ebda51cf93d779e611b3cd4ebc5329d4946125 Mon Sep 17 00:00:00 2001 From: Kim Robinson Date: Mon, 4 Nov 2024 16:07:00 -0800 Subject: [PATCH 8/8] change text to be smaller on mobile screens for about description, ready for new deploy --- app/about/page.tsx | 38 ++++++++++++++++++++++++++++++++------ next.config.mjs | 4 ++-- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/app/about/page.tsx b/app/about/page.tsx index ece35bc..779018d 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -24,13 +24,39 @@ export default function About() { >

    About Kim

    -

    - I am a full-stack developer with hands-on experience in JavaScript, React, Python, C#, and building Web APIs. During my internship at Clarity Innovations, I tackled feature development and bug fixes for an EdTech project dashboard to streamline the user experience. My diverse background in science, education, and creative roles gives me a unique problem-solving perspective. I am passionate about community building and have volunteered in various educational and environmental initiatives. I am eager to contribute to a mission-driven company and grow alongside a collaborative team. +

    + I am a full-stack developer with hands-on experience in JavaScript, + React, Python, C#, and building Web APIs. During my internship at + Clarity Innovations, I tackled feature development and bug fixes for + an EdTech project dashboard to streamline the user experience. My + diverse background in science, education, and creative roles gives me + a unique problem-solving perspective. I am passionate about community + building and have volunteered in various educational and environmental + initiatives. I am eager to contribute to a mission-driven company and + grow alongside a collaborative team.

    - handleTabChange("skills")} active={tab === "skills"}>{" "}Tech Stack{" "} - handleTabChange("databaseTest")} active={tab === "databaseTest"}>{" "}DB & Test{" "} - handleTabChange("education")} active={tab === "education"}>{" "}Education{" "} + handleTabChange("skills")} + active={tab === "skills"} + > + {" "} + Tech Stack{" "} + + handleTabChange("databaseTest")} + active={tab === "databaseTest"} + > + {" "} + DB & Test{" "} + + handleTabChange("education")} + active={tab === "education"} + > + {" "} + Education{" "} +
    {selectedTab ? selectedTab.content :

    Content not found

    } @@ -38,4 +64,4 @@ export default function About() {
    ); -} \ No newline at end of file +} diff --git a/next.config.mjs b/next.config.mjs index 3b42e79..5425640 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,8 +1,8 @@ /** @type {import('next').NextConfig} */ const nextConfig = { //uncomment these 2 before pushing and new build - // basePath: "/kimmykokonut.github.io", - // output: "export", //enables static exports + basePath: "/kimmykokonut.github.io", + output: "export", //enables static exports reactStrictMode: true, };