-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
176 lines (169 loc) · 9.39 KB
/
index.html
File metadata and controls
176 lines (169 loc) · 9.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ryan Makela - Personal Website</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">Ryan Makela</div>
<div class="nav-links">
<a href="#home" class="nav-link">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#projects" class="nav-link">Projects</a>
<a href="#contact" class="nav-link">Contact</a>
<a href="life-story.html" class="nav-link">Life Story</a>
</div>
<button class="mobile-menu-btn">☰</button>
</nav>
</header>
<!-- Mobile Menu -->
<div class="mobile-menu">
<button class="close-menu">×</button>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="life-story.html">Life Story</a></li>
</ul>
</div>
<div class="container">
<main>
<section id="home" class="hero">
<div class="hero-content">
<h1>Ryan Makela</h1>
<div class="typing-container">
<p class="typing-text"></p>
</div>
<div class="social-links">
<a href="https://github.com/RyanTheRyan-code" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/ryan-makela/" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="https://leetcode.com/u/user5952nE/" target="_blank" title="LeetCode"><i class="fas fa-code"></i></a>
</div>
</div>
</section>
<section id="about" class="about">
<div class="about-content">
<div class="about-card">
<h3>About Me</h3>
<div class="about-text">
<p>I'm a Computer Science student at California State University, Chico, with a passion for solving complex problems through innovative technology solutions. As the President of ACM's Chico Chapter, I lead a community of 300+ aspiring developers and regularly organize programming events.</p>
<p>My experience spans from competitive programming (ICPC Division 1 & 2) to developing educational tools and managing large-scale student organizations. I believe in writing clean, efficient code while fostering a collaborative learning environment.</p>
</div>
</div>
<div class="skills">
<h3>Technical Expertise</h3>
<div class="skill-categories">
<div class="skill-category">
<h4>Core Languages</h4>
<ul>
<li>C++ (Data Structures, Assembly Programming)</li>
<li>Java (Object-Oriented Development)</li>
<li>Python (API Integration, Automation)</li>
<li>Golang & Dart (Modern Development)</li>
</ul>
</div>
<div class="skill-category">
<h4>Development Tools</h4>
<ul>
<li>VSCode & Visual Studio (Primary IDEs)</li>
<li>Git & GitHub (Version Control)</li>
<li>WSL (Linux Development)</li>
<li>Eclipse & Notepad++ (Code Editing)</li>
</ul>
</div>
<div class="skill-category">
<h4>Leadership & Achievements</h4>
<ul>
<li>ACM Chapter President (300+ Members)</li>
<li>Upsilon Pi Epsilon Honor Society Member</li>
<li>ACM Coding Competition Winner</li>
<li>ICPC Division 1 & 2 Competitor</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<h2>Featured Projects</h2>
<div class="project-grid">
<div class="project-card">
<h3>LogsDay</h3>
<p class="project-timeline">May 2024 - Present</p>
<div class="project-description">
<p>A social platform revolutionizing project accountability through 8-day update cycles:</p>
<ul>
<li>Node.js & PostgreSQL backend hosted on DigitalOcean, featuring secure Cloud Firestore integration</li>
<li>Interactive calendar system with geotagging for discovering local collaborators</li>
<li>Innovative "Log Streak" system driving consistent project updates and community engagement</li>
</ul>
</div>
</div>
<div class="project-card">
<h3>CyberSeagull I & II</h3>
<p class="project-timeline">April 2023, April 2024</p>
<div class="project-description">
<p>Educational assembly programming tools developed during 24-hour hackathons:</p>
<ul>
<li>Custom assembly language compiler implementation</li>
<li>Interactive learning environment for low-level programming</li>
<li>Built in C++ with custom library integration</li>
</ul>
</div>
</div>
<div class="project-card">
<h3>Conman's Game of Life</h3>
<div class="project-description">
<p>A modular cellular automaton simulator with game mechanics:</p>
<ul>
<li>Interactive construction and random generation of cellular automatons</li>
<li>Advanced statistics tracking for evolution patterns</li>
<li>Unique game mode with dynamic rule generation and ranking system</li>
<li>Built with HTML, JavaScript, and CSS for seamless web interaction</li>
</ul>
<a href="https://ivangav.github.io/ConmansGameOfLife/" class="project-link" target="_blank">Try it Live →</a>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<h2>Get In Touch</h2>
<form id="contact-form">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
<div id="form-status" class="form-status"></div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
<a href="life-story.html">Life Story</a>
</div>
<div class="footer-social">
<a href="https://github.com/RyanTheRyan-code" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/ryan-makela/" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="https://leetcode.com/u/user5952nE/" target="_blank" title="LeetCode"><i class="fas fa-code"></i></a>
</div>
<p class="footer-text">Building innovative solutions with modern technology</p>
<p class="footer-copyright">© 2024 Ryan Makela. All rights reserved.</p>
</div>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>