diff --git a/src/App.js b/src/App.js index 9281bc8..a1ef444 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,13 @@ import React from 'react'; import './App.scss'; -import NavigationBar from "./components/Navbar"; -import Cover from "./components/Cover"; -import About from "./components/About"; -import Experience from "./components/Experience"; -import Projects from "./components/Projects"; -import Contact from "./components/Contact"; - const App = () => { return (
- - - - - - +
+

currently under construction

+

come back soon!

+
); } diff --git a/src/App.scss b/src/App.scss index 9e80364..95fef67 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,52 +1,24 @@ -$bg-dark-mode: rgb(24, 23, 23); -$white-text: #FAFAFA; - .App { - font-family: 'Mulish', sans-serif; -} - -body { - background-color: #FAFAFA !important; - color: #373737; -} - -body.dark-mode { - background-color: $bg-dark-mode !important; - color: #FAFAFA; - - .navbar { - background-color: $bg-dark-mode; - color: #FAFAFA; - } - - .nav-link { - color: #FAFAFA !important; - } - - .navbar-toggler { - background: $bg-dark-mode; - color: #FAFAFA !important; - } - - .navbar-collapse { - background: $bg-dark-mode; - color: #FAFAFA; - } - - .modal-content { - background-color: $bg-dark-mode; - color: #FAFAFA; - } - - .primary:hover { - background-color: $bg-dark-mode; - box-shadow: 0px 0px 0px 2.5px $bg-dark-mode, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px $bg-dark-mode, 0px 0px 0px 10.5px #E05D2A; - } - - .secondary { - background-color: $bg-dark-mode; - &:hover { - box-shadow: 0px 0px 0px 2.5px $bg-dark-mode, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px $bg-dark-mode, 0px 0px 0px 10.5px #E05D2A; + font-family: 'Gaegu', sans-serif; + background-color: #E2DED8; + color: #9F988C; + width: 100vw; + height: 100vh; + display: grid; + place-items: center; + + .info { + text-align: center; + margin: 1rem; + user-select: none; + + h1 { + font-weight: bold; + font-size: 32px; + } + + p { + font-size: 24px; } } } diff --git a/src/ThemeChanger.js b/src/ThemeChanger.js deleted file mode 100644 index d9e2d66..0000000 --- a/src/ThemeChanger.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { FiMoon } from "react-icons/fi"; -import { FiSun } from "react-icons/fi"; - -const ThemeChanger = () => { - const [themeState, setThemeState] = useState(false); - - useEffect(() => { - const getTheme = localStorage.getItem('Theme'); - if (getTheme === 'dark') { - setThemeState(true); - } - }, []); - - useEffect(() => { - if (themeState) { - localStorage.setItem('Theme', 'dark'); - document.body.classList.add('dark-mode'); - } else { - localStorage.setItem('Theme', 'light'); - document.body.classList.remove('dark-mode'); - } - }, [themeState]); - - return ( -
setThemeState(!themeState)}> - {themeState ? : } -
- ) -} - -export default ThemeChanger; \ No newline at end of file diff --git a/src/assets/cover_img.svg b/src/assets/cover_img.svg deleted file mode 100644 index 38b29ed..0000000 --- a/src/assets/cover_img.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/job_logos/ardentlabs_logo.png b/src/assets/job_logos/ardentlabs_logo.png deleted file mode 100644 index b243a45..0000000 Binary files a/src/assets/job_logos/ardentlabs_logo.png and /dev/null differ diff --git a/src/assets/job_logos/boeing_logo.png b/src/assets/job_logos/boeing_logo.png deleted file mode 100644 index 0cba61f..0000000 Binary files a/src/assets/job_logos/boeing_logo.png and /dev/null differ diff --git a/src/assets/job_logos/peterportal_logo.png b/src/assets/job_logos/peterportal_logo.png deleted file mode 100644 index 9280a36..0000000 Binary files a/src/assets/job_logos/peterportal_logo.png and /dev/null differ diff --git a/src/assets/job_logos/readme_logo.png b/src/assets/job_logos/readme_logo.png deleted file mode 100644 index 7c77c7a..0000000 Binary files a/src/assets/job_logos/readme_logo.png and /dev/null differ diff --git a/src/assets/job_logos/startsmart_logo.png b/src/assets/job_logos/startsmart_logo.png deleted file mode 100644 index 8fd2b9f..0000000 Binary files a/src/assets/job_logos/startsmart_logo.png and /dev/null differ diff --git a/src/assets/project_covers/covidulator.svg b/src/assets/project_covers/covidulator.svg deleted file mode 100644 index 2d1f263..0000000 --- a/src/assets/project_covers/covidulator.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/project_covers/dfs ias.svg b/src/assets/project_covers/dfs ias.svg deleted file mode 100644 index 254725f..0000000 --- a/src/assets/project_covers/dfs ias.svg +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/project_covers/grasshopperfund.svg b/src/assets/project_covers/grasshopperfund.svg deleted file mode 100644 index 5f04423..0000000 --- a/src/assets/project_covers/grasshopperfund.svg +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/project_covers/jam for change.svg b/src/assets/project_covers/jam for change.svg deleted file mode 100644 index 2b492b4..0000000 --- a/src/assets/project_covers/jam for change.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/project_covers/peter portal.svg b/src/assets/project_covers/peter portal.svg deleted file mode 100644 index 6679a24..0000000 --- a/src/assets/project_covers/peter portal.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/project_covers/trishaprile.svg b/src/assets/project_covers/trishaprile.svg deleted file mode 100644 index 85d598e..0000000 --- a/src/assets/project_covers/trishaprile.svg +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/role_icons/project_management.svg b/src/assets/role_icons/project_management.svg deleted file mode 100644 index 7ec3332..0000000 --- a/src/assets/role_icons/project_management.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/role_icons/software_development.svg b/src/assets/role_icons/software_development.svg deleted file mode 100644 index a1e4d63..0000000 --- a/src/assets/role_icons/software_development.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/role_icons/uiux_design.svg b/src/assets/role_icons/uiux_design.svg deleted file mode 100644 index b2a8abf..0000000 --- a/src/assets/role_icons/uiux_design.svg +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/toolbox_icons/adobecc.png b/src/assets/toolbox_icons/adobecc.png deleted file mode 100644 index 92351ec..0000000 Binary files a/src/assets/toolbox_icons/adobecc.png and /dev/null differ diff --git a/src/assets/toolbox_icons/angular.png b/src/assets/toolbox_icons/angular.png deleted file mode 100644 index b079bef..0000000 Binary files a/src/assets/toolbox_icons/angular.png and /dev/null differ diff --git a/src/assets/toolbox_icons/bootstrap.png b/src/assets/toolbox_icons/bootstrap.png deleted file mode 100644 index 5fc900a..0000000 Binary files a/src/assets/toolbox_icons/bootstrap.png and /dev/null differ diff --git a/src/assets/toolbox_icons/css.png b/src/assets/toolbox_icons/css.png deleted file mode 100644 index 16cf40f..0000000 Binary files a/src/assets/toolbox_icons/css.png and /dev/null differ diff --git a/src/assets/toolbox_icons/docker.png b/src/assets/toolbox_icons/docker.png deleted file mode 100644 index 55de1eb..0000000 Binary files a/src/assets/toolbox_icons/docker.png and /dev/null differ diff --git a/src/assets/toolbox_icons/figma.png b/src/assets/toolbox_icons/figma.png deleted file mode 100644 index b3c8aae..0000000 Binary files a/src/assets/toolbox_icons/figma.png and /dev/null differ diff --git a/src/assets/toolbox_icons/git.png b/src/assets/toolbox_icons/git.png deleted file mode 100644 index cbcdcbe..0000000 Binary files a/src/assets/toolbox_icons/git.png and /dev/null differ diff --git a/src/assets/toolbox_icons/graphql.png b/src/assets/toolbox_icons/graphql.png deleted file mode 100644 index cf0403a..0000000 Binary files a/src/assets/toolbox_icons/graphql.png and /dev/null differ diff --git a/src/assets/toolbox_icons/html.png b/src/assets/toolbox_icons/html.png deleted file mode 100644 index cb81da2..0000000 Binary files a/src/assets/toolbox_icons/html.png and /dev/null differ diff --git a/src/assets/toolbox_icons/javascript.png b/src/assets/toolbox_icons/javascript.png deleted file mode 100644 index 4065aab..0000000 Binary files a/src/assets/toolbox_icons/javascript.png and /dev/null differ diff --git a/src/assets/toolbox_icons/react.png b/src/assets/toolbox_icons/react.png deleted file mode 100644 index d72edee..0000000 Binary files a/src/assets/toolbox_icons/react.png and /dev/null differ diff --git a/src/assets/toolbox_icons/sass.png b/src/assets/toolbox_icons/sass.png deleted file mode 100644 index e663e1c..0000000 Binary files a/src/assets/toolbox_icons/sass.png and /dev/null differ diff --git a/src/assets/trishaprile_logo.svg b/src/assets/trishaprile_logo.svg deleted file mode 100644 index 4c6110d..0000000 --- a/src/assets/trishaprile_logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/About.js b/src/components/About.js deleted file mode 100644 index 9fbb2c8..0000000 --- a/src/components/About.js +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import './About.scss'; - -import { Row, Col, Image } from "react-bootstrap"; -import { Element } from 'react-scroll'; -import Fade from 'react-reveal/Fade'; - -import me from "../assets/picture_of_me.svg"; -import projectManagement from "../assets/role_icons/project_management.svg"; -import softwareDevelopment from "../assets/role_icons/software_development.svg"; -import UIUXdesign from "../assets/role_icons/uiux_design.svg"; - -const About = () => { - return ( - - - - - - - - - -

about me

-

I’m a 21 year old who recently moved from Orange County, California to San Francisco.

-

In 2021, I graduated from the University of California, Irvine with a B.S. - in Informatics and a minor in Education. - My studies involved the understanding and practice of human computer interaction, - software design, and human behavior with an emphasis on people and design.

-

I’m passionate about exploring the possibilities of product & project management, - software development, and UI & UX design and research, with a focus on education, - accessibility, inclusion, and universal usability.

-

I am currently working as a UI Engineer at ReadMe! 🦉

- - - - - - -

project & product management

- - - -
-

Product Research & Strategies

-

Feature Specification & Roadmapping

-

Agile & Scrum Management

-
- - - - -

software development

- - - -
-

Frontend Development

-

Backend Development

-

Web & Mobile Development

-
- - - - -

UI & UX design

- - - -
-

Wireframing & Prototyping

-

User Research & Testing

-

Visual Communication

-
- - - - - ); -} -export default About; \ No newline at end of file diff --git a/src/components/About.scss b/src/components/About.scss deleted file mode 100644 index f035663..0000000 --- a/src/components/About.scss +++ /dev/null @@ -1,145 +0,0 @@ -#about { - width: 100%; - min-height: 90vh; - display: flex; - flex-direction: column; - - .content-container { - display: flex; - justify-content: center; - align-items: center; - margin: auto; - padding: 2% 10%; - width: 100%; - - .info-container { - - h1 { - font-weight: 700; - font-size: 24px; - margin-top: 2rem; - } - - p { - font-size: 16px; - margin-top: 1rem; - padding-right: 2rem; - } - - a { - color: #E05D2A !important; - } - - } - - .img-container { - display: flex; - justify-content: center; - align-items: center; - - .img { - margin: 1rem; - height: auto; - width: 18rem; - } - } - - .role-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1rem; - - .role-img { - width: auto; - height: 8rem; - margin: auto; - padding-bottom: 2rem; - } - - h2 { - font-weight: 700; - font-size: 18px; - margin-top: 1rem; - margin-bottom: 2rem; - text-align: center; - } - - .skills { - display: flex; - flex-direction: column; - align-items: center; - - .badge { - background-color: #FCEDE7; - width: auto; - height: 20px; - margin-right: 0.8rem; - margin-top: 1rem; - padding: 1rem; - border-radius: 50px; - - - p { - font-size: 14px; - font-weight: 700; - color: #E05D2A; - text-align: center; - vertical-align: middle; - line-height: 0px; - } - } - } - } - } -} - -@media screen and (max-width: 600px) { - #about { - - .content-container { - flex-direction: column; - - .info-container { - - h1 { - font-size: 20px; - margin-top: 1rem; - } - - p { - font-size: 14px; - padding-right: 0rem; - } - - } - - .img-container { - - .img { - width: 65vw; - } - } - - .role-container { - - .role-img { - width: 8rem; - } - - h2 { - font-size: 16px; - } - - .skills { - .badge { - p { - font-size: 12px; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/components/Contact.js b/src/components/Contact.js deleted file mode 100644 index 45163ff..0000000 --- a/src/components/Contact.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import './Contact.scss'; - -import { Row } from "react-bootstrap"; -import { Element } from 'react-scroll'; -import { scroller } from 'react-scroll'; -import Fade from 'react-reveal/Fade'; -import { FiMail } from "react-icons/fi"; -import { SiLinkedin } from "react-icons/si"; -import { SiGithub } from "react-icons/si"; -import { SiGitlab } from "react-icons/si"; -import { SiDribbble } from "react-icons/si"; -import { BsChevronCompactUp } from "react-icons/bs"; - -const Contact = () => { - return ( - - -

