Skip to content

feat/style: Improve UI/UX of the main parts of the website #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SeanSan06 merged 13 commits into from
Jul 5, 2026
Merged

feat/style: Improve UI/UX of the main parts of the website #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1e46542
feat: Add and style button to news page
SeanSan06 Jun 2, 2026
533168d
feat: Update resume form "Add Section" button to a circle w/ "+" icon
SeanSan06 Jun 5, 2026
8195bf8
style: Update the border thickness, color dividers, & spacing between…
SeanSan06 Jun 5, 2026
3a83459
feat: Add basic HTML for signing up
SeanSan06 Jun 13, 2026
fb8a225
feat: Position the input fields for the sign up page
SeanSan06 Jun 13, 2026
46b8806
Refactor: Recolor the sign up page to match the log in page
SeanSan06 Jun 13, 2026
9ff77d2
fix: Adjust CSS for signup page so all input fields look consistent
SeanSan06 Jun 21, 2026
2d8f73d
feat: Enhance the about page to be more organized and have color
SeanSan06 Jun 21, 2026
b68eced
refeactor: Use CSS variables for font sizes and component sizing
SeanSan06 Jun 21, 2026
4e7a902
style: Update the form page to improve user experience and visual appeal
SeanSan06 Jul 5, 2026
2a31426
fix/style: Update the form page's background color to match home page
SeanSan06 Jul 5, 2026
c207e7c
fix/style: Adjust the form page styling and improve documentation
SeanSan06 Jul 5, 2026
753a873
fix: Clean up the CSS files to adhear to CSS best practices
SeanSan06 Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import TermsOfServicePage from './pages/TermsOfServicePage';
import PrivacyPolicyPage from './pages/PrivacyPolicyPage';
import FAQsPage from './pages/FAQsPage';
import LoginPage from './pages/LoginPage';
import SignupPage from './pages/SignupPage';


import './styles/styles.css'
Expand All @@ -29,6 +30,7 @@ import './styles/terms-of-service-page.css'
import './styles/privacy-policy-page.css'
import './styles/faq-page.css'
import './styles/login-page.css'
import './styles/signup-page.css'

import './styles/specific-component/resume-template.css'

Expand Down Expand Up @@ -67,6 +69,7 @@ function App() {
<Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
<Route path="/faqs" element={<FAQsPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/signup" element={<SignupPage />} />
</Routes>
</div>
)
Expand Down
40 changes: 30 additions & 10 deletions frontend/src/components/Form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ function Form() {

// "generateResume" usestate is used to store resume JSON data from endpoint
const [generatedResume, setGeneratedResume] = useState(null);
const [submitError, setSubmitError] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);

/*
When submit button is clicked it capture all data stored in input boxes.
Expand All @@ -69,6 +71,8 @@ function Form() {
*/
const handleSubmit = async (e) => {
e.preventDefault();
setSubmitError("");
setIsSubmitting(true);
// console.log("Passed this") // used for dev logs

const payload = {
Expand All @@ -83,18 +87,32 @@ function Form() {
});

const data = await response.json();
console.log(data) // used for dev logs
setGeneratedResume(data);
console.log(data) // used for dev logs

if (!response.ok) {
setGeneratedResume(null);
setSubmitError(data.detail || data.error || "Resume generation failed.");
return;
}

setGeneratedResume(data.resume);
} catch (err) {
setGeneratedResume(null);
setSubmitError("Could not reach the backend. Make sure Docker is running and the API is available at http://localhost:8000.");
console.error("Error submitting resume:", err);
} finally {
setIsSubmitting(false);
}
};

// The actual UI React component for all questions, input boxes, and submit button
return (
<div id="form-page">
<h1>Resume Maker</h1>
{submitError && (
<div role="alert" className="form-error-message" aria-live="polite">
{submitError}
</div>
)}
<form id="resume-form" onSubmit={handleSubmit}>
{/* Basic Information */}
<h2>Basic Information</h2>
Expand Down Expand Up @@ -189,7 +207,7 @@ function Form() {
});
}}
>
Add Section
+
</button>
</div>

Expand Down Expand Up @@ -319,7 +337,7 @@ function Form() {
});
}}
>
Add Section
+
</button>
</div>

Expand Down Expand Up @@ -450,7 +468,7 @@ function Form() {
});
}}
>
Add Section
+
</button>

</div>
Expand Down Expand Up @@ -552,7 +570,7 @@ function Form() {
});
}}
>
Add Section
+
</button>
</div>

Expand Down Expand Up @@ -624,7 +642,7 @@ function Form() {
});
}}
>
Add Section
+
</button>
</div>

Expand Down Expand Up @@ -697,11 +715,13 @@ function Form() {
});
}}
>
Add Section
+
</button>
</div>

<button type="submit">Submit Resume</button>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Submitting..." : "Submit Resume"}
</button>
</form>

