"
85 | .section-tag:before
86 | content: ""
87 | .section-tag:after
88 | content: ""
89 | .ol-tag:before
90 | content: ""
91 | .ol-tag:after
92 | content: ""
93 | .form-tag:before
94 | content: ""
97 | .h2-tag:before, .h3-tag:before, .h1-tag:before, .p-tag:before, .ol-tag:before, .form-tag:before
98 | display: block
99 | margin-top: 2rem
100 | font-size: 2rem
101 | color: $gray
102 | font-family: $codingfont
103 | opacity: 0.3
104 | .h2-tag:after, .h3-tag:after, .h1-tag:after, .p-tag:after, .ol-tag:after, .form-tag:after
105 | display: inline
106 | margin-left: 2rem
107 | font-size: 2rem
108 | color: $gray
109 | font-family: $codingfont
110 | opacity: 0.3
111 | .p-tag:before, .p-tag:after, .ol-tag:before, .ol-tag:after, .form-tag:before, .form-tag:after
112 | font-size: 1.5rem
113 | .section-tag:before
114 | font-size: 1.5rem
115 | display: inline
116 | position: absolute
117 | transform: translate(0, -30%)
118 | margin-top: -2rem
119 | font-size: 2rem
120 | color: $gray
121 | font-family: $codingfont
122 | opacity: 0.3
123 | .section-tag:after
124 | font-size: 1.5rem
125 | display: inline
126 | position: absolute
127 | transform: translate(0, -110%)
128 | top: 110%
129 | right: 0
130 | font-size: 2rem
131 | color: $gray
132 | font-family: $codingfont
133 | opacity: 0.3
134 |
--------------------------------------------------------------------------------
/src/data/experienceData.js:
--------------------------------------------------------------------------------
1 | const experienceData = [
2 | {
3 | id: 1,
4 | jobtitle: "Marketing Campaign Manager",
5 | companyname: "InnovateX Solutions",
6 | worktype: "Full-time",
7 | duration: "Jan 2020 - Oct 2023",
8 | location: "Tbilisi, Georgia",
9 | responsibility: [
10 | `Developed and executed innovative marketing campaigns that resulted in a 20% increase in brand visibility and a 15% rise in customer engagement.`,
11 | `Collaborated with cross-functional teams to create compelling content for digital and print channels, ensuring consistent brand messaging.`,
12 | `Conducted market research and competitor analysis, identifying key trends and insights to refine campaign strategies.`,
13 | `Utilized data analytics to measure campaign performance, adjusting tactics in real-time to maximize ROI.`,
14 | `Managed a team of graphic designers and copywriters, fostering a collaborative environment and ensuring timely delivery of high-quality assets.`
15 | ],
16 | },
17 | {
18 | id: 2,
19 | jobtitle: "Social Media Strategist",
20 | companyname: "NexaReach Marketing Agency",
21 | worktype: "Full-time",
22 | duration: "Sep 2019 - Jan 2020",
23 | location: "Tbilisi, Georgia",
24 | responsibility: [
25 | `Devised and executed dynamic social media strategies across platforms, resulting in a 25% growth in follower base and a 30% boost in user engagement.`,
26 | `Created engaging and shareable content, leveraging both visual and written components to enhance brand storytelling.`,
27 | `Collaborated with clients to understand their unique voice and objectives, tailoring social media plans to align with their brand identity.`,
28 | `Monitored social media trends and emerging platforms, recommending and implementing new strategies to keep clients ahead of the curve.`,
29 | ],
30 | }
31 | ];
32 |
33 | const educationData = [
34 | {
35 | name: "Emerald College",
36 | status: "Bachelor of Science in Computer Science",
37 | year: "2021",
38 | },
39 | {
40 | name: "Cityville High School",
41 | status: "High School Diploma",
42 | year: "2012",
43 | }
44 | ];
45 |
46 | const certificationData = [
47 | {
48 | name: "HTML and CSS in depth",
49 | source: "Meta",
50 | date: "Issued Sept 2022 · No Expiration Date"
51 | },
52 | {
53 | name: "Interactivity with JavaScript",
54 | source: "University of Michigan",
55 | date: "Issued Sept 2022 · No Expiration Date"
56 | },
57 | {
58 | name: "React Basics",
59 | source: "Meta",
60 | date: "Issued Sept 2022 · No Expiration Date"
61 | }
62 | ];
63 |
64 | export { experienceData, educationData, certificationData };
65 |
--------------------------------------------------------------------------------
/src/data/projectsData.js:
--------------------------------------------------------------------------------
1 | import urlShortener from "../assets/images/portfolio/urlShortener.png";
2 | import Edgy from "../assets/images/portfolio/Edgy.jpeg";
3 | import RestCountries from "../assets/images/portfolio/RestCountries.jpeg";
4 | import Bankist from "../assets/images/portfolio/Bankist.jpeg";
5 |
6 | const projectsData = [
7 | {
8 | id: "rest-countries",
9 | img: RestCountries,
10 | name: "Rest Countires",
11 | stack: ["< RESTful API />", "< CSS3 />", "< React.js />"],
12 | src: "https://restful-countries.vercel.app/",
13 | source: "https://github.com/catherineisonline/rest-countries",
14 | description:
15 | "REST Countries is a project made with API which also has a color theme switcher feature. You can view the list of all countries and find a specific one via search or by filtering regions. By navigating to the individual country page, you are able to see more details about the country like native name and even border countries.",
16 | },
17 | {
18 | id: "url-shortener",
19 | img: urlShortener,
20 | name: "URL Shortener",
21 | stack: ["< HTML5 />", "< CSS />", "< Vanilla JS />", "< RESTful API />"],
22 | src: "https://catherineisonline.github.io/url-shortening-api-frontendmentor/",
23 | source: "https://github.com/catherineisonline/url-shortening-api-frontendmentor",
24 | description:
25 | "The goal of this landing page challenge is integration with the shrtcode URL shortening API and playing with browser storage. The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs. You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.",
26 | },
27 | {
28 | id: "bankist",
29 | img: Bankist,
30 | name: "Bankist",
31 | stack: ["< Vanilla JS />", "< CSS3 />", "< HTML5 />"],
32 | src: "https://bankist-bank.vercel.app/",
33 | source: "https://github.com/catherineisonline/bankist",
34 | description:
35 | "Bankist is a fictional online bank and its goal is to practice DOM manipulation and user interaction. Bankist has an option to log in to the account and use different functionalities, almost like in an actual bank! By logging into your account you can transfer money to another account, take a loan or delete the account. Please check README for login info.",
36 | },
37 | {
38 | id: "edgy",
39 | img: Edgy,
40 | name: "Edgy",
41 | stack: ["< Tailwind />", "< React.js />", "< Express.js />", "< Airtable API />", "< Google ReCaptcha />"],
42 | src: "https://catherineisonline.github.io/edgy/",
43 | source: "https://github.com/catherineisonline/edgy",
44 | description:
45 | "Edgy - is a social media marketing agency that offers Instagram growth services to businesses and beginner influencers. The website includes prices, a contact form, a blog, a careers page, and more.",
46 | },
47 | ];
48 |
49 | export { projectsData };
50 |
--------------------------------------------------------------------------------
/src/helpers/ScrollToTop.js:
--------------------------------------------------------------------------------
1 | const ScrollToTop = () => {
2 | window.scrollTo({
3 | top: 0,
4 | behavior: "smooth",
5 | });
6 | };
7 |
8 | export default ScrollToTop;
9 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { createRoot } from "react-dom/client";
3 | import reportWebVitals from "./reportWebVitals";
4 | import App from "./App";
5 |
6 | const container = document.getElementById("root");
7 | const root = createRoot(container);
8 | root.render(
9 |
10 | );
11 |
12 | reportWebVitals();
13 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/routes/about/About.js:
--------------------------------------------------------------------------------
1 | import "./About.sass";
2 | import { useEffect, React } from "react";
3 | import { Footer } from "../../components/index.js";
4 | import Certifications from "./Certifications.js";
5 | import Languages from "./Languages.js";
6 | import Stack from "./Stack.js";
7 | import Education from "./Education.js";
8 | import Experience from "./Experience.js";
9 | import DownloadResume from "./DownloadResume.js";
10 | import AboutMe from "./AboutMe.js";
11 | import ScrollButton from "../../helpers/ScrollToTop.js";
12 |
13 | const About = () => {
14 | useEffect(() => {
15 | document.title = "About | Sophia Martinez";
16 | window.scrollTo(0, 0);
17 | })
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default About;
35 |
--------------------------------------------------------------------------------
/src/routes/about/About.sass:
--------------------------------------------------------------------------------
1 | @use "../../core-ui/_base"
2 | //ABOUT
3 |
4 | .landing__about, .about
5 | padding: 1.5rem
6 | display: flex
7 | flex-direction: column
8 | gap: 2rem
9 | .download-btn
10 | display: flex
11 | flex-direction: row
12 | align-items: center
13 | justify-content: center
14 | gap: 1rem
15 | cursor: pointer
16 | background-color: transparent
17 | border-width: 1px
18 | border-color: base.$pinkish
19 | border-style: solid
20 | letter-spacing: 1px
21 | padding: 1rem 0.5rem
22 | letter-spacing: 1px
23 | width: 14rem
24 | max-width: 70%
25 | font-family: base.$body-font
26 | color: base.$pinkish
27 | opacity: 0.9
28 | background: linear-gradient(to right, base.$white 50%, transparent 50%)
29 | background-size: 200% 100%
30 | background-position: right bottom
31 | transition: all 0.4s ease
32 | img
33 | width: 1.5rem
34 | height: 1.5rem
35 |
36 | h2
37 | font-size: 2.5rem
38 | letter-spacing: 1px
39 | p
40 | font-size: 1.5rem
41 | @media (min-width: base.$sm-width)
42 |
43 | h2
44 | font-size: 4rem
45 | @media (min-width: base.$lg-width)
46 | display: grid
47 | grid-template-columns: repeat(2, 1fr)
48 | p
49 | margin-top: 2rem
50 | .landing__about
51 | display: grid
52 | grid-template-columns: 1fr
53 |
54 | .about
55 | display: flex
56 | flex-direction: column
57 | padding: 2rem
58 | grid-column: span 3
59 |
60 | //STACK SECTION
61 | .stack-list
62 | display: grid
63 | grid-template-columns: repeat(2, 1fr)
64 | column-gap: 2rem
65 | row-gap: 1rem
66 | margin-top: 5%
67 | padding: 2rem
68 |
69 | li
70 | display: list-item
71 | color: base.$white
72 | font-family: base.$body-font
73 | line-height: 1.5rem
74 | text-align: left
75 | font-weight: 100
76 | font-size: 1.2rem
77 | li::marker
78 | content: counter(li) " > "
79 | color: base.$pinkish
80 | animation: color 0.3s ease-in-out infinite
81 |
82 | .stack-list
83 | img
84 | width: 3rem
85 | max-width: 100%
86 | cursor: pointer
87 | transition: all 0.4s ease
88 | @media (min-width: base.$sm-width)
89 | gap: 1.5rem
90 | //WORK EXPERIENCE
91 | .about__experience, .about__education, .about__languages, .about__certifications
92 | margin-top: 5%
93 | display: grid
94 | grid-template-columns: 1fr
95 | color: base.$white
96 | gap: 2rem
97 | .experience__company
98 | display: flex
99 | flex-direction: row
100 | gap: 0.5rem
101 | h3
102 | font-family: base.$body-font
103 | font-size: 1.5rem
104 | p
105 | font-size: 1rem
106 | .experience__responsibilities, .about__education, .about__languages, .about__certifications
107 | font-size: 1rem
108 | padding: 1rem
109 |
110 | li
111 | font-family: base.$body-font
112 | line-height: 1.5rem
113 | text-align: left
114 | font-weight: 100
115 | li::marker
116 | content: counter(list-item) " › "
117 | color: base.$pinkish
118 | animation: color 0.3s ease-in-out infinite
119 | a
120 | color: base.$pinkish
121 | font-family: base.$body-font
122 |
--------------------------------------------------------------------------------
/src/routes/about/AboutMe.js:
--------------------------------------------------------------------------------
1 | import { React } from 'react';
2 |
3 | const AboutMe = () => {
4 | return (
5 |
6 |
About Me
7 |
8 | Transitioning from a rich 9-year background in marketing, I'm embarking on an exciting journey as a Junior Web Developer. My diverse experience has armed me with a unique perspective that blends creativity, strategic thinking, and a deep understanding of user behavior. As a passionate newcomer to the world of web development, I've harnessed my drive and determination to master the latest technologies. Through dedicated learning and hands-on projects, I've become adept at crafting seamless and engaging web experiences. My toolkit includes HTML, CSS, and JavaScript, and I'm well-versed in utilizing frameworks like React to bring dynamic functionalities to life. What sets me apart is not only my technical aptitude but also my marketing-honed intuition. I have an innate grasp of how design and functionality converge to create meaningful user journeys. By leveraging my marketing background, I'm able to create websites that not only look stunning but also strategically drive engagement and conversions.
9 |
14 | If you are interested in hiring me I am always open to new opportunities
15 | and interesting projects! Feel free to contact me if you have any other
16 | requests or questions regarding web development.
17 |
9 | If you are interested in hiring me I am always open to new opportunities
10 | and interesting projects! Feel free to contact me if you have any other
11 | requests or questions regarding web development.
12 |
10 | I've invested substantial time in a variety of projects, thoroughly enjoying the process of building things from the ground up. Here are a few of my cherished endeavors that encapsulate my expertise. I've tackled numerous minor projects from diverse courses and challenges, all aimed at mastering the fundamentals. Feel free to explore these on my {" "}
11 |
12 |
18 | GitHub
19 |
20 |
21 |
8 | I've invested substantial time in a variety of projects, thoroughly enjoying the process of building things from the ground up. Here are a few of my cherished endeavors that encapsulate my expertise. I've tackled numerous minor projects from diverse courses and challenges, all aimed at mastering the fundamentals. Feel free to explore these on my {" "}
9 |
10 |
15 | GitHub
16 |
17 |
18 |