Skip to content

Commit

Permalink
Merge pull request #1 from kimmykokonut/newBranch
Browse files Browse the repository at this point in the history 
Merge development changes
  • Loading branch information
@kimmykokonut
kimmykokonut authored Nov 5, 2024
2 parents 108bd83 + 59ebda5 commit b3849d9
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 130 deletions.
38 changes: 32 additions & 6 deletions app/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,44 @@ export default function About() {
>
<div className="border-slate-500 py-8 px-4 sm:py-16 xl:px-16 max-w-4xl mx-auto">
<h2 className="text-4xl font-bold mb-4">About Kim</h2>
<p className="text-base lg:text-lg leading-relaxed mb-2">
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.
<p className="text-sm sm:text-base lg:text-lg leading-relaxed mb-2">
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.
</p>
<div className="flex flex-row mt-8">
<TabButton selectTab={() => handleTabChange("skills")} active={tab === "skills"}>{" "}Tech Stack{" "}</TabButton>
<TabButton selectTab={() => handleTabChange("databaseTest")} active={tab === "databaseTest"}>{" "}DB & Test{" "}</TabButton>
<TabButton selectTab={() => handleTabChange("education")} active={tab === "education"}>{" "}Education{" "}</TabButton>
<TabButton
selectTab={() => handleTabChange("skills")}
active={tab === "skills"}
>
{" "}
Tech Stack{" "}
</TabButton>
<TabButton
selectTab={() => handleTabChange("databaseTest")}
active={tab === "databaseTest"}
>
{" "}
DB & Test{" "}
</TabButton>
<TabButton
selectTab={() => handleTabChange("education")}
active={tab === "education"}
>
{" "}
Education{" "}
</TabButton>
</div>
<div className="mt-4">
{selectedTab ? selectedTab.content : <p>Content not found</p>}
</div>
</div>
</section>
);
}
}
31 changes: 20 additions & 11 deletions app/contact/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,28 @@ const Contact = () => {
aria-labelledby="contact-heading"
className="text-[#121212] dark:text-white"
>
<div className="border-slate-500 py-2 px-4 xl:px-16 max-w-4xl mx-auto" id="contact-form">
<h2 className="text-4xl font-bold mb-4" id="contact-heading">Let&#39;s connect!</h2>
<div
className="border-slate-500 py-2 px-4 xl:px-16 max-w-4xl mx-auto"
id="contact-form"
>
<h2 className="text-4xl font-bold mb-4" id="contact-heading">
Let&#39;s connect!
</h2>
<hr />
<div className="flex justify-end mb-2">
<h5 className="pr-5 hover:text-green-500">
<h5 className="pr-5 hover:text-green-600">
<a href="https://github.com/kimmykokonut">GitHub</a>
</h5>
<h5 className="hover:text-green-500">
<h5 className="hover:text-green-600">
<a href="https://www.linkedin.com/in/robinson-kim/">LinkedIn</a>
</h5>
</div>
<hr />
<form
className="w-full max-w-lg pt-4"
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfVZSYVrelhSgGoVTNseTXAouYw8i0ZR0ZrdeauRuJC63BeoQ/formResponse"
method="POST">
method="POST"
>
<div className="flex flex-wrap -mx-3 mb-6">
<div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<fieldset>
Expand Down Expand Up @@ -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"
>
</textarea>
></textarea>
</label>
</fieldset>
<br />
<input type="submit" value="Send Message" className="button-link" />
<input
type="submit"
value="Send Message"
className="button-link"
/>
</div>
</div>
</form>
</div >
</section >
</div>
</section>
);
};
export default Contact;
export default Contact;
43 changes: 27 additions & 16 deletions app/data/projectData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,81 +11,92 @@ 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. Hosted on Vercel.",
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",
},
{
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:
"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",
},
{
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 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",
},
{
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:
"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",
},
{
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:
"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",
},
{
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 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",
},
{
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 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",
},
{
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 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",
},
{
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 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",
},
];
];
28 changes: 18 additions & 10 deletions app/data/tabData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@ export const TAB_DATA: tabData[] = [
<li>Python</li>
<li>Node.js</li>
<li>React</li>
<li>Next.js</li>
<li>Vue.js</li>
<li>ASP.NET</li>
<li>Django</li>
<li>Flask</li>
<li>HTML</li>
<li>CSS</li>
<li>Tailwind CSS</li>
<li>Tailwind</li>
<li>Material UI</li>
<li>Bootstrap</li>
<li>Webpack</li>
</ul>
)
),
},
{
title: "DB & Test",
Expand All @@ -42,7 +44,7 @@ export const TAB_DATA: tabData[] = [
<li>MSTest</li>
<li>Cypress</li>
</ul>
)
),
},
{
title: "Education",
Expand All @@ -51,17 +53,23 @@ export const TAB_DATA: tabData[] = [
<div>
<dl className="max-w-md divide-y divide-gray-300 dark:divide-gray-700 pl-2">
<div className="flex flex-col pb-3">
<dt className="mb-1 font-semibold">Certificate: Web & Mobile Development</dt>
<dt className="mb-1 font-semibold">
Certificate: Web & Mobile Development
</dt>
<dd>Epicodus Full-Stack Bootcamp</dd>
<dd>Portland, OR</dd>
</div>
<div className="flex flex-col pt-3">
<dt className="mb-1 font-semibold">B.S. Natural Resources Management & Engineering</dt>
<dd>Minor: Spanish 3.7 GPA</dd>
<dd>University of Connecticut, Storrs</dd>
<dt className="mb-1 font-semibold">
B.S. Natural Resources Management & Engineering
</dt>
<dd>Minor: Spanish</dd>
<dd>GPA: 3.7/4.0</dd>
<dd>University of Connecticut</dd>
<dd>Storrs, CT</dd>
</div>
</dl>
</div>
)
}
]
),
},
];
20 changes: 6 additions & 14 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,17 @@ 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 {
@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;
.dark .swiper-pagination-bullet {
@apply bg-gray-100;
}

footer a {
text-decoration: none;
} */
.dark .swiper-pagination-bullet-active {
@apply bg-white !important;
}
Loading

0 comments on commit b3849d9

Please sign in to comment.