contact me

-
-

trishaprilee@gmail.com

-
- - - - - - - - - - -
scroller.scrollTo('cover', { - smooth: true, - offset: -50, - duration: 500, - })} - > - -
- -
- -

Made with ✨ © Trisha Le 2021

- -
- - ); -} -export default Contact; \ No newline at end of file diff --git a/src/components/Contact.scss b/src/components/Contact.scss deleted file mode 100644 index 6b5c23c..0000000 --- a/src/components/Contact.scss +++ /dev/null @@ -1,123 +0,0 @@ -#contact { - width: 100%; - min-height: 25vh; - display: flex; - flex-direction: column; - align-items: center; - - h1 { - font-size: 24px; - font-weight: 700; - text-align: center; - margin-top: 3rem; - } - - .badge { - background-color: #FCEDE7; - width: auto; - height: 20px; - margin: 2rem 1rem 1rem 1rem; - padding: 1.5rem; - border-radius: 50px; - - .mail-icon { - color: #E05D2A; - margin-bottom: 2px; - margin-right: 0.8rem; - height: 25px; - width: auto; - &:hover { - transform: translateY(2px); - } - } - - h3 { - font-size: 16px; - font-weight: 700; - color: #E05D2A; - text-align: center; - vertical-align: middle; - line-height: 0px; - margin-top: -12px; - } - } - - .socials { - margin: auto; - - .icon { - margin: 2rem; - height: 50px; - width: auto; - color: #E05D2A; - &:hover { - transform: translateY(2px) !important; - } - } - } - - .arrow-container { - margin: auto; - background-color: #FCEDE7; - border-radius: 50%; - margin-top: 1rem; - &:hover { - transform: translateY(3px) !important; - cursor: pointer; - } - - .arrow { - color: #E05D2A; - padding: 5px; - } - } - - .footer { - width: 100%; - padding: 1rem 3rem; - - p { - font-size: 14px; - font-weight: 400; - } - } -} - -@media screen and (max-width: 600px) { - #contact { - - h1 { - font-size: 20px; - } - - .badge { - - .mail-icon { - height: 20px; - } - - h3 { - font-size: 14px; - margin-top: -10px; - } - - } - - .socials { - - .icon { - margin: 1rem; - height: 40px; - } - } - - .footer { - - p { - font-size: 12px; - text-align: center; - margin-top: 1rem; - } - } - } -} \ No newline at end of file diff --git a/src/components/Cover.js b/src/components/Cover.js deleted file mode 100644 index cb53c9a..0000000 --- a/src/components/Cover.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import './Cover.scss'; - -import { Row, Col, Button, Image } from "react-bootstrap"; -import { Element } from 'react-scroll'; -import { scroller } from 'react-scroll'; -import Fade from 'react-reveal/Fade'; - -import img from "../assets/cover_img.svg"; - -const Cover = () => { - return ( - - - - -

