diff --git a/brutalist-01/brutalist-01.html b/brutalist-01/brutalist-01.html new file mode 100644 index 0000000..6c917d9 --- /dev/null +++ b/brutalist-01/brutalist-01.html @@ -0,0 +1,1028 @@ + + + + + + + + SEASON 04 | RAW CAMPAIGN + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ +
+ Raw texture fashion background +
+ + +
+
+ +
+
+ Collection 04 — FW24 + Tokyo / New York + Available Now +
+ +
+ + Explore Lookbook + +
+
+ +

+ Season
+ Release +

+
+
+ + +
+ + +
+
+

Manifesto

+
+
+

+ Constructed for the harsh reality. Raw edges, heavy weights, and uncompromising utility. This is not fashion. This is armor for the modern brutalist. +

+
+
+ + +
+

+ OUTERWEAR +

+
+ + +
+
+ + +
+ +
+ Coat +
+ Quick View +
+
+
+

Ballistic Nylon Parka

+ $850.00 +
+

Heavyweight / Water Resistant

+ +
+ + +
+ +
+ Leather Jacket +
+ Quick View +
+
+
+

Distressed Moto Jkt

+ $1,200.00 +
+

Italian Horsehide / Hand-Finished

+ +
+ + +
+ +
+ Jacket +
+ Quick View +
+
+
+

Field Overshirt

+ $420.00 +
+

Wool Blend / Utility Pockets

+ +
+ + +
+ +
+ Trench +
+ Quick View +
+
+
+

Structure Trench

+ $980.00 +
+

Bonded Cotton / Oversized Fit

+ +
+ +
+ +
+ + View All Outerwear + +
+
+ + +
+ +
+ +
+
+

+ Form
Follows
Force. +

+

+ Engineered for the streets that demand resilience. Our latest drop focuses on material integrity and structural silhouette. +

+
+
+
+
+ // 04 + +
+

The Material Study

+

+ An exploration of texture, grain, and durability. Japanese denim meets Italian leather finishing techniques. +

