Skip to content

Commit 0cf0b42

Browse files
jpmi1jpmi1
authored
Add files via upload
1 parent c59963f commit 0cf0b42

File tree

10 files changed

+2187
-67
lines changed

10 files changed

+2187
-67
lines changed

‎images/headshot.jpg‎

63.1 KB
Loading

‎images/hero-1.jpg‎

98.5 KB
Loading

‎images/hero-2.jpg‎

99.1 KB
Loading

‎images/overlays/miner-hat.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎images/overlays/ski-helmet.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎images/overlays/vibecoder-headset.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 179 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,181 @@
1-
<!DOCTYPE HTML>
2-
<html>
3-
<head>
4-
<title>JohnPaul Baric</title>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
8-
<link rel="stylesheet" href="assets/css/main.css" />
9-
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
10-
<script>
11-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
12-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
13-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
14-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
15-
16-
ga('create', 'UA-65203435-1', 'auto');
17-
ga('require', 'linkid', 'linkid.js');
18-
ga('send', 'pageview');
19-
</script>
20-
<!-- Hotjar Tracking Code for www.johnpaulbaric.com -->
21-
<script>
22-
(function(h,o,t,j,a,r){
23-
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
24-
h._hjSettings={hjid:55781,hjsv:5};
25-
a=o.getElementsByTagName('head')[0];
26-
r=o.createElement('script');r.async=1;
27-
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
28-
a.appendChild(r);
29-
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
30-
</script>
31-
<!--Email account via Google-->
32-
<meta name="google-site-verification" content="q5b1dgiEZxtO61WcZIBKE08a9x5kZm52XqmSxS_akTI" />
33-
</head>
34-
<body>
35-
36-
<!-- Header -->
37-
<section id="header">
38-
<header>
39-
<span class="image avatar"><img src="images/avatar.jpg" alt="" /></span>
40-
<h1 id="logo"><a href="#">JohnPaul Baric</a></h1>
41-
<p>Don't tell me you can do something show me you can do it.</p>
42-
</header>
43-
<footer>
44-
<ul class="icons">
45-
<li><a href="https://twitter.com/jpmi1" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
46-
<li><a href="https://www.facebook.com/johnpaul.baric" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
47-
<li><a href="https://www.linkedin.com/pub/johnpaul-baric/64/2a7/637" class="icon fa-linkedin"><span class="label">Linkedin</span></a></li>
48-
<li><a href="https://github.com/jpmi1" class="icon fa-github"><span class="label">Github</span></a></li>
49-
<li><a href="mailto:jpmimln@gmail.com?subject=Contacting%20You%20From%20the%20Internet" class="icon fa-envelope"><span class="label">Email</span></a></li>
50-
<li><a href="https://medium.com/@jpmi1" class="icon fa-medium"><span class="label">Medium</span></a></li>
51-
</ul>
52-
</footer>
53-
</section>
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>JohnPaul Baric</title>
7+
8+
<!-- Typography -->
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="stylesheets/landing.css" />
14+
</head>
15+
16+
<body>
17+
<!-- HERO -->
18+
<header class="hero" id="top" aria-label="Hero">
19+
<canvas class="hero__canvas" id="heroCanvas" aria-hidden="true"></canvas>
20+
21+
<div class="hero__ui" aria-hidden="false">
22+
<div class="hero__uiInner">
23+
<a class="hero__name invertable" href="#top" aria-label="Home">
24+
<span>JohnPaul</span>
25+
<span>Baric</span>
26+
</a>
27+
28+
<nav class="hero__nav" aria-label="Primary">
29+
<a class="invertable" href="#portfolio">Portfolio</a>
30+
</nav>
31+
32+
<div class="hero__social" aria-label="Social links">
33+
<a class="hero__icon invertable" data-social="instagram" href="#" target="_blank" rel="noreferrer" aria-label="Instagram">
34+
<!-- Solid Instagram icon -->
35+
<svg viewBox="0 0 24 24" aria-hidden="true">
36+
<path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 4.5A5.5 5.5 0 1 1 6.5 14 5.5 5.5 0 0 1 12 8.5zm0 2A3.5 3.5 0 1 0 15.5 14 3.5 3.5 0 0 0 12 10.5zM18 6.8a1.2 1.2 0 1 1-1.2-1.2A1.2 1.2 0 0 1 18 6.8z"/>
37+
</svg>
38+
</a>
39+
40+
<a class="hero__icon invertable" data-social="x" href="#" target="_blank" rel="noreferrer" aria-label="X / Twitter">
41+
<!-- Solid X icon -->
42+
<svg viewBox="0 0 24 24" aria-hidden="true">
43+
<path d="M18.9 2H22l-7.4 8.5L23 22h-6.7l-5.2-6.7L4.9 22H2l8-9.2L1 2h6.9l4.7 6.1L18.9 2zm-1.2 18h1.7L7.1 3.9H5.3L17.7 20z"/>
44+
</svg>
45+
</a>
46+
47+
<a class="hero__icon invertable" data-social="youtube" href="#" target="_blank" rel="noreferrer" aria-label="YouTube">
48+
<!-- Solid YouTube icon -->
49+
<svg viewBox="0 0 24 24" aria-hidden="true">
50+
<path d="M21.6 7.2a3 3 0 0 0-2.1-2.1C17.8 4.6 12 4.6 12 4.6s-5.8 0-7.5.5A3 3 0 0 0 2.4 7.2 31.7 31.7 0 0 0 2 12a31.7 31.7 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.7.5 7.5.5 7.5.5s5.8 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.7 31.7 0 0 0 22 12a31.7 31.7 0 0 0-.4-4.8zM10 15.5v-7l6 3.5-6 3.5z"/>
51+
</svg>
52+
</a>
53+
54+
<a class="hero__icon invertable" data-social="linkedin" href="#" target="_blank" rel="noreferrer" aria-label="LinkedIn">
55+
<!-- Solid LinkedIn icon -->
56+
<svg viewBox="0 0 24 24" aria-hidden="true">
57+
<path d="M20.5 2H3.5A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5.5V9H8v10zM6.75 7.8A1.45 1.45 0 1 1 8.2 6.35 1.45 1.45 0 0 1 6.75 7.8zM19 19h-2.5v-5.3c0-1.26 0-2.88-1.75-2.88s-2 1.37-2 2.79V19H10.3V9h2.4v1.37h.03A2.63 2.63 0 0 1 15.1 9c2.52 0 3.9 1.66 3.9 4.78V19z"/>
58+
</svg>
59+
</a>
60+
</div>
61+
62+
<div class="hero__hint invertable">Scroll</div>
63+
</div>
64+
</div>
65+
</header>
66+
67+
<!-- CONTENT -->
68+
<main>
69+
<section class="section" id="portfolio">
70+
<div class="section__kicker">Portfolio</div>
71+
<h2 id="tagline">Operator. Builder. Long-term thinker.</h2>
72+
<p>
73+
This page is designed to be edited like a living document: swap the photos, update the lists,
74+
and ship. The hero interaction is the hook. The sections below are the proof.
75+
</p>
76+
77+
<div class="grid">
78+
<div class="card portfolio__left">
79+
<h3>Suit up</h3>
80+
<p style="margin-top: 0;">
81+
Quick “headgear” mode for personality: mining / vibe-coding / skiing.
82+
Replace the SVG overlays with custom PNGs if you want realism.
83+
</p>
84+
85+
<div class="headgear">
86+
<div class="headgear__stage" aria-label="Headgear preview">
87+
<img src="images/headshot.jpg" alt="Headshot" />
88+
<img class="headgear__overlay" id="headgearOverlay" alt="" />
89+
</div>
90+
91+
<div class="headgear__controls" aria-label="Headgear controls">
92+
<button type="button" data-gear="miner">Mining</button>
93+
<button type="button" data-gear="vibecoder">Vibe</button>
94+
<button type="button" data-gear="ski">Ski</button>
95+
<button type="button" data-gear="none">None</button>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<div class="card portfolio__right">
101+
<h3>What I'm building</h3>
102+
<ul class="list items" id="projects"></ul>
103+
104+
<div style="height: 18px;"></div>
105+
106+
<h3>Milestones</h3>
107+
<ul class="list" id="milestones"></ul>
108+
</div>
109+
</div>
110+
</section>
111+
112+
<section class="section" id="travel">
113+
<div class="section__kicker">Life</div>
114+
<h2>Travel map</h2>
115+
<p id="travelIntro"></p>
116+
<div class="card">
117+
<h3>Countries &amp; territories visited</h3>
118+
<ul class="list" id="countries"></ul>
119+
</div>
120+
</section>
121+
54122

55-
56-
57-
<!-- Scripts -->
58-
<script src="javascripts/main.js"></script>
59-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
60-
<script src="assets/js/jquery.min.js"></script>
61-
<script src="assets/js/jquery.scrollzer.min.js"></script>
62-
<script src="assets/js/jquery.scrolly.min.js"></script>
63-
<script src="assets/js/skel.min.js"></script>
64-
<script src="assets/js/util.js"></script>
65-
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
66-
<script src="assets/js/main.js"></script>
67-
68-
</body>
123+
<section class="section" id="booksSection">
124+
<div class="section__kicker">Compounding</div>
125+
<h2>Books</h2>
126+
<p id="booksIntro"></p>
127+
128+
<div class="tabs" role="tablist" aria-label="Books">
129+
<button class="tab is-active" type="button" data-tab="exec" role="tab" aria-selected="true">Executive track</button>
130+
<button class="tab" type="button" data-tab="team" role="tab" aria-selected="false">Employee library</button>
131+
</div>
132+
133+
<div class="tabPanels">
134+
<div class="tabPanel is-active" data-panel="exec" role="tabpanel">
135+
<div class="card">
136+
<h3>Executive / Leadership track</h3>
137+
<ul class="list items" id="booksExec"></ul>
138+
</div>
139+
</div>
140+
141+
<div class="tabPanel" data-panel="team" role="tabpanel">
142+
<div class="card">
143+
<h3>Employee library</h3>
144+
<ul class="list items" id="booksTeam"></ul>
145+
</div>
146+
</div>
147+
</div>
148+
</section>
149+
150+
<section class="section" id="pressSection">
151+
152+
<div class="section__kicker">Public</div>
153+
<h2>Press & media</h2>
154+
<p>
155+
Add your best interviews, articles, and podcasts. The goal is credibility: high-signal, curated, not spammy.
156+
</p>
157+
<div class="card">
158+
<h3>Links</h3>
159+
<ul class="list items" id="press"></ul>
160+
</div>
161+
</section>
162+
163+
<footer class="footer">
164+
<div class="footer__inner">
165+
<div>
166+
<div style="font-family: Playfair Display, serif; font-size: 22px; color: var(--text);">JohnPaul Baric</div>
167+
<div>Minimal site. Max signal.</div>
168+
</div>
169+
170+
<div>
171+
<div style="font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;">Contact</div>
172+
<a id="emailLink" href="mailto:hello@johnpaulbaric.com">hello@johnpaulbaric.com</a>
173+
</div>
174+
</div>
175+
</footer>
176+
</main>
177+
178+
<script src="javascripts/site-data.js"></script>
179+
<script src="javascripts/landing.js"></script>
180+
</body>
69181
</html>

0 commit comments

Comments
 (0)