Hello!

-

I'm Trisha,

- - -

a developer and designer who enjoys creating impactful experiences, from ideation to execution.

- - - - - - - - - - - - - ); -} -export default Cover; \ No newline at end of file diff --git a/src/components/Cover.scss b/src/components/Cover.scss deleted file mode 100644 index 21726ae..0000000 --- a/src/components/Cover.scss +++ /dev/null @@ -1,109 +0,0 @@ -#cover { - width: 100%; - min-height: 90vh; - - .content-container { - display: flex; - justify-content: center; - align-items: center; - margin: auto; - padding: 10% 15%; - width: 100%; - - .info-container { - - h1 { - font-weight: 700; - font-size: 48px; - margin-top: 4rem; - } - - h2 { - font-weight: 700; - font-size: 36px; - margin-top: 1rem; - } - - h3 { - font-weight: 600; - font-size: 18px; - max-width: 22rem; - line-height: 26px; - margin-top: 0.8rem; - } - - .contact-btn { - font-size: 14px; - font-weight: 700; - background-color: #E05D2A; - border: 0; - border-radius: 15px 1px 15px 1px; - margin: 2rem 0rem; - padding: 0.8rem 1.4rem; - width: auto; - transition: 0.5s; - &:hover { - background-color: #FAFAFA; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - color: #E05D2A; - transition: 0.5s; - } - &:focus { - background-color: #FAFAFA; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - color: #E05D2A; - transition: 0.5s; } - } - } - - .img-container { - display: flex; - justify-content: center; - align-items: center; - - .img { - height: auto; - width: 25rem; - margin: 1rem; - } - } - } -} - -@media screen and (max-width: 600px) { - #cover { - - .content-container { - padding: 2% 5%; - - .info-container { - order: 2; - - h1 { - font-size: 42px; - margin-top: 1rem; - } - - h2 { - font-size: 32px; - } - - h3 { - font-size: 16px; - } - - .contact-btn { - margin-top: 1rem; - } - } - - .img-container { - order: 1; - - .img { - width: 60vw; - } - } - } - } -} \ No newline at end of file diff --git a/src/components/Experience.js b/src/components/Experience.js deleted file mode 100644 index 5fc989f..0000000 --- a/src/components/Experience.js +++ /dev/null @@ -1,197 +0,0 @@ -import React from 'react'; -import './Experience.scss'; - -import { Row, Col, Image, Button, OverlayTrigger, Tooltip } from "react-bootstrap"; -import { Element } from 'react-scroll'; -import Fade from 'react-reveal/Fade'; - -import readme from "../assets/job_logos/readme_logo.png"; -import startsmart from "../assets/job_logos/startsmart_logo.png"; -import ardentlabs from "../assets/job_logos/ardentlabs_logo.png"; -import boeing from "../assets/job_logos/boeing_logo.png"; -import figma from "../assets/toolbox_icons/figma.png"; -import adobecc from "../assets/toolbox_icons/adobecc.png"; -import bootstrap from "../assets/toolbox_icons/bootstrap.png"; -import html from "../assets/toolbox_icons/html.png"; -import css from "../assets/toolbox_icons/css.png"; -import javascript from "../assets/toolbox_icons/javascript.png"; -import react from "../assets/toolbox_icons/react.png"; -import angular from "../assets/toolbox_icons/angular.png"; -import sass from "../assets/toolbox_icons/sass.png"; -import graphql from "../assets/toolbox_icons/graphql.png"; -import docker from "../assets/toolbox_icons/docker.png"; -import git from "../assets/toolbox_icons/git.png"; -import resume from '../assets/Trisha Le Resume.pdf'; - -const Experience = () => { - return ( - - - - -