+ + Read The Journal + +
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/brutalist-01/brutalist-01.md b/brutalist-01/brutalist-01.md new file mode 100644 index 0000000..3097587 --- /dev/null +++ b/brutalist-01/brutalist-01.md @@ -0,0 +1,64 @@ +# Summary + +A brutalist editorial design system for high-fashion, streetwear, or luxury brands. Featuring a raw, industrial aesthetic with massive typography, high-contrast photography, and utilitarian components. Key elements include a noise-grain texture overlay, a monochromatic palette with burnt orange and neon green accents, and asymmetrical layout grids. The style uses 'Clash Grotesk' for aggressive impact and 'General Sans' for technical clarity. Ideal for product launches, lookbooks, and fashion portfolios looking for a 'Raw Campaign' or 'Modern Brutalist' feel with scroll-triggered visual impact. +# Style + +The style is defined by a 'Raw' aesthetic: a neutral beige background (#E3E2DE) paired with deep brownish-black (#1B0E0D) and burnt red (#C72A09) accents. A constant noise texture (0.08 opacity) is applied over the entire interface. Typography features heavy use of 'Clash Grotesk' for massive, tight-tracked headings and 'General Sans' or Mono fonts for technical metadata. Animations are swift and purposeful, including image scaling and neon-green hover states (#31EF07). + +## Spec + +Create a design with a 'Modern Brutalist' aesthetic. Use a background color of #E3E2DE and primary text in #1B0E0D. Apply a persistent noise texture overlay (SVG fractalNoise at 0.08 opacity, mix-blend-mode: multiply). Typography: Use 'Clash Grotesk' for display headings with font-weight: 700, letter-spacing: -0.04em, and leading: 0.85. For body and technical info, use 'General Sans' or a monospace font for price/data points. Accent colors: #C72A09 (Primary accent/Action) and #31EF07 (Neon Green for micro-interactions/hovers). Links should feature a custom hover animation using a 2px neon green underline that scales from 0 to 1 with cubic-bezier(0.165, 0.84, 0.44, 1). Images must be high-contrast, often grayscale, with a hover scale effect of 1.05. + +# Layout & Structure + +The layout uses a 12-column asymmetric grid. It features massive, screen-filling typography dividers and a mix of full-width blocks and offset product columns to create a sense of 'ordered chaos'. + +## Navigation + +Sticky top navigation using mix-blend-mode: difference to ensure legibility against any background. Left-aligned branding in uppercase bold (24px), centered text links (Shop, Editorial) with neon-green hover-underline animations, and right-aligned icons (Search, Cart) in 24px size. Text color should be #E3E2DE to work with the blend mode. + +## Hero Section + +Full-screen (100vh) hero section with a dark background (#1B0E0D). Background image should be grayscale and high-contrast at 60% opacity. Bottom-aligned content containing a thin #E3E2DE border, technical metadata in monospace tracking-widest, and a large burnt-orange (#C72A09) CTA button. The main headline must be massive (16vw on mobile, 13.5vw on desktop) using Clash Grotesk, with parts of the text indented (e.g., 20vw) to create negative space. + +## Manifesto Section + +A 12-column grid section. Columns 1-4 contain a small uppercase label (Manifesto) above a top border. Columns 5-12 contain large-scale editorial text (32px-48px) in uppercase font-medium with a significant paragraph indent (approx 3rem). Highlight key phrases in deep brown (#61220F). + +## Category Divider + +A full-width section bounded by top and bottom borders (#D9D9D9). Contains a single, massive heading 'OUTERWEAR' at 12vw size in #61220F. The text should have tight tracking and minimal vertical padding to create a 'ribbon' effect. + +## Product Grid + +An asymmetrical 12-column grid. Items should vary in width and vertical offset. Example: Product A (7 columns, aspect 4:5), Product B (5 columns, aspect 3:4 with a 128px top margin offset). Product details below images include a bold uppercase title and a monospace price tag separated by a border-bottom that changes to burnt orange (#C72A09) on hover. Include a 'Quick View' badge in neon green (#31EF07) that appears on hover. + +## Footer + +Multi-column layout (4 columns) on beige background. Section headers in bold uppercase (20px). Newsletter signup uses a dark block (#1B0E0D) with an integrated underline-style input and neon-green 'Send' button. The very bottom features a massive 'ghost' title of the brand (8vw) in light gray (#D9D9D9) for brand reinforcement. + +# Special Components + +## Neon Interaction Badge + +A sharp-edged, high-visibility utility badge for product status or quick actions. + +Rectangle component with zero border-radius. Background color: #31EF07. Text: 10px bold uppercase #1B0E0D. Positioned absolutely in the top-right of containers, appearing only on hover with a 300ms ease-in-out transition. + +## Texture Overlay + +Full-screen SVG noise grain that unifies the brutalist aesthetic. + +Fixed 100vw/100vh div with pointer-events: none. Apply an SVG filter: feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'. Set opacity to 0.08 and mix-blend-mode to multiply. Ensure it sits at z-index: 50. + +## Split-Indented Headline + +A typography style for hero headers that utilizes large-scale indentation for visual tension. + +Font: Clash Grotesk, 13.5vw. Line 1: Left-aligned. Line 2: Indented by 20vw. Color: Mix of burnt-red (#C72A09) and beige (#E3E2DE). Line-height: 0.75. Tracking: -0.05em. + +## Preview +https://p.superdesign.dev/draft/10ecb2c3-19d7-405b-926e-3fa74e142661 + +## Preview source code +./brutalist-01.html \ No newline at end of file diff --git a/brutalist-01/index.html b/brutalist-01/index.html new file mode 100644 index 0000000..b36bde3 --- /dev/null +++ b/brutalist-01/index.html @@ -0,0 +1,781 @@ + + + + + + Ovidiu Ungureanu — Web Developer + + + + + + + + + + + + + +
+
+
+
+
+ Web Developer — Peterborough, UK + I build web applications that work. + Available for freelance +
+ Let's Talk → +
+

+ CleanCode + Studio +

+
+
+ +
+ + +
+
+ 001 — About +
+
+

+ + I build websites and online tools for small businesses + — booking systems, customer dashboards. + +
Fast, affordable, and built to last. + Built for businesses that need something real. + +

+
+
+ + +
+

Services

+
+ + +
+ +
+ (01) +
+

Website Design
& Development

+
+ Design + Development + Responsive +
+
+ Enquire → +
+ +
+ (02) +
+

Custom Tools
& Systems

+
+ PHP + MySQL + Custom Builds +
+
+ Enquire → +
+ +
+ (03) +
+

Booking &
Scheduling

+
+ Bookings + Automation + Small Business +
+
+ Enquire → +
+ +
+ (04) +
+

Ongoing Support
& Updates

+
+ Maintenance + Performance + Support +
+
+ Enquire → +
+ +
+ + +
+
+ 004 — Contact +

+ Got a project
+ in mind? +

+ hello@uovidiu.com +
+ Peterborough, UK + · + Available for freelance +
+
+
+ +
+ + + + + + + diff --git a/brutalist-01/portfolio-project.html b/brutalist-01/portfolio-project.html new file mode 100644 index 0000000..766c59f --- /dev/null +++ b/brutalist-01/portfolio-project.html @@ -0,0 +1,883 @@ + + + + + + Thompson Service Centre — Ovidiu Ungureanu + + + + + + + + + + + + + +
+
+
+
+
+ 01 / WEB_DEV · 2025 + Thompson Service Centre, Peterborough +
+ Visit Site → +
+

+ Thompson + Service Centre +

+
+
+ +
+ + +
+
+ Client + Thompson Service Centre +
+
+ Year + 2025 +
+
+ Stack + HTML · Tailwind v4 · GSAP +
+
+ + +
+
+ Project Overview +
+
+

+ Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity landing page that puts credibility front and center: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés. +

+
+
+ + +
+

Screenshots

+
+ + +
+ + +
+
+
+
+ + + +
+ thompsonservicecentre.co.uk +
+
+
+ Thompson Service Centre — hero section screenshot +
+
+
+
+ + +
+ Booking Flow +
+ +
+ +
+ Vehicle Lookup +

Registration plate lookup pulls vehicle details instantly — reducing form friction and building user confidence from the first interaction.

+
+
+
+ + + +
+ thompsonservicecentre.co.uk/book +
+ Thompson Service Centre — vehicle lookup step +
+
+ +
+ Booking Form +

A clean, single-column booking form with service selection and date picker. Designed for speed on mobile — no unnecessary steps, no dead ends.

+
+
+
+ + + +
+ thompsonservicecentre.co.uk/book +
+ Thompson Service Centre — booking confirmation step +
+
+ +
+
+ + +
+

Execution

+
+ + +
+
+ Craft & Execution +
+
+

+ Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates. +

+
+
+ + +
+ ← Back to Portfolio + Next Project → LHB Engineering +
+ +
+ + + + + + + diff --git a/brutalist-01/portfolio.html b/brutalist-01/portfolio.html new file mode 100644 index 0000000..850d8e3 --- /dev/null +++ b/brutalist-01/portfolio.html @@ -0,0 +1,735 @@ + + + + + + Portfolio — Ovidiu Ungureanu + + + + + + + + + + + + + +
+
+
+
+
+ Portfolio — 2 Projects + Web Design & Development +
+ ← Back to Home +
+

+ Selected + Work +

+
+
+ +
+ + +
+ +
+ 001 — Selected Work +
+ +
+ + + +
+ View Project → + Thompson Service Centre website screenshot +
+
+

Thompson Service Centre

+

A high-fidelity automotive landing page that puts credibility front and centre. Bold hero, trust bar, and service cards — without the usual garage-site clichés.

+
+ 2025 · HTML · Tailwind · GSAP + → +
+
+ + + + +
+ View Project → + LHB Engineering website screenshot +
+
+

LHB Engineering

+

Full website redesign with a self-service CMS for portfolio, team profiles, and job listings — no developer needed for day-to-day updates.

+
+ 2022 · HTML · CSS · PHP + → +
+
+ + +
+
+ + +
+
+ 002 — Contact +

+ Got a project
+ in mind? +

+ hello@uovidiu.com +
+
+ +
+ + + + + + + diff --git a/css/style.css b/css/style.css index 1551c9d..a0187b5 100644 --- a/css/style.css +++ b/css/style.css @@ -319,7 +319,7 @@ a { .service-row-title { font-family: var(--mono), serif; - font-size: clamp(3rem, 8vw, 8rem); + font-size: clamp(3rem, 7vw, 8rem); font-weight: 900; text-transform: uppercase; color: #ffffff; @@ -370,7 +370,7 @@ a { } .service-row-title { - font-size: clamp(2rem, 10vw, 3rem); + font-size: clamp(2rem, 7vw, 3rem); } }