{/* Once "generate" usestate updates this will generate a resume at bottom of page */}
Expand Down
82 changes: 53 additions & 29 deletions frontend/src/pages/AboutPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,60 @@
function AboutPage() {
return (
<div id="about-page">
<main id="about-page">
<div id="about-page-content">
<a id="go-back-home" href="/">Go back home</a>
<h1>About The Method</h1>
<h2>Who</h2>
<p>Made by a team of 2nd and 3rd year Computer Science students at UCI.</p>
<h2>What</h2>
<p>The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:</p>
<ul>
<li>#1) Resume Builder</li>
<li>#2) Interview Practice</li>
<li>#3) Job Search Tools</li>
<li>#4) Progress Tracking</li>
</ul>
<h2>When</h2>
<p>Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.</p>
<h2>Where</h2>
<p>Based in Irvine, California, United States</p>
<h2>Why</h2>
<p>Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that
can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their
performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field.
</p>
<h2>How</h2>
<p>For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP).
If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team.
We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work
from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion.
</p>
<section className="about-card about-intro-card">
<h1>About The Method</h1>
<p>
The Method is designed to help people create, optimize, practice, and track their job search in one place.
</p>
</section>

<section className="about-card">
<h2>Who</h2>
<p>Made by a team of 2nd and 3rd year Computer Science students at UCI.</p>
</section>

<section className="about-card">
<h2>What</h2>
<p>The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:</p>
<ul className="about-card-list">
<li>#1) Resume Builder</li>
<li>#2) Interview Practice</li>
<li>#3) Job Search Tools</li>
<li>#4) Progress Tracking</li>
</ul>
</section>

<section className="about-card">
<h2>When</h2>
<p>Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.</p>
</section>

<section className="about-card">
<h2>Where</h2>
<p>Based in Irvine, California, United States</p>
</section>

<section className="about-card">
<h2>Why</h2>
<p>
Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that
can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their
performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field.
</p>
</section>

<section className="about-card">
<h2>How</h2>
<p>
For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP).
If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team.
We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work
from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion.
</p>
</section>
</div>
</div>
</main>
);
}

Expand Down
73 changes: 34 additions & 39 deletions frontend/src/pages/NewsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Link } from "react-router-dom";

function News() {
const updates = [
{
Expand All @@ -14,49 +16,42 @@ function News() {
body: "Example text of what this thing does.",
date: "March 11, 2026 @ 3:00 PM",
},
{
id: "idhere2",
title: "Title goes here",
caption: "Caption would go here",
body: "Example text of what this thing does.",
date: "March 11, 2026 @ 3:00 PM",
},
{
id: "idhere2",
title: "Title goes here",
caption: "Caption would go here",
body: "Example text of what this thing does.",
date: "March 11, 2026 @ 3:00 PM",
},
];

return (
<section id="news" aria-labelledby="news-title">
<h1 id="news-title" className="news-title">News</h1>
<p className="news-intro">
Latest updates about The Method, including features, improvements, and announcements.
</p>
<div id="news-page">
<div id="news-content">
<Link to="/" className="back-home-link">
Back Home
</Link>

<h1 id="news-title" className="news-title">News</h1>
<p className="news-intro">
Latest updates about The Method, including features, improvements, and announcements.
</p>

<ul className="news-grid" role="list">
{updates.map((item) => (
<li key={item.id}>
<article className="news-card" aria-labelledby={`news-item-title-${item.id}`}>
<header>
<div className="news-heading">
<h2 id={`news-item-title-${item.id}`}>{item.title}</h2>
<p className="news-caption">{item.caption}</p>
</div>

<p className="news-date">
<time dateTime={item.date}>{item.date}</time>
</p>
</header>

<ul className="news-grid" role="list">
{updates.map((item) => (
<li key={item.id}>
<article className="news-card" aria-labelledby={`news-item-title-${item.id}`}>
<header>
<div className="news-heading">
<h2 id={`news-item-title-${item.id}`}>{item.title}</h2>
<p className="news-caption">{item.caption}</p>
</div>

<p className="news-date">
<time dateTime={item.date}>{item.date}</time>
</p>
</header>
<p>{item.body}</p>
</article>
</li>
))}
</ul>
</section>
<p>{item.body}</p>
</article>
</li>
))}
</ul>
</div>
</div>
);
}

Expand Down
70 changes: 70 additions & 0 deletions frontend/src/pages/SignupPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
function SignupPage() {
return (
<main id="signup-page">
<section id="signup-card" aria-labelledby="signup-title">
<header id="signup-header">
<h1 id="signup-title">Create your The Method account</h1>
<p id="signup-subtitle">
Already have an account? <a id="login-link" href="/login">Sign in</a>
</p>
</header>

<form id="signup-form">
<div className="signup-field-group">
<label className="signup-field-label" htmlFor="signup-name">Full name</label>
<input
id="signup-name"
className="signup-input"
type="text"
name="name"
autoComplete="name"
placeholder="Enter your full name"
/>
</div>

<div className="signup-field-group">
<label className="signup-field-label" htmlFor="signup-email">Email</label>
<input
id="signup-email"
className="signup-input"
type="email"
name="email"
autoComplete="email"
placeholder="Enter your email"
/>
</div>

<div className="signup-field-group">
<label className="signup-field-label" htmlFor="signup-password">Password</label>
<input
id="signup-password"
className="signup-input"
type="password"
name="password"
autoComplete="new-password"
placeholder="Create a password"
/>
</div>

<div className="signup-field-group">
<label className="signup-field-label" htmlFor="signup-password-confirm">Confirm password</label>
<input
id="signup-password-confirm"
className="signup-input"
type="password"
name="passwordConfirm"
autoComplete="new-password"
placeholder="Confirm your password"
/>
</div>

<button id="signup-submit-button" type="submit">
Create account
</button>
</form>
</section>
</main>
);
}

export default SignupPage;
Loading
Loading