my experience

- - - - - - StartSmart - - -

2022 - present

-

ReadMe

-

UI Engineer

- - - - - StartSmart - - -

2020 - 2021

-

StartSmart

-

Product Manager

- - - - - StartSmart - - -

2019 - 2020

-

Ardent Labs

-

Software Development Intern

- - - - - StartSmart - - -

2017

-

Boeing

-

Software Engineering Intern

- - - - - - - -

toolbox

- -
- - - - Figma} - > - Figma - - - - Adobe Creative Cloud} - > - Adobe Creative Cloud - - - - Sass} - > - Sass - - - - - - HTML} - > - HTML - - - - CSS} - > - CSS - - - - JavaScript} - > - JavaScript - - - - - - React} - > - React - - - - Bootstrap} - > - Bootstrap - - - - GraphQL} - > - GraphQL - - - - - - Angular} - > - Angular - - - - Docker} - > - Docker - - - - Git} - > - Git - - - - -
- - - - - ); -} -export default Experience; \ No newline at end of file diff --git a/src/components/Experience.scss b/src/components/Experience.scss deleted file mode 100644 index a3f9818..0000000 --- a/src/components/Experience.scss +++ /dev/null @@ -1,201 +0,0 @@ -#experience { - width: 100%; - min-height: 90vh; - display: flex; - flex-direction: column; - - .content-container { - display: flex; - justify-content: center; - align-items: center; - margin: auto; - padding: 3% 10%; - width: 100%; - - h1 { - font-size: 24px; - font-weight: 700; - text-align: center; - margin-bottom: 2rem; - } - - .jobs-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - margin: auto; - - .jobs { - display: flex; - align-items: left; - flex-direction: column; - margin: auto; - padding-left: 8vw; - - .job { - display: flex; - margin-bottom: 1rem; - } - - .logo-container { - display: flex; - justify-content: center; - align-items: center; - margin-right: 1rem; - } - - .logo { - height: 60px; - width: auto; - &:hover { - transform: translateY(2px); - } - } - - .info-container { - - h2 { - font-size: 20px; - font-weight: 700; - &:hover { - transform: translateY(1px); - } - } - - a { - // color: #373737 !important; - color: inherit; - &:hover { - text-decoration: none; - color: #E05D2A !important; - } - } - - h3 { - font-size: 14px; - font-weight: 500; - color: #AFAFAF; - margin-top: 0.2rem; - } - - p { - font-size: 18px; - } - } - } - } - - .toolbox-container { - display: flex; - flex-direction: column; - - .toolbox { - margin: auto; - - .icon-container { - display: flex; - justify-content: center; - align-items: center; - - .icon { - height: 50px; - width: auto; - margin: 1.5rem; - } - } - } - - .resume-btn { - font-weight: 700; - font-size: 14px; - background-color: #E05D2A; - border: 0; - border-radius: 1px 15px 1px 15px; - margin: auto; - margin-top: 2rem; - padding: 0.8rem 1.4rem; - width: auto; - transition: 0.5s; - &:hover { - background-color: #FAFAFA; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - color: #E05D2A; - transition: 0.5s; - } - &:focus { - background-color: #FAFAFA; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - color: #E05D2A; - transition: 0.5s; - } - } - } - } -} - -.tooltip .tooltip-inner { - background-color: #FCEDE7; - color: #E05D2A; - border-radius: 15px; - font-weight: 600; - padding: 0.3rem 0.7rem; -} - -.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { - border-bottom-color: #FCEDE7 !important; -} - -@media screen and (max-width: 600px) { - #experience { - - .content-container { - padding: 2%; - - h1 { - font-size: 20px; - margin-top: 3rem; - } - - .jobs-container { - - .jobs { - margin-left: 1rem; - - .job { - - .logo { - height: 50px; - } - - .info-container { - h2 { - font-size: 18px; - } - - h3 { - font-size: 12px; - margin-top: 1rem; - } - - p { - font-size: 16px; - } - } - } - } - } - - .toolbox-container { - .toolbox { - .icon-container { - .icon { - height: 50px; - margin: 1.5rem 1rem; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js deleted file mode 100644 index d6f7ca6..0000000 --- a/src/components/Navbar.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import ThemeChanger from '../ThemeChanger'; -import './Navbar.scss'; - -import { Nav, Navbar, Image } from "react-bootstrap"; -import { scroller } from 'react-scroll'; -import { RiMenu4Line } from "react-icons/ri"; -import Fade from 'react-reveal/Fade'; - -import logo from "../assets/trishaprile_logo.svg"; - -const NavigationBar = () => { - return ( -
- - - scroller.scrollTo('cover', { - smooth: true, - offset: -100, - duration: 500, - })} - > - - - - - - - - - - -
- ); -} -export default NavigationBar; \ No newline at end of file diff --git a/src/components/Navbar.scss b/src/components/Navbar.scss deleted file mode 100644 index 56d9b4a..0000000 --- a/src/components/Navbar.scss +++ /dev/null @@ -1,68 +0,0 @@ -.navbar { - width: 100%; - height: 10vh; - - .nav { - background-color: #FAFAFA; - } - - .logo { - margin-left: 2rem; - height: auto; - width: 11rem; - &:hover { - transform: translateY(2px); - cursor: pointer; - } - } - - .nav-link { - font-weight: 600; - font-size: 18px; - margin: 0rem 1.5rem; - color: #373737 !important; - &:hover { - color: #E05D2A !important; - transform: translateY(2px) !important; - } - } - - .contact { - margin-right: 3rem; - } - - .toggle { - border: none !important; - color: #373737 !important; - } -} - -@media screen and (max-width: 991px) { - .navbar { - - .navbar-toggler { - color: #373737 !important; - background: #FAFAFA; - transition: 0.3s; - } - - .navbar-collapse { - width: 100%; - overflow-x: hidden; - background: #FAFAFA; - border-radius: 15px; - padding: 0.5rem !important; - box-shadow: 0px 4px 50px 10px rgba(168, 168, 168, 0.1); - transition: 0.3s !important; - } - - .logo { - margin-left: 0rem; - width: 9rem; - } - - .nav-link { - font-size: 16px; - } - } -} \ No newline at end of file diff --git a/src/components/Projects.js b/src/components/Projects.js deleted file mode 100644 index 0e885f4..0000000 --- a/src/components/Projects.js +++ /dev/null @@ -1,350 +0,0 @@ -import React, { useState } from 'react'; -import './Projects.scss'; - -import { Row, Col, Image, Modal, Button } from "react-bootstrap"; -import { Element } from 'react-scroll'; -import Fade from 'react-reveal/Fade'; -import { BiTrophy } from "react-icons/bi"; - -import grasshopperfund from "../assets/project_covers/grasshopperfund.svg"; -import dfs_ias from "../assets/project_covers/dfs ias.svg"; -import peter_portal from "../assets/project_covers/peter portal.svg"; -import trishaprile from "../assets/project_covers/trishaprile.svg"; -import jam_for_change from "../assets/project_covers/jam for change.svg"; -import covidulator from "../assets/project_covers/covidulator.svg"; - -const Projects = () => { - - const [showGrasshopperfund, setShowGrasshopperfund] = useState(false); - const handleCloseGrasshopperfund = () => setShowGrasshopperfund(false); - const handleShowGrasshopperfund = () => setShowGrasshopperfund(true); - - const [showDFSIAS, setShowDFSIAS] = useState(false); - const handleCloseDFSIAS = () => setShowDFSIAS(false); - const handleShowDFSIAS = () => setShowDFSIAS(true); - - const [showPP, setShowPP] = useState(false); - const handleClosePP = () => setShowPP(false); - const handleShowPP = () => setShowPP(true); - - const [showTrishaprile, setShowTrishaprile] = useState(false); - const handleCloseTrishaprile = () => setShowTrishaprile(false); - const handleShowTrishaprile = () => setShowTrishaprile(true); - - const [showJamForChange, setShowJamForChange] = useState(false); - const handleCloseJamForChange = () => setShowJamForChange(false); - const handleShowJamForChange = () => setShowJamForChange(true); - - const [showCovidulator, setShowCovidulator] = useState(false); - const handleCloseCovidulator = () => setShowCovidulator(false); - const handleShowCovidulator = () => setShowCovidulator(true); - - return ( - - -

my projects

- - - - - - - -

Grasshopperfund

 - - -

Grasshopperfund is a startup marketplace and first funding platform for youth-led startups, - bridging the gap between idea and reality for youth ages 13-30 through immediate access to startup coaching & services, - debt-free capital, and an entrepreneurial network.

-

2021 UCI Butterworth Product Development Competition 1st Place Winner

- - -

CLIENT

-

StartSmart

- - -

TIMELINE

-

Oct 2020 - Oct 2021

- - - - -

ROLES

-

Product Manager, Lead Frontend Developer, UI/UX Designer

- - -

PRODUCT

-

Crowdfunding & Social Web App

- - - - -

RESPONSIBILITIES

-
  • Determined product vision and strategy.
    • -
  • Led the planning, design, and development of product features, from conception to launch.
    • -
  • Conducted user and market research, wrote requirements specifications, and performed usability testing.
    • - -     -

    BUILT WITH

    -

    React

    -

    GraphQL

    -

    REST

    -

    Django

    -

    PostgreSQL

    -

    Docker

    -

    AWS

    - - -     -     -     - - - - -

    Dreams for Schools Instructor Assignment Sorter

     - - -

    The Instructor Assignment Sorter aims to assist DFS program directors by providing an optimal way for them to automatically - assign instructors into their preferred programs through a sorting algorithm while also supporting manual fine-tune adjustment. - The application also warehouses all data regarding seasons, schools, programs, and instructors.

    - - -

    CLIENT

    -

    Dreams for Schools

    - - -

    TIMELINE

    -

    Jan 2021 - Jun 2021

    - -     - - -

    ROLES

    -

    Software Developer, UI/UX Designer

    - - -

    PRODUCT

    -

    Management Web App

    - -     - - -

    RESPONSIBILITIES

    -
  • Designed low-fidelity wireframes and high-fidelity mockups.
    • -
  • Implemented the sorting algorithm in the front-end.
    • -
  • Developed the instructor sorter page and drag-and-drop feature using react-beautiful-dnd.
    • - -     -

    BUILT WITH

    -

    React

    -

    MySQL

    -

    Express.js

    -

    Node.js

    -

    Firebase

    -

    Figma

    -

    Bootstrap

    -

    styled-components

    - -     -     -     - -     -     - - - - - -

    PeterPortal

     - - -

    PeterPortal is the one-stop-shop for course discovery at UC Irvine. It consolidates public data from official UCI - sources to aid students when planning their course schedule. Peter’s Roadmap is an interactive tool within PeterPortal - for students to customize a holistic plan of courses they need to take each quarter and school year.

    - - -

    CLIENT

    -

    ICSSC Projects

    - - -

    TIMELINE

    -

    Mar 2020 - Jun 2021

    - -     - - -

    ROLES

    -

    Project Lead, Frontend Developer, UI/UX Designer

    - - -

    PRODUCT

    -

    Portal Web App

    - -     - - -

    RESPONSIBILITIES

    -
  • Built a roadmap, prioritized tasks and features, and designed and implemented data-driven wireframes and prototypes.
    • -
  • Led a team of UI/UX designers, conducted UX research through competitive analysis and usability evaluations, and developed visual branding.
    • - -     -

    BUILT WITH

    -
    -

    React

    -

    GraphQL

    -

    ExpressJS

    -

    MongoDB

    -

    Elasticsearch

    -

    TypeScript

    -

    PeterPortal API

    -

    Figma

    -

    Semantic UI

    -
    - - -     -     -     - - - - -

    trishaprile

     - - -

    My personal portfolio website!

    - - -

    CLIENT

    -

    Myself

    - - -

    TIMELINE

    -

    Oct 2020 - Present

    - -     - - -

    ROLES

    -

    Sole Developer, Designer

    - - -

    PRODUCT

    -

    Web App

    - -     - - -

    RESPONSIBILITIES

    -
  • Designed and implemented the app.
    • -
  • Optimized responsiveness and accessibility for multiple devices.
    • - -     -

    BUILT WITH

    -

    React

    -

    Bootstrap

    -

    Sass

    - - -     -     -     - -     -     - - - - - -

    Jam for Change

     - - -

    ICS Student Council's Jam for Change is a five day long development competition where teams work together to create applications that promote social good.

    - - -

    CLIENT

    -

    ICS Student Council

    - - -

    TIMELINE

    -

    Jan 2021 - Feb 2021

    - -     - - -

    ROLES

    -

    Sole Developer, Designer

    - - -

    PRODUCT

    -

    Informational Web App

    - -     - - -

    RESPONSIBILITIES

    -
  • Designed and implemented the app.
    • - -     -

    BUILT WITH

    -

    React

    - - -     -     -     - - - - -

    Covidulator

     - - -

    Covidulator is a web app that calculates the impact of one's actions in regards to preventing the spread of COVID-19. - Inspired by the Carbon Footprint Calculator, the app aims to provide a way for people to evaluate how well they are performing in face of the pandemic - and take steps to reduce the spread.

    -

    2021 Jam for Change 2nd Place Winner

    - - -

    CLIENT

    -

    Jam for Change 2021

    - - -

    TIMELINE

    -

    Feb 2021 - Feb 2021

    - -     - - -

    ROLES

    -

    Project Manager, Designer, Developer

    - - -

    PRODUCT

    -

    Interactive Web App

    - -     - - -

    RESPONSIBILITIES

    -
  • Led the design and implemention of the app.
    • - -     -

    BUILT WITH

    -

    React

    - - -     -     -     - -     -     - -     - ); -} -export default Projects; diff --git a/src/components/Projects.scss b/src/components/Projects.scss deleted file mode 100644 index 087309b..0000000 --- a/src/components/Projects.scss +++ /dev/null @@ -1,199 +0,0 @@ -#projects { - width: 100%; - min-height: 90vh; - display: flex; - flex-direction: column; - - h1 { - font-size: 24px; - font-weight: 700; - text-align: center; - margin-top: 2rem; - margin-bottom: 1rem; - } - - .project-container { - margin: auto; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 0; - - .project-row { - margin: auto; - display: flex; - justify-content: center; - align-items: center; - - .project { - margin: auto; - display: flex; - flex-direction: column; - padding: 0; - - .project-img { - height: auto; - width: 500px; - margin: 1rem; - transition: all .5s ease; - &:hover { - transform: translate3D(0,-1px,0) scale(1.03); - transition: all .5s ease; - cursor: pointer; - } - } - } - } - } -} - -.project-modal { - transition: 0.3s; - font-family: 'Mulish'; - max-width: 50rem !important; - - .modal-content { - border-radius: 15px !important; - border: none; - padding: 1rem 2rem; - } - - .modal-header { - border: none; - } - - h2 { - font-weight: 700; - font-size: 26px; - color: #E05D2A; - } - - h4 { - font-weight: 800; - font-size: 14px; - margin-top: 0.5rem; - } - - h3 { - font-weight: 800; - font-size: 16px; - margin-top: 1.5rem; - } - - .link { - color: #E05D2A; - } - - .badge { - background-color: #FCEDE7; - width: auto; - height: 20px; - margin-right: 0.8rem; - margin-top: 0.8rem; - padding: 1rem; - border-radius: 50px; - - p { - font-size: 14px; - font-weight: 700; - color: #E05D2A; - text-align: center; - vertical-align: middle; - line-height: 0px; - } - } - - .primary-btn { - font-weight: 700; - font-size: 14px; - background-color: #E05D2A; - border: 0; - border-radius: 15px 1px 15px 1px; - margin: 2rem 1rem 1rem 0rem; - padding: 0.8rem 1.4rem; - width: auto; - transition: 0.5s; - float: left; - &:hover { - background-color: #FAFAFA; - color: #E05D2A; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - transition: 0.5s; - } - &:focus { - background-color: #FAFAFA; - color: #E05D2A; - box-shadow: 0px 0px 0px 2.5px #FAFAFA, 0px 0px 0px 5px #E05D2A, 0px 0px 0px 10px #FAFAFA, 0px 0px 0px 10.5px #E05D2A; - transition: 0.5s; - } - } - - .secondary-btn { - font-weight: 700; - font-size: 14px; - background-color: #FAFAFA; - color: #E05D2A; - border-color: #E05D2A; - border-width: 2px; - border-radius: 15px 1px 15px 1px; - margin-top: 2rem; - padding: 0.65rem 1.4rem; - width: auto; - transition: 0.5s; - float: left; - &:hover { - background-color: #E05D2A; - color: #FAFAFA; - box-shadow: 0px 0px 0px 1.5px #E05D2A, 0px 0px 0px 5px #FAFAFA, 0px 0px 0px 6px #E05D2A, 0px 0px 0px 10.5px #FAFAFA; - transition: 0.5s; - border-color: #E05D2A; - } - &:focus { - background-color: #E05D2A; - color: #FAFAFA; - box-shadow: 0px 0px 0px 1.5px #E05D2A, 0px 0px 0px 5px #FAFAFA, 0px 0px 0px 6px #E05D2A, 0px 0px 0px 10.5px #FAFAFA; - transition: 0.5s; - border-color: #E05D2A; - } - } - - .achievement-icon { - margin-right: 8px; - margin-bottom: 3px; - color: #E05D2A; - } - } - -@media screen and (max-width: 600px) { - #projects { - - h1 { - font-size: 20px; - margin-top: 4rem; - } - - .project-container { - - .project-row { - - .project { - width: 100%; - - .project-img { - width: 80vw; - } - } - } - } - } - - .project-modal { - margin: 3rem 0 0 0 !important; - max-width: 100vw !important; - - .modal-content { - padding: 1rem; - } - } -} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 8e15505..d4bffa7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,8 @@ -@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&display=swap'); + body { margin: 0; - font-family: 'Mulish', 'Arial', sans-serif; + font-family: 'Gaegu', 'Arial', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }